From 87429f37a57d83f5d568fa4df13cb75e9e4145d1 Mon Sep 17 00:00:00 2001
From: clabroche <corentinlabroche@gmail.com>
Date: Sun, 25 Feb 2024 17:52:54 +0100
Subject: [PATCH] fix: cosmetic changes

---
 fronts/app/src/components/Progress.vue        |  7 +-
 fronts/app/src/components/SidebarViewMode.vue | 71 +++++++++++--------
 .../src/components/SidebarViewModeItem.vue    | 17 +++--
 modules/configuration/front/src/Configs.vue   | 28 ++++----
 4 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/fronts/app/src/components/Progress.vue b/fronts/app/src/components/Progress.vue
index 621d54b..2f06f2b 100644
--- a/fronts/app/src/components/Progress.vue
+++ b/fronts/app/src/components/Progress.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="container">    
     <div class="progress progress-moved">
-      <div class="progress-bar" :style="{transform: 'scaleX(' + ((percent > 100 ? 100 : percent)/ 100) + ')'}">
+      <div class="progress-bar" :style="{width: `${(percent > 100 ? 100 : percent)}%`}">
       </div>                       
     </div> 
   </span>
@@ -33,12 +33,13 @@ export default {
 .progress-bar {
   height: 10px;
   width: 100%;
-  border-radius: 4px;
   background-image: linear-gradient(to bottom, var(--system-accent-backgroundColor1), var(--system-accent-backgroundColor1-darkest));
+  border-radius: 100px;
+  overflow: hidden;
   transform: translateZ(0);
   transform-origin: left;
   transition: 0.4s linear;  
-  transition-property: transform;    
+  transition-property: width;    
   background-color: #0054bc;
 }
 
diff --git a/fronts/app/src/components/SidebarViewMode.vue b/fronts/app/src/components/SidebarViewMode.vue
index f840343..da62f11 100644
--- a/fronts/app/src/components/SidebarViewMode.vue
+++ b/fronts/app/src/components/SidebarViewMode.vue
@@ -5,34 +5,49 @@
     </ul>
     <ul v-if="buttonsBottom.length">
       <sidebar-view-mode-item v-for="button of buttonsPlugins" :key="button.label" :button="button"/>
-      <doughtnut-chart
-        placeholder="CPU"
-        :width="'10px'"
-        :rayon="17"
-        fontSize="11"
-        :value="cpu * 100"
-        :strokeWidth="3"
-        :strokeWidthBg="5"
-        :adjustSubtitleLeft="-2"
-        :adjustTitleTop="-5"
-        :adjustSubtitleTop="-11"
-        :padding="14"
-        strokeColor="var(--system-accent-backgroundColor3-lightest)"
-        strokeColorBg="var(--system-accent-backgroundColor1)"/>
-      <doughtnut-chart
-        placeholder="RAM"
-        :width="'10px'"
-        :rayon="17"
-        :value="mem"
-        fontSize="11"
-        :strokeWidth="3"
-        :strokeWidthBg="5"
-        :adjustSubtitleTop="-11"
-        :adjustSubtitleLeft="-2"
-        :adjustTitleTop="-5"
-        :padding="14"
-        strokeColor="var(--system-accent-backgroundColor3-tertiary-lightest)"
-        strokeColorBg="var(--system-accent-backgroundColor1-tertiary)"/>
+      <Popover appendTo="parent" trigger="mouseenter" placement="right">
+        <template #trigger>
+          <doughtnut-chart
+            placeholder="CPU"
+            :width="'10px'"
+            :rayon="17"
+            fontSize="11"
+            :value="cpu * 100"
+            :strokeWidth="3"
+            :strokeWidthBg="5"
+            :adjustSubtitleLeft="-2"
+            :adjustTitleTop="-5"
+            :adjustSubtitleTop="-11"
+            :padding="14"
+            strokeColor="var(--system-accent-backgroundColor3-lightest)"
+            strokeColorBg="var(--system-accent-backgroundColor1)"/>
+        </template>
+        <template #content>
+          CPU
+        </template>
+      </Popover>
+      <Popover appendTo="parent" trigger="mouseenter" placement="right">
+        <template #trigger>
+          <doughtnut-chart
+            placeholder="RAM"
+            :width="'10px'"
+            :rayon="17"
+            :value="mem"
+            fontSize="11"
+            :strokeWidth="3"
+            :strokeWidthBg="5"
+            :adjustSubtitleTop="-11"
+            :adjustSubtitleLeft="-2"
+            :adjustTitleTop="-5"
+            :padding="14"
+            strokeColor="var(--system-accent-backgroundColor3-tertiary-lightest)"
+            strokeColorBg="var(--system-accent-backgroundColor1-tertiary)"/>
+        </template>
+        <template #content>
+          RAM
+        </template>
+      </Popover>
+      
       <Popover appendTo="parent" trigger="mouseenter" placement="left-start" :showOnCreate="false" >
         <template #trigger>
           <sidebar-view-mode-item key="Themes" :button="{
diff --git a/fronts/app/src/components/SidebarViewModeItem.vue b/fronts/app/src/components/SidebarViewModeItem.vue
index cc7b3c0..223693c 100644
--- a/fronts/app/src/components/SidebarViewModeItem.vue
+++ b/fronts/app/src/components/SidebarViewModeItem.vue
@@ -1,13 +1,22 @@
 <template>
-  <button @click="button.click()" :class="{active: isActive }" class="sidebar-item" :title="button.text">
-    <i v-if="button.icon" :class="{[button.icon]: true}" aria-hidden="true"/>
-    <img v-else-if="button.img" :src="button.img">
-  </button>
+  <Popover appendTo="parent" trigger="mouseenter" placement="right">
+    <template #trigger>
+      <button @click="button.click()" :class="{ active: isActive }" class="sidebar-item" :title="button.text">
+        <i v-if="button.icon" :class="{ [button.icon]: true }" aria-hidden="true"/>
+        <img v-else-if="button.img" :src="button.img">
+      </button>
+    </template>
+    <template #content>
+      {{button.text}}
+    </template>
+  </Popover>
+  
 </template>
 
 <script setup>
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
+import Popover from './Popover.vue';
 const router = useRouter(); 
 
 const props = defineProps({
diff --git a/modules/configuration/front/src/Configs.vue b/modules/configuration/front/src/Configs.vue
index 74549dd..4a71f98 100644
--- a/modules/configuration/front/src/Configs.vue
+++ b/modules/configuration/front/src/Configs.vue
@@ -91,7 +91,7 @@
               (<i class="fas fa-exclamation-triangle"></i> Overrided by .env)
             </template>
           </div>
-          <div class="value" v-if="!env.overrided">{{env.value}}</div>
+          <div class="value" v-if="!env.overrided">{{env.value || 'ㅤ' }}</div>
           <div class="value" v-else>
             <ul>
               <li>Current: {{env.value}}</li>
@@ -191,7 +191,7 @@ export default {
     top: 0;
     width: 2px;
     height: 100%;
-    background: #1d94d9;
+    background: var(--system-accent-backgroundColor1);
     position: absolute;
     left: 0;
   }
@@ -201,11 +201,11 @@ export default {
     padding: 0 10px;
     border-radius: 4px;
     position: relative;
-    background-color: #084b74;
+    background-color: var(--system-accent-backgroundColor1-secondary);
     color: white;
     z-index: 1;
     &.overrided {
-      background-color: #e5b100;
+      background-color: red;
     }
     &::before {
       content: "";
@@ -213,8 +213,9 @@ export default {
       width: 40px;
       height: 0px;
       padding-top: 2px;
-      background: rgb(19,37,89);
-      background: linear-gradient(90deg, #1d94d9 0%, rgba(19,37,89,1) 100%);
+      background: linear-gradient(
+        90deg, var(--system-accent-backgroundColor1) 0%, var(--system-accent-backgroundColor1-secondary) 100%
+      );
       position: absolute;
       left: 0;
       transform: translateX(calc(-100% + 1px));
@@ -226,15 +227,16 @@ export default {
     padding: 0 10px;
     border-radius: 4px;
     width: max-content;
-    border: 1px solid rgba(111,185,154,1);
+    border: 1px solid var(--system-accent-backgroundColor1-tertiary);
     margin-top: 10px;
     &::before {
       content: "";
       top: 50%;
       width: 40px;
       height: 2px;
-      background: rgb(19,37,89);
-      background: linear-gradient(90deg, rgba(19,37,89,1) 0%, rgba(111,185,154,1) 100%);
+      background: linear-gradient(
+        90deg, var(--system-accent-backgroundColor1-secondary) 0%, var(--system-accent-backgroundColor1-tertiary) 100%
+      );
       position: absolute;
       left: 0;
       transform: translateX(calc(-100% - 1px));
@@ -244,8 +246,10 @@ export default {
       bottom: 50%;
       width: 2px;
       height: 31px;
-      background: rgb(19,37,89);
-      background: linear-gradient(90deg, rgba(19,37,89,1) 0%, rgba(111,185,154,1) 100%);
+      background: linear-gradient(
+        90deg, var(--system-accent-backgroundColor1-secondary) 0%, var(--system-accent-backgroundColor1-tertiary) 100%
+      );
+      background: var(--system-accent-backgroundColor1-secondary);
       position: absolute;
       left: 0;
       transform: translateX(-41px);
@@ -275,7 +279,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #1d94d9;
+    background-color: var(--system-accent-backgroundColor1);
     color: white;
     width: 30px;
     height: 30px;