RI-7415 Rework the visuals of the create cloud database modal

redisinsight/ui/src/components/base/external-link/ExternalLink.styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { Link } from '../link/Link'
+
+export const StyledExternalLink = styled(Link)`
+  display: inline-flex;
+`

redisinsight/ui/src/components/base/external-link/ExternalLink.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { IconProps } from 'uiSrc/components/base/icons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link, type RiLinkProps } from 'uiSrc/components/base/link/Link'
+import { type RiLinkProps } from 'uiSrc/components/base/link/Link'
+import { StyledExternalLink } from './ExternalLink.styles'
 
 export type Props = RiLinkProps & {
   href: string
@@ -30,11 +31,11 @@ const ExternalLink = (props: Props) => {
   )
 
   return (
-    <Link {...rest} target="_blank" rel="noopener noreferrer">
+    <StyledExternalLink {...rest} target="_blank" rel="noopener noreferrer">
       {iconPosition === 'left' && <ArrowIcon />}
       {children}
       {iconPosition === 'right' && <ArrowIcon />}
-    </Link>
+    </StyledExternalLink>
   )
 }
 

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx

@@ -113,6 +113,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
     return {
       id: InfiniteMessagesIds.oAuthSuccess,
       message: 'Congratulations!',
+      variant: 'success',
       description: (
         <>
           {text}
@@ -164,11 +165,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
           <Spacer size="m" />
           <Row justify="between" align="center">
             <FlexItem>
-              <ExternalLink
-                href={MANAGE_DB_LINK}
-                iconSize="XS"
-                variant="inline"
-              >
+              <ExternalLink href={MANAGE_DB_LINK} iconSize="S" variant="inline">
                 Manage DB
               </ExternalLink>
             </FlexItem>

redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+import { BoxSelectionGroup } from '@redis-ui/components'
+
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+import { ColorText, Text } from 'uiSrc/components/base/text'
+
+export const StyledModalContentBody = styled.section`
+  width: 575px !important;
+  min-width: 575px !important;
+  padding: 16px;
+  text-align: center;
+`
+
+export const StyledSubTitle = styled(Text)`
+  padding: 0 40px;
+`
+
+export const StyledProvidersSection = styled(FlexGroup)`
+  width: 100%;
+  padding: 30px 45px 22px;
+`
+
+export const StyledProvidersSelectionGroup = styled(BoxSelectionGroup)`
+  min-height: 68px;
+
+  svg {
+    width: 28px;
+    height: initial;
+  }
+
+  p {
+    font-size: 1.2rem;
+  }
+`
+
+export const StyledRegion = styled.section`
+  padding: 2px 45px;
+  text-align: left;
+`
+
+export const StyledRegionName = styled(ColorText)`
+  padding-left: 4px;
+`
+
+export const StyledRegionSelectDescription = styled(Text)`
+  padding-top: 10px;
+`
+
+export const StyledFooter = styled.footer`
+  width: 100%;
+  padding: 32px 46px 0 46px;
+`

redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { toNumber, filter, get, find, first } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
 
 import {
   createFreeDbJob,
@@ -18,25 +17,42 @@
 import { Region } from 'uiSrc/slices/interfaces'
 
 import {
-  EmptyButton,
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { ColorText, Text } from 'uiSrc/components/base/text'
+import { ColorText, Text, Title } from 'uiSrc/components/base/text'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { Modal } from 'uiSrc/components/base/display'
 import { CancelIcon } from 'uiSrc/components/base/icons'
 import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto'
 import { OAuthProvider, OAuthProviders } from './constants'
-import styles from './styles.module.scss'
+import {
+  StyledFooter,
+  StyledModalContentBody,
+  StyledProvidersSection,
+  StyledProvidersSelectionGroup,
+  StyledRegion,
+  StyledRegionName,
+  StyledRegionSelectDescription,
+  StyledSubTitle,
+} from './OAuthSelectPlan.styles'
+import { BoxSelectionGroupBox, CountryFlag } from '@redis-ui/components'
 
 export const DEFAULT_REGIONS = ['us-east-2', 'asia-northeast1']
 export const DEFAULT_PROVIDER = OAuthProvider.AWS
 
 const getProviderRegions = (regions: Region[], provider: OAuthProvider) =>
   (find(regions, { provider }) || {}).regions || []
 
+const oAuthProvidersBoxes: BoxSelectionGroupBox<OAuthProvider>[] =
+  OAuthProviders.map(({ id, label, icon }) => ({
+    value: id,
+    label,
+    icon: () => <RiIcon type={icon} size="XL" />,
+  }))
+
 const OAuthSelectPlan = () => {
   const {
     isOpenDialog,
@@ -58,13 +74,15 @@
   const [providerSelected, setProviderSelected] =
     useState<OAuthProvider>(DEFAULT_PROVIDER)
   const [rsProviderRegions, setRsProviderRegions] = useState(
-    getProviderRegions(rsRegions, providerSelected),
+    getProviderRegions(rsRegions, providerSelected as OAuthProvider),
   )
 
   const dispatch = useDispatch()
 
   useEffect(() => {
-    setRsProviderRegions(getProviderRegions(rsRegions, providerSelected))
+    setRsProviderRegions(
+      getProviderRegions(rsRegions, providerSelected as OAuthProvider),
+    )
   }, [providerSelected, plansInit])
 
   useEffect(() => {
@@ -112,30 +130,31 @@
   const getOptionDisplay = (item: CloudSubscriptionPlanResponse) => {
     const {
       region = '',
-      details: { countryName = '', cityName = '' },
+      details: { countryName = '', cityName = '', flag = '' },
       provider,
     } = item
     const rsProviderRegions: string[] =
       find(rsRegions, { provider })?.regions || []
 
     return (
-      <Text
-        color="subdued"
-        size="s"
-        data-testid={`option-${region}`}
-        data-test-subj={`oauth-region-${region}`}
-      >
-        {`${countryName} (${cityName})`}
-        <ColorText className={styles.regionName}>{region}</ColorText>
-        {rsProviderRegions?.includes(region) && (
-          <ColorText
-            className={styles.rspreview}
-            data-testid={`rs-text-${region}`}
-          >
-            (Redis 7.2)
-          </ColorText>
-        )}
-      </Text>
+      <Row align="center" gap="s">
+        <CountryFlag countryCode={flag} />
+
+        <Text
+          color="primary"
+          data-testid={`option-${region}`}
+          data-test-subj={`oauth-region-${region}`}
+        >
+          {`${countryName} (${cityName})`}
+        </Text>
+
+        <Text color="secondary">
+          <StyledRegionName>{region}</StyledRegionName>
+          {rsProviderRegions?.includes(region) && (
+            <ColorText data-testid={`rs-text-${region}`}>(Redis 7.2)</ColorText>
+          )}
+        </Text>
+      </Row>
     )
   }
 
@@ -173,45 +192,38 @@
 
   return (
     <Modal.Compose open>
-      <Modal.Content.Compose className={styles.container} data-testid="oauth-select-plan-dialog">
-        <Modal.Content.Close icon={CancelIcon} onClick={handleOnClose} data-testid="oauth-select-plan-dialog-close-btn" />
+      <Modal.Content.Compose data-testid="oauth-select-plan-dialog">
+        <Modal.Content.Close
+          icon={CancelIcon}
+          onClick={handleOnClose}
+          data-testid="oauth-select-plan-dialog-close-btn"
+        />
         <Modal.Content.Header.Title>
-          Choose a cloud vendor
+          <Row justify="center">
+            <Title>Choose a cloud vendor</Title>
+          </Row>
         </Modal.Content.Header.Title>
         <Modal.Content.Body.Compose width="fit-content">
-          <section className={styles.content}>
-            <Text className={styles.subTitle}>
+          <StyledModalContentBody>
+            <StyledSubTitle color="default">
               Select a cloud vendor and region to complete the final step
               towards your free Redis Cloud database. No credit card is
               required.
-            </Text>
-            <section className={styles.providers}>
-              {OAuthProviders.map(({ icon, id, label }) => {
-                const Icon = () => (
-                  <RiIcon type={icon} size="original" style={{ width: 44 }} />
-                )
-                return (
-                  <div className={styles.provider} key={id}>
-                    {id === providerSelected && (
-                      <div className={cx(styles.providerActiveIcon)}>
-                        <RiIcon type="CheckThinIcon" />
-                      </div>
-                    )}
-                    <EmptyButton
-                      size="large"
-                      icon={Icon}
-                      onClick={() => setProviderSelected(id)}
-                      className={cx(styles.providerBtn, {
-                        [styles.activeProvider]: id === providerSelected,
-                      })}
-                    />
-                    <Text className={styles.providerLabel}>{label}</Text>
-                  </div>
-                )
-              })}
-            </section>
-            <section className={styles.region}>
-              <Text className={styles.regionLabel}>Region</Text>
+            </StyledSubTitle>
+
+            <StyledProvidersSection gap="m" direction="column" align="start">
+              <Text color="primary">Select cloud vendor</Text>
+              <StyledProvidersSelectionGroup
+                boxes={oAuthProvidersBoxes}
+                value={providerSelected}
+                onChange={(value: string) =>
+                  setProviderSelected(value as OAuthProvider)
+                }
+              />
+            </StyledProvidersSection>
+
+            <StyledRegion>
+              <Text color="secondary">Region</Text>
               <RiSelect
                 loading={loading}
                 disabled={loading || !regionOptions.length}
@@ -227,35 +239,32 @@
                 }}
               />
               {!regionOptions.length && (
-                <Text
-                  className={styles.selectDescription}
-                  data-testid="select-region-select-description"
-                >
+                <StyledRegionSelectDescription data-testid="select-region-select-description">
                   No regions available, try another vendor.
-                </Text>
+                </StyledRegionSelectDescription>
               )}
-            </section>
-            <footer className={styles.footer}>
-              <SecondaryButton
-                className={styles.button}
-                onClick={handleOnClose}
-                data-testid="close-oauth-select-plan-dialog"
-                aria-labelledby="close oauth select plan dialog"
-              >
-                Cancel
-              </SecondaryButton>
-              <PrimaryButton
-                disabled={loading || !planIdSelected}
-                loading={loading}
-                className={styles.button}
-                onClick={handleSubmit}
-                data-testid="submit-oauth-select-plan-dialog"
-                aria-labelledby="submit oauth select plan dialog"
-              >
-                Create database
-              </PrimaryButton>
-            </footer>
-          </section>
+            </StyledRegion>
+            <StyledFooter>
+              <Row justify="end" gap="m">
+                <SecondaryButton
+                  onClick={handleOnClose}
+                  data-testid="close-oauth-select-plan-dialog"
+                  aria-labelledby="close oauth select plan dialog"
+                >
+                  Cancel
+                </SecondaryButton>
+                <PrimaryButton
+                  disabled={loading || !planIdSelected}
+                  loading={loading}
+                  onClick={handleSubmit}
+                  data-testid="submit-oauth-select-plan-dialog"
+                  aria-labelledby="submit oauth select plan dialog"
+                >
+                  Create database
+                </PrimaryButton>
+              </Row>
+            </StyledFooter>
+          </StyledModalContentBody>
         </Modal.Content.Body.Compose>
       </Modal.Content.Compose>
     </Modal.Compose>

redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts

@@ -1,5 +1,4 @@
 import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon'
-import styles from './styles.module.scss'
 
 export enum OAuthProvider {
   AWS = 'AWS',
@@ -11,13 +10,11 @@ export const OAuthProviders: {
   id: OAuthProvider
   icon: AllIconsType
   label: string
-  className?: string
 }[] = [
   {
     id: OAuthProvider.AWS,
     icon: 'Awss3Icon',
     label: 'Amazon Web Services',
-    className: styles.awsIcon,
   },
   {
     id: OAuthProvider.Google,