feat: add color themes and textured backgrounds

muhammadaus · Nov 17, 2024 · bea04cb · bea04cb
1 parent 940761d
commit bea04cb
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 50 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import type { NextPage } from "next";
 import { useAccount } from "wagmi";
@@ -28,15 +30,78 @@ const Home: NextPage = () => {
             <Link href="/lend">
               <div className="flex flex-col bg-base-100 px-5 py-5 text-center items-center max-w-xs rounded-3xl">
                 <BanknotesIcon className="h-8 w-8 fill-secondary" /> Lend
+                <p>List an NFT for Rent-to-Own</p>
               </div>
             </Link>
             <Link href="/borrow">
               <div className="flex flex-col bg-base-100 px-5 py-5 text-center items-center max-w-xs rounded-3xl">
                 <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" /> Borrow
+                <p>Seek through available agreements</p>
               </div>
             </Link>
           </div>
         </div>
+        <div className="stats shadow mt-16">
+          <div className="stat">
+            <div className="stat-figure text-primary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block h-8 w-8 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                ></path>
+              </svg>
+            </div>
+            <div className="stat-title">Total Listings</div>
+            <div className="stat-value text-primary">25.6K</div>
+            <div className="stat-desc">21% more than last month</div>
+          </div>
+
+          <div className="stat">
+            <div className="stat-figure text-secondary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block h-8 w-8 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                ></path>
+              </svg>
+            </div>
+            <div className="stat-title">Agreements Started</div>
+            <div className="stat-value text-secondary">2.6K</div>
+            <div className="stat-desc">5% less than last month</div>
+          </div>
+
+          <div className="stat">
+            <div className="stat-figure text-secondary">
+              <div className="avatar online">
+                <div className="w-16 rounded-full">
+                  <Image
+                    width={900}
+                    height={900}
+                    src="https://black-objective-gerbil-643.mypinata.cloud/ipfs/QmV9gunTMKEAgeyG62qXw3T5i2dPsgykS9WctfDFGz7nKJ"
+                    alt="Stock Photo"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="stat-value">86%</div>
+            <div className="stat-title">Payment plans completed</div>
+            <div className="stat-desc text-secondary">31 unpaid remaining</div>
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -13,12 +13,12 @@ import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
-const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+const ScaffoldEthApp = ({ backgroundClass, children }: { backgroundClass: string; children: React.ReactNode }) => {
   useInitializeNativeCurrencyPrice();
 
   return (
     <>
-      <div className="flex flex-col min-h-screen">
+      <div className={`${backgroundClass} flex flex-col min-h-screen`}>
         <Header />
         <main className="relative flex flex-col flex-1">{children}</main>
         <Footer />
@@ -38,8 +38,9 @@ export const queryClient = new QueryClient({
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark";
+  const isDarkMode = resolvedTheme !== "pastel";
   const [mounted, setMounted] = useState(false);
+  const backgroundClass = isDarkMode ? "bg-forest-texture bg-texture" : "bg-pastel-texture bg-texture";
 
   useEffect(() => {
     setMounted(true);
@@ -51,9 +52,9 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
         <ProgressBar height="3px" color="#2299dd" />
         <RainbowKitProvider
           avatar={BlockieAvatar}
-          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
+          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : darkTheme()}
         >
-          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+          <ScaffoldEthApp backgroundClass={backgroundClass}>{children}</ScaffoldEthApp>
         </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

diff --git a/packages/nextjs/public/textures/forest-branches.svg b/packages/nextjs/public/textures/forest-branches.svg
diff --git a/packages/nextjs/public/textures/pastel-leaves.svg b/packages/nextjs/public/textures/pastel-leaves.svg
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -1,79 +1,88 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugin = require("tailwindcss/plugin");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-    "./utils/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require("daisyui")],
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".bg-texture": {
+          backgroundSize: "auto", // Default size
+          backgroundRepeat: "repeat", // Ensure texture repeats
+          backgroundPosition: "top left", // Optional for alignment
+        },
+      });
+    }),
+    require("daisyui"),
+  ],
   darkTheme: "forest",
   darkMode: ["selector", "[data-theme='forest']"],
   // DaisyUI theme colors
   daisyui: {
     themes: [
       {
         pastel: {
-          primary: "#93BBFB",
-          "primary-content": "#212638",
-          secondary: "#DAE8FF",
-          "secondary-content": "#212638",
-          accent: "#93BBFB",
-          "accent-content": "#212638",
-          neutral: "#212638",
-          "neutral-content": "#ffffff",
-          "base-100": "#ffffff",
-          "base-200": "#f4f8ff",
-          "base-300": "#DAE8FF",
-          "base-content": "#212638",
-          info: "#93BBFB",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+          primary: "#F4B183", // Matte light orange (soft terracotta)
+          "primary-content": "#2D2D2D", // Dark gray for contrast
+          secondary: "#F7D7B4", // Muted peach for a secondary tone
+          "secondary-content": "#2D2D2D",
+          accent: "#F3C29B", // Subtle variation of light orange
+          "accent-content": "#2D2D2D",
+          neutral: "#F9E8D8", // Warm matte beige for neutral backgrounds
+          "neutral-content": "#2D2D2D",
+          "base-100": "#FFF9F3", // Light off-white
+          "base-200": "#F9E8D8", // Slightly darker beige
+          "base-300": "#F7D7B4", // Warm peach tone
+          "base-content": "#2D2D2D", // Dark for readable text
+          info: "#F8CBAE", // Muted light orange for informational elements
+          success: "#B7D6A5", // Soft green for success
+          warning: "#E7C86B", // Warm matte gold for warnings
+          error: "#D79B8B", // Muted matte coral for errors
 
-          "--rounded-btn": "9999rem",
+          "--rounded-btn": "0.5rem", // Subtle rounding for buttons
 
           ".tooltip": {
-            "--tooltip-tail": "6px",
+            "--tooltip-tail": "4px",
           },
           ".link": {
             textUnderlineOffset: "2px",
           },
           ".link:hover": {
-            opacity: "80%",
+            opacity: "85%",
           },
         },
       },
       {
         forest: {
-          primary: "#212638",
-          "primary-content": "#F9FBFF",
-          secondary: "#323f61",
-          "secondary-content": "#F9FBFF",
-          accent: "#4969A6",
-          "accent-content": "#F9FBFF",
-          neutral: "#F9FBFF",
-          "neutral-content": "#385183",
-          "base-100": "#385183",
-          "base-200": "#2A3655",
-          "base-300": "#212638",
-          "base-content": "#F9FBFF",
-          info: "#385183",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+          primary: "#4A5A50", // Matte dark green (deep olive green)
+          "primary-content": "#E7EAE5", // Light for contrast
+          secondary: "#6C7A6F", // Muted moss green
+          "secondary-content": "#E7EAE5",
+          accent: "#5D7168", // Subtle mid-tone green
+          "accent-content": "#E7EAE5",
+          neutral: "#39473E", // Darker matte green-gray for neutral backgrounds
+          "neutral-content": "#D7E0D9",
+          "base-100": "#39473E", // Dark matte olive
+          "base-200": "#2E3B34", // Slightly darker tone
+          "base-300": "#1E2722", // Very dark green-gray
+          "base-content": "#D7E0D9", // Light green-gray for text
+          info: "#5D7168", // Muted dark green for informational elements
+          success: "#81A784", // Subtle moss green for success
+          warning: "#C9B574", // Matte gold-green for warnings
+          error: "#A76D66", // Muted brick-red for errors
 
-          "--rounded-btn": "9999rem",
+          "--rounded-btn": "0.5rem", // Subtle rounding for buttons
 
           ".tooltip": {
-            "--tooltip-tail": "6px",
-            "--tooltip-color": "oklch(var(--p))",
+            "--tooltip-tail": "4px",
           },
           ".link": {
             textUnderlineOffset: "2px",
           },
           ".link:hover": {
-            opacity: "80%",
+            opacity: "85%",
           },
         },
       },
@@ -101,6 +110,10 @@ module.exports = {
           900: "#18181b",
         },
       },
+      backgroundImage: {
+        "forest-texture": "url('/textures/forest-branches.svg')",
+        "pastel-texture": "url('/textures/pastel-leaves.svg')",
+      },
     },
   },
 };