Merge pull request #74 from luloxi/dark-mode

Solving Dark Mode Issues #67 attempt
scaffold-eth · Sep 22, 2023 · 1629494 · 1629494
2 parents cfb7443 + 1067045
commit 1629494
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 45 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -16,7 +16,7 @@ const NavLink = ({ href, children }: { href: string; children: React.ReactNode }
       href={href}
       passHref
       className={`${
-        isActive ? "text-black" : "text-slate-400"
+        isActive ? "text-[#FF0520] font-bold" : "text-lightGray"
       } hover:bg-secondary focus:bg-secondary py-1.5 px-3 text-sm gap-2`}
     >
       {children}

diff --git a/packages/nextjs/components/MetaHeader.tsx b/packages/nextjs/components/MetaHeader.tsx
@@ -14,8 +14,8 @@ type MetaHeaderProps = {
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/` : "/";
 
 export const MetaHeader = ({
-  title = "Scaffold-ETH 2 App",
-  description = "Built with 🏗 Scaffold-ETH 2",
+  title = "OP RetroPGF3",
+  description = "Built by BuidlGuidl 🏰",
   image = "thumbnail.jpg",
   twitterCard = "summary_large_image",
   children,

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -21,7 +21,9 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
         checked={isDarkMode}
       /> */}
       <button
-        className={`btn btn-secondary btn-sm h-10 px-1.5 rounded-full border-2 border-slate-200`}
+        className={`btn btn-secondary btn-sm h-10 px-1.5 rounded-full border-1 border-slate-200 ${
+          !isDarkMode ? "hover:bg-slate-200" : "hover:bg-slate-500"
+        }`}
         onClick={toggle}
       >
         {isMounted() && (

diff --git a/packages/nextjs/components/lists/ListHeader.tsx b/packages/nextjs/components/lists/ListHeader.tsx
@@ -75,7 +75,7 @@ function ListHeader({ displayList, titleHeader, display, onCategoryChange, onShu
           <div className="h-[18px] border-l-2 border-neutral  mx-[12px] "></div>
           <button
             onClick={() => handleShuffle()}
-            className="flex items-center justify-center px-4 py-2  rounded border-neutral border-[1px] gap-2 cursor-pointer hover:bg-customWhite"
+            className="flex items-center justify-center px-4 py-2  rounded border-neutral border-[1px] gap-2 cursor-pointer hover:bg-customWhite hover:text-black"
           >
             <span className="flex ">
               <ArrowsUpDownIcon className="w-[15px] h-[25px]" />
@@ -91,17 +91,15 @@ function ListHeader({ displayList, titleHeader, display, onCategoryChange, onShu
             <button
               onClick={() => handleButtonClick("all")}
               className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
-                active == "all" ? "bg-secondary-content text-white dark:bg-black" : "bg-customWhite text-customGrayBtn"
+                active == "all" ? "bg-[#FF0520] text-white" : "bg-customWhite text-customGrayBtn"
               }`}
             >
               All
             </button>
             <button
               onClick={() => handleButtonClick("liked")}
               className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
-                active == "liked"
-                  ? "bg-secondary-content text-white dark:bg-black"
-                  : "bg-customWhite text-customGrayBtn"
+                active == "liked" ? "bg-[#FF0520] text-white" : "bg-customWhite text-customGrayBtn"
               }`}
             >
               <span className="flex">
@@ -118,9 +116,7 @@ function ListHeader({ displayList, titleHeader, display, onCategoryChange, onShu
               key={index}
               onClick={() => handleButtonClick(`${category.category}`)}
               className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
-                active == `${category.category}`
-                  ? "bg-[#FF0520] text-white"
-                  : "bg-customWhite dark:bg-slate-700 text-customGrayBtn"
+                active == `${category.category}` ? "bg-[#FF0520] text-white" : "bg-customWhite text-customGrayBtn"
               }`}
             >
               {category.category}

