Skip to content

Commit 98737ce

Browse files
valkirilovvalkirilov
committed
feat(ui): rework the visuals of the create cloud database modal
re RI-7415
1 parent 511bc92 commit 98737ce

File tree

18 files changed

+146
-256
lines changed

18 files changed

+146
-256
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export const INFINITE_MESSAGES: Record<
9090
return {
9191
id: InfiniteMessagesIds.oAuthSuccess,
9292
message: 'Congratulations!',
93+
variant: 'success',
9394
description: (
9495
<>
9596
{text}
@@ -143,8 +144,9 @@ export const INFINITE_MESSAGES: Record<
143144
<FlexItem>
144145
<ExternalLink
145146
href={MANAGE_DB_LINK}
146-
iconSize="XS"
147+
iconSize="S"
147148
variant="inline"
149+
style={{ display: 'inline-flex' }}
148150
>
149151
Manage DB
150152
</ExternalLink>
@@ -207,8 +209,7 @@ export const INFINITE_MESSAGES: Record<
207209
}),
208210
SUBSCRIPTION_EXISTS: (onSuccess?: () => void, onClose?: () => void) => ({
209211
id: InfiniteMessagesIds.subscriptionExists,
210-
message:
211-
'Your subscription does not have a free Redis Cloud database.',
212+
message: 'Your subscription does not have a free Redis Cloud database.',
212213
description:
213214
'Do you want to create a free database in your existing subscription?',
214215
actions: {

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

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
PrimaryButton,
2323
SecondaryButton,
2424
} from 'uiSrc/components/base/forms/buttons'
25-
import { ColorText, Text } from 'uiSrc/components/base/text'
25+
import { ColorText, Text, Title } from 'uiSrc/components/base/text'
26+
import { Row } from 'uiSrc/components/base/layout/flex'
2627
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
2728
import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
2829
import { Modal } from 'uiSrc/components/base/display'
@@ -173,14 +174,23 @@ const OAuthSelectPlan = () => {
173174

174175
return (
175176
<Modal.Compose open>
176-
<Modal.Content.Compose className={styles.container} data-testid="oauth-select-plan-dialog">
177-
<Modal.Content.Close icon={CancelIcon} onClick={handleOnClose} data-testid="oauth-select-plan-dialog-close-btn" />
177+
<Modal.Content.Compose
178+
className={styles.container}
179+
data-testid="oauth-select-plan-dialog"
180+
>
181+
<Modal.Content.Close
182+
icon={CancelIcon}
183+
onClick={handleOnClose}
184+
data-testid="oauth-select-plan-dialog-close-btn"
185+
/>
178186
<Modal.Content.Header.Title>
179-
Choose a cloud vendor
187+
<Row justify="center">
188+
<Title>Choose a cloud vendor</Title>
189+
</Row>
180190
</Modal.Content.Header.Title>
181191
<Modal.Content.Body.Compose width="fit-content">
182192
<section className={styles.content}>
183-
<Text className={styles.subTitle}>
193+
<Text className={styles.subTitle} color="default">
184194
Select a cloud vendor and region to complete the final step
185195
towards your free Redis Cloud database. No credit card is
186196
required.
@@ -236,24 +246,24 @@ const OAuthSelectPlan = () => {
236246
)}
237247
</section>
238248
<footer className={styles.footer}>
239-
<SecondaryButton
240-
className={styles.button}
241-
onClick={handleOnClose}
242-
data-testid="close-oauth-select-plan-dialog"
243-
aria-labelledby="close oauth select plan dialog"
244-
>
245-
Cancel
246-
</SecondaryButton>
247-
<PrimaryButton
248-
disabled={loading || !planIdSelected}
249-
loading={loading}
250-
className={styles.button}
251-
onClick={handleSubmit}
252-
data-testid="submit-oauth-select-plan-dialog"
253-
aria-labelledby="submit oauth select plan dialog"
254-
>
255-
Create database
256-
</PrimaryButton>
249+
<Row justify="end" gap="m">
250+
<SecondaryButton
251+
onClick={handleOnClose}
252+
data-testid="close-oauth-select-plan-dialog"
253+
aria-labelledby="close oauth select plan dialog"
254+
>
255+
Cancel
256+
</SecondaryButton>
257+
<PrimaryButton
258+
disabled={loading || !planIdSelected}
259+
loading={loading}
260+
onClick={handleSubmit}
261+
data-testid="submit-oauth-select-plan-dialog"
262+
aria-labelledby="submit oauth select plan dialog"
263+
>
264+
Create database
265+
</PrimaryButton>
266+
</Row>
257267
</footer>
258268
</section>
259269
</Modal.Content.Body.Compose>

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

Lines changed: 2 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,8 @@
55
text-align: center;
66
}
77

8-
.title {
9-
font-size: 28px !important;
10-
color: var(--htmlColor) !important;
11-
padding-top: 16px;
12-
}
13-
148
.subTitle {
15-
padding: 24px 40px 0;
16-
font-size: 14px !important;
9+
padding: 0 40px;
1710
}
1811

1912
.providers {
@@ -36,10 +29,6 @@
3629
border: 2px solid var(--euiColorPrimary) !important;
3730
}
3831

39-
:global(.euiButton__text) {
40-
display: none;
41-
}
42-
4332
svg {
4433
width: auto;
4534
height: initial;
@@ -92,16 +81,6 @@
9281

9382
.selectDescription {
9483
padding-top: 10px;
95-
color: var(--euiColorMediumShade) !important;
96-
}
97-
98-
:global(.euiSuperSelectControl) {
99-
border-radius: 4px;
100-
background-color: var(--euiColorLightestShade) !important;
101-
}
102-
103-
:global(.euiTextColor) {
104-
font-size: 14px !important;
10584
}
10685
}
10786

@@ -110,45 +89,13 @@
11089
&:hover {
11190
background-color: var(--hoverInListColorLight) !important;
11291
}
113-
114-
:global(.euiTextColor) {
115-
font-size: 14px !important;
116-
}
117-
118-
:global(.euiContextMenuItem__text) {
119-
position: relative;
120-
}
12192
}
12293

12394
.regionName {
12495
padding-left: 4px;
125-
color: var(--euiColorMediumShade) !important;
12696
}
12797

12898
.footer {
12999
width: 100%;
130-
padding-top: 32px;
131-
text-align: right;
132-
padding-bottom: 1px;
133-
}
134-
135-
.button {
136-
margin-left: 8px;
137-
}
138-
139-
.tfOptionIconTooltip {
140-
display: inline;
141-
}
142-
143-
.tfOptionIcon {
144-
display: inline-block !important;
145-
width: 16px !important;
146-
margin-left: 11px;
147-
margin-bottom: 0 !important;
148-
}
149-
150-
:global(.euiTextColor).rspreview {
151-
font-size: 12px !important;
152-
margin-left: 11px;
153-
color: var(--euiColorMediumShade) !important;
100+
padding: 32px 46px 0 46px;
154101
}

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

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
} from 'uiSrc/slices/instances/cloud'
2828
import { Nullable } from 'uiSrc/utils'
2929
import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form'
30-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
30+
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
3131
import { Spacer } from 'uiSrc/components/base/layout/spacer'
3232
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
3333
import { Title } from 'uiSrc/components/base/text/Title'
@@ -38,6 +38,7 @@ import {
3838
OAuthRecommendedSettings,
3939
} from '../../shared'
4040
import styles from './styles.module.scss'
41+
import { StyledAdvantagesContainerAbsolute } from '../../shared/styles'
4142

4243
export interface Props {
4344
source?: Nullable<OAuthSocialSource>
@@ -115,7 +116,9 @@ const OAuthCreateDb = (props: Props) => {
115116
<div className={styles.container} data-testid="oauth-container-create-db">
116117
<Row>
117118
<FlexItem grow className={styles.advantagesContainer}>
118-
<OAuthAdvantages />
119+
<StyledAdvantagesContainerAbsolute>
120+
<OAuthAdvantages />
121+
</StyledAdvantagesContainerAbsolute>
119122
</FlexItem>
120123
<FlexItem grow className={styles.socialContainer}>
121124
{!data ? (
@@ -126,11 +129,15 @@ const OAuthCreateDb = (props: Props) => {
126129
>
127130
{(form: React.ReactNode) => (
128131
<>
129-
<Text className={styles.subTitle}>Get started with</Text>
130-
<Spacer size="s" />
131-
<Title size="XL" className={styles.title}>
132-
Free Redis Cloud database
133-
</Title>
132+
<Col align="center">
133+
<Text color="primary" size="L">
134+
Get started with
135+
</Text>
136+
<Title size="XL" color="primary" className={styles.title}>
137+
Free Redis Cloud database
138+
</Title>
139+
</Col>
140+
134141
{form}
135142
<div>
136143
<OAuthRecommendedSettings
@@ -144,13 +151,16 @@ const OAuthCreateDb = (props: Props) => {
144151
</OAuthForm>
145152
) : (
146153
<>
147-
<Text className={styles.subTitle}>Get your</Text>
148-
<Spacer size="s" />
149-
<Title size="XL" className={styles.title}>
150-
Free Redis Cloud database
151-
</Title>
154+
<Col align="center">
155+
<Text color="primary" size="L">
156+
Get your
157+
</Text>
158+
<Title size="XL" color="primary" className={styles.title}>
159+
Free Redis Cloud database
160+
</Title>
161+
</Col>
152162
<Spacer size="xl" />
153-
<Text textAlign="center" color="subdued">
163+
<Text textAlign="center" color="primary">
154164
The database will be created automatically and can be changed
155165
from Redis Cloud.
156166
</Text>

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
.advantagesContainer {
66
max-width: 320px;
7-
padding: 0;
87
}
98

109
.socialContainer {
@@ -14,12 +13,7 @@
1413

1514
padding: 108px 0px 40px 40px;
1615

17-
.subTitle {
18-
font-size: 16px;
19-
}
20-
2116
.title {
22-
font-weight: bold;
2317
text-align: center;
2418
}
2519
}

‎redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/OAuthSignIn.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Title } from 'uiSrc/components/base/text/Title'
1111
import { Text } from 'uiSrc/components/base/text'
1212
import OAuthForm from '../../shared/oauth-form/OAuthForm'
1313
import styles from './styles.module.scss'
14+
import { StyledAdvantagesContainerAbsolute } from '../../shared/styles'
1415

1516
export interface Props {
1617
source?: Nullable<OAuthSocialSource>
@@ -38,7 +39,9 @@ const OAuthSignIn = (props: Props) => {
3839
<div className={styles.container} data-testid="oauth-container-signIn">
3940
<Row>
4041
<FlexItem grow className={styles.advantagesContainer}>
41-
<OAuthAdvantages />
42+
<StyledAdvantagesContainerAbsolute>
43+
<OAuthAdvantages />
44+
</StyledAdvantagesContainerAbsolute>
4245
</FlexItem>
4346
<FlexItem grow className={styles.socialContainer}>
4447
<OAuthForm

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { Title } from 'uiSrc/components/base/text/Title'
44
import { Text } from 'uiSrc/components/base/text'
55
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
66
import { RiImage } from 'uiSrc/components/base/display'
7+
import { Spacer } from 'uiSrc/components/base/layout'
78
import { OAUTH_ADVANTAGES_ITEMS } from './constants'
89

910
import styles from './styles.module.scss'
1011

1112
const OAuthAdvantages = () => (
1213
<div className={styles.container} data-testid="oauth-advantages">
13-
<RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" $size="m" />
14-
<Title size="S" className={styles.title}>
15-
Cloud
16-
</Title>
14+
<RiImage src={RedisLogo} alt="Redis logo" $size="s" />
15+
<Title size="M">Cloud</Title>
16+
<Spacer size="space600" />
1717
<div className={styles.advantages}>
1818
{OAUTH_ADVANTAGES_ITEMS.map(({ title }) => (
1919
<Text
@@ -22,9 +22,7 @@ const OAuthAdvantages = () => (
2222
key={title?.toString()}
2323
>
2424
<RiIcon type="CheckThinIcon" className={styles.advantageIcon} />
25-
<Text className={styles.advantageTitle} color="subdued">
26-
{title}
27-
</Text>
25+
<Text size="S">{title}</Text>
2826
</Text>
2927
))}
3028
</div>

‎redisinsight/ui/src/components/oauth/shared/oauth-advantages/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const OAUTH_ADVANTAGES_ITEMS = [
33
title: 'Structured querying and full-text search',
44
},
55
{
6-
title: 'Native support for JSON',
6+
title: 'Document Store with JSON native',
77
},
88
{
99
title: 'Scalable and fully managed',

‎redisinsight/ui/src/components/oauth/shared/oauth-advantages/styles.module.scss‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,6 @@
1313
justify-content: space-between;
1414
}
1515

16-
.logo {
17-
height: auto;
18-
width: 120px;
19-
margin-bottom: 12px;
20-
}
21-
22-
.title {
23-
font-size: 18px;
24-
font-weight: 400 !important;
25-
color: var(--euiTextSubduedColor);
26-
27-
margin-bottom: 40px;
28-
}
29-
30-
.advantageTitle {
31-
font-size: 12px !important;
32-
line-height: normal;
33-
}
34-
35-
3616
.advantage {
3717
display: flex;
3818
margin-top: 12px;
@@ -43,4 +23,3 @@
4323
.advantageIcon {
4424
margin-right: 6px;
4525
}
46-

0 commit comments

Comments
 (0)