fix tips header alignment

Author: pd-redis

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/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 {