fix darkmode on footer pages (#668)

Co-authored-by: Narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 5, 2023 · d0ac770 · d0ac770
1 parent 4e12d9d
commit d0ac770
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 89 deletions.
diff --git a/src/index.css b/src/index.css
@@ -4,7 +4,7 @@
   --bg-color: rgb(249, 248, 248);
   --text-primary: blue;
   --text-secondary: black; /* TODO: Fix */
-  --color: black;
+  --color: rgb(61, 60, 60);
   --filter-img: none;
   --sidebar-link-hover: rgba(0, 0, 0, 0.05);
   --post-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
@@ -18,8 +18,8 @@
 
 .darkmode {
   --bg-color: #1c2128;
-  --text-primary: white;
-  --text-secondary: black; /* TODO: Fix */
+  --text-primary: rgb(255, 255, 255);
+  --text-secondary: white; /* TODO: Fix */
   --color: rgb(226, 226, 226);
   --filter-img: invert(100%);
   --sidebar-link-hover: rgba(255, 255, 255, 0.15);

diff --git a/src/pages/FooterPages/About/index.css b/src/pages/FooterPages/About/index.css
@@ -25,12 +25,18 @@
   align-items: center;
 }
 
+.about-logo {
+  margin-top: 40px;
+  margin-bottom: 30px;
+  border-radius: 0.5rem;
+  width: 240px;
+}
+
 .about-headings {
   margin-top: 100px;
   margin-bottom: 20px;
   font-size: 50px;
   font-weight: 600;
-  color: rgb(61, 60, 60);
 }
 
 .about-section-text {

diff --git a/src/pages/FooterPages/About/index.jsx b/src/pages/FooterPages/About/index.jsx
@@ -55,7 +55,7 @@ const About = () => {
   }, []);
 
   return (
-    <div className="about-container">
+    <div className="about-container footer-page-para-color">
       <div className="about-sub-container">
         <span className="grad1 grad"></span>
         <span className="grad2 grad"></span>
@@ -75,13 +75,13 @@ const About = () => {
             explore diverse content, and foster meaningful connections with
             like-minded individuals from around the globe.
           </p>
-          <h2 className="about-headings">VISION</h2>
+          <h2 className="about-headings footer-page-heading-color">VISION</h2>
           <p className="about-section-text">
             Combine the best features of Instagram while adding a touch of
             innovation and uniqueness. We strive to create a platform that
             encourages creativity, authenticity, and positive interactions.
           </p>
-          <h2 className="about-headings">CREATORS</h2>
+          <h2 className="about-headings footer-page-heading-color">CREATORS</h2>
           <p className="about-section-text">
             Dummygram's development has been started by{" "}
             <a href="https://www.linkedin.com/in/narayan-soni/">Narayan Soni</a>{" "}
@@ -90,7 +90,7 @@ const About = () => {
             success. Join us today on{" "}
             <a href="https://github.com/narayan954/dummygram">GitHub!</a>
           </p>
-          <h2 className="about-headings">STATS</h2>
+          <h2 className="about-headings footer-page-heading-color">STATS</h2>
           <div className="about-section-stats-container">
             <p className="about-section-stats">
               <span className="about-stats">Total Commits:</span> {commits}

diff --git a/src/pages/FooterPages/Feedback/index.jsx b/src/pages/FooterPages/Feedback/index.jsx
@@ -37,7 +37,7 @@ export const Feedback = () => {
   return (
     <>
       <SideBar />
-      <div className="feedback-form-container">
+      <div className="feedback-form-container footer-page-para-color">
         <span className="grad3 grad"></span>
         <span className="grad4 grad"></span>
         <form

diff --git a/src/pages/FooterPages/Guidelines/index.css b/src/pages/FooterPages/Guidelines/index.css
@@ -23,17 +23,14 @@
   align-self: center;
   font-size: 50px;
   font-weight: 600;
-  color: rgb(76, 75, 75);
   text-decoration: underline;
 }
 
 .guidelines {
-  /* border: 1px solid red; */
   max-width: 80%;
 }
 
 .guidelines-sub-heading {
-  color: rgb(76, 75, 75);
   margin-bottom: 20px;
   font-weight: 600;
 }
@@ -51,10 +48,18 @@
 }
 
 .guidelines-box > li > span {
-  color: rgb(76, 75, 75);
+  color: var(--text-secondary);
   font-weight: bold;
 }
 
+.guideline-link{
+  color: var(--text-primary);
+}
+
+.guideline-link:hover{
+  text-decoration: none;
+}
+
 @media only screen and (max-width: 1000px) {
   .about-grad {
     display: none;

diff --git a/src/pages/FooterPages/Guidelines/index.jsx b/src/pages/FooterPages/Guidelines/index.jsx
@@ -5,15 +5,15 @@ import { Link } from "react-router-dom";
 
 const Guidelines = () => {
   return (
-    <div className="guidlines-container">
+    <div className="guidlines-container footer-page-para-color">
       <span className="grad1 grad"></span>
       <span className="grad2 grad"></span>
       <span className="grad3 grad about-grad"></span>
       <span className="grad4 grad"></span>
       <div className="glassmorphism-effect guidelines-sub-container">
-        <h1 className="guidelines-heading">GUIDELINES</h1>
+        <h1 className="guidelines-heading footer-page-heading-color">GUIDELINES</h1>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Account Creation</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Account Creation</h2>
           <ul className="guidelines-box">
             <li>Users must be at least 13 years old to create an account.</li>
             <li>
@@ -27,7 +27,7 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">User Conduct</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">User Conduct</h2>
           <ul className="guidelines-box">
             <li>
               <span>Respect for Others:</span> Users must treat others with
@@ -52,20 +52,20 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Intellectual Property</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Intellectual Property</h2>
           <ul className="guidelines-box">
             <li>
               Users should not post or share copyrighted material without the
               necessary permissions or licenses.
             </li>
             <li>
               User can report about any copyright infringement to our{" "}
-              <Link to={"/dummygram/report"}>report</Link> page.
+              <Link to={"/dummygram/report"} className="guideline-link">report</Link> page.
             </li>
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Safety and Security</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Safety and Security</h2>
           <ul className="guidelines-box">
             <li>
               <span>Account Security:</span> Users should choose a strong,
@@ -75,7 +75,7 @@ const Guidelines = () => {
               <span>Reporting Inappropriate Behavior:</span> Users is encouraged
               to report any abusive, offensive, or inappropriate behavior they
               encounter on the platform to the{" "}
-              <Link to={"/dummygram/report"}>report</Link> page.
+              <Link to={"/dummygram/report"}  className="guideline-link">report</Link> page.
             </li>
             <li>
               <span>Privacy Settings:</span> Users should have control over
@@ -84,7 +84,7 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Moderation and Enforcement</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Moderation and Enforcement</h2>
           <ul className="guidelines-box">
             <li>
               <span>Content Moderation:</span> The platform have a system in
@@ -94,7 +94,7 @@ const Guidelines = () => {
             <li>
               <span>Reporting System:</span> Users can easily report to
               violations or inappropriate behavior through our{" "}
-              <Link to={"/dummygram/report"}>report</Link> page.
+              <Link to={"/dummygram/report"}  className="guideline-link">report</Link> page.
             </li>
             <li>
               <span>Enforcement Actions:</span> The platform should outline the
@@ -104,7 +104,7 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Data Privacy and Security</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Data Privacy and Security</h2>
           <ul className="guidelines-box">
             <li>
               <span>User Data Protection:</span> Users' personal information is
@@ -118,7 +118,7 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Legal Compliance</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Legal Compliance</h2>
           <ul className="guidelines-box">
             <li>
               Users should comply with all applicable laws and regulations while
@@ -131,7 +131,7 @@ const Guidelines = () => {
           </ul>
         </div>
         <div className="guidelines">
-          <h2 className="guidelines-sub-heading">Updates to Guidelines</h2>
+          <h2 className="guidelines-sub-heading footer-page-heading-color">Updates to Guidelines</h2>
           <ul className="guidelines-box">
             <li>
               The platform reserve the right to update the guidelines as needed

diff --git a/src/pages/FooterPages/design.css b/src/pages/FooterPages/design.css
@@ -48,72 +48,13 @@
   aspect-ratio: 1;
   border-radius: 32% 68% 74% 26% / 20% 65% 35% 80%;
 }
-.about-sub-container {
-  position: relative;
-  border-radius: 150px;
-  margin-bottom: 50px;
-}
-
-.about-section {
-  position: relative;
-  width: 60vw;
-  min-height: 100vh;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 150px;
-  padding-bottom: 40px;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0)
-  );
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-}
 
-.about-logo {
-  margin-top: 40px;
-  margin-bottom: 30px;
-  border-radius: 0.5rem;
-  width: 240px;
+.footer-page-heading-color {
+  color: var(--color);
 }
 
-.about-headings {
-  margin-top: 100px;
-  margin-bottom: 20px;
-  font-size: 50px;
-  font-weight: 600;
-  color: rgb(61, 60, 60);
-}
-
-.about-section-text {
-  width: 90%;
-  max-width: 800px;
-  font-size: 20px;
-}
-
-.about-section-stats-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.about-section-stats {
-  font-size: 25px;
-}
-
-.about-stats {
-  font-weight: bold;
-}
-
-@media only screen and (max-width: 1000px) {
-  .about-section {
-    width: 90vw;
-  }
+.footer-page-para-color {
+  color: var(--text-secondary)
 }
 
 @media only screen and (max-width: 650px) {