fixed all CSS

Jai0212 · Dec 3, 2024 · b2f730f · b2f730f
1 parent ffdfda8
commit b2f730f
Show file tree

Hide file tree

Showing 15 changed files with 351 additions and 400 deletions.
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,4 +1,8 @@
-/* html,
-body {
-    overflow: hidden;
-} */
+body,
+html {
+    background-color: #003f5c;
+    height: 100%;
+    overflow-y: auto;
+}
+
+/* background-color: #f6f2eb; */
diff --git a/frontend/src/pages/AboutPage/AboutPage.css b/frontend/src/pages/AboutPage/AboutPage.css
@@ -1,15 +1,15 @@
 .aboutPage {
     top: 0;
     height: 20vh;
-    color: #2e2e2e;
+    color: #fafafa;
 }
 
 .paragraph-like {
     font-size: 2vh;
     font-weight: 400;
-    margin-bottom: 2vh;
+    margin-bottom: 4vh;
     margin-top: 3vh;
-    color: #2e2e2e;
+    color: #fafafa;
 }
 
 .key-features {

diff --git a/frontend/src/pages/ChangePassword/ChangePassword.css b/frontend/src/pages/ChangePassword/ChangePassword.css
@@ -1,33 +1,17 @@
 .container-password {
-    margin-top: 5vh;
-    display: flex;
-    justify-content: center;
+    position: relative;
+    text-align: center;
+    color: #bbe1fa;
+    /* Soft light blue for text */
+    background-color: transparent;
     height: 8vh;
-    margin-bottom: 0;
-}
-
-.main-container-password {
-    display: grid;
-    justify-content: center;
-    grid-template-rows: 0.2fr 0.2fr;
-    grid-template-columns: 1fr;
-    width: 100%;
-    background-color: #FFE0B1;
-    height: 100vh;
-}
-
-.alert-primary {
-
+    margin-top: 6vh;
 }
 
 .alert-primary2 {
-    background-color: #f6f2eb;
-    /* Light Green background for form */
+    background-color: #f9f9f9;
     padding: 30px;
     border-radius: 8px;
     max-width: 400px;
-    height: 65% !important;
-    width: 70% !important;    /* Set a max width */
-    margin: 50px auto;
-    /* Center the form horizontally and add top/bottom margin */
-}
+    margin: auto;
+}
diff --git a/frontend/src/pages/ChangePassword/ChangePassword.jsx b/frontend/src/pages/ChangePassword/ChangePassword.jsx
@@ -4,7 +4,6 @@ import swal from "sweetalert2";
 import { envConfig } from "../../envConfig";
 import "./ChangePassword.css"
 
-
 const ChangePassword = () => {
   const VITE_BACKEND_URL = envConfig();
 
@@ -49,74 +48,79 @@ const ChangePassword = () => {
   };
 
   return (
-    <div className="main-container-password">
+    <div className="main-container">
       <div className="container-password">
         <h1> Change Password </h1>
       </div>
 
-      <hr />
+      <hr className="seperator" />
       <div className="alert alert-primary2">
         <form onSubmit={handleSubmit(handleForm)} id="form">
           <div className="mb-3">
             <label htmlFor="old_password">Enter Old Password</label>
             <input
-                id="old_password"
-                {...register("old_password", {
-                  required: "This field is required",
-                })}
-                type="password"
-                className="form-control"
+              id="old_password"
+              {...register("old_password", {
+                required: "This field is required",
+              })}
+              type="password"
+              className="form-control"
             />
             <ErrorMessage
-                errors={errors}
-                name="old_password"
-                render={({message}) => (
-                    <p className="text-danger">{message}</p>
-                )}
+              errors={errors}
+              name="old_password"
+              render={({ message }) => (
+                <p className="text-danger">{message}</p>
+              )}
             />
           </div>
 
           <div className="mb-3">
             <label htmlFor="new_password">Enter New Password</label>
             <input
-                id="new_password"
-                {...register("new_password", {
-                  required: "This field is required",
-                })}
-                type="password"
-                className="form-control"
+              id="new_password"
+              {...register("new_password", {
+                required: "This field is required",
+              })}
+              type="password"
+              className="form-control"
             />
             <ErrorMessage
-                errors={errors}
-                name="new_password"
-                render={({message}) => (
-                    <p className="text-danger">{message}</p>
-                )}
+              errors={errors}
+              name="new_password"
+              render={({ message }) => (
+                <p className="text-danger">{message}</p>
+              )}
             />
           </div>
 
           <div className="mb-3">
             <label htmlFor="confirm_password">Confirm Password</label>
             <input
-                id="confirm_password"
-                {...register("confirm_password", {
-                  required: "This field is required",
-                })}
-                type="password"
-                className="form-control"
+              id="confirm_password"
+              {...register("confirm_password", {
+                required: "This field is required",
+              })}
+              type="password"
+              className="form-control"
             />
             <ErrorMessage
-                errors={errors}
-                name="confirm_password"
-                render={({message}) => (
-                    <p className="text-danger">{message}</p>
-                )}
+              errors={errors}
+              name="confirm_password"
+              render={({ message }) => (
+                <p className="text-danger">{message}</p>
+              )}
             />
           </div>
 
           <button className="btn btn-primary">Change Password</button>
         </form>
-
+      </div>
+      <div className="img-container">
+        <img
+          src="/bottom-login.gif"
+          className="login-signup-gif"
+        />
       </div>
     </div>
   );

diff --git a/frontend/src/pages/DashboardPage/ControlButtons/ControlButtons.css b/frontend/src/pages/DashboardPage/ControlButtons/ControlButtons.css
@@ -2,7 +2,7 @@
 .file-import-container {
   display: flex;
   justify-content: center;
-  margin-top: 2vh;
+  margin-top: 1vh;
   align-items: center;
   gap: 20px;
 }

diff --git a/frontend/src/pages/DashboardPage/Dashboard/Dashboard.css b/frontend/src/pages/DashboardPage/Dashboard/Dashboard.css
@@ -59,6 +59,7 @@
   margin-left: auto;
   margin-right: auto;
   font-family: "Roboto", Arial, sans-serif;
+  margin-top: -1px;
 }
 
 .select-container select {
@@ -176,12 +177,6 @@
   /* border: 2px solid blueviolet; */
 }
 
