chore: move styling of LogResizeButton to common

Author: Elessar1802

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

@@ -31,11 +31,12 @@ import './cicdHistory.scss'
 export const LogResizeButton = withShortcut(
     ({ fullScreenView, setFullScreenView, shortcut }: LogResizeButtonType & IWithShortcut): JSX.Element => {
         const { pathname } = useLocation()
-        const zoomButtonRef = useRef<HTMLDivElement>(null)
+        const isFullscreenViewRef = useRef(fullScreenView)
+        isFullscreenViewRef.current = fullScreenView
 
         const toggleFullScreen = (): void => {
             // NOTE: need to use ref due to the problem of stale function reference after registering the callback
-            setFullScreenView(!(zoomButtonRef.current.dataset.isFullscreenView === 'true'))
+            setFullScreenView(!isFullscreenViewRef.current)
         }
 
         useEffect(() => {
@@ -62,14 +63,18 @@ export const LogResizeButton = withShortcut(
                         combo: ['F'] as const,
                     }}
                 >
-                    <div
-                        ref={zoomButtonRef}
-                        data-is-fullscreen-view={fullScreenView}
-                        className={`zoom ${fullScreenView ? 'zoom--out' : 'zoom--in'} pointer dc__zi-4 flex`}
+                    <button
+                        type="button"
+                        aria-label="Enter/Exit fullscreen view"
+                        className="zoom dc__zi-4 flex dc__transparent log-resize-button"
                         onClick={toggleFullScreen}
                     >
-                        {fullScreenView ? <ZoomOut className="icon-dim-16" /> : <ZoomIn className="icon-dim-16" />}
-                    </div>
+                        {fullScreenView ? (
+                            <ZoomOut className="icon-dim-16 dc__no-shrink" />
+                        ) : (
+                            <ZoomIn className="icon-dim-16 dc__no-shrink" />
+                        )}
+                    </button>
                 </Tooltip>
             )
         )

src/Shared/Components/CICDHistory/cicdHistory.scss

@@ -37,20 +37,6 @@
         position: absolute;
         bottom: 12px;
         right: 12px;
-        transition: top 0.3s;
-        padding: 6px;
-        width: 32px;
-        height: 32px;
-        border-radius: 4px;
-        box-shadow:
-            0 0 4px 0 rgba(0, 10, 20, 0.5),
-            0 0 4px 0 rgba(0, 10, 20, 0.5);
-        background-color: #2c3354;
-        opacity: 0.8;
-
-        &:hover {
-            opacity: 1;
-        }
     }
 
     .ci-details__history {
@@ -110,10 +96,6 @@
                 transition: height 0.3s;
             }
         }
-
-        .zoom {
-            transition: top 0.3s;
-        }
     }
 }
 
@@ -294,3 +276,30 @@
         width: min(100%, 800px);
     }
 }
+
+.log-resize-button {
+    transition: opacity 0.2s ease-in-out;
+    padding: 6px;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    box-shadow:
+        0 0 4px 0 rgba(0, 10, 20, 0.5),
+        0 0 4px 0 rgba(0, 10, 20, 0.5);
+    background-color: #2c3354;
+    opacity: 0.8;
+    z-index: 11;
+
+    & > svg {
+        transition: transform 0.2s ease-in-out;
+        transform: scale(1);
+    }
+
+    &:hover {
+        opacity: 1;
+
+        & > svg {
+            transform: scale(1.1);
+        }
+    }
+}