From c7c0066012c66df09d2ddc9baf4c9e0430e985b7 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sun, 16 Jun 2024 01:32:46 -0400 Subject: [PATCH 01/10] Initial page design & removed redundant code --- Client/src/Components/ButtonSpinner/index.jsx | 15 +- Client/src/Pages/Demo/Demo.jsx | 4 +- Client/src/Pages/Settings/index.css | 18 ++ Client/src/Pages/Settings/index.jsx | 298 +++++++++++++++++- Client/src/index.css | 4 +- 5 files changed, 315 insertions(+), 24 deletions(-) diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx index 2cfdaad5d..f584d1cac 100644 --- a/Client/src/Components/ButtonSpinner/index.jsx +++ b/Client/src/Components/ButtonSpinner/index.jsx @@ -18,25 +18,12 @@ const levelConfig = { variant: "contained", color: "error", }, - imagePrimary: { - color: "primary", - variant: "contained", - }, - imageSecondary: { - color: "secondary", - variant: "outlined", - }, - imageTertiary: { - color: "tertiary", - variant: "text", - }, }; /** - * ButtonSpinner component displays a button with loading loadingText capability. * @component * @param {Object} props - * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The style level of the button. + * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The style level of the button. * @param {string} props.label - The label text displayed on the button. * @param {React.ReactNode} [props.img] - Icon or image element to display within the button. * @param {boolean} [props.disabled=false] - Determines if the button is disabled. diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 583f8bda0..ef6747026 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -390,7 +390,7 @@ const Demo = () => { isLoading={isLoading} /> } @@ -398,7 +398,7 @@ const Demo = () => { isLoading={isLoading} /> } diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css index e69de29bb..1e48dcddf 100644 --- a/Client/src/Pages/Settings/index.css +++ b/Client/src/Pages/Settings/index.css @@ -0,0 +1,18 @@ +.edit-profile-form, .delete-profile-form{ + width: inherit; +} +.edit-profile-form__wrapper, .delete-profile-form__wrapper{ + width: 90%; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; +} +.edit-profile-form__wrapper:not(:first-of-type){ + margin-top: 40px; +} +.edit-profile-form__wrapper input{ + font-size: 13px; + padding: 10px; +} \ No newline at end of file diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 639bbef54..87c5eddb7 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -1,9 +1,295 @@ -import React from 'react' +import PropTypes from "prop-types"; +import { useState } from "react"; +import { + Box, + Typography, + Tab, + useTheme, + TextField, + Avatar, + Stack, + Divider, +} from "@mui/material"; +import TabPanel from "@mui/lab/TabPanel"; +import TabContext from "@mui/lab/TabContext"; +import TabList from "@mui/lab/TabList"; +import "./index.css"; + +import ButtonSpinner from "../../Components/ButtonSpinner"; +import Button from "../../Components/Button"; + +const tabList = ["Profile", "Password", "Team"]; const Settings = () => { - return ( -
Settings
- ) -} + //(tab) 0 - Profile + //(tab) 1 - Password + //(tab) 2 - Team + const [tab, setTab] = useState("0"); + const handleTabChange = (event, newTab) => { + setTab(newTab); + }; -export default Settings \ No newline at end of file + const theme = useTheme(); + + const [isLoading, setIsLoading] = useState(false); + //TODO - implement delete profile picture function + const handleDeletePicture = () => { + setIsLoading(true); + + setTimeout(() => { + setIsLoading(false); + }, 2000); + }; + const handleUpdatePicture = () => {}; + const handleDeleteAccount = () => { + setIsLoading(true); + + setTimeout(() => { + setIsLoading(false); + }, 2000); + }; + return ( + + + + + {tabList.map((label, index) => ( + + ))} + + + +
+
+ + First Name + + +
+
+ + Last Name + + +
+
+ + + Email + + + After updating, you'll receive a confirmation email. + + + +
+
+ + + Your Photo + + + This photo will be displayed in your profile page. + + + + {/* TODO - Use Avatar component instead of @mui */} + + {/* TODO - delete pfp functionality */} + + {/* TODO - modal popup for update pfp? */} +
+
+ +
+
+ + + Delete Account + + + Note that deleting your account will remove all data from our + system. This is permanent and non-recoverable. + + +
+
+ + Password + Team + + + ); +}; + +export default Settings; diff --git a/Client/src/index.css b/Client/src/index.css index 092992f09..1e84c214f 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -3,9 +3,9 @@ line-height: 1.5; font-weight: 400; - color-scheme: light dark; + /* color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: #242424; */ font-synthesis: none; text-rendering: optimizeLegibility; From fd4c5436bd52717979189519e301a839e51a3770 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sun, 16 Jun 2024 18:12:15 -0400 Subject: [PATCH 02/10] Modal Component and small touch ups --- Client/src/Pages/Settings/index.jsx | 112 ++++++++++++++++++++++++---- 1 file changed, 97 insertions(+), 15 deletions(-) diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 87c5eddb7..747402a37 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -9,6 +9,7 @@ import { Avatar, Stack, Divider, + Modal, } from "@mui/material"; import TabPanel from "@mui/lab/TabPanel"; import TabContext from "@mui/lab/TabContext"; @@ -40,17 +41,21 @@ const Settings = () => { setIsLoading(false); }, 2000); }; + //TODO - implement delete profile update function const handleUpdatePicture = () => {}; + + const [isOpen, setIsOpen] = useState(false); + //TODO - implement delete account function const handleDeleteAccount = () => { setIsLoading(true); setTimeout(() => { setIsLoading(false); + setIsOpen(false); }, 2000); }; return ( { > - + {tabList.map((label, index) => ( { flex: 1, color: theme.palette.secondary.main, fontSize: "13px", - fontWeight: "700", + fontWeight: "600", marginRight: "10px", }} > - First Name + First name { flex: 1, color: theme.palette.secondary.main, fontSize: "13px", - fontWeight: "700", + fontWeight: "600", marginRight: "10px", }} > - Last Name + Last name { sx={{ color: theme.palette.secondary.main, fontSize: "13px", - fontWeight: "700", + fontWeight: "600", }} > Email @@ -189,10 +194,10 @@ const Settings = () => { sx={{ color: theme.palette.secondary.main, fontSize: "13px", - fontWeight: "700", + fontWeight: "600", }} > - Your Photo + Your photo { This photo will be displayed in your profile page. - + {/* TODO - Use Avatar component instead of @mui */} { className="icon-button-avatar" style={{ width: "64px", height: "64px" }} /> - {/* TODO - delete pfp functionality */} { label="Update" onClick={handleUpdatePicture} sx={{ + height: "fit-content", color: theme.palette.primary.main, + fontSize: "13px", "&:focus": { outline: "none", }, @@ -251,10 +259,10 @@ const Settings = () => { sx={{ color: theme.palette.secondary.main, fontSize: "13px", - fontWeight: "700", + fontWeight: "600", }} > - Delete Account + Delete account {