fixup! redesigned product detail tabs

shopsys · Jan 7, 2025 · ca19246 · ca19246
1 parent b697207
commit ca19246
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/project-base/storefront/components/Basic/Icon/DownloadIcon.tsx b/project-base/storefront/components/Basic/Icon/DownloadIcon.tsx
@@ -0,0 +1,8 @@
+export const DownloadIcon: SvgFC = (props) => (
+    <svg {...props} fill="none" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M13.8701 3C13.8701 2.44772 13.4224 2 12.8701 2C12.3178 2 11.8701 2.44772 11.8701 3L13.8701 3ZM11.8701 14C11.8701 14.5523 12.3178 15 12.8701 15C13.4224 15 13.8701 14.5523 13.8701 14H11.8701ZM17.5772 12.7071C17.9677 12.3166 17.9677 11.6834 17.5772 11.2929C17.1867 10.9024 16.5535 10.9024 16.163 11.2929L17.5772 12.7071ZM13.5772 15.2929L12.8701 14.5858L13.5772 15.2929ZM12.163 15.2929L12.8701 14.5858H12.8701L12.163 15.2929ZM9.57722 11.2929C9.1867 10.9024 8.55353 10.9024 8.16301 11.2929C7.77249 11.6834 7.77249 12.3166 8.16301 12.7071L9.57722 11.2929ZM4.87012 16C4.87012 15.4477 4.4224 15 3.87012 15C3.31783 15 2.87012 15.4477 2.87012 16H4.87012ZM22.8701 16C22.8701 15.4477 22.4224 15 21.8701 15C21.3178 15 20.8701 15.4477 20.8701 16H22.8701ZM20.2321 20.673L19.7781 19.782H19.7781L20.2321 20.673ZM21.5431 19.362L22.4341 19.816L21.5431 19.362ZM4.1971 19.362L3.30609 19.816L4.1971 19.362ZM5.50815 20.673L5.05416 21.564H5.05416L5.50815 20.673ZM11.8701 3L11.8701 14H13.8701L13.8701 3L11.8701 3ZM16.163 11.2929L12.8701 14.5858L14.2843 16L17.5772 12.7071L16.163 11.2929ZM12.8701 14.5858L9.57722 11.2929L8.16301 12.7071L11.4559 16L12.8701 14.5858ZM12.8701 14.5858H12.8701L11.4559 16C12.237 16.781 13.5033 16.781 14.2843 16L12.8701 14.5858ZM2.87012 16V16.2H4.87012V16H2.87012ZM8.67012 22H17.0701V20H8.67012V22ZM22.8701 16.2V16H20.8701V16.2H22.8701ZM17.0701 22C17.8937 22 18.5715 22.0008 19.1219 21.9558C19.684 21.9099 20.2007 21.8113 20.6861 21.564L19.7781 19.782C19.6217 19.8617 19.3975 19.9266 18.9591 19.9624C18.509 19.9992 17.9267 20 17.0701 20V22ZM20.8701 16.2C20.8701 17.0566 20.8693 17.6389 20.8326 18.089C20.7967 18.5274 20.7318 18.7516 20.6521 18.908L22.4341 19.816C22.6814 19.3306 22.78 18.8139 22.8259 18.2518C22.8709 17.7014 22.8701 17.0236 22.8701 16.2H20.8701ZM20.6861 21.564C21.4387 21.1805 22.0506 20.5686 22.4341 19.816L20.6521 18.908C20.4604 19.2843 20.1544 19.5903 19.7781 19.782L20.6861 21.564ZM2.87012 16.2C2.87012 17.0236 2.86934 17.7014 2.91431 18.2518C2.96024 18.8139 3.0588 19.3306 3.30609 19.816L5.0881 18.908C5.00841 18.7516 4.94349 18.5274 4.90767 18.089C4.87089 17.6389 4.87012 17.0566 4.87012 16.2H2.87012ZM8.67012 20C7.81354 20 7.23124 19.9992 6.78116 19.9624C6.34274 19.9266 6.11854 19.8617 5.96214 19.782L5.05416 21.564C5.53949 21.8113 6.05619 21.9099 6.61829 21.9558C7.16871 22.0008 7.84654 22 8.67012 22V20ZM3.30609 19.816C3.68959 20.5686 4.30151 21.1805 5.05416 21.564L5.96214 19.782C5.58581 19.5903 5.27985 19.2843 5.0881 18.908L3.30609 19.816Z"
+            fill="currentColor"
+        />
+    </svg>
+);
diff --git a/project-base/storefront/components/Basic/Tabs/Tabs.tsx b/project-base/storefront/components/Basic/Tabs/Tabs.tsx
@@ -69,24 +69,24 @@ export const TabsContent: TabFC<TabsContentProps & Partial<PropsWithRef<TabPanel
     return (
         <TabPanel
             forceRender
-            className="flex flex-col flex-wrap lg:hidden [&.isActive]:flex [&.isActive]:lg:pt-12"
+            className="flex flex-col flex-wrap lg:hidden [&.isActive]:flex [&.isActive]:lg:pt-5"
             selectedClassName="isActive"
             {...props}
         >
-            <p
+            <div
                 className="flex w-full cursor-pointer items-center justify-between rounded-xl bg-backgroundMore p-3 font-secondary text-sm font-semibold lg:hidden"
                 onClick={mobileTab}
             >
                 {headingTextMobile}
                 <AnimateRotateDiv className="flex items-start" condition={isActiveOnMobile}>
                     <ArrowIcon className={twJoin('size-4 rotate-0 text-text transition')} />
                 </AnimateRotateDiv>
-            </p>
+            </div>
 
             <AnimatePresence initial={false}>
                 {(isActiveOnMobile || (isActive && isLg)) && (
                     <AnimateCollapseDiv
-                        className="relative mt-3 !block w-full"
+                        className="relative mt-3 !block w-full lg:mt-0"
                         initial={skipInitialAnimation ? 'open' : 'closed'}
                         keyName={`tabs-content-${headingTextMobile}`}
                     >

diff --git a/...ct-base/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx b/...ct-base/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx
@@ -1,4 +1,4 @@
-import { ArrowSecondaryIcon } from 'components/Basic/Icon/ArrowSecondaryIcon';
+import { DownloadIcon } from 'components/Basic/Icon/DownloadIcon';
 import { Cell, Row, Table } from 'components/Basic/Table/Table';
 import { Tabs, TabsContent, TabsList, TabsListItem } from 'components/Basic/Tabs/Tabs';
 import { UserText } from 'components/Basic/UserText/UserText';
@@ -156,12 +156,15 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
 
             {!!files.length && (
                 <TabsContent headingTextMobile={t('Files')} isActive={selectedTab === filesTabIndex}>
-                    <ul>
+                    <ul className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                         {files.map((file) => (
-                            <li key={file.url}>
-                                <a className="no-underline" href={file.url}>
-                                    {file.anchorText}
-                                    <ArrowSecondaryIcon className="ml-1 rotate-90" />
+                            <li key={file.url} className="">
+                                <a
+                                    className="flex cursor-pointer items-center gap-5 rounded-xl bg-backgroundMore px-5 py-2.5 no-underline"
+                                    href={file.url}
+                                >
+                                    <DownloadIcon className="size-6" />
+                                    <h4>{file.anchorText}</h4>
                                 </a>
                             </li>
                         ))}