Merge pull request #4078 from RedisInsight/fe/feature/RI-6268_update-add-db-form

#RI-6268 - change add database forms

Author: vlad-dargel

redisinsight/ui/src/components/import-databases-dialog/ImportDatabasesDialog.tsx

@@ -19,7 +19,6 @@ import GlobalSubscriptions from './global-subscriptions'
 import MonitorWrapper from './monitor'
 import PagePlaceholder from './page-placeholder'
 import BulkActionsConfig from './bulk-actions-config'
-import ImportDatabasesDialog from './import-databases-dialog'
 import OnboardingTour from './onboarding-tour'
 import CodeBlock from './code-block'
 import ShowChildByCondition from './show-child-by-condition'
@@ -67,7 +66,6 @@ export {
   ShortcutsFlyout,
   PagePlaceholder,
   BulkActionsConfig,
-  ImportDatabasesDialog,
   OnboardingTour,
   CodeBlock,
   ShowChildByCondition,

redisinsight/ui/src/components/import-databases-dialog/index.ts

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { EuiButton, EuiText } from '@elastic/eui'
+import { EuiButton, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { find } from 'lodash'
@@ -108,11 +108,15 @@ const OAuthAutodiscovery = (props: Props) => {
         {(form: React.ReactNode) => (
           <>
             <EuiText className={styles.text} color="subdued">
-              Auto-discover subscriptions and add your databases.
-              <br />
+              Discover subscriptions and add your databases.
               A new Redis Cloud account will be created for you if you don’t have one.
             </EuiText>
+            <EuiSpacer size="xl" />
+            <EuiText>Get started with</EuiText>
+            <EuiTitle className={styles.title} size="l"><h3>Redis Cloud account</h3></EuiTitle>
+            <EuiSpacer size="xl" />
             {form}
+            <EuiSpacer size="xxl" />
             <div className={styles.containerAgreement}>
               <OAuthAgreement size="s" />
             </div>

redisinsight/ui/src/components/import-databases-dialog/styles.module.scss

@@ -3,10 +3,6 @@
   flex-direction: column;
   align-items: center;
 
-  background-color: var(--euiColorLightestShade);
-  padding: 16px;
-  border-radius: 4px;
-
   .buttonsContainer {
     .button {
       margin: 0 10px;
@@ -35,26 +31,30 @@
     }
   }
 
-  .title,
+  .title {
+    font-size: 28px;
+    font-weight: 700 !important;
+  }
+
   .text {
-    text-align: center;
-    font-size: 14px !important;
     font-style: normal;
     font-weight: 400 !important;
     line-height: 150% !important;
     color: var(--htmlColor) !important;
-  }
-
-  .text {
-    font-size: 12px !important;
+    font-size: 13px !important;
     padding-bottom: 16px;
+    align-self: flex-start;
   }
 
   .containerAgreement {
     margin-top: 16px;
     text-align: left;
-  }
 
+    :global(.euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label) {
+      line-height: 18px !important;
+      font-size: 12px !important;
+    }
+  }
 }
 
 .withAdvantagesWrapper {