RI-7519: set text and link sizes to be the same

redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx

@@ -41,6 +41,7 @@ const ContentElement = (props: Props) => {
     case 'paragraph':
       return (
         <ColorText
+          size="M"
           data-testid={`paragraph-${telemetryName}-${idx}`}
           key={`${telemetryName}-${idx}`}
           component="div"
@@ -53,6 +54,7 @@ const ContentElement = (props: Props) => {
     case 'code':
       return (
         <ColorText
+          size="M"
           data-testid={`code-${telemetryName}-${idx}`}
           className={cx(styles.code, { [styles.insights]: insights })}
           key={`${telemetryName}-${idx}`}
@@ -64,6 +66,7 @@ const ContentElement = (props: Props) => {
     case 'span':
       return (
         <ColorText
+          size="M"
           data-testid={`span-${telemetryName}-${idx}`}
           key={`${telemetryName}-${idx}`}
           color="primary"
@@ -82,7 +85,7 @@ const ContentElement = (props: Props) => {
           data-testid={`link-${telemetryName}-${idx}`}
           target="_blank"
           variant="inline"
-          size="S"
+          size="M"
           href={getUtmExternalLink(value.href, {
             medium: UTM_MEDIUMS.Recommendation,
             campaign: telemetryName,
@@ -101,7 +104,7 @@ const ContentElement = (props: Props) => {
               data-testid={`link-sso-${telemetryName}-${idx}`}
               target="_blank"
               variant="inline"
-              size="S"
+              size="M"
               onClick={(e) => {
                 ssoCloudHandlerClick?.(e, {
                   source: telemetryName as OAuthSocialSource,
@@ -127,7 +130,7 @@ const ContentElement = (props: Props) => {
           data-testid={`code-link-${telemetryName}-${idx}`}
           target="_blank"
           variant="inline"
-          size="S"
+          size="M"
           href={getUtmExternalLink(value.href, {
             medium: UTM_MEDIUMS.Recommendation,
             campaign: telemetryName,

redisinsight/ui/src/components/side-panels/components/insights-panel/InsightsPanel.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { Header } from 'uiSrc/components/side-panels/components'
-import styles from 'uiSrc/components/side-panels/styles.module.scss'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import EnablementAreaWrapper from 'uiSrc/components/side-panels/panels/enablement-area'
 import LiveTimeRecommendations from 'uiSrc/components/side-panels/panels/live-time-recommendations'
@@ -19,6 +18,8 @@ import {
   TELEMETRY_EMPTY_VALUE,
   TelemetryEvent,
 } from 'uiSrc/telemetry'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import styles from 'uiSrc/components/side-panels/styles.module.scss'
 
 export interface Props {
   isFullScreen: boolean
@@ -93,7 +94,7 @@ const InsightsPanel = (props: Props) => {
           <span className={styles.title}>Insights</span>
         </div>
       </Header>
-      <div className={styles.body}>
+      <Col className={styles.body}>
         <Tabs
           tabs={tabs}
           value={tabSelected}
@@ -105,7 +106,7 @@ const InsightsPanel = (props: Props) => {
         {tabSelected === InsightsPanelTabs.Recommendations && (
           <LiveTimeRecommendations />
         )}
-      </div>
+      </Col>
     </>
   )
 }

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

@@ -39,9 +39,11 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 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'
+import { Link } from 'uiSrc/components/base/link/Link'
+
+import styles from './styles.module.scss'
 
 const FooterLink = styled.button<{
   onClick?: () => void
@@ -154,14 +156,13 @@ const LiveTimeRecommendations = () => {
   }
 
   const renderHeader = () => (
-    <div className={styles.actions}>
-      <Row align="center" gap="s">
-        <ColorText variant="semiBold" className={styles.boldText}>
-          Our Tips
-        </ColorText>
+    <Row align="center" justify="between" className={styles.actions}>
+      <Row align="center" gap="m">
+        <ColorText variant="semiBold">Our Tips</ColorText>
         <RiTooltip
           position="bottom"
           className={styles.tooltip}
+          anchorClassName={styles.tooltipAnchor}
           content={
             <Text size="s">
               Tips will help you improve your database.
@@ -180,12 +181,14 @@ const LiveTimeRecommendations = () => {
           <RiIcon
             className={styles.infoIcon}
             type="InfoIcon"
-            size="s"
+            size="m"
             data-testid="recommendations-info-icon"
           />
         </RiTooltip>
         <FeatureFlagComponent name={FeatureFlags.envDependent}>
-          <a
+          <Link
+            variant="inline"
+            size="M"
             href={EXTERNAL_LINKS.githubRepo}
             target="_blank"
             data-testid="github-repo-btn"
@@ -197,7 +200,7 @@ const LiveTimeRecommendations = () => {
               size="m"
               data-testid="github-repo-icon"
             />
-          </a>
+          </Link>
         </FeatureFlagComponent>
       </Row>
 
@@ -213,7 +216,7 @@ const LiveTimeRecommendations = () => {
           aria-label="checkbox show hidden"
         />
       )}
-    </div>
+    </Row>
   )
 
   return (

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

@@ -35,7 +35,7 @@ import {
 
 import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Card } from 'uiSrc/components/base/layout'
+import { Card, Spacer } from 'uiSrc/components/base/layout'
 import {
   IconButton,
   SecondaryButton,
@@ -211,16 +211,20 @@ const Recommendation = ({
   const recommendationContent = () => (
     <Col>
       {!isUndefined(tutorialId) && (
-        <SecondaryButton
-          filled
-          icon={StarsIcon}
-          iconSide="right"
-          className={styles.btn}
-          onClick={handleRedirect}
-          data-testid={`${name}-to-tutorial-btn`}
-        >
-          {tutorialId ? 'Start Tutorial' : 'Workbench'}
-        </SecondaryButton>
+        <Col align="start">
+          <Spacer size="s" />
+          <SecondaryButton
+            filled
+            icon={StarsIcon}
+            iconSide="right"
+            className={styles.btn}
+            onClick={handleRedirect}
+            data-testid={`${name}-to-tutorial-btn`}
+          >
+            {tutorialId ? 'Start Tutorial' : 'Workbench'}
+          </SecondaryButton>
+          <Spacer size="m" />
+        </Col>
       )}
       <RecommendationBody
         elements={content}

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/styles.module.scss

@@ -81,31 +81,22 @@ $animation-duration: 300ms;
 }
 
 .actions {
-  display: flex;
-  align-items: center;
   background: var(--browserTableRowEven);
   padding: 8px 16px;
-  justify-content: space-between;
-
-  .boldText {
-    font:
-      normal normal 500 14px/17px Graphik,
-      sans-serif !important;
-  }
 
   .githubIcon {
     color: var(--htmlColor);
   }
 
   .infoIcon {
-    width: 16px !important;
-    height: 16px !important;
     fill: var(--htmlColor);
     cursor: pointer;
   }
 
   .tooltipAnchor {
-    margin-left: 6px;
+    svg {
+      vertical-align: middle;
+    }
   }
 }
 

redisinsight/ui/src/components/side-panels/styles.module.scss

@@ -36,8 +36,6 @@ $animation-duration: 300ms;
 
 .body {
   height: calc(100% - 60px);
-  display: flex;
-  flex-direction: column;
 }
 
 .trigger {
@@ -112,10 +110,8 @@ $animation-duration: 300ms;
 }
 
 .tabs {
-  display: flex;
   flex-shrink: 0 !important;
   overflow: initial !important;
-  align-items: center;
   flex-grow: 0;
 
   & > div {