Styling Fixes

components/common/Layout/Layout.tsx

@@ -1,18 +1,18 @@
-import React, { FC } from 'react'
-import { useRouter } from 'next/router'
-import dynamic from 'next/dynamic'
 import cn from 'classnames'
-import type { Page } from '@commerce/types/page'
-import type { Category } from '@commerce/types/site'
+import React, { FC } from 'react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import { CommerceProvider } from '@framework'
-import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { useUI } from '@components/ui/context'
+import type { Page } from '@commerce/types/page'
 import { Navbar, Footer } from '@components/common'
-import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import CartSidebarView from '@components/cart/CartSidebarView'
-import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
-import PaymentMethodView from '@components/checkout/PaymentMethodView'
+import type { Category } from '@commerce/types/site'
 import ShippingView from '@components/checkout/ShippingView'
+import CartSidebarView from '@components/cart/CartSidebarView'
+import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
+import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
+import PaymentMethodView from '@components/checkout/PaymentMethodView'
+import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import s from './Layout.module.css'

components/common/Navbar/Navbar.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import Link from 'next/link'
+import s from './Navbar.module.css'
+import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
-import NavbarRoot from './NavbarRoot'
-import s from './Navbar.module.css'
 
 interface Link {
   href: string
@@ -34,16 +34,13 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             ))}
           </nav>
         </div>
-
         <div className="justify-center flex-1 hidden lg:flex">
           <Searchbar />
         </div>
-
         <div className="flex items-center justify-end flex-1 space-x-8">
           <UserNav />
         </div>
       </div>
-
       <div className="flex pb-4 lg:px-6 lg:hidden">
         <Searchbar id="mobile-search" />
       </div>

components/product/ProductSlider/ProductSlider.module.css

@@ -44,8 +44,9 @@
 
 .thumb {
   @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
-  inline-block cursor-pointer;
+  inline-block cursor-pointer h-full;
   width: 125px;
+  width: calc(100% / 3);
 }
 
 .thumb.selected {
@@ -73,18 +74,7 @@
   .album {
     height: 235px;
   }
-
-  .slider {
-    max-height: 700px;
-  }
-
   .thumb {
     width: 235px;
   }
 }
-
-@screen lg {
-  .slider {
-    max-height: 750px;
-  }
-}

components/product/ProductView/ProductView.module.css

@@ -77,4 +77,8 @@
   .sidebar {
     @apply col-span-4 py-12;
   }
+
+  .imageContainer {
+    height: 600px;
+  }
 }

components/product/ProductView/ProductView.tsx

@@ -10,7 +10,6 @@ import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
 import { useAddItem } from '@framework/cart'
 import Collapse from '@components/ui/Collapse'
-import Skeleton from '@components/ui/Skeleton'
 import ProductCard from '@components/product/ProductCard'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
@@ -111,7 +110,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             <WishlistButton
               className={s.wishlistButton}
               productId={product.id}
-              variant={product.variants[0]! as any}
+              variant={product.variants[0]}
             />
           )}
         </div>
@@ -186,15 +185,15 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
         <div className="grid grid-cols-4 py-3 gap-10">
           {relatedProducts.map((p) => (
             <div
-              className="animated fadeIn bg-accent-0 border border-accent-2"
               key={p.path}
+              className="animated fadeIn bg-accent-0 border border-accent-2"
             >
               <ProductCard
+                noNameTag
+                product={p}
                 key={p.path}
                 variant="simple"
-                className="animated fadeIn"
-                product={p}
-                noNameTag
+                className="animated fadeIn w-12"
                 imgProps={{
                   width: 275,
                   height: 275,
@@ -202,12 +201,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
               />
             </div>
           ))}
-          {/* {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton
-              key={i}
-              className="w-full animated fadeIn bg-accent-0 border border-accent-3"
-            />
-          ))} */}
         </div>
       </section>
     </Container>

components/ui/context.tsx

@@ -6,8 +6,8 @@ export interface State {
   displayDropdown: boolean
   displayModal: boolean
   displayToast: boolean
-  modalView: string
   sidebarView: string
+  modalView: string
   toastText: string
   userAvatar: string
 }