ui fixes

- fixed the arrow_icon's SSR issue (added wait till mount) - removed hover effect from non-clickable card section - commented out the header wallet info (redundant) - fixed footer visibility issue for local (hardhat) layout as well
BuidlGuidl · Sep 22, 2024 · 72e13ed · 72e13ed
1 parent 355b4fe
commit 72e13ed
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 25 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -72,21 +72,17 @@ const Home: NextPage = () => {
           <p className="text-lg md:text-xl text-center lg:text-2xl xl:text-3xl">
             Get started by taking a look at your batch GitHub repository.
           </p>
+        </div>
 
-          <div className="flex justify-center items-center">
-            {checkedInCounter === undefined && !error ? (
-              <div className="w-64 h-8 bg-st_gray/20 animate-pulse rounded-lg"></div>
-            ) : checkedInCounter ? (
-              <p className="flex font-semibold gap-2 justify-center">
-                <span className="">Checked in builders count:</span>
-                <span>{checkedInCounter.toString()}</span>
-              </p>
-            ) : (
-              <p className="flex gap-2 justify-center">
-                <span className="font-bold">An error occurred, check your console for more information 👀</span>
-              </p>
-            )}
-          </div>
+        <div className="flex justify-center items-center">
+          {checkedInCounter === undefined && !error ? (
+            <div className="w-64 h-8 bg-st_gray/20 animate-pulse rounded-lg"></div>
+          ) : checkedInCounter ? (
+            <p className="flex border border-zinc-500 p-4 rounded-full font-semibold gap-2 justify-center">
+              <span className="">Checked-in Count:</span>
+              <span>{checkedInCounter.toString()}</span>
+            </p>
+          ) : null}
         </div>
 
         {/* Member Status */}

diff --git a/packages/nextjs/components/Arrow_Icon.tsx b/packages/nextjs/components/Arrow_Icon.tsx
@@ -1,19 +1,25 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 
 const Arrow_Icon = () => {
   const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
 
   return (
     <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
-        fill={`
-                    ${theme === "light" ? "#000000" : "#868686"}
-                  `}
+        fill={`${theme === "light" ? "#000000" : "#868686"}`}
       />
     </svg>
   );

diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -10,9 +10,7 @@ type Props = {
 const Card = ({ mainText, footerText, footerLink }: Props) => {
   return (
     <div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
-      <div className="w-full flex items-center justify-center flex-grow-[5] dark:hover:bg-zinc-800 px-4 hover:bg-zinc-300 transition-all rounded-t-xl">
-        {mainText}
-      </div>
+      <div className="w-full flex items-center justify-center flex-grow-[5] px-4 rounded-t-xl">{mainText}</div>
 
       <hr className="border-t border-zinc-500" />
 

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -23,7 +23,7 @@ export const Footer = () => {
     <div className="bg-zinc-100 dark:bg-zinc-950">
       <div className="">
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-10 md:bottom-0 left-0 pointer-events-none">
-          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
+          <div className="flex flex-col 2xl:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
                 <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
@@ -42,7 +42,7 @@ export const Footer = () => {
               </>
             )}
           </div>
-          <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
+          <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end ms-2xl:self-auto" : ""}`} />
         </div>
       </div>
       <div className="max-w-lg lg:max-w-2xl mx-auto text-st_gray">

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 // @refresh reset
+// import { BatchDetails } from "./BatchDetails";
 import { Balance } from "../Balance";
 import { AddressInfoDropdown } from "./AddressInfoDropdown";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
-import { BatchDetails } from "./BatchDetails";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Address } from "viem";
@@ -44,9 +44,10 @@ export const RainbowKitCustomConnectButton = () => {
 
               return (
                 <>
-                  <div className="flex flex-col items-center mr-1">
+                  {/* Commenting out old walletinfo in the header */}
+                  {/* <div className="flex flex-col items-center mr-1">
                     <BatchDetails address={account.address as Address} />
-                  </div>
+                  </div> */}
                   <div className="flex flex-col items-center mr-1">
                     <Balance address={account.address as Address} className="min-h-0 h-auto" />
                     <span className="text-xs" style={{ color: networkColor }}>