RI-7630: align colors for controls

redisinsight/ui/src/contexts/themeContext.tsx

@@ -4,7 +4,6 @@ import {
   theme as redisUiOldTheme,
   CommonStyles,
   themeLight,
-  themeDark,
 } from '@redis-ui/styles'
 import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
@@ -19,6 +18,7 @@ import {
   DEFAULT_THEME,
 } from '../constants'
 import { localStorageService, themeService } from '../services'
+import { customDarkTheme } from 'uiSrc/styles/custom/dark_theme'
 
 interface Props {
   children: React.ReactNode
@@ -98,7 +98,7 @@ export class ThemeProvider extends React.Component<Props> {
     const { theme, usingSystemTheme }: any = this.state
     const uiTheme =
       theme === Theme.Dark
-        ? themeDark
+        ? customDarkTheme
         : theme === Theme.Light
           ? themeLight
           : redisUiOldTheme

redisinsight/ui/src/styles/custom/dark_theme/color.ts

@@ -0,0 +1,3 @@
+export const color = {
+  dusk000: '#ffffff',
+}

redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts

@@ -0,0 +1,16 @@
+import { DeepPartial } from '@reduxjs/toolkit'
+import { ButtonGroupTheme, themeDark } from '@redis-ui/styles'
+import { color } from 'uiSrc/styles/custom/dark_theme/color'
+
+export const buttonGroup: DeepPartial<ButtonGroupTheme> = {
+  button: {
+    toggleStates: {
+      on: {
+        normal: {
+          bgColor: themeDark.color.azure600,
+          textColor: color.dusk000,
+        },
+      },
+    },
+  },
+}

redisinsight/ui/src/styles/custom/dark_theme/components/index.ts

@@ -0,0 +1,5 @@
+import { buttonGroup } from './ButtonGroup'
+
+export default {
+  buttonGroup,
+}

redisinsight/ui/src/styles/custom/dark_theme/index.ts

@@ -0,0 +1,7 @@
+import { merge } from 'lodash'
+import { themeDark } from '@redis-ui/styles'
+import { color } from 'uiSrc/styles/custom/dark_theme/color'
+import components from 'uiSrc/styles/custom/dark_theme/components'
+
+// Create modified dark theme with legacy colors
+export const customDarkTheme = merge({}, themeDark, { color }, { components })