RI-7246 - The "Create free Cloud db" window has different font sizes

Author: KIvanow

redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss

@@ -91,7 +91,7 @@
     flex-direction: column;
     align-items: center;
 
-    padding: 108px 60px 60px;
+    padding: 108px 0px 40px 40px;
 
     .subTitle {
       font-size: 16px;

redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx

@@ -127,6 +127,7 @@ const OAuthCreateDb = (props: Props) => {
               {(form: React.ReactNode) => (
                 <>
                   <Text className={styles.subTitle}>Get started with</Text>
+                  <Spacer size="s" />
                   <Title size="XL" className={styles.title}>
                     Free trial Cloud database
                   </Title>
@@ -144,6 +145,7 @@ const OAuthCreateDb = (props: Props) => {
           ) : (
             <>
               <Text className={styles.subTitle}>Get your</Text>
+              <Spacer size="s" />
               <Title size="XL" className={styles.title}>
                 Free trial Cloud database
               </Title>

redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/styles.module.scss

@@ -4,15 +4,15 @@
 
   .advantagesContainer {
     max-width: 320px;
-    padding: 0 24px 24px;
+    padding: 0;
   }
 
   .socialContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    padding: 108px 60px 60px;
+    padding: 108px 0px 40px 40px;
 
     .subTitle {
       font-size: 16px;

redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/styles.module.scss

@@ -4,15 +4,15 @@
 
   .advantagesContainer {
     max-width: 320px;
-    padding: 0 24px 24px;
+    padding: 0;
   }
 
   .socialContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    padding: 108px 60px 60px;
+    padding: 108px 0px 40px 40px;
 
     .subTitle {
       font-size: 16px;

redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx

@@ -10,7 +10,7 @@ import styles from './styles.module.scss'
 
 const OAuthAdvantages = () => (
   <div className={styles.container} data-testid="oauth-advantages">
-    <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" />
+    <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" $size="m" />
     <Title size="S" className={styles.title}>
       Cloud
     </Title>

redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx

@@ -47,6 +47,7 @@ const OAuthAgreement = (props: Props) => {
         <li className={styles.listItem}>
           {'to our '}
           <Link
+            variant="small-inline"
             color="subdued"
             href="https://redis.io/legal/cloud-tos/?utm_source=redisinsight&utm_medium=main&utm_campaign=main"
             className={styles.link}
@@ -57,6 +58,7 @@ const OAuthAgreement = (props: Props) => {
           </Link>
           {' and '}
           <Link
+            variant="small-inline"
             color="subdued"
             href="https://redis.io/legal/privacy-policy/?utm_source=redisinsight&utm_medium=main&utm_campaign=main"
             className={styles.link}

redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx

@@ -4,6 +4,7 @@ import { FeatureFlags } from 'uiSrc/constants'
 
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { Spacer } from 'uiSrc/components/base/layout'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -40,6 +41,7 @@ const OAuthRecommendedSettings = (props: Props) => {
           <RiIcon type="InfoIcon" size="s" />
         </RiTooltip>
       </div>
+      <Spacer size="s" />
     </FeatureFlagComponent>
   )
 }

redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/styles.module.scss

@@ -2,19 +2,6 @@
   display: flex;
   align-items: center;
 
-  .recommendedSettingsToolTip {
-    display: inline-flex;
-    margin-left: 4px;
-    margin-bottom: 4px;
-
-    :global {
-      svg {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
   :global(.euiCheckbox) {
     margin-bottom: 6px;