Darkmode fix (#849)

* postview darkmode fix * postview darkmode fix * postview no-img darkmode fix * darkmode fix in createpost * merge fix * comment readmore * formatting * post bg color * comment input col * row toggle col * hehehehe --------- Co-authored-by: narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 18, 2023 · 46b962f · 46b962f
1 parent 4c5c7fe
commit 46b962f
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
diff --git a/src/components/ImgUpload/index.jsx b/src/components/ImgUpload/index.jsx
@@ -288,7 +288,7 @@ export default function ImgUpload(props) {
               </>
             )}
           </div>
-          <TextField
+          <TextField className="create-post-input"
             onChange={(e) => setCaption(e.target.value)}
             value={caption}
             variant="filled"
@@ -305,8 +305,10 @@ export default function ImgUpload(props) {
               },
               "& .MuiFilledInput-root": {
                 background: "transparent",
+                color: "var(--color)"
               },
             }}
+            style={{color: "var(--color) !important"}}
           />
           <button
             onClick={handleUpload}

diff --git a/src/components/Post/index.css b/src/components/Post/index.css
@@ -47,8 +47,7 @@
   transition: all;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-  box-shadow:
-    rgba(86, 238, 218, 0.8) 0px 3px 6px,
+  box-shadow: rgba(86, 238, 218, 0.8) 0px 3px 6px,
     rgba(108, 190, 186, 0.8) 0px 3px 6px;
 }
 
@@ -82,7 +81,7 @@
   padding: 8px;
   font-weight: 400;
   font-size: 15px;
-  color: var(--text-secondary);
+  color: var(--text-black-only);
   white-space: pre-line;
 }
 
@@ -142,6 +141,9 @@
   background: lightgray;
   border-radius: 10px;
 }
+.commentCard .comment span {
+  color: var(--text-black-only) !important;
+}
 
 .comment-box-title-style {
   display: inline-block;
@@ -200,7 +202,7 @@
 }
 
 .comment-input {
-  background-color: var(--bg-color) !important;
+  background-color: var(--dark-post-bg) !important;
   color: var(--color);
   border-radius: 22px;
   margin-top: 4px;

diff --git a/src/components/postView/PostDetails.jsx b/src/components/postView/PostDetails.jsx
@@ -31,7 +31,7 @@ const PostDetails = ({
             {tempLikeCount.indexOf(user?.uid) !== -1 ? (
               <FavoriteOutlined sx={{ color: "red" }} />
             ) : (
-              <FavoriteBorderOutlined />
+              <FavoriteBorderOutlined style={{ color: "var(--post-nav-icons)" }} />
             )}
           </IconButton>
           <Typography fontSize={14}>
@@ -58,7 +58,7 @@ const PostDetails = ({
           }}
         >
           <IconButton>
-            <ShareOutlined color={"#FFF"} />
+            <ShareOutlined style={{ color: "var(--post-nav-icons)" }} />
           </IconButton>
           <Typography fontSize={14}>Share</Typography>
         </Flexbetween>

diff --git a/src/index.css b/src/index.css
@@ -20,6 +20,10 @@
   --page-over-color: #5ec3fd;
   --slide-color: #9be5ea;
   --label-color: rgb(200, 246, 248);
+  --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);;
 }
 
 .darkmode {
@@ -42,6 +46,11 @@
   --page-over-color: #3a3e44;
   --slide-color: #524a54;
   --label-color: #6a656b;
+  --text-black-only: black;
+  --text-light: rgba(255, 255, 255, 0.6);
+  --post-error-boundary: rgba(255, 255, 255, 0.54);
+  --darkmode-white: white;
+  --dark-post-bg: #2a323c;
 }
 
 * {
@@ -117,7 +126,7 @@ input:focus {
 }
 
 .rowConvert {
-  color: var(--btn-color);
+  color: var(--text-secondary);
   display: flex;
   margin-right: 12px;
   transition: all;
@@ -511,6 +520,15 @@ input {
   background: var(--btn-color-hover);
 }
 
+.no-comments,
+.light-text,
+.post-page-caption span {
+  color: var(--text-light);
+}
+.create-post-input label {
+  color: var(--darkmode-white);
+}
+
 /* end */
 
 /* login sign up forms */
@@ -589,3 +607,6 @@ input {
     padding: 0;
   }
 }
+
+.post,
+.postColumn{background-color: var(--dark-post-bg);}
diff --git a/src/reusableComponents/ErrorBoundary/index.jsx b/src/reusableComponents/ErrorBoundary/index.jsx
@@ -39,6 +39,7 @@ const ErrorFallBack = ({ error, info, resetErrorBoundary, inApp }) => {
             className={"error-boundary-button"}
             onClick={resetErrorBoundary}
             aria-label={"Refresh"}
+            style={{ color: "var(--post-error-boundary)" }}
           >
             <AutorenewIcon />
           </IconButton>

diff --git a/src/reusableComponents/Logo/index.css b/src/reusableComponents/Logo/index.css
@@ -18,9 +18,8 @@
 }
 
 .sparkle-icon {
-  color: #ea18cb;
+  color: #0cc;
   background: none;
-  text-shadow: none;
   text-shadow: var(--logo-text-shadow);
   filter: drop-shadow(1px 1px 2px #59afc7);
 }