update styles

coinbase · Oct 17, 2024 · 8110065 · 8110065
1 parent bf5de14
commit 8110065
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/src/app/global.css b/src/app/global.css
@@ -59,3 +59,8 @@ 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/OnchainStore.tsx b/src/components/OnchainStore.tsx
@@ -11,7 +11,7 @@ export default function OnchainStore() {
       <div className="flex h-full max-h-screen max-w-full flex-col font-sansMono">
         <Banner />
         <Navbar />
-        <main className="mx-auto flex max-w-5xl grow flex-col pt-20 pb-10">
+        <main className="mx-auto flex max-w-5xl grow flex-col pt-[5.75rem] pb-10">
           <div className="flex grow flex-col pb-10 md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />

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 h-full w-full flex-col border-r border-b p-4 sm:mx-0 lg:p-6">
+    <div className="store-item mx-auto flex w-full flex-col border-r 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
@@ -6,7 +6,7 @@ export default function OnchainStoreItems() {
 
   return (
     <div className=" scroll mb-16 grow md:mb-0 ">
-      <div className="grid grid-cols-1 sm:grid-cols-2 ">
+      <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,9 @@
+import { GITHUB_LINK, ONCHAINKIT_LINK } from 'src/links';
+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-10 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8">
+    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-8 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8 pb-22 lg:pb-22">
       <div className="space-y-4 text-left">
         <h2
           className="font-bold text-3xl leading-tight"
@@ -24,6 +27,29 @@ export default function OnchainStoreSummary() {
         <p className="text-sm leading-relaxed">
           We're updating the system so it's cheaper and faster.
         </p>
+        <p className="text-sm leading-relaxed font-bold pt-2">
+          BUILD YOUR ONCHAIN STORE
+        </p>
+        <a
+          href={GITHUB_LINK}
+          className="flex items-center cursor-pointer"
+          target="_blank"
+        >
+          <p className="text-sm leading-relaxed">FORK THIS TEMPLATE</p>
+          <span className="pl-1">
+            <ExternalLinkSvg />
+          </span>
+        </a>
+        <a
+          href={ONCHAINKIT_LINK}
+          className="flex items-center cursor-pointer"
+          target="_blank"
+        >
+          <p className="text-sm leading-relaxed">VIEW DOCS</p>
+          <span className="pl-1">
+            <ExternalLinkSvg />
+          </span>
+        </a>
       </div>
     </div>
   );