From f58a0b86a8937f8a8e74d8e36b9d42ce38cc1d0d Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 28 Nov 2025 15:08:40 +0200 Subject: [PATCH 1/3] fix(ui): align Coplit and Insights icons on Databases page Fixed misalignment of Coplit and Insights icons on the Databases page by: - Adding align and justify props for proper alignment - Matching the layout pattern used in InstanceHeader References: #RI-7774 --- .../src/templates/home-page-template/HomePageTemplate.tsx | 8 ++++++-- .../src/templates/home-page-template/styles.module.scss | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx index bc112f926d..72575e4f2f 100644 --- a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx +++ b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx @@ -40,11 +40,15 @@ const HomePageTemplate = (props: Props) => { return ( <> {loading && ( - + )}
- + {isAnyChatAvailable && ( diff --git a/redisinsight/ui/src/templates/home-page-template/styles.module.scss b/redisinsight/ui/src/templates/home-page-template/styles.module.scss index 838844b5f7..ccbb527854 100644 --- a/redisinsight/ui/src/templates/home-page-template/styles.module.scss +++ b/redisinsight/ui/src/templates/home-page-template/styles.module.scss @@ -6,6 +6,7 @@ background-color: var(--euiColorEmptyShade); margin-bottom: 16px; border-bottom: 1px solid var(--separatorColor); + gap: 16px; } .pageDefaultHeader { From e57a76af03c77d153938f3cb8e623e7f174ed829 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 28 Nov 2025 15:23:03 +0200 Subject: [PATCH 2/3] refactor(ui): migrate HomePageTemplate to styled-components References: #RI-7774 --- .../HomePageTemplate.styles.ts | 25 +++++++++++ .../home-page-template/HomePageTemplate.tsx | 20 +++++---- .../home-page-template/styles.module.scss | 45 ------------------- 3 files changed, 37 insertions(+), 53 deletions(-) create mode 100644 redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts delete mode 100644 redisinsight/ui/src/templates/home-page-template/styles.module.scss diff --git a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts new file mode 100644 index 0000000000..85a073d4c6 --- /dev/null +++ b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components' +import { Row } from 'uiSrc/components/base/layout/flex' +import { type Theme } from 'uiSrc/components/base/theme/types' + +export const PageDefaultHeader = styled(Row)` + height: ${({ theme }: { theme: Theme }) => theme.core.space.space800}; + background-color: ${({ theme }: { theme: Theme }) => + theme.semantic.color.background.neutral100}; + border-bottom: 1px solid + ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500}; + padding: 0 ${({ theme }: { theme: Theme }) => theme.core.space.space200}; + margin-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` + +export const PageWrapper = styled.div` + height: calc( + 100% - ${({ theme }: { theme: Theme }) => theme.core.space.space800} - + ${({ theme }: { theme: Theme }) => theme.core.space.space200} + ); + overflow: hidden; +` + +export const ExplorePanelWrapper = styled.div` + padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` diff --git a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx index 72575e4f2f..dad1f9c67f 100644 --- a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx +++ b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx @@ -11,8 +11,12 @@ import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { CopilotTrigger, InsightsTrigger } from 'uiSrc/components/triggers' import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex' -import styles from './styles.module.scss' import { ProgressBarLoader } from 'uiSrc/components/base/display' +import { + ExplorePanelWrapper, + PageDefaultHeader, + PageWrapper, +} from './HomePageTemplate.styles' import { instancesSelector as databaseInstancesSelector } from 'uiSrc/slices/instances/instances' import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances' @@ -46,7 +50,7 @@ const HomePageTemplate = (props: Props) => { absolute /> )} -
+ {isAnyChatAvailable && ( @@ -65,12 +69,12 @@ const HomePageTemplate = (props: Props) => { -
-
- - {children} - -
+ + + + {children} + + ) } diff --git a/redisinsight/ui/src/templates/home-page-template/styles.module.scss b/redisinsight/ui/src/templates/home-page-template/styles.module.scss deleted file mode 100644 index ccbb527854..0000000000 --- a/redisinsight/ui/src/templates/home-page-template/styles.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -.pageHeader, .pageDefaultHeader { - height: 64px; - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--euiColorEmptyShade); - margin-bottom: 16px; - border-bottom: 1px solid var(--separatorColor); - gap: 16px; -} - -.pageDefaultHeader { - padding: 0 16px; -} - -.pageWrapper { - height: calc(100% - 70px); - overflow: hidden; -} - -.explorePanel { - padding-bottom: 16px; -} - -.capabilityWrapper { - :global(.capabilities__item:nth-child(2)) { - @media screen and (max-width: 840px) { - display: none; - } - } - - &.rdiEnabled { - :global(.capabilities__item:nth-child(1)) { - @media screen and (max-width: 920px) { - display: none; - } - } - - :global(.capabilities__item:nth-child(2)) { - @media screen and (max-width: 1024px) { - display: none; - } - } - } -} From 4324d77d9b06ef04d252848c3fc5d082888af23c Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 28 Nov 2025 15:25:33 +0200 Subject: [PATCH 3/3] docs(ai): update frontend rules with styled-components best practices Added new sections documenting best practices learned from migration: - Use gap prop instead of custom margins - Use theme spacing instead of magic numbers - Use semantic colors from theme instead of CSS variables - Use layout components (Row/Col/FlexGroup) instead of div References: #RI-7774 --- .ai/rules/frontend.md | 79 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/.ai/rules/frontend.md b/.ai/rules/frontend.md index 609ab45040..0e03943864 100644 --- a/.ai/rules/frontend.md +++ b/.ai/rules/frontend.md @@ -122,6 +122,85 @@ export const Wrapper = styled(FlexGroup)` ` ``` +### Use Gap Prop Instead of Custom Margins + +**Prefer `gap` prop on layout components** instead of custom margins for spacing between elements: + +```typescript +// ✅ GOOD: Use gap prop + + Item 1 + Item 2 + +``` + +### Use Theme Spacing Instead of Magic Numbers + +**Always use theme spacing values** instead of hardcoded pixel values: + +```typescript +// ✅ GOOD: Use theme spacing +export const Container = styled(Row)` + height: ${({ theme }) => theme.core.space.space500}; + padding: 0 ${({ theme }) => theme.core.space.space200}; + margin-bottom: ${({ theme }) => theme.core.space.space200}; +`; + +// ❌ BAD: Using magic numbers +export const Container = styled(Row)` + height: 64px; + padding: 0 16px; + margin-bottom: 16px; +`; +``` + +### Use Semantic Colors from Theme + +**Always use semantic colors** from the theme instead of CSS variables or hardcoded colors: + +```typescript +// ✅ GOOD: Use semantic colors +export const Header = styled(Row)` + background-color: ${({ theme }) => + theme.semantic.color.background.neutral100}; + border-bottom: 1px solid + ${({ theme }) => theme.semantic.color.border.neutral500}; +`; + +// ❌ BAD: Using deprecated EUI CSS variables +export const Header = styled(Row)` + background-color: var(--euiColorEmptyShade); + border-bottom: 1px solid var(--separatorColor); +`; +``` + +### Use Layout Components (Row/Col/FlexGroup) Instead of div + +**Prefer layout components** from the layout system instead of regular `div` elements: + +```typescript +// ✅ GOOD: Use Row component +import { Row } from 'uiSrc/components/base/layout/flex' + +export const PageHeader = styled(Row)` + height: ${({ theme }) => theme.core.space.space500}; + background-color: ${({ theme }) => + theme.semantic.color.background.neutral100}; +` + + + {children} + + +// ❌ BAD: Using div with flex properties +export const PageHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; +` +``` + ### Conditional Styling Use `$` prefix for transient props that shouldn't pass to DOM: