refactor: remove redundant theme utilities and cleanup code

This commit removes a set of redundant, deleted theme utilities from the project. It also includes some minor code cleanup, such as reordering CSS classes for better readability and understanding. The changes aim to reduce unnecessary complexity and maintain consistency across the codebase.
everton-dgn · Mar 25, 2024 · 02584e3 · 02584e3
1 parent 50d7394
commit 02584e3
Show file tree

Hide file tree

Showing 52 changed files with 64 additions and 390 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -15,3 +15,4 @@ playwright-report
 tailwind.config.ts
 postcss.config.js
 prettier.config.js
+node_modules
diff --git a/...me)/components/ContentCustomerOrderModal/components/FlavorQuantitySelectorGroup/index.tsx b/...me)/components/ContentCustomerOrderModal/components/FlavorQuantitySelectorGroup/index.tsx
@@ -63,14 +63,14 @@ export const FlavorQuantitySelectorGroup = ({
         })
         return (
           <Fragment key={option.id}>
-            <div className="flex-nowrap jc-between ai-start row-full g-16">
+            <div className="row-full flex-nowrap g-16 ai-start jc-between">
               <div className="col-full">
-                <h4 className="fw-700 uppercase text-primary-500 fs-14">
+                <h4 className="uppercase text-primary-500 fw-700 fs-14">
                   {option.name}
                 </h4>
                 <p className="fs-14">{option.description}</p>
               </div>
-              <div className="jc-end ai-end col g-8">
+              <div className="g-8 ai-end col jc-end">
                 <QuantityCounterButton
                   quantity={calcQuantityById(option.id)}
                   onDecrease={() => onDecrease(option.id)}
@@ -79,12 +79,12 @@ export const FlavorQuantitySelectorGroup = ({
                   }
                   isContractible
                 />
-                <p className="fw-600 whitespace-nowrap pr-3 text-dark fs-14">
+                <p className="whitespace-nowrap pr-3 text-dark fw-600 fs-14">
                   {formattedPrice}
                 </p>
               </div>
             </div>
-            {!lastItem && <hr className="separator-x" />}
+            {!lastItem && <hr className="hr-x" />}
           </Fragment>
         )
       })}

diff --git a/src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx b/src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx
@@ -23,9 +23,9 @@ export const HeaderProduct = ({
         />
       </div>
     )}
-    <section className="px-16 py-8 col g-16 sm:px-24 sm:py-12">
+    <section className="px-16 py-8 g-16 col sm:px-24 sm:py-12">
       <h2 className="underlined-title">{product}</h2>
-      <p className="fw-500 pb-12 text-grey-dark fs-16">{description}</p>
+      <p className="pb-12 text-grey-dark fw-500 fs-16">{description}</p>
     </section>
   </>
 )
diff --git a/src/app/(home)/components/ContentCustomerOrderModal/components/RadioButtonGroup/index.tsx b/src/app/(home)/components/ContentCustomerOrderModal/components/RadioButtonGroup/index.tsx
@@ -21,19 +21,19 @@ export const RadioButtonGroup = ({
       })
       return (
         <Fragment key={option.id}>
-          <div className="flex-nowrap jc-between ai-start row g-16">
+          <div className="row flex-nowrap g-16 ai-start jc-between">
             <LabeledRadioButton
               label={option.name}
               name={optionNameId}
               selectedValue={selectedRadioButtonGroupValue}
               onChange={() => setSelectedRadioButtonGroupValue(option)}
               value={option.id}
             />
-            <p className="fw-600 whitespace-nowrap text-dark fs-14">
+            <p className="whitespace-nowrap text-dark fw-600 fs-14">
               {formattedPrice}
             </p>
           </div>
-          {!lastItem && <hr className="separator-x" />}
+          {!lastItem && <hr className="hr-x" />}
         </Fragment>
       )
     })}

