Add bg-darkBG vs. bg-dark to allow for control of the background colo…

…r via tailwind config
analog-m4 · Jan 11, 2024 · 5da8b97 · 5da8b97
1 parent da85635
commit 5da8b97
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 11 deletions.
diff --git a/cypress/e2e/light_dark.cy.js b/cypress/e2e/light_dark.cy.js
@@ -13,20 +13,22 @@ describe("Analog pages on render", () => {
   it("The application showcases the correct color when light / dark mode is toggled, and the ui also follows such as work areas and text", () => {
     cy.visit("http://localhost:3000/")
       .get(".app-container")
-      .should("have.css", "background-color", "rgb(23, 23, 23)")
+      .should("have.css", "background-color", "rgb(29, 35, 42)")
       .get(".toggle")
       .click()
       .get(".app-container")
-      .should("have.class", "light:bg-cream")
+      .should("have.css", "background-color", "rgb(255, 246, 246)")
       .get(".demo-btn")
       .click()
       .get(".dashboard")
-      .should("have.css", "background-color", "rgba(0, 0, 0, 0)")
+      .should("have.css", "background-color", "rgb(255, 255, 255)")
       .get(".projects")
       .should("have.css", "color", "rgb(17, 24, 39)")
       .get(".toggle")
       .click()
       .get(".projects")
-      .should("have.css", "color", "rgb(255, 255, 255)");
+      .should("have.css", "color", "rgb(255, 255, 255)")
+      .get(".dashboard")
+      .should("have.css", "background-color", "rgb(29, 35, 42)");
   });
 });
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -42,7 +42,7 @@ function App() {
   }
 
   return error ? (
-    <div className="bg-cream font-lato dark:bg-darkBG">
+    <div className="app-container bg-cream font-lato dark:bg-darkBG">
       <Header
         userStatus={userStatus}
         // user={user}
@@ -51,7 +51,7 @@ function App() {
     </div>
   ) : (
     <div className={appColor}>
-      <div className="font-lato bg-cream dark:bg-darkBG dark:text-darkText">
+      <div className="app-container font-lato bg-cream dark:bg-darkBG dark:text-darkText">
         <Header
           userStatus={userStatus}
           // user={user}

diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
@@ -22,7 +22,7 @@ function Column({ columnName, tasks, taskStatus }) {
     <>
       <div
         className={`column flex flex-col w-5/12 min-w-1/4 ${
-          appColor === "dark" ? "bg-dark" : "bg-white"
+          appColor === "dark" ? "bg-darkBG" : "bg-white"
         } dark:text-darkText`}
       >
         <div className="column-title ml-1 font-bold pt-3 pb-3 text-gray-900 font-fjalla text-2xl dark:text-white">

diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
@@ -33,8 +33,8 @@ function Dashboard({ userStatus }) {
           {/* this line */}
           <div
             className={`dashboard w-full p-3 ${
-              appColor === "dark" ? "bg-dark" : "bg-white"
-            } dark:bg-darkBG2 dark:text-darkText border border-gray-200 rounded-lg shadow-sm`}
+              appColor === "dark" ? "bg-darkBG" : "bg-white"
+            }  dark:text-darkText border border-gray-200 rounded-lg shadow-sm`}
             style={{ maxHeight: "545px", overflowY: "auto" }}
           >
             <div className="projects font-normal text-gray-900 border-b pb-1 mb-1 font-fjalla text-2xl dark:text-darkText">

diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js
@@ -80,7 +80,7 @@ function FileUpload() {
       </label>
       <div
         className={`p-3 sm:p-3 border border-gray-200 rounded-lg shadow-sm ${
-          appColor === "dark" ? "bg-dark" : "bg-white"
+          appColor === "dark" ? "BG" : "bg-white"
         }`}
       >
         <div className="upload-file flex">

diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js
@@ -32,7 +32,7 @@ function ProjectBoard() {
         )}
         <div
           className={`flex h-3/4 sm:w-11/12 md:w-10/12 border border-gray-200 rounded-lg shadow-sm pl-3 sm:pl-3 md:pl-6 ${
-            appColor === "dark" ? "bg-dark" : "bg-white"
+            appColor === "dark" ? "bg-darkBG" : "bg-white"
           } dark:text-darkText`}
           style={{ maxHeight: "545px", overflowY: "auto" }}
         >