@akinon/projectzero 2.0.0-beta.5 → 2.0.0-beta.7

package/app-template/src/components/__tests__/badge.test.tsx

@@ -5,7 +5,7 @@ describe('Badge Component', () => {
   let badge;
 
   beforeEach(() => {
-    render(<Badge className="text-md rounded-sm">%90 off</Badge>);
+    render(<Badge className="text-md rounded-xs">%90 off</Badge>);
 
     badge = screen.getByText('%90 off');
   });
@@ -15,6 +15,6 @@ describe('Badge Component', () => {
   });
 
   it('should be classname checked', () => {
-    expect(badge).toHaveClass('text-md rounded-sm');
+    expect(badge).toHaveClass('text-md rounded-xs');
   });
 });

package/app-template/src/components/accordion.tsx

@@ -34,7 +34,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
         className
       )}
     >

package/app-template/src/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
+import { Link } from '@theme/components';
 import { ButtonProps } from '@theme/components/types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/app-template/src/components/file-input.tsx

@@ -1,8 +1,50 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
 import { FileInputProps } from '@theme/components/types';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput({ className, onChange, ...props }, ref) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={clsx('bg-primary text-white py-2 px-4 text-sm', className)}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div className="mt-1 text-gray-500">
+          {fileNames.length > 0 ? (
+            <ul className="list-disc pl-4 text-xs">
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className="text-xs">{t('common.file_input.no_file')}</span>
+          )}
+        </div>
+      </div>
+    );
   }
 );

package/app-template/src/components/input.tsx

