diff --git a/src/pages/settings/components/ThemeCard.tsx b/src/pages/settings/components/ThemeCard.tsx index ef66fe9..78a93bb 100644 --- a/src/pages/settings/components/ThemeCard.tsx +++ b/src/pages/settings/components/ThemeCard.tsx @@ -28,7 +28,10 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme backgroundSize: 'cover', backgroundColor: theme.backgroundColor, border: `solid ${theme.borderColor}`, - color: theme.primaryColor, + color: + theme.borderColor === theme.primaryColor + ? theme.accentColor + : theme.primaryColor, }} data-theme={theme.name} onClick={() => { @@ -132,7 +135,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme paddingRight: '0px', position: 'absolute', right: 3, - backgroundColor: '#ffffff66', + backgroundColor: '#ffffff88', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', }} @@ -176,8 +179,9 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme className={actionIconClasses.editButton} classNames={actionIconClasses} onClick={() => handleOpen(theme)} + mb={2} > - + )} diff --git a/src/styles/ActionIcon.module.css b/src/styles/ActionIcon.module.css index aaf8a3e..84dacf9 100644 --- a/src/styles/ActionIcon.module.css +++ b/src/styles/ActionIcon.module.css @@ -21,8 +21,8 @@ .editButton { &.root { - background-color: transparent !important; - color: var(--color-text-pri) !important; + background-color: white !important; + color: black !important; .icon { font-size: 24px; }