From 5f1ae012222b0af89895f4ed308aa173c3ea77ba Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Apr 2021 16:57:06 +0200
Subject: [PATCH] use variables instead of hardcoded styles

---
 app/src/App.vue                 |  2 +-
 app/src/api/api.js              |  2 +-
 app/src/scss/_variables.scss    | 11 ++++++---
 app/src/scss/main.scss          | 43 ++++++++++++++-------------------
 app/src/views/Home.vue          |  2 +-
 app/src/views/app/AppInfo.vue   |  2 +-
 app/src/views/tool/ToolList.vue |  2 +-
 app/src/views/user/UserInfo.vue |  2 +-
 8 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index d0ac5b5c..4325545a 100644
--- a/app/src/App.vue
+++ b/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;
 
diff --git a/app/src/api/api.js b/app/src/api/api.js
index d199dccb..88b6e827 100644
--- a/app/src/api/api.js
+++ b/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)
     }
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 09ef312e..f55160eb 100644
--- a/app/src/scss/_variables.scss
+++ b/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;
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index bf4b974b..c33992bf 100644
--- a/app/src/scss/main.scss
+++ b/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 {
-  padding: 0.75rem 1rem;
+// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
 }
-.list-group-item-action {
-  color: #333;
+
+// 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;
+      }
+    }
+  }
 }
 
 // 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;
-}
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 81855609..f784fa13 100644
--- a/app/src/views/Home.vue
+++ b/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>
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 82a1a6e6..314c6b78 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/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"
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 95b3800d..d2551875 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/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>
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index ff8d1163..0fcf4505 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/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;