diff --git a/package.json b/package.json index 1a189dc37c..033c1ff46c 100644 --- a/package.json +++ b/package.json @@ -251,10 +251,10 @@ "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", - "@redis-ui/components": "^39.18.0", - "@redis-ui/icons": "^6.1.1", - "@redis-ui/styles": "^12.9.0", - "@redis-ui/table": "^2.18.0", + "@redis-ui/components": "^41.3.7", + "@redis-ui/icons": "^6.3.17", + "@redis-ui/styles": "^13.2.0", + "@redis-ui/table": "^2.23.2", "@reduxjs/toolkit": "^1.6.2", "@stablelib/snappy": "^1.0.2", "@types/json-dup-key-validator": "^1.0.2", 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; + } + + background-color: transparent !important; + + ${({ isActive, theme }) => { + // TODO: try to replace with semantic colors once the palette is bigger. + const bgColorActive = + theme.name === 'dark' + ? theme.semantic.color.background.primary400 + : theme.semantic.color.background.primary400 + const bgColorHover = + theme.name === 'dark' + ? theme.semantic.color.background.primary500 + : theme.semantic.color.background.primary300 + + const textColorActiveHover = theme.semantic.color.text.primary50 + + return ` + ${isActive ? `background-color: ${bgColorActive} !important;` : ''} + ${isActive ? `color: ${textColorActiveHover} !important;` : ''} + &:hover { + background-color: ${bgColorHover} !important; + color: ${textColorActiveHover} !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}; +` diff --git a/yarn.lock b/yarn.lock index 731db44e28..e0220e9971 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2531,10 +2531,10 @@ "@react-hook/latest" "^1.0.2" "@react-hook/passive-layout-effect" "^1.2.0" -"@redis-ui/components@^39.18.0": - version "39.18.0" - resolved "https://registry.yarnpkg.com/@redis-ui/components/-/components-39.18.0.tgz#b5fb63e4fbcf9e25d9c56eb7bcd3232b539a37c4" - integrity sha512-o+I8nN+S4C++924w/hy6q4RyfEwvWqb7c+6vr1QxxZ9+aZcBMatyw/QW8yKnGHhP5IOB4Dm4SHIVYisTXbaSuA== +"@redis-ui/components@^41.2.9", "@redis-ui/components@^41.3.7": + version "41.3.7" + resolved "https://registry.yarnpkg.com/@redis-ui/components/-/components-41.3.7.tgz#ef41229845dae5859fdb8ebdf3319ffba4447b30" + integrity sha512-0wS1CQk7rQX5B7VqFJLMy+GAQo4lkMu6QefAHSi16nUyPmSbAGin/VLFZp2gTI4/DFgpZF2t08W4bKOzVVJG9Q== dependencies: "@radix-ui/react-checkbox" "^1.0.3" "@radix-ui/react-collapsible" "^1.0.3" @@ -2558,27 +2558,26 @@ type-fest "^3.13.1" virtua "^0.36.3" -"@redis-ui/icons@^6.1.1": - version "6.1.1" - resolved "https://registry.yarnpkg.com/@redis-ui/icons/-/icons-6.1.1.tgz#100dfb7fdb4fa810ab85d9ddbd6ed75ed755f1fe" - integrity sha512-KzxU7cCcArOfE3cGX59Dd3FDDkQAp1QLupcj9nvXj+zOoPkaCdGELeAFL5l8glo7eY/6pyQl5VTR4XQ3d12mjQ== +"@redis-ui/icons@^6.3.11", "@redis-ui/icons@^6.3.17": + version "6.3.17" + resolved "https://registry.yarnpkg.com/@redis-ui/icons/-/icons-6.3.17.tgz#d444997b43b9c815dde33f23ed0bd0bfed601311" + integrity sha512-H5bXBZmUG3sNUWMcI7p/VPshiu1roRsiRuTCdY8Avw1ardfs7zAdJKBohmX4OCwSjsv/KKTP2UzXh3wOdCh6Ew== -"@redis-ui/styles@^12.8.0", "@redis-ui/styles@^12.9.0": - version "12.9.0" - resolved "https://registry.yarnpkg.com/@redis-ui/styles/-/styles-12.9.0.tgz#41dc32db88079e79e61d99676f3c1116b4d6fdf9" - integrity sha512-tHiRisLBJNQBAEuxyTIIs2HLSVI3kB53AZp+L22T7aJCBqJ/P24jwfsSI4znUzH4aN3yEyXBwaDclPXuq986ew== +"@redis-ui/styles@^13.2.0": + version "13.2.0" + resolved "https://registry.yarnpkg.com/@redis-ui/styles/-/styles-13.2.0.tgz#62d29906e0ffbce3baa4197f682e12919d9ed8c8" + integrity sha512-OetVR/bpCUO00tJlYyhat8HJbIyvxm0bJa94AyDsjHuln+852HqOZyHASKXsIOXBfQLgGREZBz+cKZYId8aNgA== dependencies: color-alpha "^2.0.0" polished "^4.3.1" -"@redis-ui/table@^2.18.0": - version "2.18.0" - resolved "https://registry.yarnpkg.com/@redis-ui/table/-/table-2.18.0.tgz#d8f22a3902a72ff7e140a2e3b77d6941bd6b6bc2" - integrity sha512-LkU0oco+uOfGCHi6n3yqwTgQP4i0xPbeF5k5heDRynmX55P9pOtNR6qxzSBu/gV5IQGOGVzfjcgHY/oFdSHqvA== +"@redis-ui/table@^2.23.2": + version "2.23.2" + resolved "https://registry.yarnpkg.com/@redis-ui/table/-/table-2.23.2.tgz#96e5497866d80313f0db759f973c139e04932bbb" + integrity sha512-afhLkWLHk3yi/s9qL6aSGt2rqAPEnvJUfbPJPcgXi2EXG04csFk7Pyd0L4GoWSAH3wAYWfxybCZOIxjI7rhIzA== dependencies: - "@redis-ui/components" "^39.18.0" - "@redis-ui/icons" "^6.1.1" - "@redis-ui/styles" "^12.8.0" + "@redis-ui/components" "^41.2.9" + "@redis-ui/icons" "^6.3.11" "@tanstack/react-table" "^8.9.8" type-fest "^3.13.1"