Changes to theming

This commit is contained in:
Sean Edmunds
2024-12-31 12:00:47 -06:00
parent c11adf1695
commit cedacda784
3 changed files with 13 additions and 6 deletions

View File

@@ -28,7 +28,10 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundColor: theme.backgroundColor, backgroundColor: theme.backgroundColor,
border: `solid ${theme.borderColor}`, border: `solid ${theme.borderColor}`,
color: theme.primaryColor, color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
}} }}
data-theme={theme.name} data-theme={theme.name}
onClick={() => { onClick={() => {
@@ -132,7 +135,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
paddingRight: '0px', paddingRight: '0px',
position: 'absolute', position: 'absolute',
right: 3, right: 3,
backgroundColor: '#ffffff66', backgroundColor: '#ffffff88',
borderTopLeftRadius: '10px', borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px', borderBottomLeftRadius: '10px',
}} }}
@@ -176,8 +179,9 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
className={actionIconClasses.editButton} className={actionIconClasses.editButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleOpen(theme)} onClick={() => handleOpen(theme)}
mb={2}
> >
<FiEdit /> <FiEdit color='green' />
</ActionIcon> </ActionIcon>
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.editButton}

View File

@@ -142,7 +142,10 @@ function ThemesSettings({ theme }: any) {
fontWeight: 'bold', fontWeight: 'bold',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: theme.borderColor, backgroundColor: theme.borderColor,
color: 'var(--color-text-pri)', color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
}} }}
/> />
)} )}

View File

@@ -21,8 +21,8 @@
.editButton { .editButton {
&.root { &.root {
background-color: transparent !important; background-color: white !important;
color: var(--color-text-pri) !important; color: black !important;
.icon { .icon {
font-size: 24px; font-size: 24px;
} }