From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Fri, 1 Mar 2024 21:28:46 +0000 (+0100)
Subject: refactor(ui): cleanup CSS styling
X-Git-Tag: v1.2.38~10
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=3802683b5018295e8ebf6199939e43ac65db0763;p=e-mobility-charging-stations-simulator.git

refactor(ui): cleanup CSS styling

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---

diff --git a/ui/web/src/components/buttons/Button.vue b/ui/web/src/components/buttons/Button.vue
index 6d928342..c5ad3fd5 100644
--- a/ui/web/src/components/buttons/Button.vue
+++ b/ui/web/src/components/buttons/Button.vue
@@ -6,6 +6,9 @@
 
 <style>
 .button {
+  display: flex;
   flex: auto;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/ui/web/src/components/buttons/FlatButton.vue b/ui/web/src/components/buttons/FlatButton.vue
deleted file mode 100644
index 0a6d6b44..00000000
--- a/ui/web/src/components/buttons/FlatButton.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <Button class="flat">
-    <slot></slot>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/buttons/Button.vue'
-</script>
-
-<style>
-.flat {
-  border: none;
-}
-</style>
diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue
index bf74ec9a..b5387045 100644
--- a/ui/web/src/components/buttons/ReloadButton.vue
+++ b/ui/web/src/components/buttons/ReloadButton.vue
@@ -1,11 +1,11 @@
 <template>
-  <FlatButton>
+  <Button>
     <span :class="{ spin: loading }"> &#8635; </span>
-  </FlatButton>
+  </Button>
 </template>
 
 <script setup lang="ts">
-import FlatButton from '@/components/buttons/FlatButton.vue'
+import Button from '@/components/buttons/Button.vue'
 
 defineProps<{
   loading: boolean
diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue
index b1cab90c..8cdd1de7 100644
--- a/ui/web/src/components/buttons/ToggleButton.vue
+++ b/ui/web/src/components/buttons/ToggleButton.vue
@@ -15,8 +15,6 @@ const props = defineProps<{
   shared?: boolean
   on?: () => void
   off?: () => void
-  onStyle?: string
-  offStyle?: string
 }>()
 
 const $emit = defineEmits(['clicked'])
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index c43616f7..6a31e20b 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -227,6 +227,8 @@ const deleteChargingStation = (): void => {
 
 .connectors-table__column {
   width: calc(100% / 5);
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 7c4105ae..b1cc6244 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -60,7 +60,7 @@ const $emit = defineEmits(['need-refresh'])
 }
 
 #cs-table__caption {
-  color: white;
+  color: ivory;
   background-color: black;
   font-size: 1.5rem;
   font-weight: bold;
@@ -74,7 +74,7 @@ const $emit = defineEmits(['need-refresh'])
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border: solid 0.5px black;
+  border: solid 0.25px black;
 }
 
 .cs-table__row:nth-of-type(even) {
@@ -84,6 +84,8 @@ const $emit = defineEmits(['need-refresh'])
 .cs-table__column {
   height: fit-content;
   width: calc(65% / 10);
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index fe361c1c..1e8762f6 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -58,6 +58,11 @@
         :status="state.simulatorState?.started"
         :on="() => startSimulator()"
         :off="() => stopSimulator()"
+        :class="
+          state.simulatorState?.started === true
+            ? 'simulator-button-stop'
+            : 'simulator-button-start'
+        "
       >
         {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
       </ToggleButton>
@@ -299,18 +304,25 @@ const stopSimulator = (): void => {
   flex-direction: row;
 }
 
+.simulator-button-start {
+  color: ivory;
+  background-color: green;
+}
+
+.simulator-button-stop {
+  color: ivory;
+  background-color: red;
+}
+
 #action-button {
   flex: none;
 }
 
 #reload-button {
-  flex: auto;
-  color: white;
+  color: ivory;
   background-color: blue;
   font-size: 1.5rem;
   font-weight: bold;
-  align-items: center;
-  justify-content: center;
 }
 
 #reload-button:hover {
@@ -322,7 +334,7 @@ const stopSimulator = (): void => {
 }
 
 #action {
-  color: white;
+  color: ivory;
   background-color: black;
   padding: 1%;
 }