Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maintenance start time style and clock UI and theme changes #1869

Merged
merged 9 commits into from
Mar 10, 2025
Merged

Maintenance start time style and clock UI and theme changes #1869

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a0401ff
Maitenance start time style fixes.
Owaiseimdad Mar 4, 2025
b3bfab0
Merged the conflict theme file.
Owaiseimdad Mar 4, 2025
ffcc32e
Merge branch 'bluewave-labs:develop' into Maintenance-start-time-style
Owaiseimdad Mar 6, 2025
6983b3a
have added the accent in order to make sure that the number choosen i…
Owaiseimdad Mar 6, 2025
872501f
Merge branch 'bluewave-labs:develop' into Maintenance-start-time-style
Owaiseimdad Mar 9, 2025
ef954af
Made major ui changes in clock.
Owaiseimdad Mar 9, 2025
5ffc822
Theme constant changes.
Owaiseimdad Mar 9, 2025
9e33a0a
FIX for style of clock colors when not active.
Owaiseimdad Mar 9, 2025
28c44d6
Removed the text component from mui themes.
Owaiseimdad Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/Utils/Theme/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,12 @@ const newSemanticColors = {
dark: newColors.blueGray900,
},
},
text: {
timePicker: {
light: paletteColors.gray300,
dark: paletteColors.gray600,
},
Copy link
Collaborator

@ajhollid ajhollid Mar 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't work with MUI components. They must be defined in a very specific format in order to work with MUI. You can reference them directly as you have, but we can't use this with MUIs "variant" system.

Let's just drop this enitirely, I don't see a need to define new colors for this component. The same colors should be used as all other components.

The picker should use theme.primary.contrastText or theme.primary.lowContrast if you need a lower contrast color.

If we define a new color scheme for each component we defeat the purpose of the theme.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have use contrastTextTertiary now, matches some what to the expectation. You can let me know if it works or not.

Screen.Recording.2025-03-10.at.5.41.26.AM.mov

},
};

export { typographyLevels, semanticColors as colors, newSemanticColors };
108 changes: 108 additions & 0 deletions src/Utils/Theme/globalTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,6 +394,114 @@ const baseTheme = (palette) => ({
}),
},
},

// This code is added for clock in maintenance page
// code starts from here.
MuiClock: {
// Directly target the clock component
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.primary.main, // Alternative target
"& .MuiClock-clock": {
// Inner clock face
backgroundColor: theme.palette.secondary.main,
},
}),
},
},
MuiClockPicker: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.secondary.main, // Outer container background
"& .MuiClock-root": {
color: theme.palette.primary.lowContrast,
},
"& .MuiClock-clock": {
backgroundColor: theme.palette.background.default, // Clock face background
borderColor: theme.palette.secondary.lowContrast,
},
}),
},
},
// The clock pointer ( pointer to number like hour/minute hand)
MuiClockPointer: {
styleOverrides: {
root: ({ theme }) => ({
// Main pointer line color
backgroundColor: theme.palette.accent.main,
"& .MuiClockPointer-thumb": {
backgroundColor: theme.palette.grey[500], // Use your desired grey
},
}),
},
},
// This is for numbers in the clock (circular one's)
MuiClockNumber: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.primary.contrastText,
"&.Mui-selected": {
color: theme.palette.accent.contrastText,
backgroundColor: theme.palette.accent.main,
},
}),
},
},
// This is for 00:00 am and pm (top bar)
MuiTimePickerToolbar: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.secondary.lowContrast,
// General text color
"& .MuiTypography-root": {
color: theme.palette.text.timePicker,
},
// Selected time (hour/minute) color
"& .Mui-selected": {
color: `${theme.palette.accent.main} !important`,
},
// AM/PM buttons color
"& .MuiButtonBase-root": {
"&.Mui-selected": {
backgroundColor: theme.palette.accent.main,
},
},
}),
},
},
// left and right direction style
MuiPickersArrowSwitcher: {
styleOverrides: {
root: ({ theme }) => ({
"& .MuiIconButton-root": {
color: theme.palette.primary.contrastText,
},
}),
},
},
// cancel and okay actions style
MuiDialogActions: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.primary.main,
"& .MuiButton-root": {
color: theme.palette.primary.contrastText,
},
}),
},
},
// code ends here.

// For labels of input fields
MuiInputLabel: {
styleOverrides: {
root: ({ theme }) => ({
"&.Mui-focused": {
color: theme.palette.accent.main,
},
}),
},
},
},
shape: {
borderRadius: 2,
Expand Down