RI-7681: Polish Discover Cloud DBs forms

redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { Col, Row } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+
+export const StyledDiscoverText = styled(Text)`
+  align-self: flex-start;
+`
+
+export const StyledContainer = styled(Col)``
+
+export const StyledCreateDbSection = styled(Row)`
+  width: 100%;
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: ${({ theme }) => theme.core.space.space100};
+  padding-block: ${({ theme }) => theme.core.space.space100};
+  padding-inline: ${({ theme }) => theme.core.space.space200};
+`
+
+export const StyledAgreementContainer = styled.div`
+  margin-top: ${({ theme }) => theme.core.space.space200};
+  width: 50%;
+`

redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx

@@ -17,14 +17,19 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
 import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form'
 
-import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
-
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
-import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { CloudIcon } from 'uiSrc/components/base/icons'
+
+import {
+  StyledDiscoverText,
+  StyledContainer,
+  StyledCreateDbSection,
+  StyledAgreementContainer,
+} from './OAuthAutodiscovery.styles'
 
 export interface Props {
   inline?: boolean
@@ -72,23 +77,24 @@ const OAuthAutodiscovery = (props: Props) => {
     )
 
     return (
-      <div className={styles.container} data-testid="oauth-container-import">
-        <Text className={styles.text} color="subdued">
+      <StyledContainer data-testid="oauth-container-import" gap="xl">
+        <Text>
           Use{' '}
-          <strong>
+          <Text color="primary" variant="semiBold" component="span">
             {currentAccountName?.name} #{currentAccountId}
-          </strong>{' '}
+          </Text>{' '}
           account to auto-discover subscriptions and add your databases.
         </Text>
-        <Spacer size="xl" />
-        <PrimaryButton
-          onClick={handleClickDiscover}
-          disabled={isDiscoverDisabled}
-          data-testid="oauth-discover-btn"
-        >
-          Discover
-        </PrimaryButton>
-      </div>
+        <Row justify="center">
+          <PrimaryButton
+            onClick={handleClickDiscover}
+            disabled={isDiscoverDisabled}
+            data-testid="oauth-discover-btn"
+          >
+            Discover
+          </PrimaryButton>
+        </Row>
+      </StyledContainer>
     )
   }
 
@@ -107,15 +113,14 @@ const OAuthAutodiscovery = (props: Props) => {
   }
 
   const CreateFreeDb = () => (
-    <div className={styles.createDbSection}>
-      <div className={styles.createDbTitle}>
-        <CloudIcon />
-        <span>Start FREE with Redis Cloud</span>
-      </div>
+    <StyledCreateDbSection justify="between" align="center">
+      <Row align="center" gap="m">
+        <CloudIcon size="L" />
+        <Text color="primary">Start FREE with Redis Cloud</Text>
+      </Row>
       <OAuthSsoHandlerDialog>
         {(ssoCloudHandlerClick) => (
           <PrimaryButton
-            size="s"
             // todo: choose either href or on click
             // href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: '' })}
             // target="_blank"
@@ -131,40 +136,43 @@ const OAuthAutodiscovery = (props: Props) => {
           </PrimaryButton>
         )}
       </OAuthSsoHandlerDialog>
-    </div>
+    </StyledCreateDbSection>
   )
 
   return (
-    <div className={styles.container} data-testid="oauth-container-import">
+    <StyledContainer
+      data-testid="oauth-container-import"
+      align="center"
+      gap="xl"
+    >
       <OAuthForm
         inline={inline}
-        className={styles.buttonsContainer}
         onClick={handleClickSso}
         action={OAuthSocialAction.Import}
       >
         {(form: React.ReactNode) => (
           <>
-            <Text className={styles.text} color="subdued">
+            <StyledDiscoverText color="primary">
               Discover subscriptions and add your databases. A new Redis Cloud
               account will be created for you if you don’t have one.
-            </Text>
-            <Spacer size="m" />
+            </StyledDiscoverText>
+
             <CreateFreeDb />
-            <Spacer size="xl" />
-            <Text>Get started with</Text>
-            <Title className={styles.title} size="L">
+
+            <Text color="primary">Get started with</Text>
+            <Title size="L" color="primary">
               Redis Cloud account
             </Title>
-            <Spacer size="xl" />
+
             {form}
-            <Spacer size="xxl" />
-            <div className={styles.containerAgreement}>
+
+            <StyledAgreementContainer>
               <OAuthAgreement size="s" />
-            </div>
+            </StyledAgreementContainer>
           </>
         )}
       </OAuthForm>
-    </div>
+    </StyledContainer>
   )
 }
 

redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts

@@ -26,6 +26,7 @@ export const StyledConnectivityLink = styled(Link)`
     color: ${({ theme }) => theme.semantic.color.text.neutral800};
     opacity: 0.8;
     transform: translateY(-1px);
+    transition: transform 0.2s ease-in-out;
     box-shadow: none;
   }
 `

redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx

@@ -121,7 +121,6 @@ const CloudConnectionForm = (props: Props) => {
 
   const CancelButton = ({ onClick }: { onClick: () => void }) => (
     <SecondaryButton
-      size="s"
       className="btn-cancel"
       onClick={onClick}
       style={{ marginRight: 12 }}
@@ -148,7 +147,6 @@ const CloudConnectionForm = (props: Props) => {
       }
     >
       <PrimaryButton
-        size="s"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -167,13 +165,13 @@ const CloudConnectionForm = (props: Props) => {
     const footerEl = document.getElementById('footerDatabaseForm')
     if (footerEl) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m">
           {onClose && <CancelButton onClick={onClose} />}
           <SubmitButton
             onClick={formik.submitForm}
             submitIsDisabled={!submitIsEnable()}
           />
-        </div>,
+        </Row>,
         footerEl,
       )
     }
@@ -188,7 +186,7 @@ const CloudConnectionForm = (props: Props) => {
       <form onSubmit={formik.handleSubmit}>
         <Row responsive>
           <FlexItem grow>
-            <FormField label="API Account Key*">
+            <FormField label="API Account Key" required>
               <TextInput
                 name="accessKey"
                 id="accessKey"
@@ -197,11 +195,8 @@ const CloudConnectionForm = (props: Props) => {
                 placeholder={fieldDisplayNames.accessKey}
                 value={formik.values.accessKey}
                 autoComplete="off"
-                onChange={value => {
-                  formik.setFieldValue(
-                    'accessKey',
-                    validateField(value.trim()),
-                  )
+                onChange={(value) => {
+                  formik.setFieldValue('accessKey', validateField(value.trim()))
                 }}
               />
             </FormField>
@@ -210,7 +205,7 @@ const CloudConnectionForm = (props: Props) => {
         <Spacer size="l" />
         <Row responsive>
           <FlexItem grow>
-            <FormField label="API User Key*">
+            <FormField label="API User Key" required>
               <TextInput
                 name="secretKey"
                 id="secretKey"
@@ -219,11 +214,8 @@ const CloudConnectionForm = (props: Props) => {
                 placeholder={fieldDisplayNames.secretKey}
                 value={formik.values.secretKey}
                 autoComplete="off"
-                onChange={value => {
-                  formik.setFieldValue(
-                    'secretKey',
-                    validateField(value.trim()),
-                  )
+                onChange={(value) => {
+                  formik.setFieldValue('secretKey', validateField(value.trim()))
                 }}
               />
             </FormField>
@@ -237,11 +229,9 @@ const CloudConnectionForm = (props: Props) => {
   return (
     <div className="getStartedForm eui-yScroll">
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
-        <Col gap="m">
+        <Col gap="l">
           <FlexItem grow>
-            <Text color="subdued" size="s">
-              Connect with:
-            </Text>
+            <Text color="primary">Connect with</Text>
           </FlexItem>
           <FlexItem grow>
             <RiRadioGroup
@@ -253,7 +243,7 @@ const CloudConnectionForm = (props: Props) => {
             />
           </FlexItem>
         </Col>
-        <Spacer size="m" />
+        <Spacer size="l" />
       </FeatureFlagComponent>
       {type === CloudConnectionOptions.Account && (
         <OAuthAutodiscovery