Merge pull request #9 from coinbase/alissa.crane/qa-3

chore: QA round 3
coinbase · Oct 17, 2024 · 59001e2 · 59001e2
2 parents fcf9ba0 + 83fac51
commit 59001e2
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 47 deletions.
diff --git a/src/app/global.css b/src/app/global.css
@@ -59,8 +59,3 @@ ul {
 a {
   text-decoration: none;
 }
-
-.store-item:nth-child(1),
-.store-item:nth-child(2) {
-  border-bottom: 1px solid #e5e7eb;
-}
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -1,7 +1,7 @@
 export function Banner() {
   return (
-    <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 ">
+    <div className="ock-bg-default-reverse ock-text-inverse fixed top-0 left-0 flex h-10 xs:h-11 w-full flex-wrap items-center justify-center sm:h-13">
+      <div className="flex h-full flex-wrap items-center justify-center text-center text-xs sm: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
@@ -42,9 +42,9 @@ 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-5xl px-3 py-2 lg:px-5">
-        <div className="flex items-center justify-between">
+    <header className="-mx-[50vw] fixed top-11 right-1/2 left-1/2 h-11 w-screen border-gray-200 border-b bg-[white]">
+      <div className="mx-auto flex h-full max-w-5xl items-center px-4 py-2 lg:px-6">
+        <div className="flex w-full items-center justify-between">
           <div className="flex items-center space-x-3">
             <OnchainKitShopSvg />
             <span className="ock-bg-alternate ock-text-foreground rounded-sm px-2 py-0.5 font-regular text-xs">
@@ -55,7 +55,6 @@ export default function Navbar() {
             <ul className="flex space-x-6">
               <NavbarLink link={TEMPLATE_LINK} label="FORK THIS TEMPLATE" />
               <NavbarLink link={ONCHAINKIT_LINK} label="ONCHAINKIT" />
-              <NavbarLink link={GITHUB_LINK} label="GITHUB" />
               <NavbarLink link={TWITTER_LINK} label="X" />
             </ul>
           </nav>

diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx
@@ -45,11 +45,11 @@ 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-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">
+        <div className="flex flex-col items-start justify-between py-4 md:flex-row md:items-center">
+          <span className="mb-2 hidden px-4 text-xs sm:flex md:mb-0 md:w-1/3 lg:px-8">
             Built with OnchainKit
           </span>
-          <div className="flex w-full items-center justify-between md:w-2/3 ">
+          <div className="flex w-full grow flex-col items-center justify-between gap-2 px-4 sm:flex-row sm:gap-0 md:w-auto lg:px-6">
             <h2 className="font-bold text-lg md:w-11/12 ">
               TOTAL {totalSum.toFixed(2)} USDC
             </h2>

diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx
@@ -4,13 +4,21 @@ import QuantityInput from './QuantityInput';
 
 export default function OnchainStoreItem({ id, name, price, image }: Product) {
   return (
-    <div className="store-item mx-auto flex w-full flex-col border-r p-4 sm:mx-0 lg:p-6">
+    <div className="store-item mx-auto flex w-full flex-col 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>
+      </div>
+      <Image
+        src={image}
+        alt="123"
+        width={280}
+        height={280}
+        className="mx-auto"
+      />
+      <div className="flex items-center justify-between">
         <p className="font-regular text-xs">{price.toFixed(2)} USDC</p>
+        <QuantityInput productId={id} />
       </div>
-      <Image src={image} alt="123" width={280} height={280} />
-      <QuantityInput productId={id} />
     </div>
   );
 }
diff --git a/src/components/OnchainStoreSummary.tsx b/src/components/OnchainStoreSummary.tsx
@@ -3,7 +3,7 @@ import { ExternalLinkSvg } from 'src/svg/ExternalLinkSvg';
 
 export default function OnchainStoreSummary() {
   return (
-    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-8 pb-22 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8 lg:pb-22">
+    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-8 pb-22 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-6 lg:pb-22">
       <div className="space-y-4 text-left">
         <h2
           className="font-bold text-3xl leading-tight"
@@ -15,10 +15,6 @@ export default function OnchainStoreSummary() {
         >
           The future of commerce is less fee. More creativity.
         </h2>
-        <p className="mt-4 text-sm leading-relaxed">
-          Frustration over fees and delays are the top reasons why nearly 9 in
-          10 Americans want an updated financial system.
-        </p>
         <p className="text-sm leading-relaxed">
           People and businesses lose tens of billions of dollars in transaction
           fees and countless hours in delays to the current system that they
@@ -27,31 +23,33 @@ export default function OnchainStoreSummary() {
         <p className="text-sm leading-relaxed">
           We're updating the system so it's cheaper and faster.
         </p>
-        <p className="pt-2 font-bold text-sm leading-relaxed">
-          BUILD YOUR ONCHAIN STORE
-        </p>
-        <a
-          href={GITHUB_LINK}
-          className="flex cursor-pointer items-center"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <p className="text-sm leading-relaxed">FORK THIS TEMPLATE</p>
-          <span className="pl-1">
-            <ExternalLinkSvg />
-          </span>
-        </a>
-        <a
-          href={ONCHAINKIT_LINK}
-          className="flex cursor-pointer items-center"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <p className="text-sm leading-relaxed">VIEW DOCS</p>
-          <span className="pl-1">
-            <ExternalLinkSvg />
-          </span>
-        </a>
+        <div className="flex flex-col pt-6">
+          <p className="pt-2 pb-2 font-bold text-sm leading-relaxed">
+            BUILD YOUR ONCHAIN STORE
+          </p>
+          <a
+            href={GITHUB_LINK}
+            className="flex cursor-pointer items-center"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <p className="text-sm leading-relaxed">FORK THIS TEMPLATE</p>
+            <span className="pl-1">
+              <ExternalLinkSvg />
+            </span>
+          </a>
+          <a
+            href={ONCHAINKIT_LINK}
+            className="flex cursor-pointer items-center pt-1"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <p className="text-sm leading-relaxed">VIEW DOCS</p>
+            <span className="pl-1">
+              <ExternalLinkSvg />
+            </span>
+          </a>
+        </div>
       </div>
     </div>
   );