Footer updates and some styles

components/common/Avatar/Avatar.tsx

@@ -14,7 +14,7 @@ const Avatar: FC<Props> = ({}) => {
     <div
       ref={ref}
       style={{ backgroundImage: userAvatar }}
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition-colors ease-linear"
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>

components/common/Footer/Footer.module.css

@@ -1,3 +1,7 @@
+.root {
+  @apply border-t border-accent-2;
+}
+
 .link {
   & > svg {
     @apply transform duration-75 ease-linear;

components/common/Footer/Footer.tsx

@@ -15,22 +15,21 @@ interface Props {
   pages?: Page[]
 }
 
-const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
 const links = [
   {
     name: 'Home',
-    href: '/',
+    url: '/',
   },
 ]
 
 const Footer: FC<Props> = ({ className, pages }) => {
-  const { sitePages, legalPages } = usePages(pages)
+  const { sitePages } = usePages(pages)
-  const rootClassName = cn(className)
+  const rootClassName = cn(s.root, className)
 
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-6 text-primary bg-primary transition-colors duration-150">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -41,47 +40,25 @@ const Footer: FC<Props> = ({ className, pages }) => {
               </a>
             </Link>
           </div>
-          <div className="col-span-1 lg:col-span-2">
+          <div className="col-span-1 lg:col-span-8">
-            <ul className="flex flex-initial flex-col md:flex-1">
+            <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
-              {links.map(({ href, name }) => (
+              {[...links, ...sitePages].map((page) => (
-                <li className="py-3 md:py-0 md:pb-4" key={href}>
+                <span key={page.url} className="py-3 md:py-0 md:pb-4">
-                  <Link href={href}>
-                    <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
-                      {name}
-                    </a>
-                  </Link>
-                </li>
-              ))}
-              {sitePages.map((page) => (
-                <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
+                    <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
-                </li>
+                </span>
               ))}
-            </ul>
             </div>
-          <div className="col-span-1 lg:col-span-2">
-            <ul className="flex flex-initial flex-col md:flex-1">
-              {legalPages.map((page) => (
-                <li key={page.url} className="py-3 md:py-0 md:pb-4">
-                  <Link href={page.url!}>
-                    <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
-                      {page.name}
-                    </a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
           </div>
-          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+          <div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
               <a
+                className={s.link}
                 aria-label="Github Repository"
                 href="https://github.com/vercel/commerce"
-                className={s.link}
               >
                 <Github />
               </a>
@@ -117,34 +94,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
 function usePages(pages?: Page[]) {
   const { locale } = useRouter()
   const sitePages: Page[] = []
-  const legalPages: Page[] = []
 
   if (pages) {
     pages.forEach((page) => {
       const slug = page.url && getSlug(page.url)
-
       if (!slug) return
       if (locale && !slug.startsWith(`${locale}/`)) return
-
-      if (isLegalPage(slug, locale)) {
-        legalPages.push(page)
-      } else {
       sitePages.push(page)
-      }
     })
   }
 
   return {
     sitePages: sitePages.sort(bySortOrder),
-    legalPages: legalPages.sort(bySortOrder),
   }
 }
 
-const isLegalPage = (slug: string, locale?: string) =>
-  locale
-    ? LEGAL_PAGES.some((p) => `${locale}/${p}` === slug)
-    : LEGAL_PAGES.includes(slug)
-
 // Sort pages by the sort order assigned in the BC dashboard
 function bySortOrder(a: Page, b: Page) {
   return (a.sort_order ?? 0) - (b.sort_order ?? 0)