refactor(ui): port "Select CLoud Provider" modal styles from sass to styled components

re #RI-7415

Author: valkirilov

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+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 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

@@ -31,6 +31,14 @@ 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,
+  StyledRegion,
+  StyledRegionName,
+  StyledRegionSelectDescription,
+  StyledSubTitle,
+} from './OAuthSelectPlan.styles'
 
 export const DEFAULT_REGIONS = ['us-east-2', 'asia-northeast1']
 export const DEFAULT_PROVIDER = OAuthProvider.AWS
@@ -127,7 +135,7 @@ const OAuthSelectPlan = () => {
         data-test-subj={`oauth-region-${region}`}
       >
         {`${countryName} (${cityName})`}
-        <ColorText className={styles.regionName}>{region}</ColorText>
+        <StyledRegionName>{region}</StyledRegionName>
         {rsProviderRegions?.includes(region) && (
           <ColorText
             className={styles.rspreview}
@@ -174,10 +182,7 @@ const OAuthSelectPlan = () => {
 
   return (
     <Modal.Compose open>
-      <Modal.Content.Compose
-        className={styles.container}
-        data-testid="oauth-select-plan-dialog"
-      >
+      <Modal.Content.Compose data-testid="oauth-select-plan-dialog">
         <Modal.Content.Close
           icon={CancelIcon}
           onClick={handleOnClose}
@@ -189,12 +194,12 @@ const OAuthSelectPlan = () => {
           </Row>
         </Modal.Content.Header.Title>
         <Modal.Content.Body.Compose width="fit-content">
-          <section className={styles.content}>
-            <Text className={styles.subTitle} color="default">
+          <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>
+            </StyledSubTitle>
             <section className={styles.providers}>
               {OAuthProviders.map(({ icon, id, label }) => {
                 const Icon = () => (
@@ -215,12 +220,12 @@ const OAuthSelectPlan = () => {
                         [styles.activeProvider]: id === providerSelected,
                       })}
                     />
-                    <Text className={styles.providerLabel}>{label}</Text>
+                    <Text>{label}</Text>
                   </div>
                 )
               })}
             </section>
-            <section className={styles.region}>
+            <StyledRegion>
               <Text className={styles.regionLabel}>Region</Text>
               <RiSelect
                 loading={loading}
@@ -237,15 +242,15 @@ const OAuthSelectPlan = () => {
                 }}
               />
               {!regionOptions.length && (
-                <Text
+                <StyledRegionSelectDescription
                   className={styles.selectDescription}
                   data-testid="select-region-select-description"
                 >
                   No regions available, try another vendor.
-                </Text>
+                </StyledRegionSelectDescription>
               )}
-            </section>
-            <footer className={styles.footer}>
+            </StyledRegion>
+            <StyledFooter>
               <Row justify="end" gap="m">
                 <SecondaryButton
                   onClick={handleOnClose}
@@ -264,8 +269,8 @@ const OAuthSelectPlan = () => {
                   Create database
                 </PrimaryButton>
               </Row>
-            </footer>
-          </section>
+            </StyledFooter>
+          </StyledModalContentBody>
         </Modal.Content.Body.Compose>
       </Modal.Content.Compose>
     </Modal.Compose>

redisinsight/ui/src/components/oauth/oauth-select-plan/styles.module.scss

@@ -1,14 +1,3 @@
-.content {
-  width: 575px !important;
-  min-width: 575px !important;
-  padding: 16px;
-  text-align: center;
-}
-
-.subTitle {
-  padding: 0 40px;
-}
-
 .providers {
   padding: 30px 45px 22px;
   width: 100%;
@@ -37,14 +26,6 @@
   }
 }
 
-.provider {
-  position: relative;
-}
-
-.providerLabel {
-  font-size: 10px !important;
-}
-
 .providerActiveIcon {
   position: absolute;
   top: -10px;
@@ -74,28 +55,3 @@
 .awsIcon svg > path:first-of-type {
   fill: var(--euiColorFullShade);
 }
-
-.region {
-  padding: 2px 45px;
-  text-align: left;
-
-  .selectDescription {
-    padding-top: 10px;
-  }
-}
-
-.regionSelectItem {
-  background-color: var(--euiColorLightestShade) !important;
-  &:hover {
-    background-color: var(--hoverInListColorLight) !important;
-  }
-}
-
-.regionName {
-  padding-left: 4px;
-}
-
-.footer {
-  width: 100%;
-  padding: 32px 46px 0 46px;
-}