From 7918fe2ded03b381695b3cfc52453fffa7608af6 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 6 Nov 2025 18:17:03 +0200
Subject: [PATCH 1/5] fix edit and clone sentinel modals

---
 .../form/sentinel/PrimaryGroupSentinel.tsx    | 10 ++---
 .../forms/EditSentinelConnection.tsx          | 37 +++++++++----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
index 237a2b89f1..0a33e8cd53 100644
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { FormikProps } from 'formik'
 
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { TextInput } from 'uiSrc/components/base/inputs'
 
@@ -15,10 +15,10 @@ export interface Props {
 const PrimaryGroupSentinel = (props: Props) => {
   const { flexGroupClassName = '', flexItemClassName = '', formik } = props
   return (
-    <>
+    <Col gap="l">
       <Row gap="m" responsive className={flexGroupClassName}>
         <FlexItem grow className={flexItemClassName}>
-          <FormField label="Database Alias*">
+          <FormField label="Database alias" required>
             <TextInput
               name="name"
               id="name"
@@ -33,7 +33,7 @@ const PrimaryGroupSentinel = (props: Props) => {
       </Row>
       <Row gap="m" responsive className={flexGroupClassName}>
         <FlexItem grow className={flexItemClassName}>
-          <FormField label="Primary Group Name*">
+          <FormField label="Primary group name" required>
             <TextInput
               name="sentinelMasterName"
               id="sentinelMasterName"
@@ -47,7 +47,7 @@ const PrimaryGroupSentinel = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
-    </>
+    </Col>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
index 1de2518cb4..90799d9390 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
@@ -12,7 +12,7 @@ import {
   TlsDetails,
 } from 'uiSrc/pages/home/components/form'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { Title } from 'uiSrc/components/base/text/Title'
@@ -45,38 +45,36 @@ const EditSentinelConnection = (props: Props) => {
   } = props
 
   const GeneralFormClodeMode = (
-    <>
+    <Col gap="l">
       <PrimaryGroupSentinel formik={formik} />
       <Divider />
-      <Title size="XS">Database</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Database
+      </Title>
       <SentinelMasterDatabase
         formik={formik}
         db={db}
         isCloneMode={isCloneMode}
       />
       <Divider />
-      <Title size="XS">Sentinel</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Sentinel
+      </Title>
       <DatabaseForm
         formik={formik}
         showFields={{ host: true, port: true, alias: false, timeout: false }}
         onHostNamePaste={onHostNamePaste}
       />
-      <Spacer size="m" />
       <Divider />
-      <Spacer size="m" />
       <DbIndex formik={formik} />
-      <Spacer size="m" />
-      <Divider />
-    </>
+    </Col>
   )
 
   const GeneralFormEditMode = (
-    <>
+    <Col gap="l">
       <Row gap="m">
         <FlexItem grow>
-          <FormField label="Database Alias*">
+          <FormField label="Database Alias" required>
             <TextInput
               name="name"
               id="name"
@@ -90,24 +88,25 @@ const EditSentinelConnection = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
-      <Spacer size="s" />
       <Divider />
-      <Title size="XS">Database</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Database
+      </Title>
       <SentinelMasterDatabase
         formik={formik}
         db={db}
         isCloneMode={isCloneMode}
       />
       <Divider />
-      <Title size="XS">Sentinel</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Sentinel
+      </Title>
       <DatabaseForm
         formik={formik}
         showFields={{ host: false, port: true, alias: false, timeout: false }}
         onHostNamePaste={onHostNamePaste}
       />
-    </>
+    </Col>
   )
 
   return (

From ac364a9f035c09221b4f91d03ab9d8fb1980df61 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 6 Nov 2025 18:19:16 +0200
Subject: [PATCH 2/5] fix the message in the add redis sentinel modal

---
 redisinsight/ui/src/pages/home/components/form/Messages.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/Messages.tsx b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
index 8a3cd00f62..18aed090f1 100644
--- a/redisinsight/ui/src/pages/home/components/form/Messages.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
@@ -50,8 +50,7 @@ const MessageStandalone = () => (
 
 const MessageSentinel = () => (
   <Text
-    color="subdued"
-    size="s"
+    color="primary"
     className={styles.message}
     data-testid="summary"
   >

From 2cb1fe738d7d8a565ab904f4c748c76c810c10ca Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 6 Nov 2025 18:23:28 +0200
Subject: [PATCH 3/5] increase Cancel and Discover buttons and align them to
 the right

---
 .../SentinelConnectionForm.tsx                         | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
index 5a7ac7c641..2b0d99d72a 100644
--- a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
@@ -20,6 +20,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { RiTooltip } from 'uiSrc/components'
+import { Row } from 'uiSrc/components/base/layout/flex'
 
 export interface Props {
   loading: boolean
@@ -92,16 +93,14 @@ const SentinelConnectionForm = (props: Props) => {
       content={getSubmitButtonContent(errors, submitIsDisabled)}
     >
       <PrimaryButton
-        size="s"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
         loading={loading}
         icon={submitIsDisabled ? InfoIcon : undefined}
         data-testid="btn-submit"
-        style={{ marginLeft: 12 }}
       >
-        Discover Database
+        Discover database
       </PrimaryButton>
     </RiTooltip>
   )
@@ -111,10 +110,9 @@ const SentinelConnectionForm = (props: Props) => {
 
     if (footerEl) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m" className="footerAddDatabase">
           {onClose && (
             <SecondaryButton
-              size="s"
               onClick={onClose}
               className="btn-cancel"
               data-testid="btn-cancel"
@@ -126,7 +124,7 @@ const SentinelConnectionForm = (props: Props) => {
             onClick={formik.submitForm}
             submitIsDisabled={submitIsDisable()}
           />
-        </div>,
+        </Row>,
         footerEl,
       )
     }

From 9a051ba59bd40a95ee02111f8b7ae87abf989784 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Fri, 7 Nov 2025 09:58:20 +0200
Subject: [PATCH 4/5] remove all messages styles, colors and sizes - they are
 not needed

---
 .../pages/home/components/form/Messages.tsx   | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/Messages.tsx b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
index 18aed090f1..564e22eb24 100644
--- a/redisinsight/ui/src/pages/home/components/form/Messages.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
@@ -8,12 +8,7 @@ import { ExternalLink } from 'uiSrc/components'
 import styles from '../styles.module.scss'
 
 const MessageCloudApiKeys = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     {
       'Enter Redis Cloud API keys to discover and add databases. API keys can be enabled by following the steps mentioned in the '
     }
@@ -28,12 +23,7 @@ const MessageCloudApiKeys = () => (
 )
 
 const MessageStandalone = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     You can manually add your Redis databases. Enter host and port of your Redis
     database to add it to {APPLICATION_NAME}. &nbsp;
     <ExternalLink
@@ -49,11 +39,7 @@ const MessageStandalone = () => (
 )
 
 const MessageSentinel = () => (
-  <Text
-    color="primary"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     You can automatically discover and add primary groups from your Redis
     Sentinel. Enter host and port of your Redis Sentinel to automatically
     discover your primary groups and add them to {APPLICATION_NAME}. &nbsp;
@@ -70,12 +56,7 @@ const MessageSentinel = () => (
 )
 
 const MessageEnterpriceSoftware = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     Your Redis Software databases can be automatically added. Enter the
     connection details of your Redis Software Cluster to automatically discover
     your databases and add them to {APPLICATION_NAME}. &nbsp;

From f5637f1ce305028f7c4e0d1dbb7bc4ad15daf2dc Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Fri, 7 Nov 2025 09:58:43 +0200
Subject: [PATCH 5/5] remove eui part of message styling, cannot remove them as
 a whole due to multiple occurrences

---
 .../home/components/cluster-connection/styles.module.scss     | 4 ----
 redisinsight/ui/src/pages/home/components/styles.module.scss  | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/styles.module.scss b/redisinsight/ui/src/pages/home/components/cluster-connection/styles.module.scss
index 00727cf936..97195a8177 100644
--- a/redisinsight/ui/src/pages/home/components/cluster-connection/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/cluster-connection/styles.module.scss
@@ -1,10 +1,6 @@
 .message {
   font-family: 'Graphik', sans-serif;
   color: var(--euiTextSubduedColor) !important;
-
-  :global(.euiTextColor), :global(.euiLink) {
-    color: currentColor !important;
-  }
 }
 
 .link {
diff --git a/redisinsight/ui/src/pages/home/components/styles.module.scss b/redisinsight/ui/src/pages/home/components/styles.module.scss
index 7c701c1fc5..fd38168bf5 100644
--- a/redisinsight/ui/src/pages/home/components/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/styles.module.scss
@@ -108,10 +108,6 @@
 .message {
   font-family: 'Graphik', sans-serif;
   color: var(--euiTextSubduedColor) !important;
-
-  :global(.euiTextColor), :global(.euiLink) {
-    color: currentColor !important;
-  }
 }
 
 .link {