diff --git a/packages/nextjs/components/lists/Pagination.js b/packages/nextjs/components/lists/Pagination.js
@@ -27,7 +27,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
             key={page}
             className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
               currentPage === page
-                ? "bg-secondary-content text-white dark:bg-black"
+                ? "bg-[#FF0520] text-white"
                 : "border border-gray-300  bg-white text-lightBlack hover:bg-customWhite"
             }`}
             onClick={() => onPageChange(page)}

diff --git a/packages/nextjs/components/op/projects/YourBallot.tsx b/packages/nextjs/components/op/projects/YourBallot.tsx
@@ -44,7 +44,7 @@ const YourBallot = () => {
       </div>
       {state.projects.length === 0 && (
         <div className="mt-5">
-          <button disabled className=" py-3 w-full rounded-lg bg-customWhite text-OPlightgray">
+          <button disabled className=" py-3 w-full rounded-lg bg-gray-400 text-white">
             No Projects added yet
           </button>
         </div>

diff --git a/packages/nextjs/components/projects/Card.tsx b/packages/nextjs/components/projects/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ project, display }: any) => {
   return (
     <div>
       {display === "grids" ? (
-        <div className="border border-grey-300 rounded-[1.5em] p-2 bg-base-100">
+        <div className="rounded-[1.5em] p-2 bg-base-100">
           <div className="relative overflow-hidden bg-cover bg-no-repeat">
             {banner ? (
               <Image

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -74,7 +74,7 @@ export const RainbowKitCustomConnectButton = () => {
                     <button
                       onClick={openAccountModal}
                       type="button"
-                      className={`btn btn-secondary rounded-full h-10 btn-sm pl-2 pr-2 border-2 border-slate-200 ${
+                      className={`btn btn-secondary rounded-full h-10 btn-sm pl-2 pr-2 border-1 border-slate-200 ${
                         !isDarkMode ? "hover:bg-slate-200" : "hover:bg-slate-500"
                       }`}
                     >

diff --git a/packages/nextjs/pages/lists.tsx b/packages/nextjs/pages/lists.tsx
@@ -12,6 +12,7 @@ const ListsPage: NextPage = () => {
   useEffect(() => {
     setWallet(isDisconnected);
   }, [isDisconnected]);
+
   return (
     <div className="mx-auto w-full px-12 mt-12 flex flex-col md:flex-row gap-4">
       {!wallet ? <YourBallot /> : <Sidebar />}

diff --git a/packages/nextjs/public/favicon.png b/packages/nextjs/public/favicon.png
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -5,7 +5,7 @@
 @import "tailwindcss/utilities";
 :root,
 [data-theme] {
-  background: #ffffff;
+  background: hsl(var(--b2));
 }
 
 body {

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -41,7 +41,7 @@ module.exports = {
         scaffoldEthDark: {
           primary: "#212638",
           "primary-content": "#F9FBFF",
-          secondary: "#991b1b",
+          secondary: "#1f2937",
           "secondary-content": "#F9FBFF",
           accent: "#4969A6",
           "accent-content": "#F9FBFF",
@@ -68,33 +68,6 @@ module.exports = {
           },
         },
       },
-      {
-        exampleUi: {
-          primary: "#000000",
-          "primary-content": "#ffffff",
-          secondary: "#FF6644",
-          "secondary-op": "#ff0000",
-          "secondary-content": "#212638",
-          accent: "#93BBFB",
-          "accent-content": "#212638",
-          neutral: "#f3f3f3",
-          "neutral-content": "#212638",
-          "base-100": "#ffffff",
-          "base-200": "#f1f1f1",
-          "base-300": "#d0d0d0",
-          "base-content": "#212638",
-          info: "#93BBFB",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF0000",
-
-          "--rounded-btn": "9999rem",
-
-          ".tooltip": {
-            "--tooltip-tail": "6px",
-          },
-        },
-      },
     ],
   },
   theme: {