refactor: refactor multiple components and update CSS class names

The commit includes updates to various components, enhancing their CSS class names to improve readability and maintenance. It additionally refines error handling and improves the skeleton loading screens for a better user experience.

src/components/atoms/Avatar/index.tsx

@@ -21,17 +21,15 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
       alt={`Foto de ${name}`}
       title={`Foto de ${name}`}
       fetchPriority="high"
-      className="size-full object-cover"
+      className="size-full obj-cover"
     />
   ) : (
-    <p className="text-dark fw-700 fs-14">
-      {getFirstAndLastInitialsUpperCase(name)}
-    </p>
+    <p className="fs-sm-bold-dark">{getFirstAndLastInitialsUpperCase(name)}</p>
   )
 
 export const Avatar = ({ name, imageUrl }: AvatarProps) => (
   <div
-    className="relative flex size-32 overflow-hidden rounded-circle border-[1.5px] border-secondary-500 bg-soft-white-blue center"
+    className="bw-[1.5px]-secondary-500 relative flex size-8 bg-soft-white-blue br-circle center ov-hidden"
     role="figure"
   >
     <Content name={name} imageUrl={imageUrl} />

src/components/atoms/Badge/index.tsx

@@ -2,17 +2,17 @@ import { clsx } from 'clsx'
 
 import type { BadgeProps, Colors } from './types'
 
-const colors = (color: Colors) => ({
-  'bg-secondary-500': color === 'green',
-  'text-white bg-grey-500': color === 'grey',
-  'text-white bg-cherry': color === 'red'
-})
+const colors: Record<Colors, string> = {
+  green: 'bg-secondary-500',
+  grey: 'tx-white bg-grey-500',
+  red: 'tx-white bg-cherry'
+}
 
 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 uppercase fw-600 fs-12',
-      colors(color)
+      'flex whitespace-nowrap px-1.5 py-px uppercase br f-nowrap max-size-fit fs-xs-semibold',
+      colors[color]
     )}
   >
     {label}

src/components/atoms/Button/index.tsx

@@ -6,12 +6,12 @@ import { GoSync as IconSync } from 'react-icons/go'
 import type { ButtonProps } from './types'
 
 const btn =
-  'flex items-center justify-center rounded-8 bg-secondary-500 fw-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-500 disabled:shadow-[0_4px_16px_#aeaebed4]'
+  'flex ai-center jc-center br-2 bg-secondary-500 fw-bold 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-500 disabled:shadow-[0_4px_16px_#aeaebed4]'
 
 const btnSize = {
-  small: 'py-4 px-12 g-4 fs-12',
-  medium: 'py-12 px-28 g-12 fs-14',
-  large: 'py-16 px-40 g-12 fs-16'
+  small: 'py-px px-3 g-1 fs-xs',
+  medium: 'py-3 px-7 g-3 fs-sm',
+  large: 'py-4 px-10 g-3 fs-base'
 }
 
 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 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"
+      className="flex max-w-fit bg-secondary-500 px-3 py-1.5 transition-all duration-150 ease-linear br-full center g-2 fs-sm-semibold hover:bg-green"
       aria-label="Abrir carrinho de compras"
     >
       <img

src/components/atoms/FavoriteButton/index.tsx

@@ -22,7 +22,7 @@ export const FavoriteButton = ({ className }: FavoriteButtonProps) => {
         viewBox="467 392 58 57"
         xmlns="http://www.w3.org/2000/svg"
         className={clsx(
-          'size-28 cursor-pointer overflow-visible',
+          'size-28 cursor-pointer ov-visible',
           isChecked && S.checked
         )}
       >

src/components/atoms/IconButton/index.tsx

@@ -9,8 +9,8 @@ import S from './styles.module.css'
 import type { IconButtonProps } from './types'
 
 const btnSize = {
-  small: 'p-8',
-  medium: 'p-12'
+  small: 'p-2',
+  medium: 'p-3'
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -37,7 +37,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         isTransparent && S.transparent,
         isDisableBoxShadow && S.box_shadow,
         isDisableTransform && S.transform,
-        isCircle ? 'rounded-circle' : 'rounded-8',
+        isCircle ? 'br-circle' : 'br-2',
         className
       )}
       aria-label={ariaLabel}

src/components/atoms/InfoMessage/index.tsx

