Chore: Refactor all remaining code with the lastest version of the pr…

…eview release

src/modules/account/components/account-info/index.tsx

@@ -46,7 +46,7 @@ const AccountInfo = ({
       <div className="flex items-end justify-between">
         <div className="flex flex-col">
           <span className="uppercase text-ui-fg-base">{label}</span>
-          <div className="flex items-center flex-1 basis-0 justify-end gap-x-4">
+          <div className="flex flex-1 basis-0 items-center justify-end gap-x-4">
             {typeof currentInfo === 'string' ? (
               <span className="font-semibold" data-testid="current-info">
                 {currentInfo}
@@ -59,7 +59,7 @@ const AccountInfo = ({
         <div>
           <Button
             variant="secondary"
-            className="w-[100px] min-h-[25px] py-1"
+            className="min-h-[25px] w-[100px] py-1"
             onClick={handleToggle}
             type={state ? 'reset' : 'button'}
             data-testid="edit-button"
@@ -75,15 +75,15 @@ const AccountInfo = ({
         <Disclosure.Panel
           static
           className={clx(
-            'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+            'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
             {
               'max-h-[1000px] opacity-100': isSuccess,
               'max-h-0 opacity-0': !isSuccess,
             }
           )}
           data-testid="success-message"
         >
-          <Badge className="p-2 my-4" color="green">
+          <Badge className="my-4 p-2" color="green">
             <span>{label} updated succesfully</span>
           </Badge>
         </Disclosure.Panel>
@@ -94,15 +94,15 @@ const AccountInfo = ({
         <Disclosure.Panel
           static
           className={clx(
-            'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+            'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
             {
               'max-h-[1000px] opacity-100': isError,
               'max-h-0 opacity-0': !isError,
             }
           )}
           data-testid="error-message"
         >
-          <Badge className="p-2 my-4" color="red">
+          <Badge className="my-4 p-2" color="red">
             <span>{errorMessage}</span>
           </Badge>
         </Disclosure.Panel>
@@ -112,7 +112,7 @@ const AccountInfo = ({
         <Disclosure.Panel
           static
           className={clx(
-            'transition-[max-height,opacity] duration-300 ease-in-out overflow-visible',
+            'overflow-visible transition-[max-height,opacity] duration-300 ease-in-out',
             {
               'max-h-[1000px] opacity-100': state,
               'max-h-0 opacity-0': !state,
@@ -121,7 +121,7 @@ const AccountInfo = ({
         >
           <div className="flex flex-col gap-y-2 py-4">
             <div>{children}</div>
-            <div className="flex items-center justify-end mt-2">
+            <div className="mt-2 flex items-center justify-end">
               <Button
                 isLoading={pending}
                 className="w-full small:max-w-[140px]"

src/modules/account/components/account-nav/index.tsx

@@ -30,11 +30,11 @@ const AccountNav = ({
         {route !== `/${countryCode}/account` ? (
           <LocalizedClientLink
             href="/account"
-            className="flex items-center gap-x-2 text-small-regular py-2"
+            className="text-small-regular flex items-center gap-x-2 py-2"
             data-testid="account-main-link"
           >
             <>
-              <ChevronDown className="transform rotate-90" />
+              <ChevronDown className="rotate-90 transform" />
               <span>Account</span>
             </>
           </LocalizedClientLink>
@@ -48,58 +48,58 @@ const AccountNav = ({
                 <li>
                   <LocalizedClientLink
                     href="/account/profile"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    className="flex items-center justify-between border-b border-border px-8 py-4"
                     data-testid="profile-link"
                   >
                     <>
                       <div className="flex items-center gap-x-2">
                         <User size={20} />
                         <span>Profile</span>
                       </div>
-                      <ChevronDown className="transform -rotate-90" />
+                      <ChevronDown className="-rotate-90 transform" />
                     </>
                   </LocalizedClientLink>
                 </li>
                 <li>
                   <LocalizedClientLink
                     href="/account/addresses"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    className="flex items-center justify-between border-b border-border px-8 py-4"
                     data-testid="addresses-link"
                   >
                     <>
                       <div className="flex items-center gap-x-2">
                         <MapPin size={20} />
                         <span>Addresses</span>
                       </div>
-                      <ChevronDown className="transform -rotate-90" />
+                      <ChevronDown className="-rotate-90 transform" />
                     </>
                   </LocalizedClientLink>
                 </li>
                 <li>
                   <LocalizedClientLink
                     href="/account/orders"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    className="flex items-center justify-between border-b border-border px-8 py-4"
                     data-testid="orders-link"
                   >
                     <div className="flex items-center gap-x-2">
                       <Package size={20} />
                       <span>Orders</span>
                     </div>
-                    <ChevronDown className="transform -rotate-90" />
+                    <ChevronDown className="-rotate-90 transform" />
                   </LocalizedClientLink>
                 </li>
                 <li>
                   <button
                     type="button"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8 w-full"
+                    className="flex w-full items-center justify-between border-b border-border px-8 py-4"
                     onClick={handleLogout}
                     data-testid="logout-button"
                   >
                     <div className="flex items-center gap-x-2">
                       <ArrowRightOnRectangle />
                       <span>Log out</span>
                     </div>
-                    <ChevronDown className="transform -rotate-90" />
+                    <ChevronDown className="-rotate-90 transform" />
                   </button>
                 </li>
               </ul>
@@ -113,7 +113,7 @@ const AccountNav = ({
             <h3 className="text-base-semi">Account</h3>
           </div>
           <div className="text-base-regular">
-            <ul className="flex mb-0 justify-start items-start flex-col gap-y-4">
+            <ul className="mb-0 flex flex-col items-start justify-start gap-y-4">
               <li>
                 <AccountNavLink
                   href="/account"
@@ -187,7 +187,7 @@ const AccountNavLink = ({
     <LocalizedClientLink
       href={href}
       className={clx('text-ui-fg-subtle hover:text-ui-fg-base', {
-        'text-ui-fg-base font-semibold': active,
+        'font-semibold text-ui-fg-base': active,
       })}
       data-testid={dataTestId}
     >

src/modules/account/components/address-card/add-address.tsx

@@ -43,7 +43,7 @@ const AddAddress = ({ region }: { region: HttpTypes.StoreRegion }) => {
   return (
     <>
       <button
-        className="border border-ui-border-base rounded-rounded p-5 min-h-[220px] h-full w-full flex flex-col justify-between"
+        className="flex h-full min-h-[220px] w-full flex-col justify-between rounded-rounded border border-ui-border-base p-5"
         onClick={open}
         data-testid="add-address-button"
       >
@@ -131,15 +131,15 @@ const AddAddress = ({ region }: { region: HttpTypes.StoreRegion }) => {
             </div>
             {formState.error && (
               <div
-                className="text-rose-500 text-small-regular py-2"
+                className="text-small-regular py-2 text-rose-500"
                 data-testid="address-error"
               >
                 {formState.error}
               </div>
             )}
           </Modal.Body>
           <Modal.Footer>
-            <div className="flex gap-3 mt-6">
+            <div className="mt-6 flex gap-3">
               <Button
                 type="reset"
                 variant="secondary"

src/modules/account/components/address-card/edit-address-modal.tsx

@@ -66,7 +66,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
     <>
       <div
         className={clx(
-          'border rounded-rounded p-5 min-h-[220px] h-full w-full flex flex-col justify-between transition-colors',
+          'flex h-full min-h-[220px] w-full flex-col justify-between rounded-rounded border p-5 transition-colors',
           {
             'border-gray-900': isActive,
           }
@@ -75,7 +75,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
       >
         <div className="flex flex-col">
           <Heading
-            className="text-left text-base-semi"
+            className="text-base-semi text-left"
             data-testid="address-name"
           >
             {address.first_name} {address.last_name}
@@ -88,7 +88,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
               {address.company}
             </Text>
           )}
-          <Text className="flex flex-col text-left text-base-regular mt-2">
+          <Text className="text-base-regular mt-2 flex flex-col text-left">
             <span data-testid="address-address">
               {address.address_1}
               {address.address_2 && <span>, {address.address_2}</span>}
@@ -104,15 +104,15 @@ const EditAddress: React.FC<EditAddressProps> = ({
         </div>
         <div className="flex items-center gap-x-4">
           <button
-            className="text-small-regular text-ui-fg-base flex items-center gap-x-2"
+            className="text-small-regular flex items-center gap-x-2 text-ui-fg-base"
             onClick={open}
             data-testid="address-edit-button"
           >
             <Edit />
             Edit
           </button>
           <button
-            className="text-small-regular text-ui-fg-base flex items-center gap-x-2"
+            className="text-small-regular flex items-center gap-x-2 text-ui-fg-base"
             onClick={removeAddress}
             data-testid="address-delete-button"
           >
@@ -211,13 +211,13 @@ const EditAddress: React.FC<EditAddressProps> = ({
               />
             </div>
             {formState.error && (
-              <div className="text-rose-500 text-small-regular py-2">
+              <div className="text-small-regular py-2 text-rose-500">
                 {formState.error}
               </div>
             )}
           </Modal.Body>
           <Modal.Footer>
-            <div className="flex gap-3 mt-6">
+            <div className="mt-6 flex gap-3">
               <Button
                 type="reset"
                 variant="secondary"

src/modules/account/components/login/index.tsx

@@ -15,15 +15,15 @@ const Login = ({ setCurrentView }: Props) => {
 
   return (
     <div
-      className="max-w-sm w-full flex flex-col items-center"
+      className="flex w-full max-w-sm flex-col items-center"
       data-testid="login-page"
     >
-      <h1 className="text-large-semi uppercase mb-6">Welcome back</h1>
-      <p className="text-center text-base-regular text-ui-fg-base mb-8">
+      <h1 className="text-large-semi mb-6 uppercase">Welcome back</h1>
+      <p className="text-base-regular mb-8 text-center text-ui-fg-base">
         Sign in to access an enhanced shopping experience.
       </p>
       <form className="w-full" action={formAction}>
-        <div className="flex flex-col w-full gap-y-2">
+        <div className="flex w-full flex-col gap-y-2">
           <Input
             label="Email"
             name="email"
@@ -43,11 +43,11 @@ const Login = ({ setCurrentView }: Props) => {
           />
         </div>
         <ErrorMessage error={message} data-testid="login-error-message" />
-        <SubmitButton data-testid="sign-in-button" className="w-full mt-6">
+        <SubmitButton data-testid="sign-in-button" className="mt-6 w-full">
           Sign in
         </SubmitButton>
       </form>
-      <span className="text-center text-ui-fg-base text-small-regular mt-6">
+      <span className="text-small-regular mt-6 text-center text-ui-fg-base">
         Not a member?{' '}
         <button
           onClick={() => setCurrentView(LOGIN_VIEW.REGISTER)}

src/modules/account/components/order-card/index.tsx

@@ -24,11 +24,11 @@ const OrderCard = ({ order }: OrderCardProps) => {
   }, [order])
 
   return (
-    <div className="bg-white flex flex-col" data-testid="order-card">
-      <div className="uppercase text-large-semi mb-1">
+    <div className="flex flex-col bg-card" data-testid="order-card">
+      <div className="text-large-semi mb-1 uppercase">
         #<span data-testid="order-display-id">{order.display_id}</span>
       </div>
-      <div className="flex items-center divide-x divide-gray-200 text-small-regular text-ui-fg-base">
+      <div className="text-small-regular flex items-center divide-x divide-gray-200 text-ui-fg-base">
         <span className="pr-2" data-testid="order-created-at">
           {new Date(order.created_at).toDateString()}
         </span>
@@ -38,11 +38,9 @@ const OrderCard = ({ order }: OrderCardProps) => {
             currency_code: order.currency_code,
           })}
         </span>
-        <span className="pl-2">{`${numberOfLines} ${
-          numberOfLines > 1 ? 'items' : 'item'
-        }`}</span>
+        <span className="pl-2">{`${numberOfLines} ${numberOfLines > 1 ? 'items' : 'item'}`}</span>
       </div>
-      <div className="grid grid-cols-2 small:grid-cols-4 gap-4 my-4">
+      <div className="my-4 grid grid-cols-2 gap-4 small:grid-cols-4">
         {order.items?.slice(0, 3).map((i) => {
           return (
             <div
@@ -51,9 +49,9 @@ const OrderCard = ({ order }: OrderCardProps) => {
               data-testid="order-item"
             >
               <Thumbnail thumbnail={i.thumbnail} images={[]} size="full" />
-              <div className="flex items-center text-small-regular text-ui-fg-base">
+              <div className="text-small-regular flex items-center text-ui-fg-base">
                 <span
-                  className="text-ui-fg-base font-semibold"
+                  className="font-semibold text-ui-fg-base"
                   data-testid="item-title"
                 >
                   {i.title}
@@ -65,7 +63,7 @@ const OrderCard = ({ order }: OrderCardProps) => {
           )
         })}
         {numberOfProducts > 4 && (
-          <div className="w-full h-full flex flex-col items-center justify-center">
+          <div className="flex h-full w-full flex-col items-center justify-center">
             <span className="text-small-regular text-ui-fg-base">
               + {numberOfLines - 4}
             </span>

src/modules/account/components/order-overview/index.tsx

@@ -9,11 +9,11 @@ import OrderCard from '../order-card'
 const OrderOverview = ({ orders }: { orders: HttpTypes.StoreOrder[] }) => {
   if (orders?.length) {
     return (
-      <div className="flex flex-col gap-y-8 w-full">
+      <div className="flex w-full flex-col gap-y-8">
         {orders.map((o) => (
           <div
             key={o.id}
-            className="border-b border-gray-200 pb-6 last:pb-0 last:border-none"
+            className="border-b border-border pb-6 last:border-none last:pb-0"
           >
             <OrderCard order={o} />
           </div>
@@ -24,7 +24,7 @@ const OrderOverview = ({ orders }: { orders: HttpTypes.StoreOrder[] }) => {
 
   return (
     <div
-      className="w-full flex flex-col items-center gap-y-4"
+      className="flex w-full flex-col items-center gap-y-4"
       data-testid="no-orders-container"
     >
       <h2 className="text-large-semi">Nothing to see here</h2>