From 3c7f15354a93f9da2369e5cc927ca8ecc26e9426 Mon Sep 17 00:00:00 2001
From: Kaloyan Manolov <kaloyan.manolov@advance-auto.com>
Date: Mon, 2 Dec 2024 12:03:47 +0200
Subject: [PATCH] fix: uepr-38: style updates

---
 src/components/debug-modal/debug-modal.css | 258 +++++++++++----------
 src/components/debug-modal/debug-modal.jsx |   8 +-
 2 files changed, 138 insertions(+), 128 deletions(-)

diff --git a/src/components/debug-modal/debug-modal.css b/src/components/debug-modal/debug-modal.css
index 53138acb0a4..e765c65d485 100644
--- a/src/components/debug-modal/debug-modal.css
+++ b/src/components/debug-modal/debug-modal.css
@@ -1,6 +1,6 @@
 @import "../../css/colors.css";
 
-.modal-overlay {
+.debug-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -13,7 +13,7 @@
     z-index: 510;
 }
   
-.modal-container {
+.debug-modal-container {
     background: white;
     border-radius: 8px;
     width: 1000px;
@@ -23,127 +23,137 @@
     position: relative;
     overflow-x: visible;
     box-shadow: 0 4px 4px 0 $ui-black-transparent-10;
+    outline: none;
+
+    .modal-header {
+        display: flex;
+        border-radius: 8px 8px 0 0;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        background-color: $ui-green;
+    }
+    
+    .header-title {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        font-size: 1rem;
+        line-height: 1.25rem;
+        font-weight: 700;
+        color: white; 
+    }
+    .debug-icon {
+        height: 22px;
+        width: 22px;
+    }
+    
+    .hidden {
+        display: none;
+    }
+      
+    .close-button {
+        display: flex;
+        background: none;
+        border: none;
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+    }
+    
+    .modal-content {
+        display: flex;
+        width: 100%;
+        flex-grow: 1;
+        overflow-y: scroll;
+    }
+
+    .modal-content::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .modal-content::-webkit-scrollbar {
+    width: 8px; 
+    }
+    
+    .previousIcon {
+        position: absolute;
+        cursor: pointer;
+        top: 50%;
+    }
+    
+    .nextIcon {
+        position: absolute;
+        cursor: pointer;
+        right: -26px;
+        top: 50%;
+    }
+    
+    .topic-list {
+        width: 30%;
+        border-right: 1px solid $ui-green;;
+    }
+    
+    .topic-item {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 10px;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        color: $ui-green;;
+        cursor: pointer;
+    }
+    
+    .topic-item.active {
+        background-color: #D1FAEE;
+        font-weight: bold;
+    }
+    
+    .info-container {
+        flex-direction: column;
+        width: 70%;
+        display: flex;
+        padding: 20px;
+        color: $text-primary;
+    }
+    
+    .text-container {
+        flex: 1;
+        margin-left: 70px;
+    }
+    
+    .title-text {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 700;
+    }
+    
+    .description {
+        font-size: 16px;
+        line-height: 28px;
+    }
+    
+    .imageContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        margin-top: 10px;
+    }
+    
+    .topicImage {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain; /* Ensures image scales proportionally */
+    }
+    
+    .navigation-buttons {
+        margin-top: 20px;
+    }
+    
+    button {
+        margin: 5px;
+    }
 }
 
-.modal-header {
-    display: flex;
-    border-radius: 8px 8px 0 0;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    background-color: $ui-green;
-}
-
-.header-title {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    font-size: 1rem;
-    line-height: 1.25rem;
-    font-weight: 700;
-    color: white; 
-}
-.debug-icon {
-    height: 22px;
-    width: 22px;
-}
-
-.hidden {
-    display: none;
-}
-  
-.close-button {
-    display: flex;
-    background: none;
-    border: none;
-    cursor: pointer;
-    width: 32px;
-    height: 32px;
-}
-
-.modal-content {
-    display: flex;
-    width: 100%;
-    flex-grow: 1;
-    overflow-y: scroll;
-}
-
-.previousIcon {
-    position: absolute;
-    cursor: pointer;
-    top: 50%;
-}
-
-.nextIcon {
-    position: absolute;
-    cursor: pointer;
-    right: -30px;
-    top: 50%;
-}
-
-.topic-list {
-    width: 30%;
-    border-right: 1px solid $ui-green;;
-}
-
-.topic-item {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    padding: 10px;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: $ui-green;;
-    cursor: pointer;
-}
-
-.topic-item.active {
-    background-color: #D1FAEE;
-    font-weight: bold;
-}
-
-.info-container {
-    flex-direction: column;
-    width: 70%;
-    display: flex;
-    padding: 20px;
-    color: $text-primary;
-}
-
-.text-container {
-    flex: 1;
-    margin-left: 70px;
-}
-
-.title-text {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 700;
-}
-
-.description {
-    font-size: 16px;
-    line-height: 28px;
-}
-
-.imageContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-    margin-top: 10px;
-}
-
-.topicImage {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain; /* Ensures image scales proportionally */
-}
-
-.navigation-buttons {
-    margin-top: 20px;
-}
-
-button {
-    margin: 5px;
-}
\ No newline at end of file
diff --git a/src/components/debug-modal/debug-modal.jsx b/src/components/debug-modal/debug-modal.jsx
index 65edf630cb4..e79a6195fec 100644
--- a/src/components/debug-modal/debug-modal.jsx
+++ b/src/components/debug-modal/debug-modal.jsx
@@ -79,8 +79,8 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
         <ReactModal
             isOpen={isOpen}
             onRequestClose={handleClose}
-            className={styles.modalContainer}
-            overlayClassName={styles.modalOverlay}
+            className={styles.debugModalContainer}
+            overlayClassName={styles.debugModalOverlay}
         >
             <div className={styles.modalHeader}>
                 <div className={styles.headerTitle}>
@@ -147,7 +147,7 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
                             src={prevIcon}
                             alt="Previous"
                             onClick={handlePrevious}
-                            className={classNames(styles.navigationIcon, styles.previousIcon, {
+                            className={classNames(styles.previousIcon, {
                                 [styles.hidden]: selectedTopicIndex === 0
                             })}
                         />
@@ -155,7 +155,7 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
                             src={nextIcon}
                             alt="Next"
                             onClick={handleNext}
-                            className={classNames(styles.navigationIcon, styles.nextIcon, {
+                            className={classNames(styles.nextIcon, {
                                 [styles.hidden]: selectedTopicIndex === sections.length - 1
                             })}
                         />