adjust styles

coinbase · Oct 17, 2024 · af30538 · af30538
1 parent 9c79afa
commit af30538
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 25 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -1,7 +1,7 @@
 export function Banner() {
   return (
-    <div className="fixed top-0 left-0 flex h-14 xs:h-12 w-full flex-wrap items-center justify-center bg-black text-white">
-      <div className="flex h-full flex-wrap items-center justify-center text-center text-sm xs:text-lg">
+    <div className="ock-bg-default-reverse ock-text-inverse fixed top-0 left-0 flex h-14 xs:h-11 w-full flex-wrap items-center justify-center">
+      <div className="flex h-full flex-wrap items-center justify-center text-center text-sm ">
         This is a demo site. These products are not for sale.
       </div>
     </div>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,3 +1,4 @@
+import { cn, pressable } from '@coinbase/onchainkit/theme';
 import { useCallback, useState } from 'react';
 import {
   GITHUB_LINK,
@@ -12,14 +13,18 @@ import type { NavbarLinkReact } from 'src/types';
 
 function NavbarLink({ link, label }: NavbarLinkReact) {
   return (
-    <li className="flex cursor-pointer items-center gap-2">
+    <li className="flex cursor-pointer items-center justify-center gap-2">
       <a
         href={link}
-        className="flex items-center text-gray-600 text-xs hover:text-gray-900"
+        className="ock-text-foreground flex items-center text-xs"
+        target="_blank"
+        rel="noreferrer"
       >
         {label}
+        <span className="pl-1">
+          <ExternalLinkSvg />
+        </span>
       </a>
-      <ExternalLinkSvg />
     </li>
   );
 }
@@ -33,11 +38,11 @@ export default function Navbar() {
 
   return (
     <header className="-mx-[50vw] fixed top-14 xs:top-12 right-1/2 left-1/2 h-11 w-screen border-gray-200 border-b bg-[white]">
-      <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-5xl px-4 py-3 lg:px-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <OnchainKitShopSvg />
-            <span className="rounded-sm bg-gray-100 px-2 py-0.5 font-regular text-gray-700 text-xs">
+            <span className="ock-bg-alternate ock-text-foreground rounded-sm px-2 py-0.5 font-regular text-xs">
               Template
             </span>
           </div>
@@ -49,14 +54,18 @@ export default function Navbar() {
               <NavbarLink link={TWITTER_LINK} label="X" />
             </ul>
           </nav>
-          <button type="button" className="md:hidden" onClick={toggleMenu}>
+          <button
+            type="button"
+            className={cn('md:hidden', pressable.default)}
+            onClick={toggleMenu}
+          >
             <MenuSvg />
           </button>
         </div>
       </div>
       {isMenuOpen && (
         <div className="bg-[white] md:hidden">
-          <ul className="space-y-2 px-4 py-2">
+          <ul className="flex flex-col items-start space-y-2 px-4 py-2">
             <NavbarLink link={TEMPLATE_LINK} label="FORK THIS TEMPLATE" />
             <NavbarLink link={ONCHAINKIT_LINK} label="ONCHAINKIT" />
             <NavbarLink link={GITHUB_LINK} label="GITHUB" />

diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx
@@ -8,10 +8,10 @@ import OnchainStoreSummary from './OnchainStoreSummary';
 export default function OnchainStore() {
   return (
     <OnchainStoreProvider>
-      <div className="flex h-full max-h-screen max-w-full flex-col px-1 font-sansMono">
+      <div className="flex h-full max-h-screen max-w-full flex-col font-sansMono">
         <Banner />
         <Navbar />
-        <main className="mx-auto flex max-w-7xl grow flex-col pt-24 pb-10">
+        <main className="mx-auto flex max-w-5xl grow flex-col pt-20 pb-10">
           <div className="flex grow flex-col pb-10 md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />

diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx
@@ -44,12 +44,12 @@ export default function OnchainStoreCart() {
 
   return (
     <div className="-mx-[50vw] fixed right-1/2 bottom-0 left-1/2 w-screen border-gray-200 border-t bg-[white]">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-0">
-        <div className="flex flex-col items-start justify-between py-4 md:flex-row md:items-center">
-          <span className="mb-2 text-gray-500 text-xs md:mb-0 md:w-1/3 lg:pl-8">
+      <div className="mx-auto max-w-5xl ">
+        <div className="flex flex-col items-start justify-between px-4 py-4 md:flex-row md:items-center lg:px-8 lg:pr-0">
+          <span className="mb-2 hidden text-xs sm:flex md:mb-0 md:w-1/3">
             Built with OnchainKit
           </span>
-          <div className="flex w-full items-center justify-between pr-8 md:w-2/3 md:pl-5 xl:pr-0">
+          <div className="flex w-full items-center justify-between md:w-2/3 ">
             <h2 className="font-bold text-lg md:w-11/12 ">
               TOTAL {totalSum.toFixed(2)} USDC
             </h2>
@@ -58,6 +58,7 @@ export default function OnchainStoreCart() {
                 <PayButton
                   coinbaseBranded={true}
                   text="Pay with Crypto"
+                  className="mt-0"
                   // NOTE: comment back in to disable $0 amount in real app
                   // disabled={!totalSum}
                 />

diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx
@@ -4,7 +4,7 @@ import QuantityInput from './QuantityInput';
 
 export default function OnchainStoreItem({ id, name, price, image }: Product) {
   return (
-    <div className="mx-auto flex max-w-[300px] flex-col sm:mx-0">
+    <div className="mx-auto flex h-full w-full flex-col border-r border-b p-4 sm:mx-0 lg:p-6">
       <div className="mb-1 flex items-start justify-between">
         <h2 className="font-regular text-xs">{name}</h2>
         <p className="font-regular text-xs">{price.toFixed(2)} USDC</p>

diff --git a/src/components/OnchainStoreItems.tsx b/src/components/OnchainStoreItems.tsx
@@ -5,8 +5,8 @@ export default function OnchainStoreItems() {
   const { products } = useOnchainStoreContext();
 
   return (
-    <div className="scroll mb-16 p-8 md:mb-0">
-      <div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
+    <div className=" scroll mb-16 grow md:mb-0 ">
+      <div className="grid grid-cols-1 sm:grid-cols-2 ">
         {products?.map((item) => (
           <OnchainStoreItem {...item} key={item.id} />
         ))}

diff --git a/src/components/OnchainStoreSummary.tsx b/src/components/OnchainStoreSummary.tsx
@@ -1,6 +1,6 @@
 export default function OnchainStoreSummary() {
   return (
-    <div className="mb-8 flex flex-col justify-center border-gray-200 border-r p-8 md:mb-0 md:w-1/3 lg:border-r">
+    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-10 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8">
       <div className="space-y-4 text-left">
         <h2
           className="font-bold text-3xl leading-tight"

diff --git a/src/svg/ExternalLinkSvg.tsx b/src/svg/ExternalLinkSvg.tsx
@@ -1,14 +1,21 @@
 export function ExternalLinkSvg() {
   return (
     <svg
+      width="12"
+      height="12"
+      viewBox="0 0 20 20"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      className="pb-1 md:pb-0"
     >
       <title>ExternalLinkSvg</title>
-      <path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" />
+      <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="black" />
+      <path
+        d="M6 14L14 6M14 6H8M14 6V12"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -3,10 +3,16 @@ import type { Config } from 'tailwindcss';
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
+    screens: {
+      xs: '510px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
     container: {
       center: true,
       screens: {
-        xs: '510px',
         sm: '640px',
         md: '768px',
         lg: '1024px',