refactor: refactor UI code to improve aesthetics and readability

This commit significantly refactors the UI code, updating multiple components such as 'HeaderProduct', 'ProductListingSection', and 'RadioButtonGroup' amongst others. The changes involve modifying CSS class definitions to simplify the code and improve the overall layout. The commit also includes adjustments to the error handling and skeleton loading screens.
everton-dgn · Mar 31, 2024 · b046895 · b046895
1 parent bd830e0
commit b046895
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 43 deletions.
diff --git a/src/app/(home)/components/ContentCustomerOrderModal/SkeletonContentCustomerOrderModal.tsx b/src/app/(home)/components/ContentCustomerOrderModal/SkeletonContentCustomerOrderModal.tsx
@@ -2,21 +2,21 @@ import { Skeleton } from 'components/atoms'
 
 const SkeletonSection = () => (
   <>
-    <Skeleton className="h-[70px]" />
-    <div className="p-24 col-full g-16">
+    <Skeleton className="h-16" />
+    <div className="p-6 col-full g-4">
       <Skeleton variant="text" count={4} />
     </div>
   </>
 )
 
 export const SkeletonContentCustomerOrderModal = () => (
   <div className="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 col-full g-8">
+    <Skeleton className="mb-3 aspect-600/317 h-auto" />
+    <div className="px-6 pb-6 col-full g-2">
+      <Skeleton variant="text" className="my-3 h-6 w-44" />
+      <div className="h-24 col-full g-2">
         <Skeleton variant="text" count={2} />
-        <Skeleton variant="text" className="w-[100px]" />
+        <Skeleton variant="text" className="w-24" />
       </div>
     </div>
     <SkeletonSection />

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="row-full flex-nowrap g-16 ai-start jc-between">
+            <div className="ai-start f-nowrap g-4 jc-between row-full">
               <div className="col-full">
-                <h4 className="uppercase text-primary-500 fw-700 fs-14">
+                <h4 className="fs-sm-boldprimary-500 uppercase">
                   {option.name}
                 </h4>
-                <p className="fs-14">{option.description}</p>
+                <p className="fs-sm">{option.description}</p>
               </div>
-              <div className="g-8 ai-end col jc-end">
+              <div className="ai-end col g-2 jc-end">
                 <QuantityCounterButton
                   quantity={calcQuantityById(option.id)}
                   onDecrease={() => onDecrease(option.id)}
@@ -79,7 +79,7 @@ export const FlavorQuantitySelectorGroup = ({
                   }
                   isContractible
                 />
-                <p className="whitespace-nowrap pr-3 text-dark fw-600 fs-14">
+                <p className="whitespace-nowrap pr-[3px] fs-sm-semibold-dark">
                   {formattedPrice}
                 </p>
               </div>

diff --git a/src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx b/src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx
@@ -11,21 +11,21 @@ export const HeaderProduct = ({
 }: HeaderProductProps) => (
   <>
     {!!img && (
-      <div className="relative mb-12 aspect-600/317 overflow-hidden">
-        <FavoriteButton className="absolute z-base t-8 r-8" />
+      <div className="relative mb-3 aspect-600/317 ov-hidden">
+        <FavoriteButton className="absolute z-base t-2 r-2" />
         <Image
           src={img}
           alt={product}
-          className="object-cover"
+          className="obj-cover"
           sizes="600px"
           fill
           priority
         />
       </div>
     )}
-    <section className="px-16 py-8 g-16 col sm:px-24 sm:py-12">
+    <section className="px-4 py-2 col g-4 sm:px-6 sm:py-[3px]">
       <h2 className="underlined-title">{product}</h2>
-      <p className="pb-12 text-grey-dark fw-500 fs-16">{description}</p>
+      <p className="pb-3 fw-medium fs-base-grey-dark">{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,15 +21,15 @@ export const RadioButtonGroup = ({
       })
       return (
         <Fragment key={option.id}>
-          <div className="row flex-nowrap g-16 ai-start jc-between">
+          <div className="ai-start f-nowrap g-4 jc-between row">
             <LabeledRadioButton
               label={option.name}
               name={optionNameId}
               selectedValue={selectedRadioButtonGroupValue}
               onChange={() => setSelectedRadioButtonGroupValue(option)}
               value={option.id}
             />
-            <p className="whitespace-nowrap text-dark fw-600 fs-14">
+            <p className="whitespace-nowrap fs-sm-semibold-dark">
               {formattedPrice}
             </p>
           </div>

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 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">
+      <div className="bw-y-white sticky z-base bg-soft-white-blue px-4 py-2 ai-start col-full t-0 g-1 sm:px-6 sm:py-[3px]">
+        <div className="ai-center f-nowrap g-4 jc-between row-full">
+          <h3 className="uppercase fs-base fw-bold tx-primary-500 sm:fs-lg">
             {title}
           </h3>
           <Badge label={completed} color={colorCompleted} />
         </div>
         {description && (
-          <p className="text-grey-dark fw-600 fs-12">{description}</p>
+          <p className="fs-xs-semibold-grey-dark">{description}</p>
         )}
       </div>
-      <div className="px-16 py-12 g-12 col-full sm:px-24 sm:py-12">
+      <div className="px-4 py-[3px] col-full g-3 sm:px-6 sm:py-[3px]">
         {children}
       </div>
     </section>

diff --git a/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx b/src/app/(home)/components/FooterCustomerOrderModal/Skeleton.tsx
@@ -1,8 +1,8 @@
 import { Skeleton } from 'components/atoms'
 
 export const SkeletonFooterCustomerOrderModal = () => (
-  <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 className="px-4 py-[3px] shadow-sm ai-center bc-neutral-light-lavender bw-t f-wrap g-4 jc-between row-full">
+    <Skeleton className="br-5 h-8 w-24" />
+    <Skeleton className="br-5 h-8 w-44" />
   </div>
 )
diff --git a/src/app/(home)/components/FooterCustomerOrderModal/index.tsx b/src/app/(home)/components/FooterCustomerOrderModal/index.tsx
@@ -3,7 +3,7 @@ import { QuantityCounterButton } from 'components/molecules'
 
 const FooterCustomerOrderModal = () => {
   return (
-    <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">
+    <div className="px-1 py-[3px] shadow-sm ai-center bc-neutral-light-lavender bw-b-4 bw-t f-wrap g-1 jc-between row-full">
       <QuantityCounterButton
         quantity={0}
         onDecrease={() => ({})}

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

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -12,7 +12,7 @@ const ProductListingSection = dynamic(
 const Home = () => (
   <>
     <Banner />
-    <main className="mx-auto my-48 container-col g-48">
+    <main className="mx-auto my-12 container-col g-12">
       <Suspense>
         <ProductListingSection />
       </Suspense>

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -21,8 +21,8 @@ export const Error = ({
   return (
     <>
       <h1>Erro 404</h1>
-      <div className="px-20 container-col">
-        <div className="row jc-center">
+      <div className="px-5 container-col">
+        <div className="jc-center row">
           <Image
             src="/img/not-found.svg"
             alt="Erro 404"
@@ -33,14 +33,14 @@ export const Error = ({
           />
         </div>
 
-        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
+        <p className="mx-auto mb-5 w-full max-w-screen-md pb-3 fs-xl tx-center">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary-500 uppercase fs-16"
+          className="bg-secondary-500 uppercase fs-base"
           onClick={() => push('/')}
         >
           Ir para a página inicial

diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -37,8 +37,8 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
         {/* <p>{error.message}</p> */}
 
         <h1>Erro 404</h1>
-        <div className="px-20 container-col">
-          <div className="row jc-center">
+        <div className="px-5 container-col">
+          <div className="jc-center row">
             <Image
               src="/img/not-found.svg"
               alt="Erro 404"
@@ -48,15 +48,15 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
             />
           </div>
 
-          <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
+          <p className="mx-auto mb-5 w-full max-w-screen-md pb-3 fs-xl tx-center">
             Página não encontrada! Por favor, verifique a url acessada.
             <br />
             <br />
             Caso prefira, clique no botão abaixo e retorne para a página
             inicial:
           </p>
           <button
-            className="bg-secondary-500 uppercase fs-16"
+            className="bg-secondary-500 uppercase fs-base"
             onClick={() => push('/')}
           >
             Página Inicial

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="row jc-center">
+        <div className="jc-center row">
           <Image
             src="/img/not-found.svg"
             alt="Erro 404"
@@ -21,14 +21,14 @@ const NotFound = () => {
           />
         </div>
 
-        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
+        <p className="mx-auto mb-5 w-full max-w-screen-md pb-3 fs-xl tx-center">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary-500 uppercase fs-16"
+          className="bg-secondary-500 uppercase fs-base"
           onClick={() => push('/')}
         >
           Página Inicial