fix: Adjust positioning and style of zoom buttons in CICDHistory components

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.8-beta-10",
+    "version": "0.1.8-beta-11",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -60,9 +60,9 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
             >
                 <div>
                     {fullScreenView ? (
-                        <ZoomOut className="zoom zoom--out pointer" onClick={toggleFullScreen} />
+                        <ZoomOut className="zoom zoom--out pointer dc__zi-4" onClick={toggleFullScreen} />
                     ) : (
-                        <ZoomIn className="zoom zoom--in pointer" onClick={toggleFullScreen} />
+                        <ZoomIn className="zoom zoom--in pointer dc__zi-4" onClick={toggleFullScreen} />
                     )}
                 </div>
             </Tippy>
@@ -71,7 +71,7 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
 }
 
 export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
-    <div style={style} className="dc__element-scroller flex column top">
+    <div style={style} className="dc__element-scroller flex column top br-4">
         <Tippy className="default-tt" arrow={false} content="Scroll to Top">
             <button
                 className="flex"

src/Assets/Icon/ic-exit-fullscreen.svg

@@ -26,7 +26,7 @@ const LogStageAccordion = ({
     return (
         <div className="flexbox-col dc__gap-8">
             <button
-                className="flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion-hover"
+                className="flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion-hover dc__position-sticky dc__zi-1 dc__top-40"
                 style={{
                     backgroundColor: isOpen ? '#2C3354' : '#0C1021',
                 }}
@@ -49,23 +49,26 @@ const LogStageAccordion = ({
                 {!!endTime && <span className="cn-0 fs-13 fw-4 lh-20">{getTimeDifference(startTime, endTime)}</span>}
             </button>
 
-            {isOpen &&
-                logs.map((log: string, logsIndex: number) => (
-                    <div
-                        className="flex top left pl-24 dc__gap-10 lh-24 pb-10"
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`logs-${stage}-${startTime}-${logsIndex}`}
-                    >
-                        <span className="cn-4 col-2">{logsIndex + 1}</span>
-                        <p
-                            className="mono fs-14 mb-0-imp cn-0 dc__word-break"
-                            // eslint-disable-next-line react/no-danger
-                            dangerouslySetInnerHTML={{
-                                __html: DOMPurify.sanitize(log),
-                            }}
-                        />
-                    </div>
-                ))}
+            {isOpen && (
+                <div className="flexbox-col dc__gap-4">
+                    {logs.map((log: string, logsIndex: number) => (
+                        <div
+                            className="flex top left pl-24 dc__gap-10 lh-20"
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={`logs-${stage}-${startTime}-${logsIndex}`}
+                        >
+                            <span className="cn-4 col-2">{logsIndex + 1}</span>
+                            <p
+                                className="mono fs-14 mb-0-imp cn-0 dc__word-break"
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                    __html: DOMPurify.sanitize(log),
+                                }}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
         </div>
     )
 }

src/Assets/Icon/ic-fullscreen.svg

@@ -396,7 +396,7 @@ export const LogsRenderer = ({
                     }}
                 >
                     <div
-                        className="flexbox pl-12 logs-renderer__search-bar logs-renderer__filters-border-bottom dc__position-sticky dc__top-0 dc__zi-1"
+                        className="flexbox pl-12 logs-renderer__search-bar logs-renderer__filters-border-bottom dc__position-sticky dc__top-0 dc__zi-2"
                         // Doing this since we have binded 'f' with full screen and SearchVar has not exposed event on search, so on pressing f it goes to full screen
                         onKeyDown={stopPropagation}
                         style={{

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

@@ -688,7 +688,7 @@ const HistoryLogs: React.FC<{
             </div>
             {(scrollToTop || scrollToBottom) && (
                 <Scroller
-                    style={{ position: 'fixed', bottom: '25px', right: '32px' }}
+                    style={{ position: 'fixed', bottom: '52px', right: '12px', zIndex: '4' }}
                     {...{ scrollToTop, scrollToBottom }}
                 />
             )}

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -35,12 +35,12 @@
 
     .zoom {
         position: absolute;
-        top: 200px;
-        right: 32px;
+        bottom: 12px;
+        right: 12px;
         transition: top 0.3s;
         padding: 6px;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         border-radius: 4px;
         box-shadow:
             0 0 4px 0 rgba(0, 10, 20, 0.5),
@@ -129,7 +129,6 @@
         }
 
         .zoom {
-            top: 30px;
             transition: top 0.3s;
         }
     }