Design changes (#2)

BuidlGuidl · Oct 29, 2024 · 8ca0d59 · 8ca0d59
1 parent 856fb93
commit 8ca0d59
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -168,3 +168,7 @@ yarn vercel:yolo
 We have github workflow setup checkout `.github/workflows/lint.yaml` which runs types and lint error checks every time code is **pushed** to `main` branch or **pull request** is made to `main` branch
 
 To disable it, **delete `.github` directory**
+
+
+### Font attribution:
+The "Buidl Guidl Media" phrase and the word "Media" in the BG Media logo lock-up are expressed in the font 'Obviously' by [OHNO Type Co.](https://ohnotype.co/fonts/obviously)
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { Menu } from "~~/components/Menu";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
@@ -25,12 +26,13 @@ export const Header = () => (
       <meta property="og:image" content="https://media.buidlguidl.com/thumbnail.png" />
       <meta property="twitter:image" content="https://media.buidlguidl.com/thumbnail.png" />
     </Head>
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 p-4 items-start">
+    <div className="sticky lg:static top-0 navbar mb-6 bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 p-4 items-start">
       <div className="flex-col items-start">
-        <p className="m-0 text-xl md:text-3xl font-bold text-secondary !leading-7">
-          <Link href="/">BG Media</Link>
-        </p>
-        <p className="m-0 text-secondary leading-5 opacity-75">BuidlGuidl Media</p>
+        <div className="bgmedia-logo w-36">
+          <Link href="/">
+            <Image alt="bg media logo" src="/images/logo_bgmedia.svg" width="120" height="120" />
+          </Link>
+        </div>
       </div>
       <div className="navbar-end flex-grow">
         <RainbowKitCustomConnectButton />

diff --git a/packages/nextjs/components/StreamContractInfo.tsx b/packages/nextjs/components/StreamContractInfo.tsx
@@ -26,39 +26,41 @@ export const StreamContractInfo = () => {
 
   return (
     <>
-      <div className="mt-16">
-        <p className="font-bold mb-2 text-secondary">
-          Stream Contract
-          <span
-            className="tooltip text-white font-normal"
-            data-tip="All streams and contributions are handled by a contract on Mainnet"
-          >
-            <QuestionMarkCircleIcon className="h-5 w-5 inline-block ml-2" />
-          </span>
-        </p>
-        <div className="flex gap-2 items-baseline">
-          <div className="flex flex-col items-center">
-            <Address address={streamContract?.address} />
-            <span className="text-xs text-[#323aa8]">Mainnet</span>
-          </div>{" "}
-          /
-          <Balance address={streamContract?.address} className="text-3xl" />
-        </div>
-        {address && amIAStreamdBuilder && (
-          <div className="mt-3">
-            <label
-              htmlFor="withdraw-modal"
-              className="btn btn-primary btn-sm px-2 rounded-full font-normal space-x-2 normal-case"
+      <div className="mt-16 text-xs">
+        <div className="p-6 pb-12 bg-[#fff] text-[#000] rounded-tl-lg rounded-tr-lg">
+          <p className="">
+            Stream Contract
+            <span
+              className="tooltip text-white font-normal"
+              data-tip="All streams and contributions are handled by a contract on Mainnet"
             >
-              <BanknotesIcon className="h-4 w-4" />
-              <span>Withdraw</span>
-            </label>
+              <QuestionMarkCircleIcon className="h-5 w-5 inline-block ml-2" />
+            </span>
+          </p>
+          <div className="flex gap-2 items-baseline">
+            <div className="flex flex-col items-center">
+              <Address address={streamContract?.address} />
+              <span className="text-xs text-[#323aa8]">Mainnet</span>
+            </div>{" "}
+            /
+            <Balance address={streamContract?.address} className="text-3xl" />
           </div>
-        )}
-      </div>
-      <div className="mt-8">
-        <p className="font-bold mb-2 text-secondary">Owner</p>
-        <Address address={owner} />
+          {address && amIAStreamdBuilder && (
+            <div className="mt-3">
+              <label
+                htmlFor="withdraw-modal"
+                className="btn btn-primary btn-sm px-2 rounded-full font-normal space-x-2 normal-case"
+              >
+                <BanknotesIcon className="h-4 w-4" />
+                <span>Withdraw</span>
+              </label>
+            </div>
+          )}
+        </div>
+        <div className="bg-[#FFFFFFcc] text-[#000] text-xs p-6 mt-0 rounded-bl-lg rounded-br-lg">
+          <p className="">Owner</p>
+          <Address address={owner} />
+        </div>
       </div>
     </>
   );

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -85,17 +85,14 @@ export const Address = ({ address, disableAddressLink, format }: TAddressProps)
         )}
       </div>
       {disableAddressLink ? (
-        <span className="ml-1.5 text-lg font-normal">{displayAddress}</span>
+        <span className="ml-1.5 font-normal">{displayAddress}</span>
       ) : (
-        <a className="ml-1.5 text-lg font-normal" target="_blank" href={explorerLink} rel="noopener noreferrer">
+        <a className="ml-1.5 font-normal" target="_blank" href={explorerLink} rel="noopener noreferrer">
           {displayAddress}
         </a>
       )}
       {addressCopied ? (
-        <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-          aria-hidden="true"
-        />
+        <CheckCircleIcon className="ml-1.5 font-normal h-4 w-4 cursor-pointer" aria-hidden="true" />
       ) : (
         <CopyToClipboard
           text={address}
@@ -106,10 +103,7 @@ export const Address = ({ address, disableAddressLink, format }: TAddressProps)
             }, 800);
           }}
         >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
