Design tweaks (#3)

* Replaced logo and adjusted margins/ paddings * Fix mobile issues --------- Co-authored-by: Carlos Sánchez <[email protected]>
BuidlGuidl · Nov 5, 2024 · 30d3bce · 30d3bce
1 parent 8ca0d59
commit 30d3bce
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 149 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -28,9 +28,9 @@ export const Header = () => (
     </Head>
     <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">
-        <div className="bgmedia-logo w-36">
+        <div className="bgmedia-logo">
           <Link href="/">
-            <Image alt="bg media logo" src="/images/logo_bgmedia.svg" width="120" height="120" />
+            <Image alt="bg media logo" src="/assets/bg-media-2.png" width="180" height="180" />
           </Link>
         </div>
       </div>

diff --git a/packages/nextjs/components/StreamContractInfo.tsx b/packages/nextjs/components/StreamContractInfo.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { BigNumber } from "ethers";
 import { useAccount } from "wagmi";
-import { BanknotesIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { BanknotesIcon } from "@heroicons/react/24/outline";
 import { Address, Balance } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
@@ -26,23 +26,16 @@ export const StreamContractInfo = () => {
 
   return (
     <>
-      <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"
-            >
-              <QuestionMarkCircleIcon className="h-5 w-5 inline-block ml-2" />
-            </span>
-          </p>
-          <div className="flex gap-2 items-baseline">
+      <div className="mt-16 text-base">
+        <div className="p-6 pb-10 bg-[#fff] text-[#000] rounded-tl-lg rounded-tr-lg flex flex-col items-center">
+          <p>Stream Contract</p>
+          <div className="flex flex-col sm:flex-row gap-2 items-center sm:items-baseline">
             <div className="flex flex-col items-center">
               <Address address={streamContract?.address} />
-              <span className="text-xs text-[#323aa8]">Mainnet</span>
-            </div>{" "}
-            /
+              <span className="text-sm text-[#323aa8]">Mainnet</span>
+            </div>
+            {""}
+            <span className="hidden sm:block">/</span>
             <Balance address={streamContract?.address} className="text-3xl" />
           </div>
           {address && amIAStreamdBuilder && (
@@ -57,8 +50,8 @@ export const StreamContractInfo = () => {
             </div>
           )}
         </div>
-        <div className="bg-[#FFFFFFcc] text-[#000] text-xs p-6 mt-0 rounded-bl-lg rounded-br-lg">
-          <p className="">Owner</p>
+        <div className="bg-[#FFFFFFcc] text-[#000] p-6 pb-12 rounded-bl-lg rounded-br-lg flex flex-col items-center">
+          <p className="mb-3">Owner</p>
           <Address address={owner} />
         </div>
       </div>

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

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

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-3xl font-[900] mb-8">Members</h1>
+        <h1 className="text-3xl font-[900] mb-6">Members</h1>
         <div className="mb-16">
-          <p className="mt-0 mb-10 text-xl font-[100]">
+          <p className="mt-0 mb-14 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,15 +59,15 @@ const Members: NextPage = () => {
               <div className="text-lg loading-dots">Loading...</div>
             </div>
           ) : (
-            <div className="flex flex-col gap-12">
+            <div className="flex flex-col gap-12 text-base">
               {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" key={builderData.builderAddress}>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <div className="md:w-1/2 flex">
                         <label
                           htmlFor="withdraw-events-modal"

diff --git a/packages/nextjs/public/assets/bg-media-2.png b/packages/nextjs/public/assets/bg-media-2.png