From b1716813e73282b7f2ea80807e973c9af7eceed5 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 20 Nov 2025 13:41:49 +0200 Subject: [PATCH 1/2] wip: update badge colors --- .../BottomGroupMinimized.tsx | 64 ++----------------- .../ButtonGroupMinimized.styles.ts | 53 +++++++++++++++ 2 files changed, 59 insertions(+), 58 deletions(-) create mode 100644 redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/ButtonGroupMinimized.styles.ts diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx index a7e37e42c4..47240e275e 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx +++ b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import styled from 'styled-components' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { @@ -24,7 +23,6 @@ import { FeatureFlags } from 'uiSrc/constants' import { Text } from 'uiSrc/components/base/text' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { HideFor, ShowFor } from 'uiSrc/components/base/utils/ShowHide' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import { CliIcon, DocumentationIcon, @@ -32,51 +30,10 @@ import { } from 'uiSrc/components/base/icons' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from '../../styles.module.scss' - -const ComponentBadge = styled(RiBadge)<{ isActive?: boolean }>` - background-color: transparent !important; - color: var(--euiTextSubduedColor) !important; - height: 18px !important; - border: none !important; - cursor: pointer; - user-select: none; - - &[title] { - pointer-events: none; - } - - ${({ isActive, theme }) => { - // TODO: try to replace with semantic colors once the palette is bigger. - const bgColorActive = - theme.name === 'dark' ? theme.color.azure600 : theme.color.azure200 - const bgColorHover = - theme.name === 'dark' ? theme.color.azure500 : theme.color.azure300 - - const color = - theme.name === 'dark' ? theme.color.azure200 : theme.color.azure600 - - return ` - ${isActive ? `background-color: ${bgColorActive} !important;` : ''} - ${isActive ? `color: ${color} !important;` : ''} - &:hover { - background-color: ${bgColorHover} !important; - color: ${color} !important; - } - ` - }} -` - -const ContainerMinimized = styled.div` - display: flex; - align-items: center; - padding-left: ${({ theme }) => theme.core.space.space050}; - height: 26px; - line-height: 26px; - border-left: 1px solid - ${({ theme }) => theme.semantic.color.border.neutral500}; - border-right: 1px solid - ${({ theme }) => theme.semantic.color.border.neutral500}; -` +import { + ComponentBadge, + ContainerMinimized, +} from './ButtonGroupMinimized.styles' const BottomGroupMinimized = () => { const { instanceId = '' } = useParams<{ instanceId: string }>() @@ -138,11 +95,7 @@ const BottomGroupMinimized = () => { return ( - + { @@ -172,11 +124,7 @@ const BottomGroupMinimized = () => { /> - + ` + height: 18px !important; + border: none !important; + cursor: pointer; + user-select: none; + + &[title] { + pointer-events: none; + } + + ${({ isActive, theme }) => { + console.log('theme', theme) + // TODO: try to replace with semantic colors once the palette is bigger. + const bgColorActive = + theme.name === 'dark' + ? theme.semantic.color.background.primary300 + : theme.semantic.color.background.primary300 + const bgColorHover = + theme.name === 'dark' + ? theme.semantic.color.background.primary500 + : theme.semantic.color.background.primary200 + + const color = + theme.name === 'dark' + ? theme.semantic.color.text.primary600 + : theme.semantic.color.text.primary600 + + return ` + ${isActive ? `background-color: ${bgColorActive} !important;` : ''} + ${isActive ? `color: ${color} !important;` : ''} + &:hover { + background-color: ${bgColorHover} !important; + color: ${color} !important; + } + ` + }} +` + +export const ContainerMinimized = styled.div` + display: flex; + align-items: center; + padding-left: ${({ theme }) => theme.core.space.space050}; + height: 26px; + line-height: 26px; + border-left: 1px solid + ${({ theme }) => theme.semantic.color.border.neutral500}; + border-right: 1px solid + ${({ theme }) => theme.semantic.color.border.neutral500}; +` From 4ecf5c20a597c272a2a9c4d665cb53798c234789 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 20 Nov 2025 14:22:48 +0200 Subject: [PATCH 2/2] adjust colors --- .../ButtonGroupMinimized.styles.ts | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/ButtonGroupMinimized.styles.ts b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/ButtonGroupMinimized.styles.ts index c0c11dea50..5fd3c67801 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/ButtonGroupMinimized.styles.ts +++ b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/ButtonGroupMinimized.styles.ts @@ -12,29 +12,27 @@ export const ComponentBadge = styled(RiBadge)<{ isActive?: boolean }>` pointer-events: none; } + background-color: transparent !important; + ${({ isActive, theme }) => { - console.log('theme', theme) // TODO: try to replace with semantic colors once the palette is bigger. const bgColorActive = theme.name === 'dark' - ? theme.semantic.color.background.primary300 - : theme.semantic.color.background.primary300 + ? theme.semantic.color.background.primary400 + : theme.semantic.color.background.primary400 const bgColorHover = theme.name === 'dark' ? theme.semantic.color.background.primary500 - : theme.semantic.color.background.primary200 + : theme.semantic.color.background.primary300 - const color = - theme.name === 'dark' - ? theme.semantic.color.text.primary600 - : theme.semantic.color.text.primary600 + const textColorActiveHover = theme.semantic.color.text.primary50 return ` ${isActive ? `background-color: ${bgColorActive} !important;` : ''} - ${isActive ? `color: ${color} !important;` : ''} + ${isActive ? `color: ${textColorActiveHover} !important;` : ''} &:hover { background-color: ${bgColorHover} !important; - color: ${color} !important; + color: ${textColorActiveHover} !important; } ` }}