Ri-0000 fix recommendations styles (#4833)

* fix FilterKeyType.tsx dropdown display

* fix scan more

* fix vote option link (button) styles

* fix recommendation styles

* fix LiveTimeRecommendations.tsx styles

Author: pd-redis

redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx

@@ -15,13 +15,39 @@ import { Nullable } from 'uiSrc/utils'
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
 import { CancelSlimIcon } from 'uiSrc/components/base/icons'
-import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import { getVotedText, iconType, voteTooltip } from './utils'
 import styles from './styles.module.scss'
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+const GitHubLink = styled(Link)`
+  padding: 4px 8px 4px 4px;
+
+  margin-top: 10px;
+  height: 22px !important;
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.components.button.variants.primary.normal?.bgColor};
+  color: ${({ theme }: { theme: Theme }) =>
+    theme.components.button.variants.primary.normal?.textColor};
+  &:hover {
+    text-decoration: none !important;
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.components.button.variants.primary.hover?.bgColor};
+    color: ${({ theme }: { theme: Theme }) =>
+      theme.components.button.variants.primary.normal?.textColor};
+  }
+
+  & > span {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+`
 
 export interface Props {
   voteOption: Vote
@@ -148,28 +174,22 @@ const VoteOption = (props: Props) => {
             </Row>
           </FlexItem>
           <FlexItem grow>
-            <PrimaryButton
-              aria-label="recommendation feedback"
+            <GitHubLink
               data-testid="recommendation-feedback-btn"
-              className={styles.feedbackBtn}
-              size="s"
+              className={styles.link}
+              href={EXTERNAL_LINKS.recommendationFeedback}
+              target="_blank"
+              data-test-subj="github-repo-link"
             >
-              <Link
-                className={styles.link}
-                href={EXTERNAL_LINKS.recommendationFeedback}
-                target="_blank"
-                data-test-subj="github-repo-link"
-              >
-                <RiIcon
-                  className={styles.githubIcon}
-                  aria-label="redis insight github issues"
-                  type="GithubIcon"
-                  color="informative100"
-                  data-testid="github-repo-icon"
-                />
-                To Github
-              </Link>
-            </PrimaryButton>
+              <RiIcon
+                className={styles.githubIcon}
+                aria-label="redis insight github issues"
+                type="GithubIcon"
+                color="informative100"
+                data-testid="github-repo-icon"
+              />
+              To Github
+            </GitHubLink>
           </FlexItem>
         </Col>
       </div>

redisinsight/ui/src/components/scan-more/ScanMore.tsx

@@ -40,7 +40,6 @@ const ScanMore = ({
         size="s"
         style={style ?? { marginLeft: 25, height: 26 }}
         disabled={loading}
-        className={styles.btn}
         onClick={() =>
           loadMoreItems?.({
             stopIndex: SCAN_COUNT_DEFAULT - 1,
@@ -50,7 +49,11 @@ const ScanMore = ({
         data-testid="scan-more"
       >
         {withAlert && (
-          <RiTooltip content={WARNING_MESSAGE} position="top">
+          <RiTooltip
+            content={WARNING_MESSAGE}
+            position="top"
+            anchorClassName={styles.anchor}
+          >
             <RiIcon type="InfoIcon" />
           </RiTooltip>
         )}

redisinsight/ui/src/components/scan-more/styles.module.scss

@@ -1,11 +1,6 @@
-.btn {
-  :global(.euiButtonContent .euiButton__text) {
-    font: normal normal normal 12px/18px Graphik, sans-serif !important;
-    letter-spacing: -0.12px;
-  }
-
-  svg {
-    margin-bottom: 2px;
-    margin-right: 6px;
-  }
+.anchor {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--size-s);
 }

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { remove } from 'lodash'
+import styled from 'styled-components'
 
 import { FeatureFlags, DEFAULT_DELIMITER, Pages } from 'uiSrc/constants'
 import {
@@ -35,11 +36,28 @@ import { ColorText, Text } from 'uiSrc/components/base/text'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link } from 'uiSrc/components/base/link/Link'
 import Recommendation from './components/recommendation'
 import WelcomeScreen from './components/welcome-screen'
 import PopoverRunAnalyze from './components/popover-run-analyze'
 import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Spacer } from 'uiSrc/components/base/layout'
+
+const FooterLink = styled.button<{
+  onClick?: () => void;
+  'data-testid'?: string;
+  children?: React.ReactNode;
+}>`
+  font:
+    normal normal 400 12px/14px Graphik,
+    sans-serif !important;
+  padding: 2px 0 0;
+  margin: 0;
+  text-decoration: underline !important;
+  :hover {
+    text-decoration: none !important;
+  }
+`
 
 const LiveTimeRecommendations = () => {
   const { provider, connectionType } = useSelector(connectedInstanceSelector)
@@ -137,25 +155,26 @@ const LiveTimeRecommendations = () => {
 
   const renderHeader = () => (
     <div className={styles.actions}>
-      <div>
-        <ColorText className={styles.boldText}>Our Tips</ColorText>
+      <Row align="center" gap="s">
+        <ColorText variant="semiBold" className={styles.boldText}>
+          Our Tips
+        </ColorText>
         <RiTooltip
           position="bottom"
           className={styles.tooltip}
-          anchorClassName={styles.tooltipAnchor}
           content={
-            <>
+            <Text size="s">
               Tips will help you improve your database.
-              <br />
+              <Spacer size="s" />
               New tips appear while you work with your database, including how
               to improve performance and optimize memory usage.
               <FeatureFlagComponent name={FeatureFlags.envDependent}>
                 <>
-                  <br />
+                  <Spacer size="s" />
                   Eager for more tips? Run Database Analysis to get started.
                 </>
               </FeatureFlagComponent>
-            </>
+            </Text>
           }
         >
           <RiIcon
@@ -166,10 +185,9 @@ const LiveTimeRecommendations = () => {
           />
         </RiTooltip>
         <FeatureFlagComponent name={FeatureFlags.envDependent}>
-          <Link
+          <a
             href={EXTERNAL_LINKS.githubRepo}
             target="_blank"
-            style={{ marginLeft: 6 }}
             data-testid="github-repo-btn"
           >
             <RiIcon
@@ -179,9 +197,9 @@ const LiveTimeRecommendations = () => {
               size="s"
               data-testid="github-repo-icon"
             />
-          </Link>
+          </a>
         </FeatureFlagComponent>
-      </div>
+      </Row>
 
       {isShowHiddenDisplayed && (
         <Checkbox
@@ -230,13 +248,12 @@ const LiveTimeRecommendations = () => {
                     : ANALYZE_TOOLTIP_MESSAGE
                 }
               >
-                <Link
-                  className={styles.link}
+                <FooterLink
                   onClick={() => setIsShowApproveRun(true)}
                   data-testid="footer-db-analysis-link"
                 >
                   Database Analysis
-                </Link>
+                </FooterLink>
               </PopoverRunAnalyze>
               {' to get more tips'}
             </Text>