RI-7415 Rework the visuals of the create cloud database modal #5137
Conversation
valkirilov
requested review from
ArtemHoruzhenko,
KrumTy,
dantovska,
pawelangelow and
pd-redis
as code owners
…d database modal re #RI-7415
Code Coverage - Frontend unit tests
Test suite run success5229 tests passing in 681 suites. Report generated by 🧪jest coverage report action from eeaec18 |
| iconSize="XS" | ||
| iconSize="S" | ||
| variant="inline" | ||
| style={{ display: 'inline-flex' }} |
There was a problem hiding this comment.
Because of issues with the alignment of the icon for this external link.
display: inline; (default) |
display: inline-flex |
|---|---|
 |
 |
There was a problem hiding this comment.
Can these issues be fixed for the component? I am guessing it will have the same issue wherever it is rendered
| <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 | ||
| className={styles.container} |
There was a problem hiding this comment.
this would be convenient moment to wrap Modal.Content.Compose into styled component and remove dependency of scss
| </Text> | ||
| )} | ||
| </section> | ||
| <footer className={styles.footer}> |
There was a problem hiding this comment.
Same, it would be great to remove usage of scss whenever we edit a component
| font-size: 12px !important; | ||
| margin-left: 11px; | ||
| color: var(--euiColorMediumShade) !important; | ||
| padding: 32px 46px 0 46px; |
There was a problem hiding this comment.
Please extract as a component
There was a problem hiding this comment.
Great place to refactor all custom component :))
Description
Update the visuals of the modal for Create FREE Cloud database:
How it was tested
Create a FREE Cloud database when you're not logged in
PS: Some of the changes will be automatically applied to the Redis Copilot screen, because the component is shared.
Login with SSO
PS: The same changes will be automatically applied to the Redis Copilot screen, because the component is shared.
Create a FREE Cloud database when you're already logged in
Choose a cloud provider manually
Notification when the database is created successfully
Finish the process of creating a FREE cloud database, and you'll see the success toast notification.