fix: tooltip on hover of fullscreen button

Author: Elessar1802

src/Shared/Components/CICDHistory/History.components.tsx

@@ -17,7 +17,7 @@
 import Tippy from '@tippyjs/react'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { ClipboardButton, GenericEmptyState, extractImage, useKeyDown, useSuperAdmin } from '../../../Common'
+import { ClipboardButton, GenericEmptyState, Tooltip, extractImage, useKeyDown, useSuperAdmin } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { GitChangesType, LogResizeButtonType, ScrollerType } from './types'
@@ -28,7 +28,7 @@ import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscre
 import './cicdHistory.scss'
 
 export const LogResizeButton = ({
-    shortcutCombo = 'f',
+    shortcutCombo = ['F'],
     onlyOnLogs = true,
     disableKeybindings = false,
     fullScreenView,
@@ -57,22 +57,31 @@ export const LogResizeButton = ({
         }
     }, [keys])
 
+    const renderFullscreenTooltipContent = () => (
+        <div className="flexbox dc__gap-8 px-8 py-4">
+            <span className="lh-18 fs-12 fw-4 cn-0">{fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen'}</span>
+            <div className="flexbox dc__gap-4">
+                {shortcutCombo.map((key) => (
+                    <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                        {key}
+                    </span>
+                ))}
+            </div>
+        </div>
+    )
+
     return (
         (pathname.includes('/logs') || !onlyOnLogs) && (
-            <Tippy
-                placement="top"
-                arrow={false}
-                className="default-tt"
-                content={fullScreenView ? `Exit fullscreen (${shortcutCombo})` : `Enter fullscreen (${shortcutCombo})`}
+            <Tooltip
+                placement="left"
+                className="shortcut-keys__tippy"
+                content={renderFullscreenTooltipContent()}
+                alwaysShowTippyOnHover
             >
-                <div>
-                    {fullScreenView ? (
-                        <ZoomOut className="zoom zoom--out pointer dc__zi-4" onClick={toggleFullScreen} />
-                    ) : (
-                        <ZoomIn className="zoom zoom--in pointer dc__zi-4" onClick={toggleFullScreen} />
-                    )}
+                <div className={`zoom ${fullScreenView ? 'zoom--out' : 'zoom--in'} pointer dc__zi-4 flex`}>
+                    {fullScreenView ? <ZoomOut onClick={toggleFullScreen} /> : <ZoomIn onClick={toggleFullScreen} />}
                 </div>
-            </Tippy>
+            </Tooltip>
         )
     )
 }

src/Shared/Components/CICDHistory/cicdHistory.scss

@@ -294,3 +294,23 @@
         width: min(100%, 800px);
     }
 }
+
+.shortcut-keys__chip {
+    border-radius: 4px;
+    border: 0.5px solid rgba(255, 255, 255, 0.20);
+    background: var(--N800);
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.20);
+    padding: 0 2px;
+    min-width: 16px;
+    max-width: 250px;
+}
+
+.tippy-box.shortcut-keys__tippy {
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: var(--N900);
+
+    & > .tippy-content {
+        padding: 0;
+    }
+}

src/Shared/Components/CICDHistory/types.tsx

@@ -46,7 +46,7 @@ export enum FetchIdDataStatus {
 }
 
 export interface LogResizeButtonType {
-    shortcutCombo?: string
+    shortcutCombo?: string[]
     onlyOnLogs?: boolean
     disableKeybindings?: boolean
     fullScreenView: boolean