@@ -39,8 +39,8 @@ export const Input = forwardRef<
   const hasFloatingLabel = label && labelStyle === 'floating';
   const inputClass = twMerge(
     clsx(
-      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-none', // disable outline on focus
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer disabled:bg-gray-50',
+      'focus-visible:outline-hidden', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
@@ -68,7 +68,7 @@ export const Input = forwardRef<
         className={twMerge(
           'text-xs text-gray-800 transition-all',
           clsx({
-            'absolute left-2.5 pointer-events-none transform flex items-center h-full !top-0  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
+            'absolute left-2.5 pointer-events-none transform flex items-center h-full top-0!  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
               hasFloatingLabel,
             'mb-2': !hasFloatingLabel,
             '-translate-y-2 bg-white inline-flex h-auto':

package/app-template/src/components/modal.tsx

@@ -38,7 +38,7 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',

package/app-template/src/components/select.tsx

@@ -41,7 +41,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ref={ref}
         className={twMerge(
           clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
+            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-hidden',
             !borderless &&
               'border border-gray-200 transition-all duration-150 hover:border-primary'
           ),

package/app-template/src/components/shimmer.tsx

@@ -12,7 +12,7 @@ export const Shimmer: React.FC<ShimmerProps> = ({ className }) => {
     >
       <div
         className={twMerge(
-          'w-full h-full bg-black bg-opacity-20 shadow-[0 0 30px 30px rgba(255,255,255,0.2)]',
+          'w-full h-full bg-black/20 shadow-[0 0 30px 30px rgba(255,255,255,0.2)]',
           className
         )}
       ></div>

package/app-template/src/components/types/index.ts

@@ -4,7 +4,10 @@ import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export interface PaginationProps {

package/app-template/src/middleware.ts

@@ -9,6 +9,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
  */
 
 export const config = {
+  // For .xml.gz type sitemap urls, update '/(.*sitemap\\.xml)' with this regex '/(.*sitemap\\.xml|sitemap/.*.xml(?:.gz)?)/',
   matcher: [
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',

package/app-template/src/plugins.js

@@ -13,5 +13,6 @@ module.exports = [
   'pz-b2b',
   'pz-akifast',
   'pz-saved-card',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-tamara-extension'
 ];

package/app-template/src/views/account/contact-form.tsx

@@ -242,7 +242,7 @@ const ContactForm = () => {
               <span className="text-secondary">*</span>
             </label>
             <textarea
-              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-none focus:border-black hover:border-black"
+              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-hidden focus:border-black hover:border-black"
               rows={7}
               name="message"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -255,13 +255,8 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
-            <Button type="submit" className="w-full font-medium">
+            <FileInput name="file" title="file" {...register('file')} />
+            <Button type="submit" className="w-full font-medium mt-4">
               {t('account.contact.form.submit_button')}
             </Button>
           </form>

package/app-template/src/views/account/content-header.tsx

@@ -31,15 +31,14 @@ export const ContentHeader = (props: Props) => {
       </h3>
       <Select
         onChange={handleChange}
-        className="w-full mb-4 md:mb-0 md:w-56 md:mr-4 text-xs"
+        className="w-full mb-4 bg-white md:mb-0 md:w-56 md:mr-4 text-xs"
         options={orders}
         data-testid="account-orders-header-select"
       ></Select>
       <Button
         className={clsx(
           'w-full md:w-56',
-          isButtonDisabled &&
-            'hover:bg-black hover:text-white disabled:opacity-75'
+          isButtonDisabled && 'hover:bg-black/75 hover:text-white'
         )}
         onClick={handleClick}
         data-testid="account-orders-header-button"

package/app-template/src/views/account/order.tsx

@@ -60,7 +60,7 @@ export const Order = (props) => {
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
             {props.orderitem_set.slice(0, 3).map((item, index) => (
               // TODO: Static image will change (TR)
-              <li className="flex-shrink-0" key={index}>
+              <li className="shrink-0" key={index}>
                 <Image
                   src={item.product.image ? item.product.image : '/noimage.jpg'}
                   alt={item.product.name}

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -8,7 +8,8 @@ export const OrderCancellationItem = ({
   item,
   value,
   onChange,
-  selectOption
+  selectOption,
+  fileInput
 }) => {
   const { t } = useLocalization();
   const checkboxStatus =
@@ -38,14 +39,13 @@ export const OrderCancellationItem = ({
     <div className="flex flex-wrap justify-between border-gray border-b mb-4 pb-3">
       <div className="flex gap-3 mb-5 lg:mb-0">
         {checkboxStatus && (
-          // TODO: Static image will change (TR)
           <Checkbox
             className="m-auto"
             data-testid="account-orders-return-checkbox"
             onClick={handleClick}
           />
         )}
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Link href={item.product.absolute_url}>
             <Image
               src={item.product.image ? item.product.image : '/noimage.jpg'}
@@ -80,7 +80,7 @@ export const OrderCancellationItem = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-auto">
+      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-80 gap-4">
         <div className="w-full flex flex-col lg:items-center lg:flex-row">
           {item.active_cancellation_request?.easy_return?.code && (
             <div className="flex items-center">
@@ -93,6 +93,26 @@ export const OrderCancellationItem = ({
 
           {selectOption}
         </div>
+        <div>{fileInput}</div>
+        {item.active_cancellation_request?.cancellation_request_image_set && (
+          <div className="flex flex-wrap gap-2">
+            {item.active_cancellation_request?.cancellation_request_image_set?.map(
+              (item) => {
+                return (
+                  <div className="relative w-16 h-16" key={item.id}>
+                    <Image
+                      src={item.image}
+                      alt={item.description}
+                      aspectRatio={1}
+                      sizes="64px"
+                      fill
+                    />
+                  </div>
+                );
+              }
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

package/app-template/src/views/anonymous-tracking/order-detail/index.tsx

@@ -135,7 +135,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                           key={index}
                         >
                           <div className="flex gap-3 mb-5 lg:mb-0">
-                            <div className="flex-shrink-0">
+                            <div className="shrink-0">
                               <Link
                                 className="block"
                                 href={item.product.absolute_url}

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

@@ -91,12 +91,18 @@ export const CategoryHeader = (props: Props) => {
                     value: String(value)
                   });
                 }}
-                className={clsx(
-                  'cursor-pointer',
-                  Number(layoutSize) === value ? 'fill-black' : 'fill-gray-500'
-                )}
+                className="cursor-pointer"
               >
-                <Icon key={value} name={icon} size={16} />
+                <Icon
+                  key={value}
+                  name={icon}
+                  size={16}
+                  className={
+                    Number(layoutSize) === value
+                      ? 'text-black'
+                      : 'text-gray-500'
+                  }
+                />
               </a>
             ))}
           </div>

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

@@ -79,7 +79,7 @@ export default function ListPage(props: ListPageProps) {
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
-                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
+                ? 'fixed bg-black/60 inset-0 z-10 opacity-100'
                 : 'opacity-0'
             )}
           ></div>

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

@@ -24,7 +24,7 @@ const CheckoutAuth = () => {
 
   return (
     <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 flex-shrink-0">
+      <div className="flex-1 shrink-0">
         <Login />
         <div className="text-center text-sm text-gray-600 uppercase mt-5">
           <span>

package/app-template/src/views/checkout/layout/header.tsx

@@ -6,7 +6,7 @@ import { Image } from '@akinon/next/components/image';
 
 const CheckoutHeader = () => {
   return (
-    <div className="relative border-b border-gray-100 shadow">
+    <div className="relative border-b border-gray-100 shadow-sm">
       <header
         className={clsx(['py-8', 'px-4', 'mx-auto', 'container', 'md:px-0'])}
       >

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -319,7 +319,7 @@ const CheckoutCreditCard = () => {
                         size={16}
                         className="leading-none ml-2"
                       />
-                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2 border-gray-200">
                         {/* TODO: Fix this */}
                         <Image
                           src="/cvv.jpg"

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -44,7 +44,7 @@ const PaymentOptionButtons = () => {
         {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
+            className="border border-gray-200 px-4 py-3 mt-3 flex h-12"
             onClick={scrollToTop}
           >
             <Radio
@@ -69,10 +69,10 @@ const PaymentOptionButtons = () => {
             onClick={() => onClickHandler(option)}
             className={clsx(
               'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800 font-medium',
-              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              'border-gray-400 text-xs uppercase text-black-800/60 font-medium',
+              'bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
               {
-                'text-opacity-100 border-b-transparent':
+                'text-black-800/100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
               }
             )}

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/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

@@ -192,7 +192,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 +206,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