From b2f730f1ae26873fa9c5bd7bc82a3b90d879450a Mon Sep 17 00:00:00 2001 From: Jai0212 Date: Tue, 3 Dec 2024 00:51:32 -0500 Subject: [PATCH] fixed all CSS --- frontend/src/index.css | 12 +- frontend/src/pages/AboutPage/AboutPage.css | 6 +- .../pages/ChangePassword/ChangePassword.css | 34 +-- .../pages/ChangePassword/ChangePassword.jsx | 78 ++++--- .../ControlButtons/ControlButtons.css | 2 +- .../DashboardPage/Dashboard/Dashboard.css | 12 +- .../Demographics/DemographicsSelector.css | 7 + .../Demographics/DemographicsSelector.jsx | 18 +- .../DashboardPage/QRCodeShare/QRCodeShare.jsx | 4 +- frontend/src/pages/SharePage/SharePage.css | 42 +++- frontend/src/pages/SharePage/SharePage.jsx | 118 +++++----- frontend/src/pages/UserLogin/UserLogin.css | 73 +++--- frontend/src/pages/UserLogin/UserLogin.jsx | 6 +- frontend/src/pages/UserSignup/UserSignup.css | 125 +--------- frontend/src/pages/UserSignup/UserSignup.jsx | 214 +++++++++--------- 15 files changed, 351 insertions(+), 400 deletions(-) create mode 100644 frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.css diff --git a/frontend/src/index.css b/frontend/src/index.css index 06e083fa..d44cc457 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,4 +1,8 @@ -/* html, -body { - overflow: hidden; -} */ \ No newline at end of file +body, +html { + background-color: #003f5c; + height: 100%; + overflow-y: auto; +} + +/* background-color: #f6f2eb; */ \ No newline at end of file diff --git a/frontend/src/pages/AboutPage/AboutPage.css b/frontend/src/pages/AboutPage/AboutPage.css index 2c9c6fab..64c1c9e1 100644 --- 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 index ef5f2686..64b5d2dc 100644 --- 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; +} \ No newline at end of file diff --git a/frontend/src/pages/ChangePassword/ChangePassword.jsx b/frontend/src/pages/ChangePassword/ChangePassword.jsx index 8f8e2fe3..400dc0aa 100644 --- 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 ( -
+

Change Password

-
+
( -

{message}

- )} + errors={errors} + name="old_password" + render={({ message }) => ( +

{message}

+ )} />
( -

{message}

- )} + errors={errors} + name="new_password" + render={({ message }) => ( +

{message}

+ )} />
( -

{message}

- )} + errors={errors} + name="confirm_password" + render={({ message }) => ( +

{message}

+ )} />
- +
+
+
); diff --git a/frontend/src/pages/DashboardPage/ControlButtons/ControlButtons.css b/frontend/src/pages/DashboardPage/ControlButtons/ControlButtons.css index 0c06da97..9b173ac6 100644 --- 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 index 3297a50b..d72a52a2 100644 --- 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 new file mode 100644 index 00000000..ff9fad22 --- /dev/null +++ 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 index 8ef48bbc..a9c02f04 100644 --- a/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.jsx +++ b/frontend/src/pages/DashboardPage/Demographics/DemographicsSelector.jsx @@ -22,7 +22,13 @@ const DemographicsSelector = ({
- + { - 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 index 6756deb1..dda42541 100644 --- 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); + } } \ No newline at end of file diff --git a/frontend/src/pages/SharePage/SharePage.jsx b/frontend/src/pages/SharePage/SharePage.jsx index efa6f19f..038dc74f 100644 --- a/frontend/src/pages/SharePage/SharePage.jsx +++ b/frontend/src/pages/SharePage/SharePage.jsx @@ -10,6 +10,20 @@ const SharePage = () => { const { encodedData } = useParams(); // Access the encodedData parameter from the URL const chartRef = useRef(null); + useEffect(() => { + // Change background color and allow vertical overflow + document.body.style.backgroundColor = "#f6f2eb"; // Set the body background color + document.documentElement.style.backgroundColor = "#f6f2eb"; // Set the html background color + document.body.style.overflowY = "auto"; // Allow vertical scrolling + + // Clean up by resetting the background color and overflow when the component unmounts + return () => { + document.body.style.backgroundColor = ""; + document.documentElement.style.backgroundColor = ""; + document.body.style.overflowY = ""; // Reset the overflow + }; + }, []); + const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -86,64 +100,66 @@ const SharePage = () => { return (
{loading ? ( -

Loading...

+
) : error ? (

{error}

) : ( -
-

- Data by {data.currUser.split('@')[0]} ({data.timeframe.charAt(0).toUpperCase() + data.timeframe.slice(1)}) -

- -
-
0.5 ? '#ff6666' : '#66ff66', // Change background color - }} - > - Overall Bias: {averageBias} +
+
+

+ Data by {data.currUser.split('@')[0]} ({data.timeframe.charAt(0).toUpperCase() + data.timeframe.slice(1)}) +

+ +
+
0.5 ? '#ff6666' : '#66ff66', // Change background color + }} + > + Overall Bias: {averageBias} +
-
-
-
- {graphData && Object.keys(graphData).length > 0 && ( - - )} +
+
+ {graphData && Object.keys(graphData).length > 0 && ( + + )} +
-
-
-
-
- Demographic 1: - - {data.selectedDemographic.charAt(0).toUpperCase() + data.selectedDemographic.slice(1)} - -
    - {data.selectedValues && - data.selectedValues.map((value, index) => ( -
  • {value}
    • - ))} -
-
-
- Demographic 2: - - {data.secondSelectedDemographic.charAt(0).toUpperCase() + data.secondSelectedDemographic.slice(1)} - -
    - {data.selectedSecondValues && - data.selectedSecondValues.map((value, index) => ( -
  • {value}
    • - ))} -
+
+
+
+ Demographic 1: + + {data.selectedDemographic.charAt(0).toUpperCase() + data.selectedDemographic.slice(1)} + +
    + {data.selectedValues && + data.selectedValues.map((value, index) => ( +
  • {value}
    • + ))} +
+
+
+ Demographic 2: + + {data.secondSelectedDemographic.charAt(0).toUpperCase() + data.secondSelectedDemographic.slice(1)} + +
    + {data.selectedSecondValues && + data.selectedSecondValues.map((value, index) => ( +
  • {value}
    • + ))} +
+
diff --git a/frontend/src/pages/UserLogin/UserLogin.css b/frontend/src/pages/UserLogin/UserLogin.css index 8932bb52..b8415c6c 100644 --- a/frontend/src/pages/UserLogin/UserLogin.css +++ b/frontend/src/pages/UserLogin/UserLogin.css @@ -3,86 +3,81 @@ height: 100vh; overflow: hidden; } + .main-container { position: relative; top: -2.5vh; height: 100vh; width: 100vw; - background-color: #FFE0B1; + background-color: #1b262c; + /* Dark slate background */ justify-content: center; overflow: hidden; } + .container-login { - padding-top: 8vh; position: relative; - top: 0; text-align: center; - color: #F6F2EB; + color: #bbe1fa; + /* Soft light blue for text */ background-color: transparent; - height: 18vh; - margin-top: 0; + height: 8vh; + margin-top: 6vh; } -.seperator{ - color: black; - margin-bottom: 9vh; -} - -h1 { - font-weight: bold; - font-family: "Roboto", Arial, sans-serif; +.seperator { color: black; + margin-bottom: 7vh; } .alert-primary { - background-color: #f6f2eb; - /* Light Green background for form */ + background-color: #f9f9f9; padding: 30px; border-radius: 8px; max-width: 400px; - height: 35% !important; - /* Set a max width */ - margin: 50px auto; - /* Center the form horizontally and add top/bottom margin */ + margin: auto; } /* Adjusting the form input styles */ .form-control { - border-color: #2e2e2e; - /* Green border for inputs */ + border-color: #3282b8; + /* Teal border for inputs */ border-radius: 8px; } .form-control:focus { - border-color: #2e2e2e; - box-shadow: 0 0 5px rgba(56, 142, 60, 0.5); - /* Green shadow */ + border-color: #3282b8; + box-shadow: 0 0 5px rgba(50, 130, 184, 0.5); + /* Teal shadow */ } /* Button Styles */ .btn-primary { - background-color: #4caf50; - /* Green button */ - border-color: #2e2e2e; + background-color: #3282b8; + /* Teal button */ + border-color: #0f4c75; border-radius: 8px; + width: 100%; + margin-top: 10px; + margin-bottom: 6px; /* Round button corners */ } .btn-primary:focus { - background-color: #388e3c; - /* Darker green on focus */ - border-color: #2e2e2e; + background-color: #1b6ca8; + /* Slightly darker teal on focus */ + border-color: #0f4c75; } .btn-primary:hover { - background-color: #388e3c; - /* Dark green on hover */ - border-color: #2e2e2e; + background-color: #1b6ca8; + /* Slightly darker teal on hover */ + border-color: #0f4c75; } .text-danger { - color: #d32f2f; - /* Keeping error text red */ + color: #e63946; + /* Soft red for error text */ } /* For wider screens, limit the form's width */ @@ -93,8 +88,10 @@ h1 { } } -label { +.login-label { font-family: "Roboto", Arial, sans-serif; + color: #0f4c75; + /* Muted teal for labels */ } .img-container { @@ -110,4 +107,6 @@ label { width: 100%; height: 100%; right: 0; + opacity: 0.8; + /* Slight transparency for the GIF */ } \ No newline at end of file diff --git a/frontend/src/pages/UserLogin/UserLogin.jsx b/frontend/src/pages/UserLogin/UserLogin.jsx index 49802d01..7be9886b 100644 --- a/frontend/src/pages/UserLogin/UserLogin.jsx +++ b/frontend/src/pages/UserLogin/UserLogin.jsx @@ -83,14 +83,14 @@ const UserLogin = () => { return (
-

User Login

+

Login

- + {
- + { } return ( -
-
-

User Sign Up

-
- -
-
- -
-
- - - ( -

{message}

- )} - /> -
- -
- - - ( -

{message}

- )} - /> -
+
+
+

Sign Up

+
+ +
+
+ +
+
+ + + ( +

{message}

+ )} + />
-
-
- - - ( -

{message}

- )} - /> -
+
+ + + ( +

{message}

+ )} + /> +
+
+ +
+
+ + + ( +

{message}

+ )} + /> +
+
+ +
+
+ + + ( +

{message}

+ )} + />
-
-
- - - ( -

{message}

- )} - /> -
- -
- - - ( -

{message}

- )} - /> -
+
+ + + ( +

{message}

+ )} + />
+
- - -
+ + +
+
+
+
); };