From 14ee627af194a4d3aac36cb286bc7999e9481860 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Mon, 19 Feb 2024 22:12:48 +0100
Subject: [PATCH] fix(ui): ensure consistent styling on all buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 ui/web/src/components/actions/AddChargingStations.vue |  3 ++-
 ui/web/src/components/actions/SetSupervisionUrl.vue   |  3 ++-
 ui/web/src/components/actions/StartTransaction.vue    |  3 ++-
 ui/web/src/components/buttons/Button.vue              |  8 +++++++-
 ui/web/src/views/ChargingStationsView.vue             | 10 +++++-----
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index d0a21276..f2af0905 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -18,6 +18,7 @@
   />
   <br />
   <Button
+    id="action-button"
     @click="
       () => {
         uiClient
@@ -37,7 +38,7 @@
   >
     Add Charging Stations
   </Button>
-  <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index f6ecab10..6c06ccef 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -11,6 +11,7 @@
   />
   <br />
   <Button
+    id="action-button"
     @click="
       () => {
         uiClient
@@ -30,7 +31,7 @@
   >
     Set Supervision Url
   </Button>
-  <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 5b1bf2f9..ecc5f2da 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -5,6 +5,7 @@
   <input id="idtag" v-model.trim="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
   <br />
   <Button
+    id="action-button"
     @click="
       () => {
         uiClient
@@ -24,7 +25,7 @@
   >
     Start Transaction
   </Button>
-  <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/buttons/Button.vue b/ui/web/src/components/buttons/Button.vue
index 2b9bfaec..6d928342 100644
--- a/ui/web/src/components/buttons/Button.vue
+++ b/ui/web/src/components/buttons/Button.vue
@@ -1,5 +1,11 @@
 <template>
-  <button type="button">
+  <button type="button" class="button">
     <slot></slot>
   </button>
 </template>
+
+<style>
+.button {
+  flex: auto;
+}
+</style>
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index b4f7873b..a022e398 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,9 +1,9 @@
 <template>
   <Container id="charging-stations-container">
     <Container id="buttons-container">
-      <Button id="button" @click="startSimulator()">Start Simulator</Button>
-      <Button id="button" @click="stopSimulator()">Stop Simulator</Button>
-      <Button id="button" @click="$router.push({ name: 'add-charging-stations' })">
+      <Button @click="startSimulator()">Start Simulator</Button>
+      <Button @click="stopSimulator()">Stop Simulator</Button>
+      <Button @click="$router.push({ name: 'add-charging-stations' })">
         Add Charging Stations
       </Button>
       <ReloadButton
@@ -94,8 +94,8 @@ const stopSimulator = (): void => {
   flex-direction: row;
 }
 
-#button {
-  flex: auto;
+#action-button {
+  flex: none;
 }
 
 #reload-button {
-- 
2.34.1