+          <DocumentDuplicateIcon className="ml-1.5 font-normal h-4 w-4 cursor-pointer" aria-hidden="true" />
         </CopyToClipboard>
       )}
     </div>

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -29,7 +29,7 @@ export const RainbowKitCustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                  <button className="btn btn-primary btn-xl" onClick={openConnectModal} type="button">
                     Connect Wallet
                   </button>
                 );

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import type { AppProps } from "next/app";
-import { Share_Tech_Mono } from "next/font/google";
+import { Space_Grotesk } from "next/font/google";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import NextNProgress from "nextjs-progressbar";
@@ -16,7 +16,7 @@ import { wagmiClient } from "~~/services/web3/wagmiClient";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
 
-const shareTechMono = Share_Tech_Mono({ subsets: ["latin"], weight: "400" });
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
 const urqlClient = new Client({
   url: "https://bg-ponder-indexer-production.up.railway.app/",
@@ -35,10 +35,10 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
 
   return (
     <WagmiConfig client={wagmiClient}>
-      <NextNProgress color="#c913ff" />
+      <NextNProgress color="#ffffff" />
       <URQLProvider value={urqlClient}>
         <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar}>
-          <div className={`flex flex-col min-h-screen ${shareTechMono.className}`}>
+          <div className={`flex flex-col min-h-screen ${spaceGrotesk.className}`}>
             <Header />
             <main className="relative flex flex-col flex-1">
               <Component {...pageProps} />

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -5,16 +5,16 @@ import { StreamContractInfo } from "~~/components/StreamContractInfo";
 const Home: NextPage = () => {
   return (
     <>
-      <div className="max-w-3xl px-4 py-8">
-        <h1 className="text-4xl font-bold mb-8 text-primary-content bg-primary inline-block p-2">Welcome</h1>
+      <div className="max-w-6xl space-y-12 px-4 py-12">
+        <h1 className="font-[900] text-xl">Welcome</h1>
         <div>
-          <p className="mt-0">
+          <p className="font-[100] mt-0 text-4xl md:text-5xl ">
             Funding high leverage BuidlGuidl members for their designs, social media contributions, and other media
             related work.
           </p>
-          <p>Made possible by the BuidlGuidl!</p>
+          <p className="text-xs">Made possible by the BuidlGuidl!</p>
         </div>
-        <div className="mb-10">
+        <div className="mb-10 max-w-xl">
           <StreamContractInfo />
         </div>
       </div>

diff --git a/packages/nextjs/pages/members.tsx b/packages/nextjs/pages/members.tsx
@@ -47,9 +47,9 @@ const Members: NextPage = () => {
   return (
     <>
       <div className="max-w-3xl px-4 py-8">
-        <h1 className="text-4xl font-bold mb-8 text-primary-content bg-primary inline-block p-2">Members</h1>
+        <h1 className="text-3xl font-[900] mb-8">Members</h1>
         <div className="mb-16">
-          <p className="mt-0 mb-10">
+          <p className="mt-0 mb-10 text-xl font-[100]">
             These are the BG Media active builders and their streams. You can click on any builder to see their detailed
             contributions.
           </p>
@@ -59,34 +59,38 @@ const Members: NextPage = () => {
               <div className="text-lg loading-dots">Loading...</div>
             </div>
           ) : (
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-12">
               {allBuildersData?.map(builderData => {
                 if (builderData.cap.isZero()) return;
                 const cap = ethers.utils.formatEther(builderData.cap || 0);
                 const unlocked = ethers.utils.formatEther(builderData.unlockedAmount || 0);
                 const percentage = Math.floor((parseFloat(unlocked) / parseFloat(cap)) * 100);
                 return (
-                  <div className="flex flex-col md:flex-row gap-2 md:gap-6" key={builderData.builderAddress}>
-                    <div className="flex flex-col md:items-center">
+                  <div className="flex flex-col" key={builderData.builderAddress}>
+                    <div className="flex flex-col">
+                      <div className="md:w-1/2 flex">
+                        <label
+                          htmlFor="withdraw-events-modal"
+                          className="cursor-pointer"
+                          onClick={() => {
+                            setSelectedAddress(builderData.builderAddress);
+                          }}
+                        >
+                          <Address address={builderData.builderAddress} disableAddressLink={true} />
+                        </label>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <progress
+                          className="progress rounded-none h-8 w-full progress-primary text-white"
+                          value={percentage}
+                          max="100"
+                        ></progress>
+
+                        <div>{percentage}%</div>
+                      </div>
                       <div>
                         Ξ {parseFloat(unlocked).toFixed(4)} / {cap}
                       </div>
-                      <progress
-                        className="progress w-56 progress-primary bg-white"
-                        value={percentage}
-                        max="100"
-                      ></progress>
-                    </div>
-                    <div className="md:w-1/2 flex">
-                      <label
-                        htmlFor="withdraw-events-modal"
-                        className="cursor-pointer"
-                        onClick={() => {
-                          setSelectedAddress(builderData.builderAddress);
-                        }}
-                      >
-                        <Address address={builderData.builderAddress} disableAddressLink={true} />
-                      </label>
                     </div>
                   </div>
                 );
@@ -99,11 +103,14 @@ const Members: NextPage = () => {
 
       <input type="checkbox" id="withdraw-modal" className="modal-toggle" />
       <label htmlFor="withdraw-modal" className="modal cursor-pointer">
-        <label className="modal-box relative bg-primary shadow shadow-primary">
+        <label className="modal-box bg-[#FFF] relative">
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
-          <h3 className="text-xl font-bold mb-8">Withdraw from your stream</h3>
-          <label htmlFor="withdraw-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <h3 className="text-base font-bold mb-8">Withdraw from your stream</h3>
+          <label
+            htmlFor="withdraw-modal"
+            className="btn btn-ghost hover:border-base-100 hover:text-base-100 hover:bg-[#00000000] btn-sm btn-circle absolute right-3 top-3"
+          >
             ✕
           </label>
           <div className="space-y-3">
@@ -125,14 +132,17 @@ const Members: NextPage = () => {
       </label>
       <input type="checkbox" id="withdraw-events-modal" className="modal-toggle" />
       <label htmlFor="withdraw-events-modal" className="modal cursor-pointer">
-        <label className="modal-box relative max-w-4xl shadow shadow-primary">
+        <label className="modal-box bg-[#FFF] relative max-w-2xl">
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
-          <h3 className="text-xl font-bold mb-8">
-            <p className="mb-1">Contributions</p>
+          <h3 className="mb-8 text-3xl">
+            <p className="mb-8 font-bold text-base ">Contributions</p>
             <Address address={selectedAddress} />
           </h3>
-          <label htmlFor="withdraw-events-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label
+            htmlFor="withdraw-events-modal"
+            className="btn btn-ghost hover:border-base-100 hover:text-base-100 hover:bg-[#00000000] btn-sm btn-circle absolute right-3 top-3"
+          >
             ✕
           </label>
           <div className="space-y-3">
@@ -143,7 +153,7 @@ const Members: NextPage = () => {
                   <div className="text-lg loading-dots">Loading...</div>
                 </div>
               ) : filteredEvents.length > 0 ? (
-                <div className="flex flex-col">
+                <div className="flex flex-col font-sans text-sm leading-loose">
                   {filteredEvents.map(event => (
                     <div key={event.id} className="flex flex-col">
                       <div>