refactor(app): migrate components to tailwindcss

src/app/(home)/components/ContentCustomerOrderModal/SkeletonContentCustomerOrderModal.tsx

@@ -3,18 +3,18 @@ import { Skeleton } from 'components/atoms'
 const SkeletonSection = () => (
   <>
     <Skeleton className="h-[70px]" />
-    <div className="gap-16 p-24 col-full">
+    <div className="p-24 col-full g-16">
       <Skeleton variant="text" count={4} />
     </div>
   </>
 )
 
 export const SkeletonContentCustomerOrderModal = () => (
   <div className="col-full">
-    <Skeleton className="h-auto mb-12 aspect-600/317" />
-    <div className="gap-8 px-24 pb-24 col-full">
+    <Skeleton className="mb-12 aspect-600/317 h-auto" />
+    <div className="px-24 pb-24 col-full g-8">
       <Skeleton variant="text" className="my-12 h-24 w-[174px]" />
-      <div className="h-100 gap-8 col-full">
+      <div className="h-100 col-full g-8">
         <Skeleton variant="text" count={2} />
         <Skeleton variant="text" className="w-[100px]" />
       </div>

src/app/(home)/components/ContentCustomerOrderModal/components/FlavorQuantitySelectorGroup/index.tsx

@@ -63,14 +63,14 @@ export const FlavorQuantitySelectorGroup = ({
         })
         return (
           <Fragment key={option.id}>
-            <div className="flex-nowrap gap-16 jc-between ai-start row-full">
+            <div className="flex-nowrap jc-between ai-start row-full g-16">
               <div className="col-full">
                 <h4 className="text-14 font-700 uppercase text-primary">
                   {option.name}
                 </h4>
                 <p className="text-14">{option.description}</p>
               </div>
-              <div className="gap-8 jc-end ai-end col">
+              <div className="jc-end ai-end col g-8">
                 <QuantityCounterButton
                   quantity={calcQuantityById(option.id)}
                   onDecrease={() => onDecrease(option.id)}

src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx

@@ -23,7 +23,7 @@ export const HeaderProduct = ({
         />
       </div>
     )}
-    <section className="gap-16 px-16 py-8 col sm:px-24 sm:py-12">
+    <section className="px-16 py-8 col g-16 sm:px-24 sm:py-12">
       <h2 className="underlined-title">{product}</h2>
       <p className="pb-12 text-16 font-500 text-grey-dark">{description}</p>
     </section>

src/app/(home)/components/ContentCustomerOrderModal/components/RadioButtonGroup/index.tsx

@@ -21,7 +21,7 @@ export const RadioButtonGroup = ({
       })
       return (
         <Fragment key={option.id}>
-          <div className="flex-nowrap gap-16 jc-between ai-start row">
+          <div className="flex-nowrap jc-between ai-start row g-16">
             <LabeledRadioButton
               label={option.name}
               name={optionNameId}

src/app/(home)/components/ContentCustomerOrderModal/components/SectionProduct/index.tsx

@@ -15,8 +15,8 @@ export const SectionProduct = ({
 
   return (
     <section className="col-full">
-      <div className="sticky top-0 z-base gap-4 border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full sm:px-24 sm:py-12">
-        <div className="flex-nowrap gap-16 jc-between ai-center row-full">
+      <div className="sticky top-0 z-base border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full g-4 sm:px-24 sm:py-12">
+        <div className="flex-nowrap jc-between ai-center row-full g-16">
           <h3 className="text-16 font-700 uppercase text-primary sm:text-18">
             {title}
           </h3>
@@ -26,7 +26,7 @@ export const SectionProduct = ({
           <p className="text-12 font-600 text-grey-dark">{description}</p>
         )}
       </div>
-      <div className="gap-12 px-16 py-12 col-full sm:px-24 sm:py-12">
+      <div className="px-16 py-12 col-full g-12 sm:px-24 sm:py-12">
         {children}
       </div>
     </section>

src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx

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

src/app/(home)/components/FooterCustomerOrderModal/index.tsx

@@ -3,7 +3,7 @@ import { QuantityCounterButton } from 'components/molecules'
 
 const FooterCustomerOrderModal = () => {
   return (
-    <div className="flex-wrap gap-16 border-t border-neutral-light-lavender px-16 py-12 shadow-sm jc-between ai-center row-full">
+    <div className="flex-wrap rounded-b-16 border-t border-neutral-light-lavender px-16 py-12 shadow-sm jc-between ai-center row-full g-16">
       <QuantityCounterButton
         quantity={0}
         onDecrease={() => ({})}

src/app/(home)/components/ProductListingSection/index.tsx

@@ -13,9 +13,9 @@ const ProductListingSection = async () => {
   return (
     <>
       {availableProducts?.map(({ id, category, items }) => (
-        <section key={id} className="gap-20 col-full sm:gap-32">
+        <section key={id} className="col-full g-20 sm:g-32">
           <h2 className="underlined-title sm:text-28 md:text-32">{category}</h2>
-          <div className="w-full grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-20 sm:grid-cols-[repeat(auto-fill,minmax(210px,1fr))] sm:gap-24 lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
+          <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 => (
               <CardProduct key={item.id} category={category} {...item} />
             ))}

src/app/(home)/page.tsx

@@ -12,7 +12,7 @@ const ProductListingSection = dynamic(
 const Home = () => (
   <>
     <Banner />
-    <main className="mx-auto my-48 gap-48 container-col">
+    <main className="mx-auto my-48 container-col g-48">
       <Suspense>
         <ProductListingSection />
       </Suspense>

src/app/error.tsx

@@ -33,7 +33,7 @@ export const Error = ({
           />
         </div>
 
-        <p className="w-full mx-auto mb-20 max-w-[800px] pb-12 text-center text-20">
+        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />

src/app/global-error.tsx

@@ -48,7 +48,7 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
             />
           </div>
 
-          <p className="w-full mx-auto mb-20 max-w-[800px] pb-12 text-center text-20">
+          <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
             Página não encontrada! Por favor, verifique a url acessada.
             <br />
             <br />

src/app/not-found.tsx

@@ -21,7 +21,7 @@ const NotFound = () => {
           />
         </div>
 
-        <p className="w-full mx-auto mb-20 max-w-[800px] pb-12 text-center text-20">
+        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />

src/components/atoms/Avatar/index.tsx

@@ -21,7 +21,7 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
       alt={`Foto de ${name}`}
       title={`Foto de ${name}`}
       fetchPriority="high"
-      className="h-full w-full object-cover"
+      className="size-full object-cover"
     />
   ) : (
     <p className="text-14 font-700 text-dark">

src/components/atoms/Button/index.tsx

@@ -9,9 +9,9 @@ const btn =
   'flex items-center justify-center rounded-8 bg-secondary font-700 shadow-[0_4px_16px_#aeaebed4] transition-all duration-150  ease-linear hover:translate-y-[-1.5px] hover:shadow-[0_5px_18px_#aeaebed4] active:translate-y-[1.5px] active:shadow-[0_1px_3px_#aeaebed4] disabled:cursor-not-allowed disabled:bg-secondary disabled:shadow-[0_4px_16px_#aeaebed4]'
 
 const btnSize = {
-  small: 'py-4 px-12 gap-4 text-12',
-  medium: 'py-12 px-28 gap-12 text-14',
-  large: 'py-16 px-40 gap-12 text-16'
+  small: 'py-4 px-12 g-4 text-12',
+  medium: 'py-12 px-28 g-12 text-14',
+  large: 'py-16 px-40 g-12 text-16'
 }
 
 export const Button = ({

src/components/atoms/CartButton/index.tsx

@@ -18,7 +18,7 @@ export const CartButton = ({ label }: CartButtonProps) => {
 
   return (
     <button
-      className="flex max-w-fit gap-8 rounded-60 bg-secondary px-12 py-6 text-14 font-600 transition-all duration-150 ease-linear center hover:bg-green"
+      className="flex max-w-fit rounded-60 bg-secondary px-12 py-6 text-14 font-600 transition-all duration-150 ease-linear center g-8 hover:bg-green"
       aria-label="Abrir carrinho de compras"
     >
       <img

src/components/atoms/InfoMessage/index.tsx

@@ -25,10 +25,15 @@ export const InfoMessage = ({
   message
 }: InfoMessageProps) => (
   <div
-    className={clsx('flex gap-4 bg-none ai-center', S.container, type, size)}
+    className={clsx(
+      'flex bg-none ai-center g-4',
+      S.container,
+      S[type],
+      S[size]
+    )}
     role="alert"
   >
     {icons[type]}
-    <span className="font-600">{message}</span>
+    <span className="message font-600">{message}</span>
   </div>
 )

src/components/atoms/InfoMessage/styles.module.css

@@ -29,25 +29,25 @@
 }
 
 .small {
-  @apply gap-4;
+  @apply g-4;
 
   svg {
     @apply size-16;
   }
 
-  .message {
+  span {
     @apply text-12;
   }
 }
 
 .medium {
-  @apply gap-8;
+  @apply g-8;
 
   svg {
     @apply size-20;
   }
 
-  .message {
+  span {
     @apply text-14;
   }
 }

src/components/atoms/LabeledRadioButton/index.tsx

@@ -13,7 +13,7 @@ export const LabeledRadioButton = ({
 }: LabeledRadioButtonProps) => (
   <label
     className={clsx(
-      'max-h-fit max-w-fit gap-8 text-14 jc-start ai-start row',
+      'max-h-fit max-w-fit text-14 jc-start ai-start row g-8',
       disabled ? 'cursor-not-allowed opacity-[0.6]' : 'cursor-pointer'
     )}
   >

src/components/atoms/Logo/index.tsx

@@ -16,7 +16,7 @@ export const Logo = () => (
         srcSet="/img/logos/logo-horizontal.png"
       />
       <img
-        className={clsx(S.logo, 'w-full h-full opacity-0')}
+        className={clsx(S.logo, 'size-full opacity-0')}
         src="/img/logos/logo-vertical-pequeno.webp"
         alt="Logo - Pizzaria Toffanetto"
         width="216"

src/components/atoms/Skeleton/index.tsx

@@ -14,7 +14,7 @@ export const Skeleton = ({ variant, count = 1, className }: SkeletonProps) => (
       <div
         key={i}
         className={clsx(
-          'skeleton w-full h-full',
+          'skeleton size-full',
           variant && variants[variant],
           className
         )}

src/components/molecules/CardProduct/components/ViewButton/index.tsx

@@ -8,8 +8,6 @@ import { queryParamsFormatter } from 'data/formatters'
 import { useCustomerOrder } from 'infra/store/customerOrder'
 import { useModalById } from 'infra/store/modalById'
 
-import S from './styles.module.scss'
-
 import type { ViewButtonProps } from './types'
 
 const ViewButton = ({ id, product, category }: ViewButtonProps) => {
@@ -33,8 +31,7 @@ const ViewButton = ({ id, product, category }: ViewButtonProps) => {
       ariaLabel="Visualizar item"
       size="small"
       onClick={handleRedirect}
-      className={S.icon_button}
-      icon={<IconPlus />}
+      icon={<IconPlus className="size-12 fill-white" />}
       isCircle
     />
   )

src/components/molecules/CardProduct/index.tsx

@@ -4,8 +4,6 @@ import { PRODUCT_WITHOUT_IMAGE } from 'constants/imagesDefault'
 
 import { converterNumberToCurrency } from 'data/formatters'
 
-import S from './styles.module.scss'
-
 import ViewButton from './components/ViewButton'
 import type { CardProductProps } from './types'
 
@@ -23,22 +21,24 @@ export const CardProduct = ({
   })
 
   return (
-    <div className={S.container}>
-      <div className={S.wrapper_thumbnail}>
+    <div className="rounded-20 bg-light-blue-hint p-20 shadow-card col g-16">
+      <div className="relative aspect-10/7 max-h-[216px] w-full overflow-hidden rounded-12">
         <Image
-          className={S.thumbnail}
+          className="object-cover"
           src={img || PRODUCT_WITHOUT_IMAGE}
           alt="title"
           sizes="132px"
           fill
         />
       </div>
-      <div className={S.wrapper_info}>
-        <h3 className={S.title}>{product}</h3>
-        <div className={S.footer}>
-          <p className={S.message_price}>
+      <div className="flex-1 flex-nowrap gap-x-4 gap-y-8 jc-between col-full">
+        <h3 className="line-clamp-2 text-16 font-700 uppercase text-primary">
+          {product}
+        </h3>
+        <div className="flex-wrap jc-between ai-end row">
+          <p className="text-12 lg:text-14">
             {!hasFixedPrice && 'A partir de '}
-            <b>{formattedCurrency}</b>
+            <b className="text-14 font-600 lg:text-16">{formattedCurrency}</b>
           </p>
           <ViewButton id={id} product={product} category={category} />
         </div>