@@ -11,15 +11,15 @@ import {
 import type { InfoMessageProps, TypeMessage } from './types'
 
 const sizes = {
-  small: 'g-4 [&>svg]:size-16 [&>span]:fs-12',
-  medium: 'g-8 [&>svg]:size-20 [&>span]:fs-14'
+  small: 'g-1 [&>svg]:size-4 [&>span]:fs-xs',
+  medium: 'g-2 [&>svg]:size-5 [&>span]:fs-sm'
 }
 
 const types = {
-  error: 'text-error [&>path]:fill-error',
-  info: 'text-info [&>path]:fill-info',
-  success: 'fill-success [&>path]:text-success',
-  warning: 'fill-warning [&>path]:text-warning'
+  error: 'tx-error [&>path]:fill-error',
+  info: 'tx-info [&>path]:fill-info',
+  success: 'fill-success [&>path]:tx-success',
+  warning: 'fill-warning [&>path]:tx-warning'
 }
 
 const icons: Record<TypeMessage, ReactElement> = {
@@ -36,13 +36,13 @@ export const InfoMessage = ({
 }: InfoMessageProps) => (
   <div
     className={clsx(
-      'flex bg-none g-4 ai-center as-start',
+      'flex bg-none ai-center as-start g-1',
       types[type],
       sizes[size]
     )}
     role="alert"
   >
     {icons[type]}
-    <span className="message fw-600">{message}</span>
+    <span className="message fw-semibold">{message}</span>
   </div>
 )

src/components/atoms/LabeledRadioButton/index.tsx

@@ -13,7 +13,7 @@ export const LabeledRadioButton = ({
 }: LabeledRadioButtonProps) => (
   <label
     className={clsx(
-      'row max-h-fit max-w-fit g-8 fs-14 ai-start jc-start',
+      'ai-start fs-sm g-2 jc-start row max-size-fit',
       disabled ? 'cursor-not-allowed opacity-[0.6]' : 'cursor-pointer'
     )}
   >
@@ -22,10 +22,7 @@ export const LabeledRadioButton = ({
       name={name}
       className={clsx(
         S.input,
-        'bg-grey-light-blue-hint size-16 min-h-16 min-w-16 appearance-none rounded-circle border-3 border-white transition-all duration-100 ease-linear',
-        disabled
-          ? 'bg-grey-light-blue-hint cursor-not-allowed border-white'
-          : 'cursor-pointer'
+        'bg-grey-light-blue-hint bw-3-white disabled:bg-grey-light-blue-hint size-4 cursor-pointer appearance-none transition-all duration-100 ease-linear br-circle min-size-4 disabled:cursor-not-allowed disabled:bc-white'
       )}
       disabled={disabled}
       onChange={e => onChange(e.target.value)}

src/components/atoms/Logo/index.tsx

@@ -4,7 +4,7 @@ export const Logo = () => (
   <Link
     href="/"
     title="Ir para a Página Inicial"
-    className="h-36 w-[77px] sm:h-[30px] sm:w-[203px]"
+    className="h-18 w-[77px] sm:h-[30px] sm:w-[203px]"
   >
     <picture>
       <source

src/components/atoms/Skeleton/index.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx'
 import type { SkeletonProps, VariantsType } from './types'
 
 const variants: Record<VariantsType, string> = {
-  text: 'rounded-4 h-16',
+  text: 'br h-4',
   circle: 'rounded-circle aspect-square',
   square: 'aspect-square'
 }

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

@@ -31,7 +31,7 @@ const ViewButton = ({ id, product, category }: ViewButtonProps) => {
       ariaLabel="Visualizar item"
       size="small"
       onClick={handleRedirect}
-      icon={<IconPlus className="size-12 fill-white" />}
+      icon={<IconPlus className="size-3 fill-white" />}
       isCircle
     />
   )

src/components/molecules/CardProduct/index.tsx

@@ -21,24 +21,24 @@ export const CardProduct = ({
   })
 
   return (
-    <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">
+    <div className="bg-light-blue-hint p-5 shadow-card br-[5px] col g-4">
+      <div className="rounded-3 relative aspect-10/7 max-h-56 w-full ov-hidden">
         <Image
-          className="object-cover"
+          className="obj-cover"
           src={img || PRODUCT_WITHOUT_IMAGE}
           alt="title"
           sizes="132px"
           fill
         />
       </div>
-      <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">
+      <div className="col-full f-1 f-nowrap gx-1 gy-2 jc-between">
+        <h3 className="line-clamp-2 uppercase fs-base-bold-primary-500">
           {product}
         </h3>
-        <div className="row flex-wrap ai-end jc-between">
-          <p className="fs-12 lg:fs-14">
+        <div className="ai-end f-wrap jc-between row">
+          <p className="fs-xs lg:fs-sm">
             {!hasFixedPrice && 'A partir de '}
-            <b className="fw-600 fs-14 lg:fs-16">{formattedCurrency}</b>
+            <b className="fs-sm-semibold lg:fs-base">{formattedCurrency}</b>
           </p>
           <ViewButton id={id} product={product} category={category} />
         </div>

src/components/molecules/CookieWarning/index.tsx

@@ -21,8 +21,8 @@ export const CookieWarning = () => {
   return (
     <>
       {isActive && (
-        <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">
+        <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] bg-soft-white-blue p-4 opacity-0 shadow-elevation-card b-0 center f-nowrap g-4 row tx-left xs:px-6 xs:py-4 sm:br-lg">
+          <p className="fs-xs xs:fs-base">
             Ao navegar neste site, você aceita os cookies que usamos para
             melhorar a sua experiência.
           </p>

src/components/molecules/Modal/index.tsx

@@ -43,16 +43,14 @@ const Modal = ({
       <div
         className={clsx(
           'fixed z-overlay flex size-full backdrop-blur-[2px] t-0 l-0',
-          fullscreenMobile ? 'p-0' : 'p-16'
+          fullscreenMobile ? 'p-0' : 'p-4'
         )}
         ref={modalRef}
       >
         <div
           className={clsx(
             'absolute flex size-full t-0 l-0',
-            isVisible
-              ? 'visible bg-dark opacity-[0.6]'
-              : 'hidden bg-transparent opacity-0'
+            isVisible ? 'bg-dark/60 visible' : 'bg-transparent/0 hidden'
           )}
           style={{
             transition: `${TIME_TO_REMOVE_COMPONENT}ms cubic-bezier(0.4, 0, 0.2, 1)`
@@ -61,13 +59,13 @@ const Modal = ({
         />
         <div
           className={clsx(
-            'z-modal m-auto max-h-full bg-white shadow-xxl col-full sm:h-fit sm:max-h-fit sm:rounded-16',
+            'z-modal m-auto max-h-full bg-white shadow-xxl col-full sm:h-fit sm:max-h-fit sm:br-2xl',
             isVisible
               ? 'visible translate-y-0 sm:opacity-[1]'
               : 'hidden translate-y-full sm:opacity-[0.6]',
             fullscreenMobile
-              ? 'h-max min-h-full rounded-0 sm:h-fit sm:min-h-fit'
-              : 'h-fit min-h-fit rounded-16'
+              ? 'h-max min-h-full br-0 sm:h-fit sm:min-h-fit'
+              : 'h-fit min-h-fit br-2xl'
           )}
           style={{
             maxWidth: `${maxWidth}px`,
@@ -77,22 +75,22 @@ const Modal = ({
           aria-labelledby={title}
           aria-modal={true}
         >
-          <div className="row relative z-header h-40 min-h-40 w-full flex-wrap shadow-sm center">
+          <div className="relative z-header h-10 min-h-10 w-full shadow-sm center f-wrap row">
             {!isCloseButton && (
               <IconButton
                 ref={btnCloseModalRef}
                 onClick={handleHiddenComponent}
                 ariaLabel="Voltar"
                 icon={<IconBack color="#374151" size={24} />}
-                className="absolute t-0 l-12"
+                className="absolute t-0 l-3"
                 isTransparent
                 isDisableTransform
                 isDisableBoxShadow
                 size="small"
               />
             )}
             {titleHeader && (
-              <h2 className="px-[54px] uppercase fw-600 fs-16">
+              <h2 className="px-14 uppercase fs-base-semibold">
                 {titleHeader}
               </h2>
             )}
@@ -102,18 +100,18 @@ const Modal = ({
                 onClick={handleHiddenComponent}
                 ariaLabel="Fechar Modal"
                 icon={<IconClose color="#374151" size={24} />}
-                className="absolute t-0 r-12"
+                className="absolute t-0 r-3"
                 isTransparent
                 isDisableTransform
                 isDisableBoxShadow
                 size="small"
               />
             )}
           </div>
-          <div className="h-full overflow-y-auto col-full sm:max-h-[80vh]">
+          <div className="h-full col-full ovy-auto sm:max-h-[80vh]">
             {title}
             {description && (
-              <p className="mt-8 fs-16 sm:mt-16">{description}</p>
+              <p className="mt-2 fs-base sm:mt-4">{description}</p>
             )}
             {children}
           </div>

src/components/molecules/PopupInstallPwa/index.tsx

@@ -60,21 +60,21 @@ 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] g-8 r-0 t-60 container-col">
-          <div className="row relative flex-nowrap center">
+        <div className="t-15 invisible fixed z-elevation mx-4 h-fit max-w-xs animate-[visibility_0.1s_4s_linear_forwards,_move-up_0.4s_4s_ease-in_forwards] bg-white px-5 pb-7 pt-5 opacity-0 shadow-[0_0_24px_#00000054] br-2xl container-col r-0 l-auto g-2">
+          <div className="relative center f-nowrap row">
             <button
               aria-label="Fechar alerta"
               onClick={closePopup}
-              className="absolute -right-20 -top-20 flex size-[38px] min-h-[38px] min-w-[38px] cursor-pointer rounded-b-4 rounded-tl-4 rounded-tr-16 border-0 bg-transparent center"
+              className="absolute flex cursor-pointer bg-transparent br-b br-tl br-tr-4 bw-0 -t-5 -r-5 center min-size-10"
             >
-              <IconClose className="size-20 min-h-20 min-w-20 fill-grey-dark" />
+              <IconClose className="fill-grey-dark min-size-5" />
             </button>
             <img
               src="/icons/icon-72x72.png"
               width="50"
               height="50"
               alt="Pizzaria Toffanetto"
-              className="mr-10 max-w-[72%] object-contain"
+              className="mr-2.5 max-w-[72%] obj-contain"
             />
             <img
               src="/img/logos/logo-popup-pwa.png"
@@ -83,7 +83,7 @@ export const PopupInstallPwa = () => {
               height="40"
             />
           </div>
-          <p className="mx-0 my-10 text-center fw-600 fs-18">
+          <p className="mx-0 my-2.5 fs-lg-semibold tx-center">
             Adicione nosso App à tela inicial!
           </p>
           <Button

src/components/molecules/QuantityCounterButton/index.tsx

@@ -4,7 +4,7 @@ import { FaPlus as IconPlus, FaMinus as IconMinus } from 'react-icons/fa6'
 import type { QuantityCounterButtonProps } from './types'
 
 const btn =
-  'hover:bg-grey-light-100 flex size-[30px] min-h-[30px] min-w-[30px] cursor-pointer rounded-circle bg-soft-white-blue transition-colors duration-150 ease-linear center active:bg-soft-white-blue disabled:cursor-not-allowed disabled:hover:bg-light-blue-hint disabled:active:bg-light-blue-hint'
+  'hover:bg-grey-light-100 flex min-size-[30px] cursor-pointer rounded-circle bg-soft-white-blue transition-colors duration-150 ease-linear center active:bg-soft-white-blue disabled:cursor-not-allowed disabled:hover:bg-light-blue-hint disabled:active:bg-light-blue-hint'
 
 export const QuantityCounterButton = ({
   quantity,
@@ -17,10 +17,8 @@ export const QuantityCounterButton = ({
   return (
     <div
       className={clsx(
-        '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]'
+        'h-8 min-h-8 bg-white ai-center br-full f-nowrap jc-between row',
+        isContractibleButton ? 'ml-[58px] w-8 min-w-8' : 'w-[90px] min-w-[90px]'
       )}
     >
       {!isContractibleButton && (
@@ -30,9 +28,9 @@ export const QuantityCounterButton = ({
             aria-label="Diminuir quantidade em 1"
             className={btn}
           >
-            <IconMinus className="size-12 min-h-12 min-w-12 fill-primary-500" />
+            <IconMinus className="fill-primary-500 min-size-3" />
           </button>
-          <span className="flex h-full flex-1 text-center fw-600 fs-16 center">
+          <span className="flex h-full f-1 center fs-base-semibold tx-center">
             {quantity}
           </span>
         </>
@@ -42,7 +40,7 @@ export const QuantityCounterButton = ({
         aria-label="Aumentar quantidade em 1"
         className={btn}
       >
-        <IconPlus className="size-12 min-h-12 min-w-12 fill-primary-500" />
+        <IconPlus className="fill-primary-500 min-size-3" />
       </button>
     </div>
   )