Initial page design & removed redundant code
This commit is contained in:
Daniel Cojocea committed
1 parent
9da39c8f91
commit
c7c0066012
5 files changed
+315
-24
No files matched your search
@@ -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.
|
||||
|
||||
@@ -390,7 +390,7 @@ const Demo = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="imagePrimary"
|
||||
level="primary"
|
||||
label="Upload"
|
||||
position="start"
|
||||
img={<UploadIcon/>}
|
||||
@@ -398,7 +398,7 @@ const Demo = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="imageSecondary"
|
||||
level="secondary"
|
||||
label="Send"
|
||||
position="end"
|
||||
img={<SendIcon/>}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<div>Settings</div>
|
||||
)
|
||||
}
|
||||
//(tab) 0 - Profile
|
||||
//(tab) 1 - Password
|
||||
//(tab) 2 - Team
|
||||
const [tab, setTab] = useState("0");
|
||||
const handleTabChange = (event, newTab) => {
|
||||
setTab(newTab);
|
||||
};
|
||||
|
||||
export default Settings
|
||||
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 (
|
||||
<Box
|
||||
flexDirection="column"
|
||||
//TODO - need to figure out document sizing
|
||||
//TODO - breakpoints for responsive design
|
||||
height="calc(100vh - 104px)"
|
||||
minWidth={theme.spacing(55)}
|
||||
width="100vw"
|
||||
maxWidth="calc(100vw - 700px)"
|
||||
mt={theme.spacing(8)}
|
||||
pt={theme.spacing(5)}
|
||||
px={theme.spacing(10)}
|
||||
>
|
||||
<TabContext value={tab}>
|
||||
<Box width="100%" sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||
<TabList onChange={handleTabChange} aria-label="setting tabs">
|
||||
{tabList.map((label, index) => (
|
||||
<Tab
|
||||
label={label}
|
||||
key={index}
|
||||
value={index.toString()}
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: theme.palette.secondary.main,
|
||||
textTransform: "none",
|
||||
minWidth: "fit-content",
|
||||
paddingLeft: "0",
|
||||
paddingY: "8px",
|
||||
marginRight: "20px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</TabList>
|
||||
</Box>
|
||||
<TabPanel
|
||||
value="0"
|
||||
sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
|
||||
>
|
||||
<form className="edit-profile-form" noValidate spellCheck="false">
|
||||
<div className="edit-profile-form__wrapper">
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
flex: 1,
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
First Name
|
||||
</Typography>
|
||||
<TextField
|
||||
id="edit-first-name"
|
||||
placeholder="Enter your first name"
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: theme.spacing(30),
|
||||
}}
|
||||
></TextField>
|
||||
</div>
|
||||
<div className="edit-profile-form__wrapper">
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
flex: 1,
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
Last Name
|
||||
</Typography>
|
||||
<TextField
|
||||
id="edit-last-name"
|
||||
placeholder="Enter your last name"
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: theme.spacing(30),
|
||||
}}
|
||||
></TextField>
|
||||
</div>
|
||||
<div className="edit-profile-form__wrapper">
|
||||
<Stack
|
||||
direction="column"
|
||||
gap="8px"
|
||||
sx={{
|
||||
flex: 1,
|
||||
marginRight: "10px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
opacity: 0.6,
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
After updating, you'll receive a confirmation email.
|
||||
</Typography>
|
||||
</Stack>
|
||||
<TextField
|
||||
id="edit-email"
|
||||
placeholder="Enter your email"
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: theme.spacing(30),
|
||||
}}
|
||||
></TextField>
|
||||
</div>
|
||||
<div className="edit-profile-form__wrapper">
|
||||
<Stack
|
||||
direction="column"
|
||||
gap="8px"
|
||||
sx={{ flex: 1, marginRight: "10px" }}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
}}
|
||||
>
|
||||
Your Photo
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
opacity: 0.6,
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
This photo will be displayed in your profile page.
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" alignContent="center" sx={{ flex: 1 }}>
|
||||
{/* TODO - Use Avatar component instead of @mui */}
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/static/images/avatar/2.jpg"
|
||||
className="icon-button-avatar"
|
||||
style={{ width: "64px", height: "64px" }}
|
||||
/>
|
||||
{/* TODO - delete pfp functionality */}
|
||||
<ButtonSpinner
|
||||
level="tertiary"
|
||||
label="Delete"
|
||||
onClick={handleDeletePicture}
|
||||
isLoading={isLoading}
|
||||
sx={{
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{/* TODO - modal popup for update pfp? */}
|
||||
<Button
|
||||
level="tertiary"
|
||||
label="Update"
|
||||
onClick={handleUpdatePicture}
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
</form>
|
||||
<Divider sx={{ marginY: theme.spacing(6.25) }} />
|
||||
<form className="delete-profile-form" noValidate spellCheck="false">
|
||||
<div className="delete-profile-form__wrapper">
|
||||
<Stack direction="column" gap="15px">
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
}}
|
||||
>
|
||||
Delete Account
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
opacity: 0.6,
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Note that deleting your account will remove all data from our
|
||||
system. This is permanent and non-recoverable.
|
||||
</Typography>
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
<Button
|
||||
level="error"
|
||||
label="Delete Account"
|
||||
onClick={handleDeleteAccount}
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</div>
|
||||
</form>
|
||||
</TabPanel>
|
||||
<TabPanel value="1">Password</TabPanel>
|
||||
<TabPanel value="2">Team</TabPanel>
|
||||
</TabContext>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user