@akinon/projectzero 2.0.0-beta.1 → 2.0.0-beta.10

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -130,7 +130,7 @@ const AddressBox = ({
       onClick={() => handleAddressClick(addressType, address)}
       key={address.pk}
       className={clsx(
-        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
+        'cursor-pointer relative w-full border border-gray-200 shadow-sm p-4 min-h-[8rem]',
         "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
         'after:border-secondary-400 after:absolute after:inset-0 after:duration-150 after:-z-10',
         {
@@ -167,7 +167,7 @@ const AddressBox = ({
       <div className="text-xs flex justify-between">
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
           onClick={() => setIsEditAddressModalOpen(true)}
           data-testid="checkout-address-edit"
         >
@@ -193,7 +193,7 @@ const AddressBox = ({
         </Modal>
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
           onClick={() => setRemoveAddressModalOpen(true)}
           data-testid="checkout-address-remove"
         >

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -153,7 +153,7 @@ const Addresses = () => {
                   role="button"
                   onClick={() => setIsModalOpen(true)}
                   className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
+                    'relative cursor-pointer w-full min-h-[8rem] border border-gray-200 shadow-sm p-4',
                     "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
                     'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
                     {

package/app-template/src/views/checkout/summary.tsx

@@ -149,7 +149,7 @@ export const Summary = () => {
             </div>
           </div>
           <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"
                 components={{
@@ -162,7 +162,7 @@ export const Summary = () => {
                 }}
               />
             </div>
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               {preOrder.shipping_address?.line}{' '}
               {preOrder.shipping_address?.postcode}{' '}
               {preOrder.shipping_address?.district && (

package/app-template/src/views/header/action-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode, useMemo, useRef, useCallback } from 'react';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
   closeMiniBasket,
@@ -29,8 +29,11 @@ interface MenuItem {
 export default function ActionMenu() {
   const dispatch = useAppDispatch();
 
-  const { data } = useGetBasketQuery();
-  const totalQuantity = useMemo(() => data?.total_quantity ?? 0, [data]);
+  const { data: miniBasket } = useGetMiniBasketQuery();
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
 
   const { open: miniBasketOpen } = useAppSelector(
     (state) => state.root.miniBasket

package/app-template/src/views/header/band.tsx

@@ -16,13 +16,13 @@ export default function HeaderBand() {
       </div>
 
       <div className="header-grid-area-nav bg-gray-100 h-auto p-3 sm:header-grid-area-band-m sm:h-9 sm:py-0">
-        <div className="text-center overflow-ellipsis line-clamp-2 h-full flex items-center justify-center">
+        <div className="text-center text-ellipsis line-clamp-2 h-full flex items-center justify-center">
           <HeaderBandText />
         </div>
       </div>
 
       <div className="header-grid-area-main-r h-full pr-4 sm:header-grid-area-band-r sm:pr-0">
-        <div className="flex items-center justify-end h-full">
+        <div className="flex items-center justify-end h-full gap-10">
           <UserMenu isMobile={false} />
           <ActionMenu />
         </div>

package/app-template/src/views/header/mini-basket.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import {
   basketApi,
   useGetBasketQuery,
+  useGetMiniBasketQuery,
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
@@ -150,13 +151,23 @@ export default function MiniBasket() {
     (state) => state.root.miniBasket
   );
   const dispatch = useAppDispatch();
-  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const {
+    data: basket,
+    isLoading,
+    isSuccess
+  } = useGetBasketQuery(undefined, {
+    skip: !miniBasketOpen
+  });
+  const { data: miniBasket } = useGetMiniBasketQuery();
   const { t } = useLocalization();
   const { highlightedItem } = useAppSelector((state) => state.root.miniBasket);
   const [highlightedItemPk, setHighlightedItemPk] = useState(0);
   const [sortedBasket, setSortedBasket] = useState([]);
 
-  const totalQuantity = useMemo(() => basket?.total_quantity ?? 0, [basket]);
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
   const miniBasketList = useRef(null);
 
   useEffect(() => {
@@ -192,7 +203,7 @@ export default function MiniBasket() {
           miniBasketOpen
             ? 'opacity-100 visible lg:invisible'
             : 'opacity-0 invisible',
-          'fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-80 transition-all duration-300'
+          'fixed top-0 left-0 z-50 w-screen h-screen bg-black/80 transition-all duration-300'
         )}
         onClick={() => {
           dispatch(closeMiniBasket());
@@ -206,7 +217,7 @@ export default function MiniBasket() {
           'fixed lg:absolute bottom-0 lg:-bottom-1 right-0 w-80 h-screen lg:h-auto bg-white lg:border-l lg:border-t lg:border-r-2 lg:border-b-2 lg:border-gray-500 p-5 z-50 transition-all duration-300'
         )}
       >
-        <header className="flex items-center gap-2 pb-3 border-b">
+        <header className="flex items-center gap-2 pb-3 border-b border-gray-200">
           <h3 className="text-xl font-bold">
             {t('basket.mini_basket.my_bag')}
           </h3>

package/app-template/src/views/header/mobile-menu.tsx

@@ -58,9 +58,9 @@ export default function MobileMenu(props: MobileMenuProps) {
     <>
       <div
         className={clsx(
-          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black bg-opacity-80 transition duration-500',
+          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black/80 transition duration-500',
           {
-            '!visible !opacity-100 scroll-lock': isMobileMenuOpen
+            'visible! opacity-100! scroll-lock': isMobileMenuOpen
           }
         )}
       />
@@ -70,7 +70,7 @@ export default function MobileMenu(props: MobileMenuProps) {
         className={clsx(
           'fixed top-0 left-0 z-50 flex flex-col bg-white w-72 pt-4 h-screen invisible opacity-0 transition duration-500 transform -translate-x-72',
           {
-            '!visible !opacity-100 translate-x-0': isMobileMenuOpen
+            'visible! opacity-100! translate-x-0': isMobileMenuOpen
           }
         )}
       >
@@ -106,15 +106,15 @@ export default function MobileMenu(props: MobileMenuProps) {
             className={clsx(
               'absolute top-0 left-0 right-0 px-8 bg-white invisible opacity-0 transition duration-500 transform translate-x-full',
               {
-                '!visible !opacity-100 !translate-x-0': selectedSubMenu
+                'visible! opacity-100! translate-x-0!': selectedSubMenu
               }
             )}
           >
-            <header className="flex items-center justify-between border-b h-[61px] py-4 mb-4">
+            <header className="flex items-center justify-between border-b border-gray-200 h-[61px] py-4 mb-4">
               <Button
                 appearance="ghost"
                 onClick={() => setSelectedSubMenu(null)}
-                className="underline text-xs font-semibold flex items-center gap-2 !p-0"
+                className="underline text-xs font-semibold flex items-center gap-2 p-0!"
               >
                 <Icon name="chevron-start" size={12} className="shrink-0" />
                 {t('common.mobile_menu.back')}

package/app-template/src/views/header/navbar.tsx

@@ -102,7 +102,7 @@ export default function Navbar(props: NavbarProps) {
                           'after:bg-gray'
                         ],
                         {
-                          '!visible !opacity-100 delay-500':
+                          'visible! opacity-100! delay-500':
                             openedMenu === item.pk
                         }
                       )}

package/app-template/src/views/header/pwa-back-button.tsx

@@ -34,7 +34,7 @@ export const PwaBackButton = () => {
   return (
     <div className="relative z-10 md:top-0 md:left-0 md:fixed">
       <button
-        className="bg-secondary-600 text-white flex items-center justify-center flex-shrink-0 w-12 h-12 md:w-10 md:h-9 active:bg-secondary-700"
+        className="bg-secondary-600 text-white flex items-center justify-center shrink-0 w-12 h-12 md:w-10 md:h-9 active:bg-secondary-700"
         onClick={() => router.back()}
       >
         <svg

package/app-template/src/views/header/search/index.tsx

@@ -22,19 +22,31 @@ export default function Search() {
     if (isSearchOpen) {
       inputRef.current?.focus();
       document.body.style.overflow = 'hidden';
+
+      const handleEscKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          dispatch(closeSearch());
+        }
+      };
+
+      document.addEventListener('keydown', handleEscKey);
+      return () => {
+        document.removeEventListener('keydown', handleEscKey);
+        document.body.style.overflow = 'auto';
+      };
     }
 
     return () => {
       document.body.style.overflow = 'auto';
     };
-  }, [isSearchOpen]);
+  }, [isSearchOpen, dispatch]);
 
   return (
     <>
       <div
         className={clsx(
           // 177px is the height of the header
-          'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
+          'absolute bg-black/75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
           isSearchOpen && searchText
             ? 'visible opacity-100'
             : 'invisible opacity-0'
@@ -48,7 +60,7 @@ export default function Search() {
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
+        <div className="max-w-(--breakpoint-2xl) mx-auto flex flex-col gap-12">
           <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
             <span className="text-xl lg:text-2xl">
               {t('common.search.results_for')}
@@ -62,7 +74,7 @@ export default function Search() {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
                   }
                 }}
-                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
+                className="border-0 text-2xl outline-hidden text-secondary placeholder:text-xl lg:placeholder:text-2xl"
                 placeholder={t('common.search.placeholder')}
                 ref={inputRef}
               />

package/app-template/src/views/header/search/results.tsx

@@ -80,7 +80,7 @@ export default function Results(props: ResultsProps) {
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
           {products.map((product, index) => (
             <Link href={product?.url} key={index} className="flex flex-col">
-              <div className="relative aspect-[315/448]">
+              <div className="relative aspect-315/448">
                 {product.extra.image ? (
                   <Image
                     src={product.extra.image}

package/app-template/src/views/header/user-menu.tsx

@@ -36,7 +36,9 @@ export const UserMenu = (props: UserMenuProps) => {
     <ul
       className={clsx(
         'items-center divide-x divide-black',
-        isMobile ? 'flex pt-2 text-sm pb-6 border-b mx-8' : 'hidden sm:flex'
+        isMobile
+          ? 'flex pt-2 text-sm pb-6 border-b border-gray-200 mx-8'
+          : 'hidden sm:flex'
       )}
       id="user-menu"
     >

package/app-template/src/views/installment-options/index.tsx

@@ -22,7 +22,7 @@ const InstallmentOptions = (props: InstallmentProps) => {
 
   useEffect(() => {
     if (isSuccess && data) {
-      setActiveCardSlug(data.results[0].slug);
+      setActiveCardSlug(data.results?.[0]?.slug);
     }
   }, [isSuccess, data]);
 

package/app-template/src/views/login/index.tsx

@@ -103,10 +103,34 @@ export const Login = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof LoginFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof LoginFormType, {
+            type: 'custom',
+            message: parsedValue.join(', '),
+          });
+        } else {
+          Object.keys(parsedValue).forEach((key) => {
+            const fieldName = key as keyof LoginFormType;
+            const errorMessages = parsedValue[key] as string[];
+    
+            setError(fieldName, {
+              type: 'custom',
+              message: errorMessages.join(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {
@@ -195,7 +219,7 @@ export const Login = () => {
           {t('auth.login.form.submit')}
         </Button>
 
-        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600 before:bg-opacity-25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600 after:bg-opacity-25 after:top-1/2 after:right-0">
+        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600/25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600/25 after:top-1/2 after:right-0">
           {t('auth.login.form.or')}
         </p>
 
@@ -224,7 +248,7 @@ export const Login = () => {
                 alt={provider.label}
                 width={provider.label === 'Facebook' ? 10 : 18}
                 height={18}
-                className="flex-shrink-0"
+                className="shrink-0"
               />
             )}
 

package/app-template/src/views/otp-login/index.tsx

@@ -10,9 +10,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
 import { useOtpLoginMutation } from '@akinon/next/data/client/user';
-import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { AuthError } from '@akinon/next/types';
+import { showPopup } from '@akinon/pz-otp/src/redux/reducer';
 
 const loginFormSchema = (t) =>
   yup.object().shape({
@@ -25,9 +26,9 @@ const loginFormSchema = (t) =>
   });
 
 export const OtpLogin = () => {
+  const dispatch = useAppDispatch();
   const { user_phone_format } = useAppSelector((state) => state.config);
   const { t, locale } = useLocalization();
-  const [showOtpModal, setShowOtpModal] = useState(false);
   const [otpLoginMutation] = useOtpLoginMutation();
 
   const {
@@ -79,7 +80,7 @@ export const OtpLogin = () => {
     })
       .unwrap()
       .then(() => {
-        setShowOtpModal(true);
+        dispatch(showPopup());
       })
       .catch((error) => {
         if (error.status === 429) {
@@ -136,17 +137,14 @@ export const OtpLogin = () => {
         </Button>
       </form>
 
-      {showOtpModal && (
-        <PluginModule
-          component={Component.Otp}
-          props={{
-            setShowPopup: setShowOtpModal,
-            data: getValues(),
-            submitAction: loginHandler,
-            error: formError
-          }}
-        />
-      )}
+      <PluginModule
+        component={Component.Otp}
+        props={{
+          data: getValues(),
+          submitAction: loginHandler,
+          error: formError
+        }}
+      />
     </section>
   );
 };

package/app-template/src/views/product/product-info.tsx

@@ -159,7 +159,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
     <>
       <div
         className={clsx(
-          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
+          'fixed bottom-0 left-0 w-1/2 h-14 z-20 bg-white mt-0 border-t border-gray-500 items-center justify-center',
           'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
         )}
       >
@@ -188,7 +188,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
       <Button
         disabled={isAddToCartLoading || isAddToStockAlertLoading}
         className={clsx(
-          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground',
+          'fixed bottom-0 right-0 w-1/2 h-14 z-20 flex items-center justify-center fill-primary-foreground',
           'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
         )}
         onClick={() => {

package/app-template/src/views/product/slider.tsx

@@ -86,7 +86,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
       </div>
 
       <div className="relative lg:col-span-5">
-        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+        <FavButton className="absolute right-8 top-6 z-20 sm:hidden" />
 
         <CarouselCore
           responsive={{

package/app-template/src/views/product-pointer-banner-item.tsx

@@ -109,7 +109,7 @@ const ProductPointerWidget = (props: ProductPointerWidgetProps) => {
             hidden: buttonStatus
           })}
         >
-          <div className="w-full h-full flex items-center gap-2 flex-shrink-0">
+          <div className="w-full h-full flex items-center gap-2 shrink-0">
             <Image
               src={productItem?.kwargs?.value?.card_image?.url}
               alt={productItem?.value?.alt}

package/app-template/src/views/register/index.tsx

@@ -143,6 +143,7 @@ export const Register = () => {
     if (registerResponse.error) {
       const errors: AuthError[] = JSON.parse(registerResponse.error);
 
+
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
           onSubmit(data);
@@ -164,10 +165,34 @@ export const Register = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof RegisterFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof RegisterFormType, {
+            type: 'custom',
+            message: parsedValue.join(', '),
+          });
+        } else {
+          Object.keys(parsedValue).forEach((key) => {
+            const fieldName = key as keyof RegisterFormType;
+            const errorMessages = parsedValue[key] as string[];
+    
+            setError(fieldName, {
+              type: 'custom',
+              message: errorMessages.join(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {

package/app-template/src/views/sales-contract-modal/index.tsx

@@ -169,19 +169,19 @@ export const SalesContractModal = ({ data }: Props) => {
               </div>
             </div>
 
-            <table className="w-full border">
+            <table className="w-full border border-gray-200">
               <thead className="text-sm">
                 <tr>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product')}
                   </th>
-                  <th className="border font-normal py-2 px-3">
+                  <th className="border border-gray-200 font-normal py-2 px-3">
                     {t('account.sales_contract.quantity')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product_price')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.total_price')}
                   </th>
                 </tr>
@@ -191,20 +191,20 @@ export const SalesContractModal = ({ data }: Props) => {
                 {data.orderitem_set.map((value, index) => {
                   return (
                     <tr key={index.toString()}>
-                      <td className="border font-light text-left py-2 px-3">
+                      <td className="border border-gray-200 font-light text-left py-2 px-3">
                         {value.product.name}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         {value.quantity ? value.quantity : '1'}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         <Price
                           value={
                             value.unit_price ? value.unit_price : value.price
                           }
                         />
                       </td>
-                      <td className="border font-light text-right py-2 px-3">
+                      <td className="border border-gray-200 font-light text-right py-2 px-3">
                         <Price
                           value={
                             value.total_amount
@@ -222,12 +222,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.products_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.discount_amount} />
@@ -237,12 +237,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.shipping_price')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.shipping_amount} />
@@ -252,12 +252,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.payment_type')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     {data.payment_option_slug}
@@ -267,12 +267,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.order_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.amount} />

package/app-template/src/widgets/footer-info.tsx

@@ -19,7 +19,7 @@ export default async function FooterInfo() {
   const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
 
   return (
-    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b border-gray-200 md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
       <div className="flex items-center mb-8">
         <div className="mr-3">
           <svg

package/app-template/src/widgets/footer-menu.tsx

@@ -50,7 +50,7 @@ export default async function FooterMenu() {
 
   return (
     <div className="flex-1">
-      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
+      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l md:border-gray-200">
         <div>
           <div className="mb-4 font-medium" data-testid="footer-categories">
             {data?.attributes?.first_column_title?.value}

package/app-template/src/widgets/footer-subscription/index.tsx

@@ -19,7 +19,7 @@ export default async function FooterSubscription() {
   });
 
   return (
-    <div className="py-4 border-t md:border-t-0 lg:pl-7">
+    <div className="py-4 border-t border-gray-200 md:border-t-0 lg:pl-7">
       <h3 className="mb-1 text-xs font-medium">
         {data?.attributes?.title?.value}
       </h3>

package/app-template/src/widgets/home-stories-eng.tsx

@@ -82,7 +82,7 @@ export default async function HomeStoriesEng() {
         {data?.attributes?.stories?.map((story, index) => {
           return (
             <div
-              className="mr-4 flex-shrink-0 first:ms-4 w-32 md:w-32"
+              className="mr-4 shrink-0 first:ms-4 w-32 md:w-32"
               key={`story__${index}`}
             >
               <Link href={story?.value?.url} aria-label={story?.value?.alt}>