refactor(components): migrate atoms to tailwindcss

src/components/atoms/Avatar/index.tsx

@@ -1,7 +1,5 @@
 import { normalizeString } from 'data/formatters'
 
-import S from './styles.module.scss'
-
 import type { AvatarProps } from './types'
 
 const getFirstAndLastInitialsUpperCase = (name: string) => {
@@ -23,14 +21,19 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
       alt={`Foto de ${name}`}
       title={`Foto de ${name}`}
       fetchPriority="high"
-      className={S.image}
+      className="h-full w-full object-cover"
     />
   ) : (
-    <p className={S.text}>{getFirstAndLastInitialsUpperCase(name)}</p>
+    <p className="text-14 font-700 text-dark">
+      {getFirstAndLastInitialsUpperCase(name)}
+    </p>
   )
 
 export const Avatar = ({ name, imageUrl }: AvatarProps) => (
-  <div className={S.container} role="figure">
+  <div
+    className="relative flex size-32 overflow-hidden rounded-circle border-[1.5px] border-secondary bg-soft-white-blue center"
+    role="figure"
+  >
     <Content name={name} imageUrl={imageUrl} />
   </div>
 )

src/components/atoms/Badge/index.tsx

@@ -1,9 +1,20 @@
 import { clsx } from 'clsx'
 
-import S from './styles.module.scss'
+import type { BadgeProps, Colors } from './types'
 
-import type { BadgeProps } from './types'
+const colors = (color: Colors) => ({
+  'bg-secondary': color === 'green',
+  'text-white bg-grey': color === 'grey',
+  'text-white bg-cherry': color === 'red'
+})
 
-export const Badge = ({ label, color = 'gray' }: BadgeProps) => (
-  <span className={clsx(S.badge, S[`badge_colors--${color}`])}>{label}</span>
+export const Badge = ({ label, color = 'grey' }: BadgeProps) => (
+  <span
+    className={clsx(
+      'flex max-h-fit max-w-fit flex-nowrap whitespace-nowrap rounded-20 px-6 py-1 text-12 font-600 uppercase',
+      colors(color)
+    )}
+  >
+    {label}
+  </span>
 )

src/components/atoms/Badge/types.ts

@@ -1,4 +1,6 @@
+export type Colors = 'green' | 'grey' | 'red'
+
 export type BadgeProps = {
   label: string
-  color?: 'green' | 'gray' | 'red'
+  color?: Colors
 }

src/components/atoms/Button/index.tsx

@@ -3,10 +3,17 @@
 import { clsx } from 'clsx'
 import { GoSync as IconSync } from 'react-icons/go'
 
-import S from './styles.module.scss'
-
 import type { ButtonProps } from './types'
 
+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'
+}
+
 export const Button = ({
   label,
   leftIcon,
@@ -21,9 +28,9 @@ export const Button = ({
 }: ButtonProps) => (
   <button
     className={clsx(
-      S.button,
-      isFullWidth && S.full_width,
-      S[`button_size--${size}`],
+      btn,
+      isFullWidth ? 'w-full' : 'max-w-fit',
+      btnSize[size],
       className
     )}
     aria-label={ariaLabel || label}

src/components/atoms/CartButton/index.tsx

@@ -1,7 +1,5 @@
 import { converterNumberToCurrency } from 'data/formatters'
 
-import S from './styles.module.scss'
-
 import type { CartButtonProps } from './types'
 
 const getCartImageUrlByItemCount = (amount: number) => {
@@ -19,12 +17,15 @@ export const CartButton = ({ label }: CartButtonProps) => {
   })
 
   return (
-    <button className={S.button} aria-label="Abrir carrinho de compras">
+    <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"
+      aria-label="Abrir carrinho de compras"
+    >
       <img
         src={getCartImageUrlByItemCount(0)}
         alt="Carrinho de compras"
         fetchPriority="high"
-        className={S.image}
+        className="flex h-[21px] min-h-[21px] w-[31px] min-w-[31px]"
         width="144px"
         height="100px"
       />

src/components/atoms/FavoriteButton/index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 
 import { clsx } from 'clsx'
 
-import S from './styles.module.scss'
+import S from './styles.module.css'
 
 import type { FavoriteButtonProps } from './types'
 
@@ -15,13 +15,16 @@ export const FavoriteButton = ({ className }: FavoriteButtonProps) => {
     <button
       aria-label="Adicionar item aos favoritos"
       title="Adicionar item aos favoritos"
-      className={clsx(S.button, className)}
+      className={clsx('flex size-32 rounded-circle bg-white center', className)}
       onClick={() => setIsChecked(prev => !prev)}
     >
       <svg
         viewBox="467 392 58 57"
         xmlns="http://www.w3.org/2000/svg"
-        className={clsx(isChecked && S.checked)}
+        className={clsx(
+          'size-28 cursor-pointer overflow-visible',
+          isChecked && S.checked
+        )}
       >
         <g fill="none" fillRule="evenodd" transform="translate(467 392)">
           <path

src/components/atoms/FavoriteButton/styles.module.scss → src/components/atoms/FavoriteButton/styles.module.css

@@ -1,26 +1,3 @@
-@use 'src/theme' as T;
-
-.button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-  min-height: 32px;
-  background-color: T.$color-white;
-  border-radius: T.$border-radius-circle;
-
-  svg {
-    cursor: pointer;
-    overflow: visible;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    min-height: 28px;
-  }
-}
-
 .heart {
   transform-origin: center;
   animation: favorite-animate-heart-out 0.3s linear forwards;
@@ -33,7 +10,7 @@
 .checked {
   .heart {
     transform: scale(0.2);
-    fill: T.$color-cherry;
+    fill: rgba(226, 38, 77, 1);
     animation: favorite-animate-heart 0.3s linear forwards 0.25s;
   }