RI-7681: refactor the connectivity option section (#5145)

Author: dantovska

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
+import { RiIcon } from 'uiSrc/components/base/icons'
+
+import { Link } from 'uiSrc/components/base/link/Link'
+
+export const StyledConnectivityLink = styled(Link)`
+  min-width: 150px;
+  padding: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral700};
+  color: ${({ theme }) => theme.semantic.color.text.neutral800};
+
+  // adding position relative to allow possible elements
+  // inside the link to be positioned absolutely
+  position: relative;
+
+  &:hover {
+    text-decoration: none !important;
+    background: none;
+    color: ${({ theme }) => theme.semantic.color.text.neutral800};
+    opacity: 0.8;
+    transform: translateY(-1px);
+    box-shadow: none;
+  }
+`
+
+export const StyledBadge = styled(RiBadge)`
+  position: absolute;
+  top: 10px;
+  left: 10px;
+`
+
+// This style is needed as the max built in size of the icon is not sufficient in this case
+export const StyledIcon = styled(RiIcon)`
+  width: 30px;
+  height: 30px;
+`

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

@@ -1,90 +1,53 @@
 import React from 'react'
-import styled from 'styled-components'
 
 import { AddDbType } from 'uiSrc/pages/home/constants'
 import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
 import { FeatureFlags } from 'uiSrc/constants'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
-
-// to be replaced with cloud icon from @redis-ui/icons once redis-ui bumped
-import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
-import { RocketIcon } from 'uiSrc/components/base/icons'
-
-import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Grid, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
-import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import { Text } from 'uiSrc/components/base/text/Text'
-import { Link } from 'uiSrc/components/base/link/Link'
+import { RiIcon } from 'uiSrc/components/base/icons'
 import { CONNECTIVITY_OPTIONS } from '../../constants'
 
-import styles from './styles.module.scss'
+import {
+  StyledBadge,
+  StyledConnectivityLink,
+  StyledIcon,
+} from './ConnectivityOptions.styles'
 
 export interface Props {
   onClickOption: (type: AddDbType) => void
   onClose?: () => void
 }
 
-const NewCloudLink = styled(Link)`
-  min-width: 160px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none !important;
-  & * {
-    text-decoration: none !important;
-  }
-  position: relative;
-  width: 100%;
-  height: 84px !important;
-  padding: 0 12px;
-  border: 1px solid ${({ theme }) => theme.semantic.color.border.primary500};
-  border-radius: 5px;
-
-  & .freeBadge {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-
-    text-transform: uppercase;
-    border-radius: 3px;
-  }
-
-  & .btnIcon {
-    margin-bottom: 8px;
-    width: 30px;
-    height: 30px;
-  }
-`
-
 const ConnectivityOptions = (props: Props) => {
   const { onClickOption, onClose } = props
 
   return (
     <>
-      <section className={styles.cloudSection}>
+      <section>
         <Text color="primary">Get started with Redis Cloud account</Text>
         <Spacer />
         <Grid gap="l" columns={3} responsive>
           <FlexItem>
-            <SecondaryButton
-              className={styles.typeBtn}
+            <StyledConnectivityLink
               onClick={() => onClickOption(AddDbType.cloud)}
               data-testid="discover-cloud-btn"
             >
-              <Col align="center">
-                <CloudIcon />
-                Add databases
+              <Col align="center" gap="s">
+                <StyledIcon type="CloudIcon" size="xl" />
+                <Text color="primary">Add databases</Text>
               </Col>
-            </SecondaryButton>
+            </StyledConnectivityLink>
           </FlexItem>
           <FeatureFlagComponent name={FeatureFlags.cloudAds}>
             <FlexItem>
               <OAuthSsoHandlerDialog>
                 {(ssoCloudHandlerClick, isSSOEnabled) => (
-                  <NewCloudLink
+                  <StyledConnectivityLink
                     data-testid="create-free-db-btn"
                     color="primary"
                     onClick={(e: React.MouseEvent) => {
@@ -99,17 +62,16 @@ const ConnectivityOptions = (props: Props) => {
                     })}
                     target="_blank"
                   >
-                    <RiBadge className="freeBadge" label="Free" variant="notice" />
-                    <Col align="center">
-                      <RocketIcon className="btnIcon" />
-                      New database
+                    <StyledBadge label="FREE" variant="notice" />
+                    <Col align="center" gap="s">
+                      <StyledIcon type="RocketIcon" size="xl" />
+                      <Text color="primary">New database</Text>
                     </Col>
-                  </NewCloudLink>
+                  </StyledConnectivityLink>
                 )}
               </OAuthSsoHandlerDialog>
             </FlexItem>
           </FeatureFlagComponent>
-          <FlexItem grow />
         </Grid>
       </section>
       <Spacer size="xxl" />
@@ -119,14 +81,15 @@ const ConnectivityOptions = (props: Props) => {
         <Grid gap="l" responsive columns={3}>
           {CONNECTIVITY_OPTIONS.map(({ id, type, title, icon }) => (
             <FlexItem key={id}>
-              <SecondaryButton
-                icon={icon}
+              <StyledConnectivityLink
                 onClick={() => onClickOption(type)}
                 data-testid={`option-btn-${id}`}
-                size="large"
               >
-                {title}
-              </SecondaryButton>
+                <Row gap="s" align="center" justify="center">
+                  <RiIcon type={icon} size="xl" />
+                  <Text color="primary">{title}</Text>
+                </Row>
+              </StyledConnectivityLink>
             </FlexItem>
           ))}
         </Grid>

redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss

@@ -1,5 +1,5 @@
+import { AllIconsType } from 'uiSrc/components/base/icons'
 import { AddDbType } from 'uiSrc/pages/home/constants'
-import { DownloadIcon, IconType, RedisSoftwareIcon, ShieldIcon } from 'uiSrc/components/base/icons'
 
 export interface Values {
   connectionURL: string
@@ -9,26 +9,26 @@ export interface ConnectivityOption {
   id: string
   title: string
   type: AddDbType
-  icon: IconType
+  icon: AllIconsType
 }
 
 export const CONNECTIVITY_OPTIONS: ConnectivityOption[] = [
   {
     id: 'sentinel',
     title: 'Redis Sentinel',
     type: AddDbType.sentinel,
-    icon: ShieldIcon,
+    icon: "ShieldIcon",
   },
   {
     id: 'software',
     title: 'Redis Software',
     type: AddDbType.software,
-    icon: RedisSoftwareIcon,
+    icon: "RedisSoftwareIcon",
   },
   {
     id: 'import',
     title: 'Import from file',
     type: AddDbType.import,
-    icon: DownloadIcon,
+    icon: "DownloadIcon",
   },
 ]