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 6d928342684a35b96da3691314b634b580da711a..c5ad3fd51715714620c2fb04a97442aee2efd7cc 100644 (file)
--- 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 (file)
index 0a6d6b4..0000000
--- 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 bf74ec9a330b738f9a00825aa757ed95879287b2..b5387045fcc32ec8bf5b1366c9f6c2bafe470445 100644 (file)
--- 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 b1cab90c6154867d47dcdd23598c79464e9aefea..8cdd1de7d4bd22e5d26968d0613288ffe8e29c99 100644 (file)
--- 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 c43616f7567b1b398ae4bf0c772fdcfa20f960ff..6a31e20bf862170610e1ab9a05ccf866511149ed 100644 (file)
--- 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 7c4105ae5267133efb9ebc73d2ec648bf2c8646e..b1cc6244cebfd6c2ceabfafe2afc26085f6a5fb4 100644 (file)
--- 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 fe361c1c1766dfe11753890146dfb5c5ed4f36f6..1e8762f69ecb6c3dfabff2fc644fa21cb459f60b 100644 (file)
--- 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%;
 }