less colors, fix moblie

piotrostr · Sep 7, 2024 · 2ebad88 · 2ebad88
1 parent 7387829
commit 2ebad88
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 52 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
+import { SwitchTheme } from "~~/components/SwitchTheme";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 
 /**
@@ -20,6 +21,9 @@ export const Header = () => {
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
+        <div className="ml-2">
+          <SwitchTheme />
+        </div>
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -11,11 +11,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   const isDarkMode = resolvedTheme === "dark";
 
   const handleToggle = () => {
-    if (isDarkMode) {
-      setTheme("light");
-      return;
-    }
-    setTheme("dark");
+    setTheme(isDarkMode ? "light" : "dark");
   };
 
   useEffect(() => {
@@ -25,18 +21,14 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
-      <input
-        id="theme-toggle"
-        type="checkbox"
-        className="toggle toggle-primary bg-primary hover:bg-primary border-primary"
-        onChange={handleToggle}
-        checked={isDarkMode}
-      />
-      <label htmlFor="theme-toggle" className={`swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}>
-        <SunIcon className="swap-on h-5 w-5" />
-        <MoonIcon className="swap-off h-5 w-5" />
-      </label>
-    </div>
+    <button
+      onClick={handleToggle}
+      className={`flex items-center justify-center p-2 rounded-full ${
+        isDarkMode ? "bg-gray-800" : "bg-gray-200"
+      } ${className}`}
+      aria-label={`Switch to ${isDarkMode ? "light" : "dark"} mode`}
+    >
+      {isDarkMode ? <SunIcon className="h-5 w-5 text-yellow-400" /> : <MoonIcon className="h-5 w-5 text-gray-700" />}
+    </button>
   );
 };
diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -50,9 +50,10 @@ export const AddressInfoDropdown = ({
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
-          <span className="ml-2 mr-1">
+          <span className="ml-2 mr-1 hidden sm:inline">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
+
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
         <ul

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-primary btn-sm bg-black" onClick={openConnectModal} type="button">
                     Connect Wallet
                   </button>
                 );

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -9,22 +9,20 @@ module.exports = {
     themes: [
       {
         light: {
-          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: "#007AFF",
+          "primary-content": "#FFFFFF",
+          secondary: "#F2F2F7",
+          "secondary-content": "#1C1C1E",
+          neutral: "#1C1C1E",
+          "neutral-content": "#FFFFFF",
+          "base-100": "#FFFFFF",
+          "base-200": "#F2F2F7",
+          "base-300": "#E5E5EA",
+          "base-content": "#1C1C1E",
+          info: "#0A84FF",
+          success: "#34C759",
+          warning: "#FF9500",
+          error: "#FF3B30",
 
           "--rounded-btn": "9999rem",
 
@@ -41,22 +39,20 @@ module.exports = {
       },
       {
         dark: {
-          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: "#0A84FF",
+          "primary-content": "#FFFFFF",
+          secondary: "#1C1C1E",
+          "secondary-content": "#FFFFFF",
+          neutral: "#FFFFFF",
+          "neutral-content": "#1C1C1E",
+          "base-100": "#000000",
+          "base-200": "#1C1C1E",
+          "base-300": "#2C2C2E",
+          "base-content": "#FFFFFF",
+          info: "#0A84FF",
+          success: "#32D74B",
+          warning: "#FF9F0A",
+          error: "#FF453A",
 
           "--rounded-btn": "9999rem",