refactor(ui): cleanup CSS styling

[e-mobility-charging-stations-simulator.git] / ui / web / src / views / ChargingStationsView.vue

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 57ae3e20d7f0ba65d57a1933b1b483887f739189..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 {
@@ -318,11 +330,11 @@ const stopSimulator = (): void => {
 }
 
 #reload-button:active {
-  background-color: seagreen;
+  background-color: darkblue;
 }
 
 #action {
-  color: white;
+  color: ivory;
   background-color: black;
   padding: 1%;
 }