From 6dba76a51714e00deefea659141f7119d7f5263f Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Wed, 21 Feb 2024 17:52:03 +0100
Subject: [PATCH] refactor(ui): improve the charging stations list styles
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/SetSupervisionUrl.vue     | 2 +-
 ui/web/src/components/actions/StartTransaction.vue      | 2 +-
 ui/web/src/components/buttons/ReloadButton.vue          | 1 +
 ui/web/src/components/charging-stations/CSConnector.vue | 2 +-
 ui/web/src/components/charging-stations/CSData.vue      | 3 ++-
 ui/web/src/components/charging-stations/CSTable.vue     | 6 ++++--
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index e50316bf..33b6767b 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
+import { defineProps, getCurrentInstance, reactive } from 'vue'
 import Button from '@/components/buttons/Button.vue'
 
 const props = defineProps<{
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 5e83983f..b887357b 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
+import { defineProps, getCurrentInstance, reactive } from 'vue'
 import Button from '@/components/buttons/Button.vue'
 
 const props = defineProps<{
diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue
index 2fa291af..3ff4bc89 100644
--- a/ui/web/src/components/buttons/ReloadButton.vue
+++ b/ui/web/src/components/buttons/ReloadButton.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import FlatButton from '@/components/buttons/FlatButton.vue'
 
 defineProps<{
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index 7c31ae98..cb03fbca 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue'
+import { defineProps, getCurrentInstance } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import Button from '@/components/buttons/Button.vue'
 import type { ConnectorStatus, Status } from '@/types'
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 4cd878ba..22ed784f 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue'
+import { defineProps, getCurrentInstance } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import CSConnector from '@/components/charging-stations/CSConnector.vue'
 import Button from '@/components/buttons/Button.vue'
@@ -195,6 +195,7 @@ const deleteChargingStation = (): void => {
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  border: solid 0.25px black;
 }
 
 .connectors-table__row:nth-of-type(even) {
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index cc826287..49d576e5 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
@@ -71,6 +72,7 @@ defineProps<{
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  border: solid 0.5px black;
 }
 
 .cs-table__row:nth-of-type(even) {
@@ -79,7 +81,7 @@ defineProps<{
 
 .cs-table__column {
   height: fit-content;
-  width: calc(65% / 10);
+  width: calc(60% / 10);
   text-align: center;
 }
 
@@ -89,6 +91,6 @@ defineProps<{
 
 .cs-table__connectors-column {
   height: fit-content;
-  width: 35%;
+  width: 40%;
 }
 </style>
-- 
2.34.1