Changes in Dark Theme (#973)

* made changes in dark mode * fix: footer alignment * style: change some var colour * fix: style of create post box --------- Co-authored-by: narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 26, 2023 · 857a7a3 · 857a7a3
1 parent e7dc526
commit 857a7a3
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 60 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -378,7 +378,7 @@ function App() {
           </Routes>
           {/* below scroll button must be checked for implementation */}
           <FaArrowCircleUp
-            fill="#0cc"
+            fill="#5F85DB"
             className={`scrollTop ${isCenteredScroll ? "centeredScroll" : ""}`}
             onClick={scrollTop}
             style={{

diff --git a/src/components/ImgUpload/Camera/index.css b/src/components/ImgUpload/Camera/index.css
@@ -18,7 +18,7 @@
 .cameraBtn button {
   margin: 6px;
   padding: 10px;
-  background: linear-gradient(40deg, #0cc 30%, #fff 100%);
+  background: linear-gradient(40deg, #5F85DB 30%, #fff 100%);
   border: none;
   box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
   border-radius: 10px;
@@ -27,7 +27,7 @@
 }
 
 .cameraBtn button:hover {
-  background: linear-gradient(-40deg, #fff, #0cc);
+  background: linear-gradient(-40deg, #fff, #5F85DB);
 }
 
 .takePic {
@@ -48,8 +48,8 @@
 .outputContainer button {
   margin: 6px;
   padding: 10px;
-  background: #0cc;
-  background: linear-gradient(40deg, #0cc 30%, rgb(219, 247, 252) 100%);
+  background: #5F85DB;
+  background: linear-gradient(40deg, #5F85DB 30%, rgb(219, 247, 252) 100%);
   /* border: 1px solid var(--color); */
   border: none;
   box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);

diff --git a/src/components/ImgUpload/index.css b/src/components/ImgUpload/index.css
@@ -5,6 +5,9 @@
   padding: 10px;
   font-size: 1rem;
   cursor: pointer;
+  border-radius: 25px;
+  border: none;
+  margin: 5px;
 }
 
 .share__button:hover {
@@ -60,6 +63,14 @@
   /* width: 100%; */
 }
 
+.upload-picture:hover {
+  opacity: 0.8;
+}
+
+.openpopup:hover {
+  opacity: 0.8;
+}
+
 .file {
   opacity: 0;
   width: 0.1px;
@@ -79,7 +90,7 @@
   display: block;
   position: relative;
   border-radius: 20px;
-  background: linear-gradient(40deg, #0cc, #daf1f7);
+  background: linear-gradient(40deg, #5f85db, #daf1f7);
   box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
@@ -180,7 +191,7 @@ input {
 .close-btn {
   margin: 6px;
   padding: 10px;
-  background: #0cc;
+  background: #5f85db;
   background: var(--btn-color);
   /* border: 1px solid var(--color); */
   border: none;
@@ -285,7 +296,7 @@ input {
 
   .next_button {
     display: block;
-    background: linear-gradient(40deg, #0cc, #daf1f7);
+    background: linear-gradient(40deg, #5f85db, #daf1f7);
     width: 100%;
     color: white;
     padding: 0.6rem;

diff --git a/src/components/Navbar/index.css b/src/components/Navbar/index.css
@@ -13,11 +13,11 @@
   padding-top: 10px;
   padding-bottom: 10px;
   object-fit: contain;
-  border-bottom: 1px solid rgb(219, 219, 219);
+  /* border-bottom: 1px solid rgb(219, 219, 219); */
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  background-color: var(--bg-color);
+  background-color: var(--dark-post-bg);
 }
 
 .navSpace {

diff --git a/src/components/Post/index.css b/src/components/Post/index.css
@@ -40,16 +40,16 @@
   max-width: 400px;
   margin-top: 20px;
   /* padding: 5px; */
-  border: 1px solid rgba(0, 0, 0, 0.373);
+  border: 2px solid #90B8F8;
   border-radius: 5px;
   margin-bottom: 20px;
   word-wrap: break-word;
   transition: all;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-  box-shadow:
+  /* box-shadow:
     rgba(86, 238, 218, 0.8) 0px 3px 6px,
-    rgba(108, 190, 186, 0.8) 0px 3px 6px;
+    rgba(108, 190, 186, 0.8) 0px 3px 6px; */
 }
 
 .postColumn:hover {
@@ -201,7 +201,7 @@
 
 .send-comment-btn {
   font-weight: bold;
-  color: rgb(19, 19, 191);
+  color: #5F85DB;
   border-radius: 50%;
   padding: 5px;
 }

diff --git a/src/components/Post/index.jsx b/src/components/Post/index.jsx
@@ -176,9 +176,7 @@ function Post(prop) {
   return (
     <div
       className={`${rowMode ? "post" : "postColumn"}`}
-      style={{
-        boxShadow: "#fff 0px 3px 6px, #0cc 0px 3px 6px",
-      }}
+
     >
       <ErrorBoundary>
         <PostHeader

diff --git a/src/components/SideBar/Footer.jsx b/src/components/SideBar/Footer.jsx
@@ -5,9 +5,9 @@ const Footer = () => {
   return (
     <footer>
       <ul className="sidebar-footer-container">
-        <li>
+        <li className="github-icon">
           <a href="https://github.com/narayan954/dummygram" target="_blank">
-            <GitHubIcon />
+            <GitHubIcon sx={{ color: "#4775df" }} />
           </a>
         </li>
         <li>

diff --git a/src/components/SideBar/index.css b/src/components/SideBar/index.css
@@ -1,12 +1,12 @@
 /* sidebar styling */
 
 .sidebar {
-  background: var(--bg-color);
+  background: var(--dark-post-bg);
   position: fixed;
   width: 17vw;
   height: 100vh;
   left: 0;
-  border-right: 1px solid rgb(219, 219, 219);
+  /* border-right: 1px solid rgb(219, 219, 219); */
 }
 
 .sidebar-container {
@@ -45,7 +45,7 @@
 
 .sidebar-links li:hover {
   /* background: rgba(0, 0, 0, 0.05); */
-  background-color: #0cc;
+  background-color: #5f85db;
 }
 
 .sidebar-links li a,
@@ -77,47 +77,41 @@
 
 footer {
   margin-block: auto;
-  padding-left: 20px;
-  padding-block: 12px;
   font-size: 13px;
-  background-color: var(--bg-color);
+  background-color: var(--dark-post-bg);
 }
 
 .sidebar-footer-container {
-  display: grid;
-  /* justify-content: flex-start; */
-  align-items: center;
+  display: flex;
   list-style-type: none;
-  /* flex-wrap: wrap; */
+  flex-direction: column;
   padding: 0;
   text-align: center;
-  margin-right: 20px;
   margin-top: 20px;
 }
 
-.sidebar-footer-container > li {
-  margin-right: 10px;
-}
-
 .footer-link {
   text-decoration: none;
   color: #898787;
 }
 
 .footer-link:hover {
-  /* text-decoration: underline; */
   color: var(--color);
 }
 
+.github-icon {
+  font-size: 20px;
+  transition: all 0.2s ease;
+}
+
 .copyright {
   margin-top: 10px;
   color: var(--color);
   text-align: center;
-  margin-right: 25px;
 }
 
 .activeTab {
-  border: 2px solid #0cc;
+  border: 2px solid #5f85db;
 }
 
 /* media query */
@@ -143,7 +137,6 @@ footer {
 
   footer {
     font-size: 10px;
-    padding-left: 8px;
   }
 }
 

diff --git a/src/components/SideBar/index.jsx b/src/components/SideBar/index.jsx
@@ -132,7 +132,7 @@ function SideBar({ anonymous }) {
       >
         <div
           style={{
-            backgroundColor: "var(--bg-color)",
+            backgroundColor: "var(--dark-post-bg)",
             textAlign: "center",
             color: "var(--color)",
           }}

diff --git a/src/index.css b/src/index.css
@@ -15,27 +15,28 @@
   --profile-box-shadow: 0 0 6px 0 black;
   --profile-divider: "";
   --logo-text-shadow: none;
-  --btn-color: linear-gradient(-40deg, #daf1f7, #0cc);
-  --btn-color-hover: linear-gradient(40deg, #0cc, #daf1f7);
-  --btn-hover: rgb(0, 204, 204);
-  --page-over-color: #5ec3fd;
-  --slide-color: #9be5ea;
+  --btn-color: linear-gradient(-40deg, #daf1f7, #5f85db);
+  --btn-color-hover: linear-gradient(40deg, #5f85db, #daf1f7);
+  --btn-hover: #5f85db;
+  --page-over-color: #5f85db;
+  --slide-color: #90b8f8;
   --label-color: rgb(200, 246, 248);
   --profile-color: #7d7575;
   --text-light: rgba(0, 0, 0, 0.6);
   --post-error-boundary: rgba(0, 0, 0, 0.54);
   --text-black-only: black;
   --dark-post-bg: rgb(255, 255, 255);
-  --link-color: #3a82c4;
+  --link-color: #068FFF;
   --pagination-border: rgba(0, 0, 0, 0.23);
 }
 
 .darkmode {
-  --bg-color: #1c2128;
+  --bg-color: black;
   --text-primary: rgb(255, 255, 255);
   --text-secondary: white;
   --color: rgb(226, 226, 226);
-  --logo-text-shadow: 0 0 10px #eeeeee, 0 0 20px #ff4da6, 0 0 30px #ff4da6;
+  /* --logo-text-shadow: 0 0 7px #eeeeee, 0 0 10px #ff4da6, 0 0 20px #ff4da6; */
+  --logo-text-shadow: none;
   --filter-img: invert(100%);
   --sidebar-link-hover: rgba(255, 255, 255, 0.15);
   --post-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.4);
@@ -44,10 +45,10 @@
   --profile-container: rgb(50, 48, 48);
   --profile-box-shadow: 0 0 6px white;
   --profile-divider: #898989;
-  --logo-text-shadow: 0 0 10px #eeeeee, 0 0 20px #0cc, 0 0 30px #fff;
-  --btn-color: linear-gradient(40deg, #0cc, #daf1f7);
-  --btn-color-hover: linear-gradient(-40deg, #daf1f7, #0cc);
-  --btn-hover: rgb(0, 204, 204);
+  /* --logo-text-shadow: 0 0 10px #eeeeee, 0 0 20px #5F85DB, 0 0 30px #fff; */
+  --btn-color: linear-gradient(40deg, #5f85db, #daf1f7);
+  --btn-color-hover: linear-gradient(-40deg, #daf1f7, #5f85db);
+  --btn-hover: #5f85db;
   --page-over-color: #3a3e44;
   --slide-color: #524a54;
   --label-color: #6a656b;
@@ -56,8 +57,8 @@
   --text-light: rgba(255, 255, 255, 0.6);
   --post-error-boundary: rgba(255, 255, 255, 0.54);
   --darkmode-white: white;
-  --dark-post-bg: #2a323c;
-  --link-color: #3679b7;
+  --dark-post-bg: #191919;
+  --link-color: #068FFF;
   --pagination-border: rgba(255, 255, 255, 0.23);
 }
 

diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx
@@ -474,7 +474,7 @@ function Profile() {
                     <Button
                       variant="contained"
                       startIcon={<SettingsIcon style={{ color: "black" }} />}
-                      style={{ backgroundColor: "#8beeff" }}
+                      style={{ backgroundColor: "#5F85DB" }}
                       onClick={() => navigate("/dummygram/settings")}
                     >
                       <Typography
@@ -489,7 +489,7 @@ function Profile() {
                       variant="contained"
                       color="primary"
                       startIcon={<LogoutIcon style={{ color: "black" }} />}
-                      style={{ backgroundColor: "#8beeff" }}
+                      style={{ backgroundColor: "#5F85DB" }}
                       onClick={() => setLogout(true)}
                     >
                       <Typography

diff --git a/src/reusableComponents/DialogBox/index.jsx b/src/reusableComponents/DialogBox/index.jsx
@@ -23,14 +23,15 @@ const DialogBox = ({
       open={open}
       onClose={onClose}
       aria-labelledby="responsive-dialog-title"
+
     >
       {showTitle && (
         <>
           <DialogTitle
             id="responsive-dialog-title"
             sx={{
               fontWeight: "bold",
-              backgroundColor: "var(--bg-color)",
+              backgroundColor: "var(--dark-post-bg)",
               color: "var(--color)",
             }}
           >
@@ -41,14 +42,14 @@ const DialogBox = ({
       )}
 
       <DialogContent
-        sx={{ color: "var(--color)", backgroundColor: "var(--bg-color)" }}
+        sx={{ color: "var(--color)", backgroundColor: "var(--dark-post-bg)" }}
       >
         <div>{children}</div>
       </DialogContent>
 
       <Divider />
 
-      <DialogActions sx={{ backgroundColor: "var(--bg-color)" }}>
+      <DialogActions sx={{ backgroundColor: "var(--dark-post-bg)" }}>
         <Button
           onClick={onClose}
           sx={{ fontWeight: "bold", color: "var(--color)" }}

diff --git a/src/reusableComponents/Logo/index.css b/src/reusableComponents/Logo/index.css
@@ -5,7 +5,7 @@
   font-weight: 700;
   text-shadow: var(--logo-text-shadow);
   /* background: linear-gradient(40deg, #ea18cb, #f404d0, #59afc7); */
-  background: linear-gradient(40deg, #59afc7, #f404d0, #59afc7);
+  background: linear-gradient(40deg, #f404d0, #5F85DB, #f404d0);
   -webkit-background-clip: text;
   background-clip: text;
   margin-left: 20px;
@@ -18,7 +18,7 @@
 }
 
 .sparkle-icon {
-  color: #0cc;
+  color: #5F85DB;
   background: none;
   text-shadow: var(--logo-text-shadow);
   filter: drop-shadow(1px 1px 2px #59afc7);