Changes to theming

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}
 				>
-					<FiEdit />
+					<FiEdit color='green' />
 				</ActionIcon>
 				<ActionIcon
 					className={actionIconClasses.editButton}

src/pages/settings/components/Themes.tsx

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

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;
         }