#RI-4217-4219 - update styles

redisinsight/ui/src/components/uploadFile/UploadFile.tsx → redisinsight/ui/src/components/upload-file/UploadFile.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EuiButtonEmpty, EuiText } from '@elastic/eui'
+import { EuiButtonEmpty, EuiText, EuiIcon } from '@elastic/eui'
 
 import styles from './styles.module.scss'
 
@@ -10,18 +10,18 @@ export interface Props {
 
 const UploadFile = ({ onFileChange, onClick }: Props) => (
   <EuiButtonEmpty
-    iconType="folderOpen"
     className={styles.emptyBtn}
+    onClick={onClick}
   >
     <label htmlFor="upload-input-file" className={styles.uploadBtn}>
+      <EuiIcon className={styles.icon} type="folderOpen" />
       <EuiText className={styles.label}>Upload</EuiText>
       <input
         type="file"
         id="upload-input-file"
         data-testid="upload-input-file"
         accept="application/json, text/plain"
         onChange={onFileChange}
-        onClick={onClick}
         className={styles.fileDrop}
         aria-label="Select file"
       />

redisinsight/ui/src/components/uploadFile/styles.module.scss → redisinsight/ui/src/components/upload-file/styles.module.scss

@@ -5,6 +5,7 @@
 .uploadBtn {
   display: flex;
   cursor: pointer;
+  padding: 4px 12px;
 }
 
 .emptyBtn:global(.euiButtonEmpty) {
@@ -13,7 +14,14 @@
 }
 
 .emptyBtn:global(.euiButtonEmpty .euiButtonEmpty__content) {
-  padding: 0 12px;
+  padding: 0;
+}
+
+.emptyBtn .icon {
+  width: 14px;
+  height: 14px;
+  margin: 2px 4px 0 0;
+  color: var(--inputTextColor);
 }
 
 :global(.euiButtonEmpty.euiButtonEmpty--primary).emptyBtn .label {

redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx

@@ -15,7 +15,7 @@ import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addReJSONKey, } from 'uiSrc/slices/browser/keys'
 
 import MonacoJson from 'uiSrc/components/monaco-json'
-import UploadFile from 'uiSrc/components/uploadFile'
+import UploadFile from 'uiSrc/components/upload-file'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/dto'
 

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -248,9 +248,8 @@ const HomePage = () => {
                             [styles.contentActive]: editDialogIsOpen,
                           })}
                           id="form"
-                          minSize="538px"
                           paddingSize="none"
-                          style={{ minWidth: '512px' }}
+                          style={{ minWidth: '494px' }}
                         >
                           {editDialogIsOpen && (
                             <AddDatabaseContainer

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx

@@ -423,7 +423,6 @@ const AddStandaloneForm = (props: Props) => {
       <EuiButton
         fill
         color="secondary"
-        className="btn-add"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -446,7 +445,7 @@ const AddStandaloneForm = (props: Props) => {
           alignItems="center"
           className="footerAddDatabase"
           gutterSize="none"
-          style={{ height: '68px' }}
+          responsive={false}
         >
           <EuiFlexItem className="btn-back" grow={false}>
             {instanceType !== InstanceType.Sentinel && (
@@ -475,7 +474,7 @@ const AddStandaloneForm = (props: Props) => {
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup>
+            <EuiFlexGroup responsive={false}>
               {onClose && (
                 <EuiButton
                   onClick={onClose}
@@ -492,7 +491,7 @@ const AddStandaloneForm = (props: Props) => {
                 submitIsDisabled={submitIsDisable()}
               />
             </EuiFlexGroup>
-            </EuiFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>,
         footerEl
       )

redisinsight/ui/src/pages/home/components/CloudConnection/CloudConnectionForm/CloudConnectionForm.tsx

@@ -150,7 +150,6 @@ const CloudConnectionForm = (props: Props) => {
       <EuiButton
         fill
         color="secondary"
-        className="btn-add"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}

redisinsight/ui/src/pages/home/components/ClusterConnection/ClusterConnectionForm/ClusterConnectionForm.tsx

@@ -218,7 +218,6 @@ const ClusterConnectionForm = (props: Props) => {
       <EuiButton
         fill
         color="secondary"
-        className="btn-add"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}

redisinsight/ui/src/pages/home/styles.scss

@@ -373,14 +373,10 @@
     padding: 12px;
   }
 
-  .euiButton.btn-add {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
   .euiButton.btn-cancel,
   .euiButton.btn-back {
-    margin-right: 20px;
+    margin-right: 10px;
+    min-width: 71px !important;
   }
 
   .flexGroupResponsiveForm {

redisinsight/ui/src/pages/pubSub/components/publish-message/PublishMessage.tsx

@@ -121,7 +121,6 @@ const PublishMessage = () => {
           <EuiButton
             fill
             color="secondary"
-            className="btn-add"
             type="submit"
             data-testid="publish-message-submit"
           >

redisinsight/ui/src/pages/redisCloudDatabases/RedisCloudDatabases/RedisCloudDatabases.tsx

@@ -168,7 +168,6 @@ const RedisCloudDatabasesPage = ({
         onClick={handleSubmit}
         isLoading={loading}
         color="secondary"
-        className="btn-add"
         iconType={isDisabled ? 'iInCircle' : undefined}
         data-testid="btn-add-databases"
       >

redisinsight/ui/src/pages/redisCloudDatabasesResult/RedisCloudDatabasesResult.tsx

@@ -152,7 +152,6 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
                 size="m"
                 onClick={onView}
                 color="secondary"
-                className="btn-add"
                 data-testid="btn-view-databases"
               >
                 View Databases

redisinsight/ui/src/pages/redisCloudSubscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx

@@ -169,7 +169,6 @@ const RedisCloudSubscriptions = ({
         onClick={handleSubmit}
         isLoading={loading}
         color="secondary"
-        className="btn-add"
         iconType={isDisabled ? 'iInCircle' : undefined}
         data-testid="btn-show-databases"
       >

redisinsight/ui/src/pages/redisCluster/RedisClusterDatabases.tsx

@@ -209,7 +209,6 @@ const RedisClusterDatabases = ({ columns, onClose, onBack, onSubmit }: Props) =>
                     onClick={handleSubmit}
                     isLoading={loading}
                     color="secondary"
-                    className="btn-add"
                     iconType={isSubmitDisabled() ? 'iInCircle' : undefined}
                     data-testid="btn-add-databases"
                   >

redisinsight/ui/src/pages/redisCluster/RedisClusterDatabasesResult.tsx

@@ -157,7 +157,6 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => {
                 size="m"
                 onClick={() => onView(false)}
                 color="secondary"
-                className="btn-add"
                 data-testid="btn-view-databases"
               >
                 View Databases

redisinsight/ui/src/pages/sentinelDatabases/components/SentinelDatabases/SentinelDatabases.tsx

@@ -177,7 +177,6 @@ const SentinelDatabases = ({
         <EuiButton
           fill
           color="secondary"
-          className="btn-add"
           type="submit"
           onClick={onClick}
           disabled={isSubmitDisabled()}

redisinsight/ui/src/pages/sentinelDatabasesResult/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx

@@ -158,7 +158,6 @@ const SentinelDatabasesResult = ({
                 size="m"
                 onClick={handleViewDatabases}
                 color="secondary"
-                className="btn-add"
                 data-testid="btn-view-databases"
               >
                 View Databases