From cd6144f9623bc0d3365711713996b50bd7ef3249 Mon Sep 17 00:00:00 2001 From: ArtemHoruzhenko Date: Fri, 10 Oct 2025 11:23:24 +0300 Subject: [PATCH 1/2] RI-7630: align colors for controls --- redisinsight/ui/src/contexts/themeContext.tsx | 4 ++-- .../ui/src/styles/custom/dark_theme/color.ts | 3 +++ .../custom/dark_theme/components/ButtonGroup.ts | 16 ++++++++++++++++ .../styles/custom/dark_theme/components/index.ts | 5 +++++ redisinsight/ui/src/styles/custom/index.ts | 7 +++++++ 5 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 redisinsight/ui/src/styles/custom/dark_theme/color.ts create mode 100644 redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts create mode 100644 redisinsight/ui/src/styles/custom/dark_theme/components/index.ts create mode 100644 redisinsight/ui/src/styles/custom/index.ts diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 62eae330a2..14a29533b6 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/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' interface Props { children: React.ReactNode @@ -98,7 +98,7 @@ export class ThemeProvider extends React.Component { const { theme, usingSystemTheme }: any = this.state const uiTheme = theme === Theme.Dark - ? themeDark + ? customDarkTheme : theme === Theme.Light ? themeLight : redisUiOldTheme diff --git a/redisinsight/ui/src/styles/custom/dark_theme/color.ts b/redisinsight/ui/src/styles/custom/dark_theme/color.ts new file mode 100644 index 0000000000..403e44af92 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/color.ts @@ -0,0 +1,3 @@ +export const color = { + dusk000: '#ffffff', +} diff --git a/redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts b/redisinsight/ui/src/styles/custom/dark_theme/components/ButtonGroup.ts new file mode 100644 index 0000000000..f989acefe3 --- /dev/null +++ b/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 = { + button: { + toggleStates: { + on: { + normal: { + bgColor: themeDark.color.azure600, + textColor: color.dusk000, + }, + }, + }, + }, +} diff --git a/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts b/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts new file mode 100644 index 0000000000..d8a8370498 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/dark_theme/components/index.ts @@ -0,0 +1,5 @@ +import { buttonGroup } from './ButtonGroup' + +export default { + buttonGroup, +} diff --git a/redisinsight/ui/src/styles/custom/index.ts b/redisinsight/ui/src/styles/custom/index.ts new file mode 100644 index 0000000000..b0055648c0 --- /dev/null +++ b/redisinsight/ui/src/styles/custom/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 }) From 7dcf08c196a6a82b276a361213732f0f41fedb74 Mon Sep 17 00:00:00 2001 From: ArtemHoruzhenko Date: Fri, 10 Oct 2025 11:58:58 +0300 Subject: [PATCH 2/2] RI-7630: move bootstrap file into proper folder --- redisinsight/ui/src/contexts/themeContext.tsx | 2 +- redisinsight/ui/src/styles/custom/{ => dark_theme}/index.ts | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename redisinsight/ui/src/styles/custom/{ => dark_theme}/index.ts (100%) diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 14a29533b6..138ecc313f 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -18,7 +18,7 @@ import { DEFAULT_THEME, } from '../constants' import { localStorageService, themeService } from '../services' -import { customDarkTheme } from 'uiSrc/styles/custom' +import { customDarkTheme } from 'uiSrc/styles/custom/dark_theme' interface Props { children: React.ReactNode diff --git a/redisinsight/ui/src/styles/custom/index.ts b/redisinsight/ui/src/styles/custom/dark_theme/index.ts similarity index 100% rename from redisinsight/ui/src/styles/custom/index.ts rename to redisinsight/ui/src/styles/custom/dark_theme/index.ts