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

refactored some hardcoded css

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-06-21 13:16:11 -04:00
1 parent 085c036bba
commit f563629e69
5 files changed
+108 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/DashboardSidebar/index.css
-4
View File
@@ -12,10 +12,6 @@
justify-content: space-between;
}
.dashboard-menu-container{
padding-top: 40px;
}
.support-container {
display: flex;
align-items: center;
Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
+25 -28
View File
@@ -54,10 +54,7 @@ const ProfilePanel = () => {
};
return (
<TabPanel
value="0"
sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
>
<TabPanel value="0" sx={{ padding: "0", marginTop: theme.spacing(6.25) }}>
<form className="edit-profile-form" noValidate spellCheck="false">
<div className="edit-profile-form__wrapper">
<Stack
@@ -172,6 +169,30 @@ const ProfilePanel = () => {
/>
</Stack>
</div>
<Divider
aria-hidden="true"
width="0"
sx={{ marginY: theme.spacing(1) }}
/>
<Stack direction="row" justifyContent="flex-end">
<Box width="fit-content">
<ButtonSpinner
level="primary"
label="Save"
onClick={handleSaveProfile}
isLoading={isLoading}
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) }} />
<form className="delete-profile-form" noValidate spellCheck="false">
@@ -200,30 +221,6 @@ const ProfilePanel = () => {
</Stack>
</div>
</form>
<Divider
aria-hidden="true"
width="0"
sx={{ marginY: theme.spacing(6.25) }}
/>
<Stack direction="row" justifyContent="flex-end">
<Box width="fit-content">
<ButtonSpinner
level="primary"
label="Save"
onClick={handleSaveProfile}
isLoading={isLoading}
loadingText="Saving..."
sx={{
paddingX: "40px",
height: "fit-content",
fontSize: "13px",
"&:focus": {
outline: "none",
},
}}
/>
</Box>
</Stack>
{/* TODO - Update ModalPopup Component with @mui for reusability */}
<Modal
aria-labelledby="modal-delete-account"
Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
+63 -60
View File
@@ -186,10 +186,10 @@ const TeamPanel = () => {
return (
<TabPanel
value="2"
sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
sx={{ padding: "0", marginTop: theme.spacing(6.25) }}
>
<form className="edit-team-form" noValidate spellCheck="false">
<div className="edit-team-form__wrapper">
<form className="edit-organization-form">
<div className="edit-organization-form__wrapper">
<Stack
direction="column"
gap="8px"
@@ -222,6 +222,66 @@ const TeamPanel = () => {
/>
</Stack>
</div>
<Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
</form>
<Modal
aria-labelledby="modal-edit-org-name"
aria-describedby="edit-organization-name"
open={orgStates.isOpen}
onClose={() => toggleOrgModal(false)}
disablePortal
>
<Stack
gap="20px"
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: "4px",
boxShadow: 24,
p: "30px",
"&:focus": {
outline: "none",
},
}}
>
<Typography id="modal-edit-org-name" variant="h4" component="h1">
Rename this organization?
</Typography>
<TextField
id="edit-organization-name"
placeholder={orgStates.name}
spellCheck="false"
value={orgStates.newName}
onChange={(event) =>
setOrgStates((prev) => ({
...prev,
newName: event.target.value,
}))
}
></TextField>
<Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
<Button
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" }}
/>
</Stack>
</Stack>
</Modal>
<form className="edit-team-form" noValidate spellCheck="false">
<div className="edit-team-form__wrapper">
<Typography variant="h4" component="h1">
Team members
@@ -433,63 +493,6 @@ const TeamPanel = () => {
</Box>
</Stack>
</form>
<Modal
aria-labelledby="modal-edit-org-name"
aria-describedby="edit-organization-name"
open={orgStates.isOpen}
onClose={() => toggleOrgModal(false)}
disablePortal
>
<Stack
gap="20px"
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: "4px",
boxShadow: 24,
p: "30px",
"&:focus": {
outline: "none",
},
}}
>
<Typography id="modal-edit-org-name" variant="h4" component="h1">
Rename this organization?
</Typography>
<TextField
id="edit-organization-name"
placeholder={orgStates.name}
spellCheck="false"
value={orgStates.newName}
onChange={(event) =>
setOrgStates((prev) => ({
...prev,
newName: event.target.value,
}))
}
></TextField>
<Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
<Button
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" }}
/>
</Stack>
</Stack>
</Modal>
<Modal
aria-labelledby="modal-invite-member"
aria-describedby="invite-member-to-team"
Client/src/Pages/Settings/index.css
+6 -3
View File
@@ -1,7 +1,8 @@
.edit-profile-form,
.edit-password-form,
.delete-profile-form,
.edit-team-form {
.edit-team-form,
.edit-organization-form {
width: inherit;
}
.edit-profile-form__wrapper,
@@ -11,7 +12,8 @@
.edit-profile-form__wrapper,
.delete-profile-form__wrapper,
.edit-password-form__wrapper,
.edit-team-form__wrapper {
.edit-team-form__wrapper,
.edit-organization-form__wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -20,7 +22,8 @@
.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-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;
Client/src/Pages/Settings/index.jsx
+14 -10
View File
@@ -1,10 +1,6 @@
import PropTypes from "prop-types";
import { useState } from "react";
import {
Box,
Tab,
useTheme,
} from "@mui/material";
import { Box, Tab, useTheme } from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import "./index.css";
@@ -32,18 +28,21 @@ const Settings = () => {
return (
<Box
//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 - 800px)"
mt={theme.spacing(8)}
pt={theme.spacing(5)}
px={theme.spacing(10)}
>
<TabContext value={tab}>
<Box width="100%" sx={{ borderBottom: 1, borderColor: "divider" }}>
<Box
sx={{
borderBottom: 1,
borderColor: "divider",
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
<TabList onChange={handleTabChange} aria-label="settings tabs">
{tabList.map((label, index) => (
<Tab
@@ -55,12 +54,17 @@ const Settings = () => {
color: theme.palette.secondary.main,
textTransform: "none",
minWidth: "fit-content",
minHeight: 0,
paddingLeft: "0",
paddingY: "8px",
paddingY: "10px",
marginRight: "20px",
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
))}