diff --git a/src/app/(home)/components/ContentCustomerOrderModal/components/SectionProduct/index.tsx b/src/app/(home)/components/ContentCustomerOrderModal/components/SectionProduct/index.tsx
@@ -15,18 +15,18 @@ export const SectionProduct = ({
 
   return (
     <section className="col-full">
-      <div className="sticky z-base border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full g-4 t-0 sm:px-24 sm:py-12">
-        <div className="flex-nowrap jc-between ai-center row-full g-16">
-          <h3 className="fw-700 uppercase text-primary-500 fs-16 sm:fs-18">
+      <div className="sticky z-base border-y border-white bg-soft-white-blue px-16 py-8 g-4 t-0 ai-start col-full sm:px-24 sm:py-12">
+        <div className="row-full flex-nowrap g-16 ai-center jc-between">
+          <h3 className="uppercase text-primary-500 fw-700 fs-16 sm:fs-18">
             {title}
           </h3>
           <Badge label={completed} color={colorCompleted} />
         </div>
         {description && (
-          <p className="fw-600 text-grey-dark fs-12">{description}</p>
+          <p className="text-grey-dark fw-600 fs-12">{description}</p>
         )}
       </div>
-      <div className="px-16 py-12 col-full g-12 sm:px-24 sm:py-12">
+      <div className="px-16 py-12 g-12 col-full sm:px-24 sm:py-12">
         {children}
       </div>
     </section>

diff --git a/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx b/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from 'components/atoms'
 
 export const SkeletonFooterCustomerOrderModal = () => (
-  <div className="flex-wrap border-t border-neutral-light-lavender px-16 py-12 shadow-sm jc-between ai-center row-full g-16">
+  <div className="row-full flex-wrap border-t border-neutral-light-lavender px-16 py-12 shadow-sm g-16 ai-center jc-between">
     <Skeleton className="h-32 w-[90px] rounded-20" />
     <Skeleton className="h-32 w-[180px] rounded-20" />
   </div>

diff --git a/src/app/(home)/components/ProductListingSection/index.tsx b/src/app/(home)/components/ProductListingSection/index.tsx
@@ -13,7 +13,7 @@ const ProductListingSection = async () => {
   return (
     <>
       {availableProducts?.map(({ id, category, items }) => (
-        <section key={id} className="col-full g-20 sm:g-32">
+        <section key={id} className="g-20 col-full sm:g-32">
           <h2 className="underlined-title sm:fs-28 md:fs-32">{category}</h2>
           <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(200px,1fr))] g-20 sm:grid-cols-[repeat(auto-fill,minmax(210px,1fr))] sm:g-24 lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
             {items.map(item => (

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -22,7 +22,7 @@ export const Error = ({
     <>
       <h1>Erro 404</h1>
       <div className="px-20 container-col">
-        <div className="jc-center row">
+        <div className="row jc-center">
           <Image
             src="/img/not-found.svg"
             alt="Erro 404"

diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -38,7 +38,7 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
 
         <h1>Erro 404</h1>
         <div className="px-20 container-col">
-          <div className="jc-center row">
+          <div className="row jc-center">
             <Image
               src="/img/not-found.svg"
               alt="Erro 404"

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -10,7 +10,7 @@ const NotFound = () => {
     <>
       <h1>Erro 404</h1>
       <div className="px-20 container-col">
-        <div className="jc-center row">
+        <div className="row jc-center">
           <Image
             src="/img/not-found.svg"
             alt="Erro 404"

diff --git a/src/components/atoms/Avatar/index.tsx b/src/components/atoms/Avatar/index.tsx
@@ -24,7 +24,7 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
       className="size-full object-cover"
     />
   ) : (
-    <p className="fw-700 text-dark fs-14">
+    <p className="text-dark fw-700 fs-14">
       {getFirstAndLastInitialsUpperCase(name)}
     </p>
   )

diff --git a/src/components/atoms/Badge/index.tsx b/src/components/atoms/Badge/index.tsx
@@ -11,7 +11,7 @@ const colors = (color: Colors) => ({
 export const Badge = ({ label, color = 'grey' }: BadgeProps) => (
   <span
     className={clsx(
-      'fw-600 flex max-h-fit max-w-fit flex-nowrap whitespace-nowrap rounded-20 px-6 py-1 uppercase fs-12',
+      'flex max-h-fit max-w-fit flex-nowrap whitespace-nowrap rounded-20 px-6 py-1 uppercase fw-600 fs-12',
       colors(color)
     )}
   >

diff --git a/src/components/atoms/CartButton/index.tsx b/src/components/atoms/CartButton/index.tsx
@@ -18,7 +18,7 @@ export const CartButton = ({ label }: CartButtonProps) => {
 
   return (
     <button
-      className="fw-600 flex max-w-fit rounded-60 bg-secondary-500 px-12 py-6 transition-all duration-150 ease-linear center g-8 fs-14 hover:bg-green"
+      className="flex max-w-fit rounded-60 bg-secondary-500 px-12 py-6 transition-all duration-150 ease-linear g-8 fw-600 fs-14 center hover:bg-green"
       aria-label="Abrir carrinho de compras"
     >
       <img

diff --git a/src/components/atoms/InfoMessage/index.tsx b/src/components/atoms/InfoMessage/index.tsx
@@ -36,7 +36,7 @@ export const InfoMessage = ({
 }: InfoMessageProps) => (
   <div
     className={clsx(
-      'flex bg-none ai-center as-start g-4',
+      'flex bg-none g-4 ai-center as-start',
       types[type],
       sizes[size]
     )}

diff --git a/src/components/atoms/LabeledRadioButton/index.tsx b/src/components/atoms/LabeledRadioButton/index.tsx
@@ -13,7 +13,7 @@ export const LabeledRadioButton = ({
 }: LabeledRadioButtonProps) => (
   <label
     className={clsx(
-      'max-h-fit max-w-fit jc-start ai-start row g-8 fs-14',
+      'row max-h-fit max-w-fit g-8 fs-14 ai-start jc-start',
       disabled ? 'cursor-not-allowed opacity-[0.6]' : 'cursor-pointer'
     )}
   >

diff --git a/src/components/atoms/Skeleton/index.tsx b/src/components/atoms/Skeleton/index.tsx
@@ -14,7 +14,7 @@ export const Skeleton = ({ variant, count = 1, className }: SkeletonProps) => (
       <div
         key={i}
         className={clsx(
-          'skeleton size-full',
+          'size-full animate-skeleton',
           variant && variants[variant],
           className
         )}

diff --git a/src/components/molecules/CardProduct/index.tsx b/src/components/molecules/CardProduct/index.tsx
@@ -21,7 +21,7 @@ export const CardProduct = ({
   })
 
   return (
-    <div className="rounded-20 bg-light-blue-hint p-20 shadow-card col g-16">
+    <div className="rounded-20 bg-light-blue-hint p-20 shadow-card g-16 col">
       <div className="relative aspect-10/7 max-h-[216px] w-full overflow-hidden rounded-12">
         <Image
           className="object-cover"
@@ -31,11 +31,11 @@ export const CardProduct = ({
           fill
         />
       </div>
-      <div className="flex-1 flex-nowrap jc-between col-full gx-4 gy-8">
-        <h3 className="fw-700 line-clamp-2 uppercase text-primary-500 fs-16">
+      <div className="flex-1 flex-nowrap gx-4 gy-8 col-full jc-between">
+        <h3 className="line-clamp-2 uppercase text-primary-500 fw-700 fs-16">
           {product}
         </h3>
-        <div className="flex-wrap jc-between ai-end row">
+        <div className="row flex-wrap ai-end jc-between">
           <p className="fs-12 lg:fs-14">
             {!hasFixedPrice && 'A partir de '}
             <b className="fw-600 fs-14 lg:fs-16">{formattedCurrency}</b>

diff --git a/src/components/molecules/CookieWarning/index.tsx b/src/components/molecules/CookieWarning/index.tsx
@@ -21,7 +21,7 @@ export const CookieWarning = () => {
   return (
     <>
       {isActive && (
-        <div className="invisible fixed inset-x-0 z-elevation mx-auto max-w-fit animate-[visibility_0.1s_3s_linear_forwards,_move-up_0.4s_3s_ease-in-out_forwards] flex-nowrap bg-soft-white-blue p-16 text-left opacity-0 shadow-elevation-card center row g-16 b-0 xs:px-24 xs:py-16 sm:rounded-8">
+        <div className="row invisible fixed inset-x-0 z-elevation mx-auto max-w-fit animate-[visibility_0.1s_3s_linear_forwards,_move-up_0.4s_3s_ease-in-out_forwards] flex-nowrap bg-soft-white-blue p-16 text-left opacity-0 shadow-elevation-card g-16 b-0 center xs:px-24 xs:py-16 sm:rounded-8">
           <p className="fs-12 xs:fs-16">
             Ao navegar neste site, você aceita os cookies que usamos para
             melhorar a sua experiência.

diff --git a/src/components/molecules/Modal/index.tsx b/src/components/molecules/Modal/index.tsx
@@ -77,7 +77,7 @@ const Modal = ({
           aria-labelledby={title}
           aria-modal={true}
         >
-          <div className="relative z-header h-40 min-h-40 w-full flex-wrap shadow-sm center row">
+          <div className="row relative z-header h-40 min-h-40 w-full flex-wrap shadow-sm center">
             {!isCloseButton && (
               <IconButton
                 ref={btnCloseModalRef}
@@ -92,7 +92,7 @@ const Modal = ({
               />
             )}
             {titleHeader && (
-              <h2 className="fw-600 px-[54px] uppercase fs-16">
+              <h2 className="px-[54px] uppercase fw-600 fs-16">
                 {titleHeader}
               </h2>
             )}
@@ -117,7 +117,7 @@ const Modal = ({
             )}
             {children}
           </div>
-          {footer && <div className="z-base center col-full">{footer}</div>}
+          {footer && <div className="z-base col-full center">{footer}</div>}
         </div>
       </div>
     </Portal>

diff --git a/src/components/molecules/PopupInstallPwa/index.tsx b/src/components/molecules/PopupInstallPwa/index.tsx
@@ -60,8 +60,8 @@ export const PopupInstallPwa = () => {
   return (
     <>
       {isShowPopup && (
-        <div className="invisible fixed left-auto z-elevation mx-16 h-fit max-w-[360px] animate-[visibility_0.1s_4s_linear_forwards,_move-up_0.4s_4s_ease-in_forwards] rounded-16 bg-white px-20 pb-28 pt-20 opacity-0 shadow-[0_0_24px_#00000054] container-col g-8 r-0 t-60">
-          <div className="relative flex-nowrap center row">
+        <div className="invisible fixed left-auto z-elevation mx-16 h-fit max-w-[360px] animate-[visibility_0.1s_4s_linear_forwards,_move-up_0.4s_4s_ease-in_forwards] rounded-16 bg-white px-20 pb-28 pt-20 opacity-0 shadow-[0_0_24px_#00000054] g-8 r-0 t-60 container-col">
+          <div className="row relative flex-nowrap center">
             <button
               aria-label="Fechar alerta"
               onClick={closePopup}
@@ -83,7 +83,7 @@ export const PopupInstallPwa = () => {
               height="40"
             />
           </div>
-          <p className="fw-600 mx-0 my-10 text-center fs-18">
+          <p className="mx-0 my-10 text-center fw-600 fs-18">
             Adicione nosso App à tela inicial!
           </p>
           <Button

diff --git a/src/components/molecules/QuantityCounterButton/index.tsx b/src/components/molecules/QuantityCounterButton/index.tsx
@@ -17,7 +17,7 @@ export const QuantityCounterButton = ({
   return (
     <div
       className={clsx(
-        'h-32 min-h-32 flex-nowrap rounded-60 bg-white jc-between ai-center row',
+        'row h-32 min-h-32 flex-nowrap rounded-60 bg-white ai-center jc-between',
         isContractibleButton
           ? 'ml-[58px] w-32 min-w-32'
           : 'w-[90px] min-w-[90px]'
@@ -32,7 +32,7 @@ export const QuantityCounterButton = ({
           >
             <IconMinus className="size-12 min-h-12 min-w-12 fill-primary-500" />
           </button>
-          <span className="fw-600 flex h-full flex-1 text-center center fs-16">
+          <span className="flex h-full flex-1 text-center fw-600 fs-16 center">
             {quantity}
           </span>
         </>

diff --git a/src/components/molecules/Textarea/index.tsx b/src/components/molecules/Textarea/index.tsx
@@ -18,15 +18,15 @@ export const Textarea = ({
   const errorMessage = `Limite de ${maxLength} caracteres excedido`
 
   return (
-    <div className="col-full g-4">
+    <div className="g-4 col-full">
       {label && (
-        <label className="fw-600 text-grey-dark fs-12" htmlFor={id}>
+        <label className="text-grey-dark fw-600 fs-12" htmlFor={id}>
           {label}
         </label>
       )}
       <textarea
         className={clsx(
-          'fw-600 placeholder:fw-500 resize-none rounded-8 border border-solid px-16 py-8 text-grey-dark row-full fs-16 placeholder:text-grey-light-500 hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light-500 focus:outline-[1.5px] focus:outline-offset-[-2px]',
+          'row-full resize-none rounded-8 border border-solid px-16 py-8 text-grey-dark fw-600 fs-16 placeholder:text-grey-light-500 placeholder:fw-500 hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light-500 focus:outline-[1.5px] focus:outline-offset-[-2px]',
           isErrored
             ? 'border-error outline-error focus:outline-error'
             : 'border-grey-light-500 hover:border-grey-dark focus:outline-secondary-500'
@@ -39,14 +39,14 @@ export const Textarea = ({
         {...props}
       />
       {!!maxLength && (
-        <div className="flex w-full jc-between g-4">
+        <div className="flex w-full g-4 jc-between">
           {isErrored && (
             <InfoMessage type="error" message={errorMessage} size="small" />
           )}
           {!!maxLength && (
             <small
               className={clsx(
-                'fw-600 ml-auto whitespace-nowrap fs-12',
+                'ml-auto whitespace-nowrap fw-600 fs-12',
                 isErrored ? 'text-error' : 'text-grey-500'
               )}
             >

diff --git a/src/components/molecules/Toast/index.tsx b/src/components/molecules/Toast/index.tsx
@@ -29,7 +29,7 @@ const Toast = () => {
     <div
       aria-live="polite"
       aria-atomic="true"
-      className="fixed z-always-on-top ml-16 h-fit w-[100%-32px] max-w-full col r-16 t-72 xs:max-w-[320px]"
+      className="fixed z-always-on-top ml-16 h-fit w-[100%-32px] max-w-full r-16 t-72 col xs:max-w-[320px]"
     >
       {stateToast.toastList.map(
         ({ status, description, id, animationClass }) => (
@@ -39,22 +39,22 @@ const Toast = () => {
             aria-live="assertive"
             aria-atomic="true"
             className={clsx(
-              'relative mb-12 h-fit overflow-hidden rounded-8 bg-white px-8 pb-12 pt-8 shadow-lg row-full',
+              'row-full relative mb-12 h-fit overflow-hidden rounded-8 bg-white px-8 pb-12 pt-8 shadow-lg',
               animation[animationClass]
             )}
           >
-            <div className="grow p-6 row g-12">
+            <div className="row grow p-6 g-12">
               <Icon status={status} />
               <div className="grow col">
-                <p className="fw-600 pr-20 text-grey-dark fs-14">
+                <p className="pr-20 text-grey-dark fw-600 fs-14">
                   {description}
                 </p>
               </div>
             </div>
             <button
               aria-label="Fechar alerta"
               onClick={() => handleClickRemoveToast(id)}
-              className="absolute flex size-[38px] min-h-[38px] min-w-[38px] cursor-pointer rounded-4 border-0 bg-transparent center t-0 r-0"
+              className="absolute flex size-[38px] min-h-[38px] min-w-[38px] cursor-pointer rounded-4 border-0 bg-transparent t-0 r-0 center"
             >
               <IconClose className="size-20 min-h-20 min-w-20 fill-grey-dark" />
             </button>

diff --git a/src/components/organisms/Banner/index.tsx b/src/components/organisms/Banner/index.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image'
 
 export const Banner = () => (
-  <div className="relative h-[calc(100vh-50px)] jc-center row-full before-base before:absolute before:z-base before:size-full before:bg-gradient-to-r before:from-[#000000b2_76%] before:to-[#00000078] before:t-0 before:l-0 md:before:from-[#0000007a_76%] md:before:to-transparent">
-    <div className="z-base h-full jc-center container-col">
+  <div className="row-full relative h-[calc(100vh-50px)] jc-center before-base before:absolute before:z-base before:size-full before:bg-gradient-to-r before:from-[#000000b2_76%] before:to-[#00000078] before:t-0 before:l-0 md:before:from-[#0000007a_76%] md:before:to-transparent">
+    <div className="z-base h-full container-col jc-center">
       <Image
         src="/img/logos/logo-vertical.png"
         alt="Pizzaria Toffanetto"
@@ -12,7 +12,7 @@ export const Banner = () => (
         className="h-auto max-h-[40vh] w-full max-w-[300px] -translate-y-full animate-[move-y_0.4s_0.2s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.4s_0.2s_linear_forwards] object-contain object-left opacity-0 xs:max-w-[400px] lg:max-w-[500px]"
         priority
       />
-      <h1 className="fw-500 mt-12 max-w-[400px] translate-y-full animate-[move-y_0.6s_0.5s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.5s_0.4s_linear_forwards] text-balance leading-[1.5] text-white opacity-0 fs-20 xs:mt-20 xs:max-w-[500px] xs:text-[calc(15px+1.3vh)] lg:mt-24 lg:max-w-[600px] lg:fs-28">
+      <h1 className="mt-12 max-w-[400px] translate-y-full animate-[move-y_0.6s_0.5s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.5s_0.4s_linear_forwards] text-balance leading-[1.5] text-white opacity-0 fw-500 fs-20 xs:mt-20 xs:max-w-[500px] xs:text-[calc(15px+1.3vh)] lg:mt-24 lg:max-w-[600px] lg:fs-28">
         Pizzas exageradamente recheadas e saborosas, feitas em forno a lenha
         como manda a tradição italiana
       </h1>