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

Refactored theme common color props and fixed button background delay on theme change

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-31 01:33:33 -04:00
1 parent 313a3af67c
commit ac48378614
18 files changed
+48 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+1 -1
View File
@@ -22,7 +22,7 @@ const CustomToolTip = ({ active, payload, label }) => {
>
<Typography
sx={{
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontSize: 13,
}}
>
Client/src/Components/Inputs/Image/index.jsx
+3 -3
View File
@@ -38,12 +38,12 @@ const ImageField = ({ id, src, loading, onChange }) => {
border: "dashed",
borderRadius: theme.shape.borderRadius,
borderColor: isDragging
? theme.palette.common.main
? theme.palette.primary.main
: theme.palette.border.light,
borderWidth: "2px",
transition: "0.2s",
"&:hover": {
borderColor: theme.palette.common.main,
borderColor: theme.palette.primary.main,
backgroundColor: "hsl(215, 87%, 51%, 0.05)",
},
}}
@@ -96,7 +96,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
<Typography
component="span"
fontSize="inherit"
color={theme.palette.common.main}
color={theme.palette.primary.main}
fontWeight={500}
>
Click to upload
Client/src/Components/Link/index.jsx
+2 -2
View File
@@ -28,11 +28,11 @@ const Link = ({ level, label, url }) => {
sx: {
textDecoration: "underline",
textDecorationStyle: "dashed",
textDecorationColor: theme.palette.common.main,
textDecorationColor: theme.palette.primary.main,
textUnderlineOffset: "1px",
":hover": {
color: theme.palette.text.tertiary,
textDecorationColor: theme.palette.common.main,
textDecorationColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.fill,
},
},
Client/src/Components/Sidebar/index.jsx
+1 -1
View File
@@ -154,7 +154,7 @@ function Sidebar() {
color="white"
sx={{
position: "relative",
backgroundColor: theme.palette.common.main,
backgroundColor: theme.palette.primary.main,
borderRadius: theme.shape.borderRadius,
userSelect: "none",
}}
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+1 -1
View File
@@ -302,7 +302,7 @@ const ProfilePanel = () => {
label="Update"
onClick={openPictureModal}
sx={{
color: theme.palette.common.main,
color: theme.palette.primary.main,
}}
/>
</Stack>
Client/src/Pages/Auth/CheckEmail.jsx
+3 -3
View File
@@ -90,7 +90,7 @@ const CheckEmail = () => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 26,
},
@@ -164,7 +164,7 @@ const CheckEmail = () => {
component="span"
onClick={resendToken}
sx={{
color: theme.palette.common.main,
color: theme.palette.primary.main,
userSelect: "none",
pointerEvents: disabled ? "none" : "auto",
cursor: disabled ? "default" : "pointer",
@@ -181,7 +181,7 @@ const CheckEmail = () => {
<Typography
component="span"
ml={theme.spacing(2)}
color={theme.palette.common.main}
color={theme.palette.primary.main}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
>
Client/src/Pages/Auth/ForgotPassword.jsx
+2 -2
View File
@@ -92,7 +92,7 @@ const ForgotPassword = () => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 24,
},
@@ -185,7 +185,7 @@ const ForgotPassword = () => {
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
color={theme.palette.common.main}
color={theme.palette.primary.main}
ml={theme.spacing(2)}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
Client/src/Pages/Auth/Login.jsx
+4 -4
View File
@@ -269,13 +269,13 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
<Typography
className="forgot-p"
display="inline-block"
color={theme.palette.common.main}
color={theme.palette.primary.main}
>
Forgot password?
</Typography>
<Typography
component="span"
color={theme.palette.common.main}
color={theme.palette.primary.main}
ml={theme.spacing(2)}
sx={{ userSelect: "none" }}
onClick={handleNavigate}
@@ -419,7 +419,7 @@ const Login = () => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 30,
},
@@ -491,7 +491,7 @@ const Login = () => {
</Typography>
<Typography
component="span"
color={theme.palette.common.main}
color={theme.palette.primary.main}
ml={theme.spacing(2)}
onClick={() => {
navigate("/register");
Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+2 -2
View File
@@ -27,7 +27,7 @@ const NewPasswordConfirmed = () => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 22,
},
@@ -99,7 +99,7 @@ const NewPasswordConfirmed = () => {
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
color={theme.palette.common.main}
color={theme.palette.primary.main}
ml={theme.spacing(2)}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
Client/src/Pages/Auth/Register/Register.jsx
+2 -2
View File
@@ -644,7 +644,7 @@ const Register = ({ isSuperAdmin }) => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 30,
},
@@ -731,7 +731,7 @@ const Register = ({ isSuperAdmin }) => {
onClick={() => {
navigate("/login");
}}
sx={{ userSelect: "none", color: theme.palette.common.main }}
sx={{ userSelect: "none", color: theme.palette.primary.main }}
>
Log In
</Typography>
Client/src/Pages/Auth/SetNewPassword.jsx
+2 -2
View File
@@ -109,7 +109,7 @@ const SetNewPassword = () => {
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 600,
fontSize: 24,
},
@@ -280,7 +280,7 @@ const SetNewPassword = () => {
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
color={theme.palette.common.main}
color={theme.palette.primary.main}
ml={theme.spacing(2)}
onClick={() => navigate("/login")}
sx={{ userSelect: "none" }}
Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+1 -1
View File
@@ -215,7 +215,7 @@ const CreateNewMaintenanceWindow = () => {
sx={{
width: "fit-content",
fontSize: "var(--env-var-font-size-small)",
borderBottom: `1px dashed ${theme.palette.common.main}`,
borderBottom: `1px dashed ${theme.palette.primary.main}`,
paddingBottom: "4px",
}}
>
Client/src/Pages/Monitors/Details/index.jsx
+1 -1
View File
@@ -37,7 +37,7 @@ const StatBox = ({ title, value }) => {
mb={theme.spacing(2)}
fontSize={14}
fontWeight={500}
color={theme.palette.common.main}
color={theme.palette.primary.main}
sx={{
"& span": {
color: theme.palette.text.accent,
Client/src/Pages/Monitors/Home/index.jsx
+1 -1
View File
@@ -77,7 +77,7 @@ const Monitors = ({ isAdmin }) => {
{monitorState.monitors?.length !== 0 && (
<Button
variant="contained"
color="common"
color="primary"
onClick={() => {
navigate("/monitors/create");
}}
Client/src/Pages/PageSpeed/Details/index.jsx
+3 -3
View File
@@ -43,7 +43,7 @@ const StatBox = ({ icon, title, value }) => {
<Box>
<Typography
variant="h6"
color={theme.palette.common.main}
color={theme.palette.primary.main}
mb={theme.spacing(6)}
>
{title}
@@ -592,7 +592,7 @@ const PageSpeedDetails = () => {
<Typography
component="span"
sx={{
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 500,
textDecoration: "underline",
cursor: "pointer",
@@ -627,7 +627,7 @@ const PageSpeedDetails = () => {
<Typography
component="span"
sx={{
color: theme.palette.common.main,
color: theme.palette.primary.main,
fontWeight: 500,
textDecoration: "underline",
cursor: "pointer",
Client/src/Pages/PageSpeed/index.jsx
+1 -1
View File
@@ -52,7 +52,7 @@ const Card = ({ data }) => {
<Typography
component="h2"
mb={theme.spacing(2)}
color={theme.palette.common.main}
color={theme.palette.primary.main}
>
{data.name}
</Typography>
Client/src/Utils/Theme/darkTheme.js
+9 -5
View File
@@ -14,7 +14,6 @@ const background = {
accent: "#18181a",
};
const border = { light: "#27272a", dark: "#2c2c2c" };
const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
const fontFamilyDefault =
'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -25,7 +24,7 @@ const darkTheme = createTheme({
typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
palette: {
mode: "dark",
common: common,
primary: { main: "#1570ef" },
text: text,
background: background,
border: border,
@@ -66,9 +65,6 @@ const darkTheme = createTheme({
grid: "#454546",
},
// TO BE REMOVED //
primary: {
main: "#1570ef",
},
secondary: {
main: "#e6e6e6",
},
@@ -103,6 +99,7 @@ const darkTheme = createTheme({
styleOverrides: {
root: {
padding: 4,
transition: "none",
"&:hover": {
backgroundColor: background.fill,
},
@@ -131,6 +128,13 @@ const darkTheme = createTheme({
},
},
},
MuiListItemButton: {
styleOverrides: {
root: {
transition: "none",
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
Client/src/Utils/Theme/lightTheme.js
+9 -5
View File
@@ -13,7 +13,6 @@ const background = {
accent: "#f9fafb",
};
const border = { light: "#eaecf0", dark: "#d0d5dd" };
const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
const fontFamilyDefault =
'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -23,7 +22,7 @@ const shadow =
const lightTheme = createTheme({
typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
palette: {
common: common,
primary: { main: "#1570EF" },
text: text,
background: background,
border: border,
@@ -63,9 +62,6 @@ const lightTheme = createTheme({
grid: "#a2a3a3",
},
// TO BE REMOVED //
primary: {
main: "#1570EF",
},
secondary: {
main: "#475467",
},
@@ -100,6 +96,7 @@ const lightTheme = createTheme({
styleOverrides: {
root: {
padding: 4,
transition: "none",
"&:hover": {
backgroundColor: background.fill,
},
@@ -126,6 +123,13 @@ const lightTheme = createTheme({
},
},
},
MuiListItemButton: {
styleOverrides: {
root: {
transition: "none",
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {