use variables instead of hardcoded styles

app/src/App.vue

@@ -210,7 +210,7 @@ main {
 }
 
 footer {
-  border-top: 1px solid #eee;
+  border-top: $thin-border;
   font-size: $font-size-sm;
   margin-top: 2rem;
 

app/src/api/api.js

@@ -58,7 +58,7 @@ export default {
   async fetch (method, uri, data = {}, { wait = true, websocket = true, initial = false, asFormData = false } = {}) {
     // `await` because Vuex actions returns promises by default.
     const request = await store.dispatch('INIT_REQUEST', { method, uri, initial, wait, websocket })
-
+    console.log(JSON.parse(JSON.stringify(request)), data)
     if (websocket) {
       await openWebSocket(request)
     }

app/src/scss/_variables.scss

@@ -60,6 +60,9 @@ $alert-padding-x: 1rem;
 $card-spacer-y: .6rem;
 $card-spacer-x: 1rem;
 
+$input-btn-padding-y: .45rem;
+
+$list-group-item-padding-x: 1rem;
 
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/functions.scss';
@@ -68,8 +71,11 @@ $card-spacer-x: 1rem;
 @import '~bootstrap-vue/src/variables';
 
 
+$body-color: $gray-800;
 
+$hr-border-color: $gray-200;
 
+$list-group-action-color: $gray-800;
 
 //  ╭──────────────────────────────────────╮
 //  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
@@ -81,16 +87,15 @@ $card-spacer-x: 1rem;
 //  default: `app/node_modules/fork-awesome/scss/_variables.scss`
 
 $fa-font-path: '~fork-awesome/fonts';
-$fa-font-size-base: 1rem;
+$fa-font-size-base: $font-size-base;
 
 @import '~fork-awesome/scss/variables';
 
 
-$thin-border: 1px solid #eee;
 //  ╭────────────────────╮
 //  │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │
 //  │ │  │ │╰─╮ │ │ ││││ │
 //  │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │
 //  ╰────────────────────╯
 
-$skeleton-color: #eaeaea;
+$thin-border: $hr-border-width solid $hr-border-color;

app/src/scss/main.scss

@@ -25,8 +25,6 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   margin: 0;
-  color: #333;
-  font-size: 14px;
 }
 
 #app {
@@ -37,29 +35,29 @@ body {
 
 .menu-list {
   .list-group-item {
-    padding: 0.75rem 0;
+    padding: $list-group-item-padding-y 0;
     display: flex;
     align-items: center;
   }
-
-  h2 {
-    font-size: 1.25rem;
-    font-weight: 400;
-    margin: 0;
-  }
 }
 
-.font-weight-bold {
-    font-weight: 500 !important;
-}
 
 // Bootstrap overrides
 
-.list-group-item {
+// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-  padding: 0.75rem 1rem;
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
+}
+
+// Add breakpoints for w-*
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @each $size, $length in $sizes {
+    @include media-breakpoint-up($breakpoint) {
+      .w-#{$breakpoint}-#{$size} {
+        width: $length !important;
+      }
+    }
   }
-.list-group-item-action {
-  color: #333;
 }
 
 // Allow state of input group to be displayed under the group
@@ -94,15 +92,15 @@ body {
   margin-top: 0;
 }
 
-.card {
+.card, .list-group-item {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
 }
 
-.card-header {
+.card-header, .list-group-item {
   h1, h2, h3, h4, h5, h6 {
-    font-weight: 400;
+    font-weight: $font-weight-normal;
   }
 }
 
@@ -117,7 +115,7 @@ body {
 }
 
 .list-group-item .icon {
-    margin-left: 0.3em;
+  margin-left: 0.3rem;
 }
 
 // Fork-awesome overrides
@@ -141,8 +139,3 @@ code {
   padding: 1rem;
   background-color: $light;
 }
-
-.btn {
-  font-size: 1em;
-  line-height: 1.7;
-}

app/src/views/Home.vue

@@ -7,7 +7,7 @@
         :to="{ name: item.routeName }"
       >
         <icon :iname="item.icon" class="lg" />
-        <h2>{{ $t(item.translation) }}</h2>
+        <h4>{{ $t(item.translation) }}</h4>
         <icon iname="chevron-right" class="lg fs-sm ml-auto" />
       </b-list-group-item>
     </b-list-group>

app/src/views/app/AppInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
     <!-- BASIC INFOS -->
-    <card v-if="infos" :title="`${infos.label}`" icon="cube">
+    <card v-if="infos" :title="infos.label" icon="cube">
       <b-row
         v-for="(value, prop) in infos" :key="prop"
         no-gutters class="row-line"

app/src/views/tool/ToolList.vue

@@ -7,7 +7,7 @@
       :to="{name: item.routeName}"
     >
       <icon :iname="item.icon" class="lg" />
-      <h2>{{ $t(item.translation) }}</h2>
+      <h4>{{ $t(item.translation) }}</h4>
       <icon iname="chevron-right" class="lg fs-sm ml-auto" />
     </b-list-group-item>
   </b-list-group>

app/src/views/user/UserInfo.vue

@@ -126,7 +126,7 @@ export default {
 
 .row {
   + .row {
-      border-top: 1px solid #eee;
+      border-top: $thin-border;
   }
 
   padding: .5rem;