Merge pull request #130 from iceljc/features/refine-chat-window

refine nav styles

Author: Oceania2018

src/lib/common/nav-bar/NavBar.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <ul
-    class="{disableDefaultStyles ? '' : 'nav nav-tabs nav-container'} {containerClasses}"
+    class="{disableDefaultStyles ? '' : 'nav nav-tabs nav-tabs-custom nav-justified nav-container'} {containerClasses}"
     style={`${containerStyles}`}
     id={id}
     role={role}

src/lib/common/nav-bar/NavItem.svelte

@@ -91,13 +91,11 @@
         width: 100%;
         height: 100%;
         border: none !important;
-        color: white !important;
-        background-color: var(--bs-secondary);
+        color: white;
         font-weight: 500;
-        font-size: 1.2em;
     }
 
     .tab-btn.active {
-        background-color: var(--bs-primary) !important;
+        color: var(--bs-primary);
     }
 </style>

src/lib/scss/custom/pages/_chat.scss

@@ -350,11 +350,19 @@
     }
 
     .log-header {
-        flex: 5%;
+        flex: 2%;
     }
 
     .log-content {
-        flex: 90%
+        flex: 96%
+    }
+
+    .log-footer {
+        flex: 2%;
+    }
+
+    .nav-group {
+        margin: 0px 3px;
     }
 
     .padding-side {
@@ -371,7 +379,8 @@
         background-color: black;
 
         .log-close-btn {
-            margin-top: 1.2rem;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
             position: sticky;
             display: flex;
             justify-content: space-between;

src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte

@@ -137,7 +137,7 @@
             </ul>
         </div>
 
-        <div class="log-header">
+        <div class="log-footer nav-group">
             <NavBar id={'content-log-container'}>
                 <NavItem
                     navBtnId={'content-log-tab'}

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte

@@ -134,7 +134,7 @@
             </ul>
         </div>
 
-        <div class="log-header">
+        <div class="log-footer nav-group">
             <NavBar id={'state-log-container'}>
                 <NavItem
                     navBtnId={'conv-state-log-tab'}