fix: misc styling fixes

app/src/App.vue

@@ -86,7 +86,7 @@ onMounted(() => {
 
         <BNavbarNav class="ms-auto">
           <li class="nav-item">
-            <BButton :href="ssoLink" variant="primary" size="sm" block>
+            <BButton :href="ssoLink" variant="primary" size="sm" class="d-block">
               {{ $t('user_interface_link') }} <YIcon iname="user" />
             </BButton>
           </li>

app/src/components/ConfigPanels.vue

@@ -35,7 +35,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
 
 <template>
   <BCard v-if="routes.length > 1" no-body class="config-panel">
-    <BCardHeader header-tag="nav">
+    <BCardHeader tag="nav">
       <BNav card-header fill pills>
         <BNavItem
           v-for="route in routes"

app/src/scss/_variables.scss

@@ -43,9 +43,9 @@ $black: #202020;
 
 $blue: #60a5fa;
 $indigo: #6812f3;
-$purple: #b957ea;
+$purple: #cf76fc;
 $pink: #e93f8e;
-$red: #ff5a5a;
+$red: #fd6666;
 $orange: #fd7e17;
 $yellow: #ffd452;
 $green: #70ea8d;
@@ -60,6 +60,8 @@ $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
 $dark: $gray-900;
+// Custom
+$best: $purple;
 
 $theme-colors: (
   'primary': $primary,
@@ -70,7 +72,7 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'dark': $dark,
-  'best': $purple,
+  'best': $best,
 );
 
 // $min-contrast-ratio: 7;
@@ -168,7 +170,7 @@ $light-text-colors: (
   'info': shade-color($info, 45%),
   'warning': shade-color($warning, 50%),
   'danger': shade-color($danger, 20%),
-  'best': shade-color($purple, 15%),
+  'best': shade-color($purple, 30%),
 );
 // Altered text color variant for dark theme
 $dark-text-colors: (

app/src/views/_partials/HistoryConsole.vue

@@ -5,8 +5,10 @@ import { computed, nextTick, ref } from 'vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 import QueryHeader from '@/components/QueryHeader.vue'
 import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
 
 const { historyList, showModal } = useRequests()
+const { dark } = useSettings()
 const rootElem = ref<InstanceType<typeof BCard> | null>(null)
 const historyElem = ref<InstanceType<typeof BAccordion> | null>(null)
 const open = ref(false)
@@ -115,16 +117,15 @@ function onHistoryBarClick(e: MouseEvent) {
       tabindex="0"
       :aria-expanded="open ? 'true' : 'false'"
       aria-controls="console-collapse"
-      header-tag="header"
-      :header-bg-variant="open ? 'best' : 'white'"
-      :class="{ 'text-white': open }"
+      :variant="open ? 'best' : dark ? 'dark' : 'light'"
+      tag="header"
       class="d-flex align-items-center"
       @mousedown.left.prevent="onHistoryBarClick"
       @keyup.space.enter.prevent="onHistoryBarKey"
     >
       <h5 class="m-0">
         <YIcon iname="history" />
-        <span class="d-none d-sm-inline fw-bold">
+        <span class="d-none d-sm-inline fw-bold ms-1">
           {{ $t('history.title') }}
         </span>
       </h5>
@@ -187,7 +188,8 @@ function onHistoryBarClick(e: MouseEvent) {
 
 #console {
   position: sticky;
-  z-index: 15;
+  // To be able to read the console while waiting modal is displayed
+  z-index: 1057;
   bottom: 0;
 
   width: calc(100% + 3rem);

app/src/views/tool/ToolFirewall.vue

@@ -294,15 +294,12 @@ function onFormPortToggling() {
 :deep() {
   .form-switch {
     .form-check-input {
-      --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
-      [data-bs-theme='dark'] * & {
-        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
-      }
       &:checked {
         border-color: $success;
         background-color: $success;
       }
       &:not(:checked) {
+        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23222222)'/></svg>") !important;
         border-color: $danger;
         background-color: $danger;
       }