mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-18 23:59:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactored profile tab

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-20 19:34:56 -04:00
parent 8d4486cd43
commit 0ec5e6dcde
2 changed files with 49 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
View File

@@ -217,11 +217,17 @@ const ProfilePanel = () => {
return (
<TabPanel value="profile">
<form className="edit-profile-form" noValidate spellCheck="false">
<div className="edit-profile-form__wrapper">
<Stack>
<Stack
component="form"
className="edit-profile-form"
noValidate
spellCheck="false"
gap={theme.gap.xl}
>
<Stack direction="row">
<Box flex={0.9}>
<Typography component="h1">First name</Typography>
</Stack>
</Box>
<Field
id="edit-first-name"
value={localData.firstName}
@@ -230,11 +236,11 @@ const ProfilePanel = () => {
onChange={handleChange}
error={errors[idToName["edit-first-name"]]}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack>
</Stack>
<Stack direction="row">
<Box flex={0.9}>
<Typography component="h1">Last name</Typography>
</Stack>
</Box>
<Field
id="edit-last-name"
placeholder="Enter your last name"
@@ -243,11 +249,11 @@ const ProfilePanel = () => {
onChange={handleChange}
error={errors[idToName["edit-last-name"]]}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack>
</Stack>
<Stack direction="row">
<Stack flex={0.9}>
<Typography component="h1">Email</Typography>
<Typography component="p">
<Typography component="p" sx={{ opacity: 0.6 }}>
This is your current email address — it cannot be changed.
</Typography>
</Stack>
@@ -256,20 +262,19 @@ const ProfilePanel = () => {
value={user.email}
placeholder="Enter your email"
autoComplete="email"
// TODO - add onChange
onChange={() => logger.warn("disabled")}
// error={errors[idToName["edit-email"]]}
disabled={true}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack>
</Stack>
<Stack direction="row">
<Stack flex={0.9}>
<Typography component="h1">Your photo</Typography>
<Typography component="p">
<Typography component="p" sx={{ opacity: 0.6 }}>
This photo will be displayed in your profile page.
</Typography>
</Stack>
<Stack className="row-stack" direction="row" alignItems="center">
<Stack direction="row" alignItems="center" flex={1}>
<Avatar
src={
localData?.deleteProfileImage
@@ -294,7 +299,7 @@ const ProfilePanel = () => {
}}
/>
</Stack>
</div>
</Stack>
<Divider
aria-hidden="true"
className="short-divider"
@@ -313,31 +318,33 @@ const ProfilePanel = () => {
Object.keys(errors).length !== 0 && !errors?.picture && true
}
sx={{
paddingX: "40px",
paddingX: theme.gap.large,
}}
/>
</Box>
</Stack>
</form>
</Stack>
<Divider aria-hidden="true" />
<form className="delete-profile-form" noValidate spellCheck="false">
<div className="delete-profile-form__wrapper">
<Stack direction="column" gap="8px">
<Typography component="h1">Delete account</Typography>
<Typography component="p">
Note that deleting your account will remove all data from our
system. This is permanent and non-recoverable.
</Typography>
<Box sx={{ mt: theme.spacing(2) }}>
<Button
level="error"
label="Delete account"
onClick={() => setIsOpen("delete")}
/>
</Box>
</Stack>
</div>
</form>
<Stack
component="form"
noValidate
spellCheck="false"
gap={theme.gap.small}
>
<Box>
<Typography component="h1">Delete account</Typography>
<Typography component="p" sx={{ opacity: 0.6 }}>
Note that deleting your account will remove all data from our
system. This is permanent and non-recoverable.
</Typography>
</Box>
<Button
level="error"
label="Delete account"
onClick={() => setIsOpen("delete")}
sx={{ width: "fit-content", mt: theme.gap.small }}
/>
</Stack>
{/* TODO - Update ModalPopup Component with @mui for reusability */}
<Modal
aria-labelledby="modal-delete-account"

23
Client/src/Pages/Account/index.css
View File

@@ -15,11 +15,6 @@
.account h1.MuiTypography-root {
font-weight: 600;
}
.account .MuiStack-root:not(.table-stack) {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
}
.account .MuiTabPanel-root {
padding: 0;
margin-top: 50px;
@@ -34,6 +29,9 @@
.account button:not(.MuiIconButton-root) {
height: 34px;
}
.account .field {
flex: 1;
}
.account [class$="-form"] {
width: inherit;
}
@@ -44,22 +42,16 @@
justify-content: space-between;
align-items: flex-start;
}
.edit-profile-form__wrapper > .MuiStack-root:not(.row-stack),
.edit-password-form__wrapper > .MuiStack-root:not(.row-stack) {
flex-direction: column;
gap: 8px;
margin-right: 10px;
}
.edit-profile-form__wrapper p.MuiTypography-root,
.delete-profile-form__wrapper p.MuiTypography-root {
opacity: 0.6;
}
#modal-delete-account,
#modal-edit-org-name,
#modal-invite-member {
font-size: var(--env-var-font-size-large);
}
.edit-profile-form__wrapper:not(:first-of-type),
.edit-password-form__wrapper:not(:first-of-type),
.edit-team-form__wrapper:not(:first-of-type) {
margin-top: var(--env-var-spacing-4);
@@ -70,15 +62,6 @@
align-items: center;
}
/* for testing, will remove later */
@media only screen and (max-width: 1600px) {
.edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
.edit-password-form__wrapper .MuiStack-root:not(.row-stack),
.edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
margin-right: 30px;
}
}
.account .MuiStack-root:has(span.MuiTypography-root.input-error) {
position: relative;
}