RI-7589 Update visuals of the browser page when the database is empty (#5025)

- change the image when there are no kays available
- change the buttons for importing sample data
- change the buttons for the tutorials

Author: valkirilov

redisinsight/ui/src/assets/img/no-data.svg

@@ -13,6 +13,8 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
 import styles from './styles.module.scss'
 
 const ExploreGuides = () => {
@@ -50,13 +52,11 @@ const ExploreGuides = () => {
       </Text>
       <Spacer size="xl" />
       {!!data.length && (
-        <div className={styles.guides}>
+        <FlexGroup gap="l" wrap justify="center" className={styles.guides}>
           {data.map(({ title, tutorialId, icon }) => (
-            <div
-              key={title}
-              role="button"
+            <SecondaryButton
+              inverted
               tabIndex={0}
-              onKeyDown={() => {}}
               onClick={() => handleLinkClick(tutorialId)}
               className={styles.btn}
               data-testid={`guide-button-${tutorialId}`}
@@ -69,9 +69,9 @@ const ExploreGuides = () => {
                 />
               )}
               {title}
-            </div>
+            </SecondaryButton>
           ))}
-        </div>
+        </FlexGroup>
       )}
     </div>
   )

redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx

@@ -1,29 +1,3 @@
 .guides {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.btn {
-  margin: 0 6px 12px;
-  padding: 4px 16px;
-  border: 1px solid var(--externalLinkColor);
-  background-color: var(--buttonGuideBgColor);
-
-  border-radius: 24px;
-  color: var(--externalLinkColor);
-
-  font-size: 12px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .icon {
-    color: var(--externalLinkColor);
-    margin-right: 8px;
-  }
+  max-width: 414px;
 }

redisinsight/ui/src/components/explore-guides/styles.module.scss

@@ -11,7 +11,10 @@ import {
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import {
+  PrimaryButton,
+  SecondaryButton,
+} from 'uiSrc/components/base/forms/buttons'
 import { PlayFilledIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover } from 'uiSrc/components/base'
@@ -55,24 +58,21 @@ const LoadSampleData = (props: Props) => {
       panelPaddingSize="none"
       anchorClassName={cx(styles.buttonWrapper, anchorClassName)}
       button={
-        <PrimaryButton
+        <SecondaryButton
+          filled
           onClick={() => setIsConfirmationOpen(true)}
           className={styles.loadDataBtn}
           loading={loading}
           disabled={loading}
           data-testid="load-sample-data-btn"
         >
           Load sample data
-        </PrimaryButton>
+        </SecondaryButton>
       }
     >
       <Row gap="m" responsive={false} style={{ padding: 15 }}>
         <FlexItem>
-          <RiIcon
-            size="m"
-            type="ToastDangerIcon"
-            color="attention500"
-          />
+          <RiIcon size="m" type="ToastDangerIcon" color="attention500" />
         </FlexItem>
         <FlexItem>
           <Text variant="semiBold">Execute commands in bulk</Text>

redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg'
+import NoDataImg from 'uiSrc/assets/img/no-data.svg'
 
 import { findTutorialPath } from 'uiSrc/utils'
 import {
@@ -22,6 +22,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { RiImage } from 'uiSrc/components/base/display'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import LoadSampleData from '../load-sample-data'
 
 import styles from './styles.module.scss'
@@ -61,17 +62,13 @@ const NoKeysFound = (props: Props) => {
 
   return (
     <div className={styles.container} data-testid="no-result-found-msg">
-      <RiImage
-        className={styles.img}
-        src={TelescopeImg}
-        alt="no results"
-      />
+      <RiImage className={styles.img} src={NoDataImg} alt="no results" />
       <Spacer />
       <Title color="primary" className={styles.title} size="S">
         Let&apos;s start working
       </Title>
       <Spacer />
-      <div className={styles.actions}>
+      <Row gap="m">
         <LoadSampleData onSuccess={onSuccessLoadData} />
         <EmptyButton
           onClick={() => onAddKeyPanel(true)}
@@ -80,7 +77,7 @@ const NoKeysFound = (props: Props) => {
         >
           + Add key manually
         </EmptyButton>
-      </div>
+      </Row>
     </div>
   )
 }

redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx

@@ -12,12 +12,6 @@
     font-size: 28px !important;
   }
 
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .addKey {
     height: 36px !important;
     width: auto !important;