Adding Initial Design (#1)

* adding raleway font * clean up providers component * clean up footer * adding components * adding design to homepage * adjust text color based on completion * Adding QR codes to desktop (#2) * adding app store qr codes * adding text to app store icons
BuidlGuidl · Jan 10, 2025 · 0a63308 · 0a63308
1 parent 5c57ca8
commit 0a63308
Show file tree

Hide file tree

Showing 14 changed files with 343 additions and 159 deletions.
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,21 +1,24 @@
+import { Raleway } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
-import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
+const raleway = Raleway({
+  subsets: ["latin"],
+  variable: "--font-raleway",
+});
+
 export const metadata = getMetadata({
   title: "Start Ethereum",
   description: "Start your journey into the world of Ethereum",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning>
-      <body>
-        <ThemeProvider enableSystem>
-          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
-        </ThemeProvider>
+    <html suppressHydrationWarning className={`${raleway.variable}`}>
+      <body className="antialiased">
+        <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
       </body>
     </html>
   );

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
diff --git a/packages/nextjs/components/Container.tsx b/packages/nextjs/components/Container.tsx
@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+
+export function Container({ className, children }: { className?: string; children: React.ReactNode }) {
+  return (
+    <div className={clsx(className, "px-6 lg:px-8")}>
+      <div className="mx-auto max-w-7xl">{children}</div>
+    </div>
+  );
+}
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -1,48 +1,12 @@
-import React from "react";
-import Link from "next/link";
-import { hardhat } from "viem/chains";
-import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
-import { Faucet } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
-  const { targetNetwork } = useTargetNetwork();
-  const isLocalNetwork = targetNetwork.id === hardhat.id;
-
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
-      <div>
-        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
-          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
-            {nativeCurrencyPrice > 0 && (
-              <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
-                  <CurrencyDollarIcon className="h-4 w-4" />
-                  <span>{nativeCurrencyPrice.toFixed(2)}</span>
-                </div>
-              </div>
-            )}
-            {isLocalNetwork && (
-              <>
-                <Faucet />
-                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
-                  <MagnifyingGlassIcon className="h-4 w-4" />
-                  <span>Block Explorer</span>
-                </Link>
-              </>
-            )}
-          </div>
-          <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
-        </div>
-      </div>
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">

diff --git a/packages/nextjs/components/Gradient.tsx b/packages/nextjs/components/Gradient.tsx
@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+
+export function Gradient({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      className={clsx(className, "")}
+      style={{
+        background:
+          "radial-gradient(at 53% 78%, rgba(161, 252, 247, 0.4) 0px, transparent 50%), radial-gradient(at 71% 91%, rgba(131, 169, 247, 0.4) 0px, transparent 50%), radial-gradient(at 31% 91%, rgba(205, 174, 251, 0.4) 0px, transparent 50%)",
+      }}
+    />
+  );
+}
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -1,14 +1,11 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
-import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { WagmiProvider } from "wagmi";
 import { Footer } from "~~/components/Footer";
-import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { useUserRegistered } from "~~/hooks/scaffold-eth/useUserRegistered";
@@ -20,9 +17,8 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <div className={`flex flex-col min-h-screen `}>
-        <Header />
-        <main className="relative flex flex-col flex-1">{children}</main>
+      <div>
+        <main>{children}</main>
         <Footer />
       </div>
       <Toaster />
@@ -39,22 +35,11 @@ export const queryClient = new QueryClient({
 });
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
-  const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark";
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <ProgressBar height="3px" color="#2299dd" />
-        <RainbowKitProvider
-          avatar={BlockieAvatar}
-          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
-        >
+        <RainbowKitProvider avatar={BlockieAvatar}>
           <ScaffoldEthApp>{children}</ScaffoldEthApp>
         </RainbowKitProvider>
       </QueryClientProvider>

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

diff --git a/packages/nextjs/public/logo-apple-apps.svg b/packages/nextjs/public/logo-apple-apps.svg
diff --git a/packages/nextjs/public/logo-google-apps.svg b/packages/nextjs/public/logo-google-apps.svg
diff --git a/packages/nextjs/public/phone-mock.png b/packages/nextjs/public/phone-mock.png