From 02390460464401734a6b564adfc28563bd918593 Mon Sep 17 00:00:00 2001
From: deaflynx <deaflynx@gmail.com>
Date: Fri, 15 Sep 2023 09:56:48 +0300
Subject: [PATCH] Edge instructions code wrapper style updated

---
 .../edge-instructions-dialog.component.scss   | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.scss
index a22671248a..092f3c6408 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.scss
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+@use '@angular/material' as mat;
 @import "../../../../../scss/constants";
+@import '../theme.scss';
 
+$tb-primary: mat.get-color-from-palette($tb-primary);
 :host {
   height: 100%;
   max-height: 100vh;
@@ -63,7 +66,8 @@
 
   .mat-mdc-dialog-content {
     max-height: 80vh;
-    padding: 16px;
+    padding: 0 16px 16px 16px;
+    border-top: 16px solid #fff;
   }
 }
 
@@ -73,10 +77,10 @@
     div.code-wrapper button.clipboard-btn {
       right: -2px !important;
       p {
-        color: #305680;
+        color: $tb-primary !important;
       }
       p, div {
-        background-color: #F3F6FA;
+        background-color: unset !important;
       }
       div {
         img {
@@ -88,11 +92,17 @@
           display: block;
           width: 18px;
           height: 18px;
-          background: #305680;
+          background: $tb-primary;
           mask-image: url(/assets/copy-code-icon.svg);
           mask-repeat: no-repeat;
         }
       }
+      a {
+        color: $tb-primary;
+        &:hover {
+          color: $tb-primary;
+        }
+      }
       &.multiline {
         right: -2px !important;
       }
@@ -101,6 +111,12 @@
       padding-right: unset !important;
       padding-left: unset !important;
     }
+    pre[class*="language-"] {
+      border: 1px solid $tb-primary !important;
+    }
+    div {
+      background-color: #F3F6FA;
+    }
   }
   .mdc-button__label > span {
     .mat-icon {
@@ -109,6 +125,13 @@
     }
   }
 
+  .mat-mdc-tab-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #fff;
+  }
+
   .tabs-icon {
     margin-right: 8px;
   }