Merge pull request #1772 from RedisInsight/bugfix/RI-4217-4219_update_styles

#RI-4217-4219 - update styles

Author: vlad-dargel

redisinsight/ui/src/components/uploadFile/UploadFile.spec.tsx renamed to redisinsight/ui/src/components/upload-file/UploadFile.spec.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/UploadFile.tsx renamed to redisinsight/ui/src/components/upload-file/UploadFile.tsx

@@ -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/components/uploadFile/index.ts renamed to redisinsight/ui/src/components/upload-file/index.ts

@@ -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/components/uploadFile/styles.module.scss renamed to redisinsight/ui/src/components/upload-file/styles.module.scss

@@ -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/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.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/HomePage.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/AddInstanceForm/InstanceForm/InstanceForm.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/components/CloudConnection/CloudConnectionForm/CloudConnectionForm.tsx

@@ -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 {