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

Refactored pages styling 1/?

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-27 20:11:59 -04:00
1 parent edeaf2ede9
commit e5c19c2744
18 files changed
+404 -207
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Inputs/Field/index.jsx
+6 -3
View File
@@ -1,4 +1,5 @@
import PropTypes from "prop-types";
import { forwardRef, useState } from "react";
import { useTheme } from "@emotion/react";
import {
IconButton,
@@ -9,10 +10,7 @@ import {
} from "@mui/material";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import Visibility from "@mui/icons-material/Visibility";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import Button from "../../Button";
import "./index.css";
import { forwardRef, useState } from "react";
/**
* @param {Object} props
@@ -119,6 +117,11 @@ const Field = forwardRef(
onChange={onChange}
disabled={disabled}
inputRef={ref}
inputProps={{
sx: {
color: theme.palette.text.secondary,
},
}}
sx={
type === "url"
? {
Client/src/Components/Sidebar/index.jsx
+5
View File
@@ -124,8 +124,13 @@ function Sidebar() {
<Stack
component="aside"
className={collapsed ? "collapsed" : "expanded"}
py={theme.spacing(6)}
gap={theme.spacing(6)}
sx={{
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.main,
"& .selected-path, & .MuiListItemButton-root:hover": {
backgroundColor: theme.palette.background.accent,
},
Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+11 -4
View File
@@ -97,13 +97,20 @@ const PasswordPanel = () => {
};
return (
<TabPanel value="password">
<TabPanel
value="password"
sx={{
"& h1, & input": {
color: theme.palette.text.tertiary,
},
}}
>
<Stack
component="form"
onSubmit={handleSubmit}
noValidate
spellCheck="false"
gap={theme.gap.xl}
gap={theme.spacing(20)}
>
<Stack direction="row">
<Box flex={0.9}>
@@ -165,9 +172,9 @@ const PasswordPanel = () => {
loadingText="Saving..."
disabled={Object.keys(errors).length !== 0 && true}
sx={{
paddingX: theme.gap.large,
paddingX: theme.spacing(12),
width: "fit-content",
mt: theme.gap.xl,
mt: theme.spacing(20),
}}
/>
</Stack>
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+51 -20
View File
@@ -216,13 +216,20 @@ const ProfilePanel = () => {
const isModalOpen = (name) => isOpen === name;
return (
<TabPanel value="profile">
<TabPanel
value="profile"
sx={{
"& h1, & p, & input": {
color: theme.palette.text.tertiary,
},
}}
>
<Stack
component="form"
className="edit-profile-form"
noValidate
spellCheck="false"
gap={theme.gap.xl}
gap={theme.spacing(20)}
>
<Stack direction="row">
<Box flex={0.9}>
@@ -295,7 +302,7 @@ const ProfilePanel = () => {
label="Update"
onClick={openPictureModal}
sx={{
color: theme.palette.primary.main,
color: theme.palette.common.main,
}}
/>
</Stack>
@@ -303,7 +310,9 @@ const ProfilePanel = () => {
<Divider
aria-hidden="true"
width="0"
sx={{ marginY: theme.spacing(1) }}
sx={{
marginY: theme.spacing(1),
}}
/>
<Stack direction="row" justifyContent="flex-end">
<Box width="fit-content">
@@ -317,18 +326,24 @@ const ProfilePanel = () => {
Object.keys(errors).length !== 0 && !errors?.picture && true
}
sx={{
paddingX: theme.gap.large,
paddingX: theme.spacing(12),
}}
/>
</Box>
</Stack>
</Stack>
<Divider aria-hidden="true" sx={{ marginY: theme.spacing(6) }} />
<Divider
aria-hidden="true"
sx={{
marginY: theme.spacing(20),
borderColor: theme.palette.border.light,
}}
/>
<Stack
component="form"
noValidate
spellCheck="false"
gap={theme.gap.small}
gap={theme.spacing(4)}
>
<Box>
<Typography component="h1">Delete account</Typography>
@@ -341,7 +356,7 @@ const ProfilePanel = () => {
level="error"
label="Delete account"
onClick={() => setIsOpen("delete")}
sx={{ width: "fit-content", mt: theme.gap.small }}
sx={{ width: "fit-content", mt: theme.spacing(4) }}
/>
</Stack>
{/* TODO - Update ModalPopup Component with @mui for reusability */}
@@ -353,18 +368,19 @@ const ProfilePanel = () => {
disablePortal
>
<Stack
gap="10px"
gap={theme.spacing(5)}
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 500,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: `${theme.shape.borderRadius}px`,
bgcolor: theme.palette.background.main,
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: 24,
p: "30px",
p: theme.spacing(15),
"&:focus": {
outline: "none",
},
@@ -378,7 +394,12 @@ const ProfilePanel = () => {
and all of your data will be deleted. Deleting your account is
permanent and non-recoverable action.
</Typography>
<Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
<Stack
direction="row"
gap={theme.spacing(5)}
mt={theme.spacing(5)}
justifyContent="flex-end"
>
<Button
level="tertiary"
label="Cancel"
@@ -406,17 +427,22 @@ const ProfilePanel = () => {
left: "50%",
transform: "translate(-50%, -50%)",
width: 450,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: `${theme.shape.borderRadius}px`,
bgcolor: theme.palette.background.main,
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: 24,
p: "30px",
p: theme.spacing(15),
"&:focus": {
outline: "none",
},
}}
>
<Typography id="modal-update-picture" component="h1">
<Typography
id="modal-update-picture"
component="h1"
color={theme.palette.text.secondary}
>
Upload Image
</Typography>
<ImageField
@@ -447,7 +473,12 @@ const ProfilePanel = () => {
) : (
""
)}
<Stack direction="row" mt="20px" gap="10px" justifyContent="flex-end">
<Stack
direction="row"
mt={theme.spacing(10)}
gap={theme.spacing(5)}
justifyContent="flex-end"
>
<Button
level="secondary"
label="Edit"
Client/src/Components/TabPanels/Account/TeamPanel.jsx
+37 -19
View File
@@ -198,7 +198,18 @@ const TeamPanel = () => {
};
return (
<TabPanel value="team">
<TabPanel
value="team"
sx={{
"& h1": {
color: theme.palette.text.tertiary,
},
"& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
{
color: theme.palette.text.accent,
},
}}
>
{/* FEATURE STILL TO BE IMPLEMENTED */}
{/* <Stack component="form">
<Box sx={{ alignSelf: "flex-start" }}>
@@ -250,24 +261,30 @@ const TeamPanel = () => {
component="form"
noValidate
spellCheck="false"
gap={theme.gap.large}
gap={theme.spacing(12)}
>
<Typography component="h1">Team members</Typography>
<Stack direction="row" justifyContent="space-between">
<Stack
direction="row"
alignItems="flex-end"
gap={theme.gap.medium}
sx={{ fontSize: "14px" }}
gap={theme.spacing(6)}
sx={{ fontSize: 14 }}
>
<ButtonGroup>
<ButtonGroup
sx={{
"& button, & button:hover": {
borderColor: theme.palette.border.light,
},
}}
>
<Button
level="secondary"
label="All"
onClick={() => setFilter("all")}
sx={{
backgroundColor:
filter === "all" && theme.palette.otherColors.fillGray,
filter === "all" && theme.palette.background.fill,
}}
/>
<Button
@@ -276,7 +293,7 @@ const TeamPanel = () => {
onClick={() => setFilter("admin")}
sx={{
backgroundColor:
filter === "admin" && theme.palette.otherColors.fillGray,
filter === "admin" && theme.palette.background.fill,
}}
/>
<Button
@@ -285,7 +302,7 @@ const TeamPanel = () => {
onClick={() => setFilter("user")}
sx={{
backgroundColor:
filter === "user" && theme.palette.otherColors.fillGray,
filter === "user" && theme.palette.background.fill,
}}
/>
</ButtonGroup>
@@ -293,7 +310,7 @@ const TeamPanel = () => {
<Button
level="primary"
label="Invite a team member"
sx={{ paddingX: "30px" }}
sx={{ paddingX: theme.spacing(15) }}
onClick={() => setIsOpen(true)}
/>
</Stack>
@@ -312,18 +329,19 @@ const TeamPanel = () => {
disablePortal
>
<Stack
gap="10px"
gap={theme.spacing(5)}
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: `${theme.shape.borderRadius}px`,
bgcolor: theme.palette.background.main,
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: 24,
p: "30px",
p: theme.spacing(15),
"&:focus": {
outline: "none",
},
@@ -335,7 +353,7 @@ const TeamPanel = () => {
<Typography
id="invite-member-to-team"
component="p"
sx={{ mb: theme.gap.medium }}
sx={{ mb: theme.spacing(6) }}
>
When you add a new team member, they will get access to all
monitors.
@@ -360,14 +378,14 @@ const TeamPanel = () => {
}))
}
items={[
{ _id: "admin", name: "admin" },
{ _id: "user", name: "user" },
{ _id: "admin", name: "Admin" },
{ _id: "user", name: "User" },
]}
/>
<Stack
direction="row"
gap={theme.gap.small}
mt={theme.gap.ml}
gap={theme.spacing(4)}
mt={theme.spacing(8)}
justifyContent="flex-end"
>
<Button