RI-7774 Fix navigation icons alignment on the Databases page

.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
+<Row align="center" justify="between" gap="l">
+  <FlexItem>Item 1</FlexItem>
+  <FlexItem>Item 2</FlexItem>
+</Row>
+```
+
+### 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};
+`
+
+<PageHeader align="center" justify="between" gap="l">
+  {children}
+</PageHeader>
+
+// ❌ 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:

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};
+`

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'
 
@@ -40,11 +44,15 @@ const HomePageTemplate = (props: Props) => {
   return (
     <>
       {loading && (
-        <ProgressBarLoader color="primary" data-testid="progress-key-stream" absolute />
+        <ProgressBarLoader
+          color="primary"
+          data-testid="progress-key-stream"
+          absolute
+        />
       )}
-      <div className={styles.pageDefaultHeader}>
+      <PageDefaultHeader align="center" justify="between" gap="l">
         <HomeTabs />
-        <FlexGroup gap="l">
+        <FlexGroup align="center" justify="end" gap="l">
           {isAnyChatAvailable && (
             <FlexItem>
               <CopilotTrigger />
@@ -61,12 +69,12 @@ const HomePageTemplate = (props: Props) => {
             </FlexItem>
           </FeatureFlagComponent>
         </FlexGroup>
-      </div>
-      <div className={styles.pageWrapper}>
-        <ExplorePanelTemplate panelClassName={styles.explorePanel}>
-          {children}
-        </ExplorePanelTemplate>
-      </div>
+      </PageDefaultHeader>
+      <PageWrapper>
+        <ExplorePanelWrapper>
+          <ExplorePanelTemplate>{children}</ExplorePanelTemplate>
+        </ExplorePanelWrapper>
+      </PageWrapper>
     </>
   )
 }