TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed duplicate styling code from component files

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-06-21 19:08:42 -04:00
1 parent f563629e69
commit db652852f1
8 files changed
+147 -220
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Button/index.jsx
+3
View File
@@ -59,6 +59,9 @@ const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
onClick={onClick}
sx={{
textTransform: "none",
"&:focus": {
outline: "none",
},
...sx,
}}
>
Client/src/Components/ButtonSpinner/index.jsx
+7 -1
View File
@@ -70,7 +70,13 @@ const ButtonSpinner = ({
endIcon={position === "end" && img}
onClick={onClick}
loading={isLoading}
sx={{ textTransform: "none", ...sx }}
sx={{
textTransform: "none",
"&:focus": {
outline: "none",
},
...sx,
}}
>
<span>{label}</span>
</LoadingButton>
Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
+13 -45
View File
@@ -40,29 +40,22 @@ const PasswordPanel = () => {
}, 2000);
};
return (
<TabPanel
value="1"
sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
>
<TabPanel value="1">
<form className="edit-password-form" noValidate spellCheck="false">
<div className="edit-password-form__wrapper">
<AnnouncementsDualButtonWithIcon
icon={<InfoOutlinedIcon style={{ fill: "#344054" }} />}
icon={<InfoOutlinedIcon style={{ fill: theme.palette.secondary.main }} />}
subject="SSO login"
body="Since you logged in via SSO, you cannot reset or modify your password."
/>
</div>
<div className="edit-password-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Current Password
</Typography>
</Stack>
<FormControl sx={{ flex: 1, minWidth: theme.spacing(30) }}>
<FormControl sx={{ flex: 1 }}>
<OutlinedInput
id="edit-current-password"
value="RandomPasswordLol"
@@ -80,11 +73,7 @@ const PasswordPanel = () => {
},
}}
>
{!showPassword ? (
<VisibilityOff sx={{ fill: "#98A2B3" }} />
) : (
<Visibility sx={{ fill: "#98A2B3" }} />
)}
{!showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
@@ -92,16 +81,12 @@ const PasswordPanel = () => {
</FormControl>
</div>
<div className="edit-password-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Password
</Typography>
</Stack>
<FormControl sx={{ flex: 1, minWidth: theme.spacing(30) }}>
<FormControl sx={{ flex: 1 }}>
<OutlinedInput
id="edit-password"
value="RandomPasswordLol"
@@ -119,11 +104,7 @@ const PasswordPanel = () => {
},
}}
>
{!showPassword ? (
<VisibilityOff sx={{ fill: "#98A2B3" }} />
) : (
<Visibility sx={{ fill: "#98A2B3" }} />
)}
{!showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
@@ -131,27 +112,19 @@ const PasswordPanel = () => {
</FormControl>
</div>
<div className="edit-password-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Confirm new password
</Typography>
</Stack>
<Box sx={{ flex: 1, minWidth: theme.spacing(30) }}>
<Box sx={{ flex: 1 }}>
<AnnouncementsDualButtonWithIcon
icon={<WarningAmberOutlinedIcon style={{ fill: "#f79009" }} />}
body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
/>
</Box>
</div>
<Divider
aria-hidden="true"
width="0"
sx={{ marginY: theme.spacing(6.25) }}
/>
<Divider aria-hidden="true" width="0" />
<Stack direction="row" justifyContent="flex-end">
<Box width="fit-content">
<ButtonSpinner
@@ -162,11 +135,6 @@ const PasswordPanel = () => {
loadingText="Saving..."
sx={{
paddingX: "40px",
height: "fit-content",
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Box>
@@ -177,7 +145,7 @@ const PasswordPanel = () => {
};
PasswordPanel.propTypes = {
// No props are being passed to this component, hence no specific PropTypes are defined.
};
// No props are being passed to this component, hence no specific PropTypes are defined.
};
export default PasswordPanel;
Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
+9 -56
View File
@@ -54,14 +54,10 @@ const ProfilePanel = () => {
};
return (
<TabPanel value="0" sx={{ padding: "0", marginTop: theme.spacing(6.25) }}>
<TabPanel value="0">
<form className="edit-profile-form" noValidate spellCheck="false">
<div className="edit-profile-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
First Name
</Typography>
@@ -72,16 +68,11 @@ const ProfilePanel = () => {
placeholder="Enter your first name"
sx={{
flex: 1,
minWidth: theme.spacing(30),
}}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Last Name
</Typography>
@@ -92,16 +83,11 @@ const ProfilePanel = () => {
placeholder="Enter your last name"
sx={{
flex: 1,
minWidth: theme.spacing(30),
}}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Email
</Typography>
@@ -115,16 +101,11 @@ const ProfilePanel = () => {
placeholder="Enter your email"
sx={{
flex: 1,
minWidth: theme.spacing(30),
}}
/>
</div>
<div className="edit-profile-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<Stack>
<Typography variant="h4" component="h1">
Your Photo
</Typography>
@@ -132,7 +113,7 @@ const ProfilePanel = () => {
This photo will be displayed in your profile page.
</Typography>
</Stack>
<Stack direction="row" alignItems="center" sx={{ flex: 1 }}>
<Stack className="row-stack" direction="row" alignItems="center">
{/* TODO - Use Avatar component instead of @mui */}
<Avatar
alt="Remy Sharp"
@@ -145,13 +126,6 @@ const ProfilePanel = () => {
label="Delete"
onClick={handleDeletePicture}
isLoading={isLoading}
sx={{
height: "fit-content",
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
{/* TODO - modal popup for update pfp? */}
<Button
@@ -159,18 +133,14 @@ const ProfilePanel = () => {
label="Update"
onClick={handleUpdatePicture}
sx={{
height: "fit-content",
color: theme.palette.primary.main,
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Stack>
</div>
<Divider
aria-hidden="true"
className="short-divider"
width="0"
sx={{ marginY: theme.spacing(1) }}
/>
@@ -184,17 +154,12 @@ const ProfilePanel = () => {
loadingText="Saving..."
sx={{
paddingX: "40px",
height: "fit-content",
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Box>
</Stack>
</form>
<Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
<Divider aria-hidden="true" />
<form className="delete-profile-form" noValidate spellCheck="false">
<div className="delete-profile-form__wrapper">
<Stack direction="column" gap="15px">
@@ -210,12 +175,6 @@ const ProfilePanel = () => {
level="error"
label="Delete account"
onClick={() => setIsOpen(true)}
sx={{
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Box>
</Stack>
@@ -239,7 +198,7 @@ const ProfilePanel = () => {
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: "4px",
borderRadius: `${theme.shape.borderRadius}px`,
boxShadow: 24,
p: "30px",
"&:focus": {
@@ -254,10 +213,6 @@ const ProfilePanel = () => {
id="delete-account-confirmation"
variant="h5"
component="p"
sx={{
color: theme.palette.secondary.main,
fontSize: "13px",
}}
>
If you delete your account, you will no longer be able to sign in,
and all of your data will be deleted. Deleting your account is
@@ -268,14 +223,12 @@ const ProfilePanel = () => {
level="tertiary"
label="Cancel"
onClick={() => setIsOpen(false)}
sx={{ fontSize: "13px" }}
/>
<ButtonSpinner
level="error"
label="Delete account"
onClick={handleDeleteAccount}
isLoading={isLoading}
sx={{ fontSize: "13px" }}
/>
</Stack>
</Stack>
Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
+29 -69
View File
@@ -184,27 +184,22 @@ const TeamPanel = () => {
return count;
};
return (
<TabPanel
value="2"
sx={{ padding: "0", marginTop: theme.spacing(6.25) }}
>
<TabPanel value="2">
<form className="edit-organization-form">
<div className="edit-organization-form__wrapper">
<Stack
direction="column"
gap="8px"
sx={{ flex: 1, marginRight: "10px" }}
>
<div
className="edit-organization-form__wrapper"
>
<Stack>
<Typography variant="h4" component="h1">
Organization name
</Typography>
</Stack>
<Stack
id="org-name-flex-container"
className="row-stack"
direction="row"
justifyContent="flex-end"
gap="8px"
sx={{ flex: 1 }}
>
<ButtonSpinner
level="tertiary"
@@ -212,17 +207,20 @@ const TeamPanel = () => {
disabled
onClick={() => toggleOrgModal(true)}
isLoading={orgStates.isLoading}
sx={{ fontSize: "13px" }}
/>
<Button
level="primary"
label="Rename"
sx={{ paddingX: "30px", fontSize: "13px" }}
sx={{ paddingX: "30px" }}
onClick={() => toggleOrgModal(true)}
/>
</Stack>
</div>
<Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
<Divider
aria-hidden="true"
className="short-divider"
sx={{ marginY: theme.spacing(4) }}
/>
</form>
<Modal
aria-labelledby="modal-edit-org-name"
@@ -241,7 +239,7 @@ const TeamPanel = () => {
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: "4px",
borderRadius: `${theme.shape.borderRadius}px`,
boxShadow: 24,
p: "30px",
"&:focus": {
@@ -269,14 +267,13 @@ const TeamPanel = () => {
level="tertiary"
label="Cancel"
onClick={() => toggleOrgModal(false)}
sx={{ fontSize: "13px" }}
/>
<ButtonSpinner
level="primary"
label="Rename"
onClick={handleRenameOrg}
isLoading={orgStates.isLoading}
sx={{ fontSize: "13px", paddingX: "30px" }}
sx={{ paddingX: "30px" }}
/>
</Stack>
</Stack>
@@ -287,35 +284,26 @@ const TeamPanel = () => {
Team members
</Typography>
</div>
<div
className="edit-team-form__wrapper compact"
style={{ alignItems: "center" }}
>
<div className="edit-team-form__wrapper compact">
<Stack
direction="row"
gap="20px"
alignItems="center"
sx={{ flex: 1, fontSize: "14px" }}
sx={{ fontSize: "14px" }}
>
<Box onClick={() => handleFilter("")} sx={{ cursor: "pointer" }}>
<Box onClick={() => handleFilter("")}>
All
<span className="members-query">
<span>{handleMembersQuery("")}</span>
</span>
</Box>
<Box
onClick={() => handleFilter("admin")}
sx={{ cursor: "pointer" }}
>
<Box onClick={() => handleFilter("admin")}>
Administrator
<span className="members-query">
<span>{handleMembersQuery("admin")}</span>
</span>
</Box>
<Box
onClick={() => handleFilter("member")}
sx={{ cursor: "pointer" }}
>
<Box onClick={() => handleFilter("member")}>
Member
<span className="members-query">
<span>{handleMembersQuery("member")}</span>
@@ -325,7 +313,7 @@ const TeamPanel = () => {
<Button
level="primary"
label="Invite a team member"
sx={{ paddingX: "30px", fontSize: "13px" }}
sx={{ paddingX: "30px" }}
onClick={() => setToggleInviteModal(true)}
/>
</div>
@@ -339,14 +327,15 @@ const TeamPanel = () => {
}}
>
<Stack direction="row" gap="40px" p="20px">
<Stack direction="row" gap="10px" alignItems="center">
<Stack
direction="row"
gap="10px"
alignItems="center"
className="table-stack"
>
<Select
id="select-actions"
value="bulk"
sx={{
fontSize: "13px",
color: theme.palette.secondary.main,
}}
inputProps={{ id: "select-actions-input" }}
>
{actionsConfig.map((action) => (
@@ -365,9 +354,6 @@ const TeamPanel = () => {
onClick={handleSelectActionType}
isLoading={isLoading}
sx={{
height: "fit-content",
fontSize: "13px",
fontWeight: 500,
bgcolor: "#fafafa",
}}
/>
@@ -376,10 +362,6 @@ const TeamPanel = () => {
<Select
id="select-role"
value="role"
sx={{
fontSize: "13px",
color: theme.palette.secondary.main,
}}
inputProps={{ id: "select-role-input" }}
>
{roleConfig.map((role) => (
@@ -398,9 +380,6 @@ const TeamPanel = () => {
onClick={handleSelectRoleType}
isLoading={isLoading}
sx={{
height: "fit-content",
fontSize: "13px",
fontWeight: 500,
bgcolor: "#fafafa",
}}
/>
@@ -468,11 +447,7 @@ const TeamPanel = () => {
</Table>
</Container>
</div>
<Divider
aria-hidden="true"
width="0"
sx={{ marginY: theme.spacing(6.25) }}
/>
<Divider aria-hidden="true" width="0" />
<Stack direction="row" justifyContent="flex-end">
<Box width="fit-content">
<ButtonSpinner
@@ -483,11 +458,6 @@ const TeamPanel = () => {
loadingText="Saving..."
sx={{
paddingX: "40px",
height: "fit-content",
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Box>
@@ -510,7 +480,7 @@ const TeamPanel = () => {
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: "4px",
borderRadius: `${theme.shape.borderRadius}px`,
boxShadow: 24,
p: "30px",
"&:focus": {
@@ -521,15 +491,7 @@ const TeamPanel = () => {
<Typography id="modal-invite-member" variant="h4" component="h1">
Invite new team member
</Typography>
<Typography
id="invite-member-to-team"
variant="h5"
component="p"
sx={{
color: theme.palette.secondary.main,
fontSize: "13px",
}}
>
<Typography id="invite-member-to-team" variant="h5" component="p">
When you add a new team member, they will get access to all
monitors.
</Typography>
@@ -549,14 +511,12 @@ const TeamPanel = () => {
level="tertiary"
label="Cancel"
onClick={() => setToggleInviteModal(false)}
sx={{ fontSize: "13px" }}
/>
<ButtonSpinner
level="primary"
label="Send invite"
onClick={handleInviteMember}
isLoading={isLoading}
sx={{ fontSize: "13px" }}
/>
</Stack>
</Stack>
Client/src/Pages/Settings/index.css
+66 -43
View File
@@ -1,63 +1,79 @@
.edit-profile-form,
.edit-password-form,
.delete-profile-form,
.edit-team-form,
.edit-organization-form {
.settings h1.MuiTypography-root,
.settings p.MuiTypography-root,
.settings input,
.settings button,
.settings td,
.settings .MuiSelect-select {
font-size: var(--env-var-font-size-medium);
}
.settings h1.MuiTypography-root,
.settings p.MuiTypography-root,
.settings input,
.settings .MuiSelect-select {
color: var(--env-var-color-2);
}
.settings h1.MuiTypography-root {
font-weight: 600;
}
.settings .MuiStack-root:not(.table-stack) {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
}
.settings .MuiTabPanel-root {
padding: 0;
margin-top: 50px;
}
.settings .MuiDivider-root:not(.short-divider) {
margin: 50px 0;
}
.settings .MuiDivider-root,
.settings .MuiOutlinedInput-root fieldset,
.announcement-tile {
border-color: var(--env-var-color-29);
}
[class$="-form"] {
width: inherit;
}
.edit-profile-form__wrapper,
.delete-profile-form__wrapper {
width: 90%;
}
.edit-profile-form__wrapper,
.delete-profile-form__wrapper,
.edit-password-form__wrapper,
.edit-team-form__wrapper,
.edit-organization-form__wrapper {
[class$="__wrapper"],
[class$="__wrapper compact"] {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.edit-profile-form__wrapper h1.MuiTypography-root,
.delete-profile-form__wrapper h1.MuiTypography-root,
.edit-password-form__wrapper h1.MuiTypography-root,
.edit-team-form__wrapper h1.MuiTypography-root,
.edit-organization-form h1.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-2);
font-weight: 600;
.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) {
flex-direction: column;
gap: 8px;
margin-right: 10px;
}
.edit-profile-form__wrapper p.MuiTypography-root,
.delete-profile-form__wrapper p.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-2);
opacity: 0.6;
}
#modal-delete-account,
#modal-edit-org-name,
#modal-invite-member {
font-size: var(--env-var-font-size-large);
color: var(--env-var-color-2);
font-weight: 600;
}
.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: 40px;
margin-top: var(--env-var-spacing-4);
}
.edit-team-form__wrapper.compact {
margin-top: 30px;
color: var(--env-var-color-16);
margin-top: var(--env-var-spacing-3);
justify-content: flex-start;
align-items: center;
}
.edit-profile-form__wrapper input,
.edit-password-form__wrapper input,
#edit-organization-name,
#input-team-member {
font-size: var(--env-var-font-size-medium);
padding: 10px;
}
.edit-password-form__wrapper > .announcement-tile {
width: 100%;
}
@@ -66,6 +82,10 @@
.announcement-content-subject {
margin-bottom: 2px;
}
#edit-password + div > button > svg,
#edit-current-password + div > button > svg {
color: var(--env-var-color-29);
}
.edit-password-form__wrapper .announcement-tile {
margin: 0;
}
@@ -73,15 +93,16 @@
margin-left: auto;
}
.MuiBox-root > .announcement-tile {
border-color: var(--env-var-color-14);
background-color: var(--lighter-env-var-color-14);
border-color: var(--env-var-color-27);
background-color: var(--lighter-env-var-color-27);
}
.MuiBox-root > .announcement-tile .announcement-content-body,
.MuiBox-root > .announcement-tile .announcement-close svg {
color: var(--env-var-color-15);
fill: var(--env-var-color-15) !important;
.MuiBox-root > .announcement-tile .announcement-content-body {
color: var(--env-var-color-28);
}
.MuiBox-root > .announcement-tile .announcement-close svg,
.edit-password-form__wrapper > .announcement-tile .announcement-close svg {
display: none;
}
#org-name-flex-container .Mui-disabled {
color: var(--env-var-color-2) !important;
}
@@ -92,14 +113,13 @@
vertical-align: text-top;
}
.edit-team-form__wrapper th {
padding: 14px 0;
padding: var(--env-var-spacing-1) 0;
}
.edit-team-form__wrapper th:first-of-type {
padding-left: 20px;
}
.edit-team-form__wrapper td {
font-size: (--env-var-font-size-medium);
color: var(--env-var-color-16);
color: var(--env-var-color-25);
}
#select-actions,
@@ -120,7 +140,10 @@
border-color: var(--env-var-color-2);
}
.members-query{
.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root {
cursor: pointer;
}
.members-query {
display: inline-flex;
justify-content: center;
align-items: center;
@@ -133,4 +156,4 @@
min-width: 22px;
min-height: 22px;
border-radius: 50%;
}
}
Client/src/Pages/Settings/index.jsx
+3 -2
View File
@@ -32,14 +32,15 @@ const Settings = () => {
minWidth={theme.spacing(55)}
width="100vw"
maxWidth="calc(100vw - 800px)"
pt={theme.spacing(5)}
py={theme.spacing(5)}
px={theme.spacing(10)}
className="settings"
>
<TabContext value={tab}>
<Box
sx={{
borderBottom: 1,
borderColor: "divider",
borderColor: theme.palette.section.borderColor,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
Client/src/index.css
+17 -4
View File
@@ -28,10 +28,23 @@
--env-var-color-11: #5d6b98;
--env-var-color-12: #182230;
--env-var-color-13: #f9fafb;
--env-var-color-14: #fecf60;
--lighter-env-var-color-14: rgba(254, 207, 96, 0.1);
--env-var-color-15: #f79009;
--env-var-color-16: #667085;
--env-var-color-14: #98a2b3;
--env-var-color-15: #f2f4f7;
--env-var-color-16: #ebebeb;
--env-var-color-17: #079455;
--env-var-color-18: #ffc301;
--env-var-color-19: #f04438;
--env-var-color-20: #ecfdf3;
--env-var-color-21: hsla(0, 100%, 52%, 0.06);
--env-var-color-22: #4e5ba6;
--env-var-color-23: #17b26a;
--env-var-color-24: #d92d20;
--env-var-color-25: #667085;
--env-var-color-26: #ff1818;
--env-var-color-27: #fecf60;
--lighter-env-var-color-27: rgba(254, 207, 96, 0.1);
--env-var-color-28: #f79009;
--env-var-color-29: #D0D5DD;
--env-var-radius-1: 4px;
--env-var-radius-2: 8px;