-/* Adjust widths as necessary */
-.select-demographics {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .chart-container {
   flex: 2;
   /* Take up twice as much space as .select-demographics */
@@ -200,11 +195,6 @@
   color: white;
 }
 
-body,
-html {
-  background-color: #f6f2eb;
-}
-
 .demo-dropdown {
   width: 100vw;
 }

diff --git a/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.css b/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.css
@@ -0,0 +1,7 @@
+/* .demographic-select-heading2 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    display: block;
+    color: #333;
+} */
diff --git a/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.jsx b/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.jsx
@@ -22,7 +22,13 @@ const DemographicsSelector = ({
             <div className="select-demographics">
                 <div className="title"></div>
                 <div className="select-container1">
-                <label htmlFor="demographic-select">Select Demographic</label>
+                    <label htmlFor="demographic-select" className="demographic-select-heading" style={{
+                        fontSize: "18px",
+                        textAlign: "center",
+                        fontWeight: "bold",
+                        display: "block",
+                        marginBottom: "10px",
+                    }}>1st Demographic</label>
                     <select
                         onChange={handleDemographicChange}
                         value={selectedDemographic}
@@ -46,7 +52,7 @@ const DemographicsSelector = ({
                                     key={idx}
                                     onChange={(event) => handleValueChange(event, idx)}
                                     value={selectedValues[idx] || ""}
-                                    tabIndex={tabIndex  + 1 + idx}
+                                    tabIndex={tabIndex + 1 + idx}
                                 >
                                     <option value="">Select</option>
                                     {demographicValues
@@ -64,7 +70,13 @@ const DemographicsSelector = ({
 
                 {selectedDemographic && (
                     <div className="select-container2">
-                        <label htmlFor="second-demographic-select">Select 2nd Demographic</label>
+                        <label htmlFor="second-demographic-select" className="demographic-select-heading2" style={{
+                            fontSize: "18px",
+                            textAlign: "center",
+                            fontWeight: "bold",
+                            display: "block",
+                            marginBottom: "10px",
+                        }}>2nd Demographic</label>
 
                         <select
                             id="second-demographic-select"

diff --git a/frontend/src/pages/DashboardPage/QRCodeShare/QRCodeShare.jsx b/frontend/src/pages/DashboardPage/QRCodeShare/QRCodeShare.jsx
@@ -3,7 +3,7 @@ import QRCode from "react-qr-code"; // Import from react-qr-code
 import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap CSS
 import "./QRCodeShare.css"; // Import the CSS file for styling
 import { useNavigate } from "react-router-dom"; // Import useNavigate
-import { envConfig, envConfigFrontend } from "../../../envConfig";
+import { envConfigFrontend } from "../../../envConfig";
 
 const QRCodeShare = ({
   selectedDemographic,
@@ -13,7 +13,7 @@ const QRCodeShare = ({
   timeframe,
   currUser,
 }) => {
-  const VITE_FRONTEND_URL = envConfig();
+  const VITE_FRONTEND_URL = envConfigFrontend();
 
   const [showModal, setShowModal] = useState(false); // Modal visibility state
   const [shareSuccess, setShareSuccess] = useState(null); // State to track success or failure

diff --git a/frontend/src/pages/SharePage/SharePage.css b/frontend/src/pages/SharePage/SharePage.css
@@ -1,11 +1,30 @@
-/* Shared container styles */
 .share-page-container {
+    position: absolute;
     flex-direction: column;
     align-items: center;
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
     font-family: Arial, sans-serif;
+
+    display: flex !important;
+    flex-grow: 1 !important;
+    /* Ensure it can expand beyond the viewport */
+    min-height: 100vh !important;
+    /* Ensure the container takes at least the full height */
+    overflow-y: auto !important;
+    /* Enable vertical scrolling */
+}
+
+.scrollable-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.share-page-content {
+    flex-grow: 1;
+    /* Allow content to expand and scroll */
+    overflow-y: auto;
 }
 
 /* Wrapper for Centering */
@@ -17,6 +36,7 @@
     width: 100%;
 }
 
+
 /* Centered Overall Bias */
 .overall-bias {
     font-size: 1.2rem;
@@ -259,4 +279,24 @@
         font-size: 1rem;
         /* Slightly smaller font for error messages */
     }
+}
+
+.loading-spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-top: 50px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }