RI-7598 Change visuals of the "Import sample data" popover (#5036)

* fix(ui): remove additional background color overrides changing the styles of the popovers
* fix(ui): added spacing between the buttons in the tutorial popovers
* refactor(ui): cleanup no longer used styles
* fix(ui): added spacing between the buttons in the JSON key override popover
* fix(ui): fix the position of info button when removing multiple fields from list key
* fix(ui): update popover notifications spacing

Author: valkirilov

redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx

@@ -7,6 +7,7 @@ import { setDBConfigStorageField } from 'uiSrc/services'
 import { ConfigDBStorageItem } from 'uiSrc/constants/storage'
 import { FeatureFlagComponent } from 'uiSrc/components'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import {
   PrimaryButton,
   SecondaryButton,
@@ -67,7 +68,7 @@ const RunConfirmationPopover = ({ onApply }: Props) => {
         aria-label="checkbox do not show agan"
       />
       <div className={styles.popoverFooter}>
-        <div>
+        <Row gap="m" justify="end">
           <FeatureFlagComponent name={FeatureFlags.envDependent}>
             <SecondaryButton
               size="s"
@@ -86,7 +87,7 @@ const RunConfirmationPopover = ({ onApply }: Props) => {
           >
             Run
           </PrimaryButton>
-        </div>
+        </Row>
       </div>
     </>
   )

redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx

@@ -10,6 +10,7 @@ import { truncateText } from 'uiSrc/utils'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { TitleSize, Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
+import { Spacer } from 'uiSrc/components/base/layout'
 import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 
 import styles from '../styles.module.scss'
@@ -31,10 +32,9 @@ const Notification = (props: Props) => {
       >
         {notification.title}
       </Title>
-
+      <Spacer size="s" />
       <Text
         size="s"
-        color="subdued"
         className={cx('notificationHTMLBody', styles.notificationBody)}
         data-testid="notification-body"
       >
@@ -43,7 +43,7 @@ const Notification = (props: Props) => {
 
       <Row className={styles.notificationFooter} align="center" justify="start">
         <FlexItem>
-          <Text size="xs" color="subdued" data-testid="notification-date">
+          <Text size="xs" data-testid="notification-date">
             {format(notification.timestamp * 1000, NOTIFICATION_DATE_FORMAT)}
           </Text>
         </FlexItem>

redisinsight/ui/src/pages/browser/components/load-sample-data/styles.module.scss

@@ -1,15 +1,3 @@
 .popover {
   min-width: 380px !important;
 }
-
-.buttonWrapper {
-  .loadDataBtn {
-    height: 36px !important;
-
-    :global(.euiButton__text) {
-      font-size: 14px !important;
-      font-weight: 400 !important;
-    }
-  }
-}
-

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx

@@ -261,24 +261,30 @@ const RemoveListElements = (props: Props) => {
                 />
               </FormField>
             </FlexItem>
-            <FlexItem grow style={{ width: '100%' }}>
-              <FormField
-                additionalText={!canRemoveMultiple ? InfoBoxPopover() : <></>}
-              >
-                <TextInput
-                  name={config.count.name}
-                  id={config.count.name}
-                  maxLength={200}
-                  placeholder={config.count.placeholder}
-                  value={count}
-                  data-testid="count-input"
-                  autoComplete="off"
-                  onChange={handleCountChange}
-                  ref={countInput}
-                  disabled={!canRemoveMultiple}
-                />
-              </FormField>
-            </FlexItem>
+            <Row grow>
+              <FlexItem grow>
+                <FormField>
+                  <TextInput
+                    name={config.count.name}
+                    id={config.count.name}
+                    maxLength={200}
+                    placeholder={config.count.placeholder}
+                    value={count}
+                    data-testid="count-input"
+                    autoComplete="off"
+                    onChange={handleCountChange}
+                    ref={countInput}
+                    disabled={!canRemoveMultiple}
+                  />
+                </FormField>
+              </FlexItem>
+
+              {!canRemoveMultiple ? (
+                <FlexItem>{InfoBoxPopover()}</FlexItem>
+              ) : (
+                <></>
+              )}
+            </Row>
           </Row>
         </FlexItem>
       </EntryContent>

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx

@@ -7,7 +7,8 @@ import {
 } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover } from 'uiSrc/components/base'
-import styles from '../../styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Spacer } from 'uiSrc/components/base/layout'
 
 interface ConfirmOverwriteProps {
   isOpen: boolean
@@ -37,8 +38,8 @@ const ConfirmOverwrite = ({
       You already have the same JSON key. If you proceed, a value of the
       existing JSON key will be overwritten.
     </Text>
-
-    <div className={styles.confirmDialogActions}>
+    <Spacer size="l" />
+    <Row justify="end" gap="m">
       <SecondaryButton
         aria-label="Cancel"
         size="small"
@@ -56,7 +57,7 @@ const ConfirmOverwrite = ({
       >
         Overwrite
       </PrimaryButton>
-    </div>
+    </Row>
   </RiPopover>
 )
 

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/styles.module.scss

@@ -269,20 +269,6 @@
   max-width: none;
 }
 
-.confirmDialogActions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-
-  button {
-    margin-left: 8px;
-
-    &:first-of-type {
-      margin-left: 0;
-    }
-  }
-}
-
 .actions {
   margin-top: 1em;
   display: flex;

redisinsight/ui/src/styles/components/_popover.scss

@@ -35,22 +35,5 @@
 }
 
 .popoverLikeTooltip {
-  border: none;
   max-width: 267px !important;
-  background-color: var(--euiTooltipBackgroundColor) !important;
-  .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after {
-    border-bottom-color: var(--euiTooltipBackgroundColor) !important;
-  }
-
-  .euiPopover__panelArrow.euiPopover__panelArrow--right:after {
-    border-right-color: var(--euiTooltipBackgroundColor) !important;
-  }
-
-  .euiPopover__panelArrow.euiPopover__panelArrow--left:after {
-    border-left-color: var(--euiTooltipBackgroundColor) !important;
-  }
-
-  .euiPopover__panelArrow.euiPopover__panelArrow--top:after {
-    border-top-color: var(--euiTooltipBackgroundColor) !important;
-  }
 }