refactor(ui): improve the charging stations list styles

[e-mobility-charging-stations-simulator.git] / ui / web / src / components / charging-stations / CSTable.vue

diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 3d9efbbf2471cb1239f3e64c51262923f8d45021..49d576e51d0bb510b52c0741b87e165e9872cf95 100644 (file)
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -20,22 +20,21 @@
     </thead>
     <tbody id="cs-table__body">
       <CSData
-        v-for="chargingStation in props.chargingStations"
+        v-for="chargingStation in chargingStations"
         :key="chargingStation.stationInfo?.hashId"
         :charging-station="chargingStation"
-        :id-tag="props.idTag"
       />
     </tbody>
   </table>
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
-const props = defineProps<{
+defineProps<{
   chargingStations: ChargingStationData[]
-  idTag: string
 }>()
 </script>
 
@@ -51,7 +50,6 @@ const props = defineProps<{
   empty-cells: show;
 }
 
-#cs-table__head,
 #cs-table__body {
   height: fit-content;
   width: 100%;
@@ -71,12 +69,10 @@ const props = defineProps<{
   height: fit-content;
   width: 100%;
   display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-}
-
-#cs-table__head .cs-table__row {
-  background-color: lightgrey;
+  border: solid 0.5px black;
 }
 
 .cs-table__row:nth-of-type(even) {
@@ -85,13 +81,16 @@ const props = defineProps<{
 
 .cs-table__column {
   height: fit-content;
-  width: calc(65% / 10);
+  width: calc(60% / 10);
   text-align: center;
 }
 
+#cs-table__head .cs-table__row {
+  background-color: lightgrey;
+}
+
 .cs-table__connectors-column {
   height: fit-content;
-  width: 35%;
-  text-align: center;
+  width: 40%;
 }
 </style>