refactor(ui): refine action container styling

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

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index d6df1a214e195080b4f74d25530910181ea9aef4..aee9c5d0ef3a2aca9cbc412da5e359668236eadd 100644 (file)
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -1,22 +1,41 @@
 <template>
   <router-view />
+  <Container v-show="$route.path !== '/'" id="action-container">
+    <router-view name="action" />
+  </Container>
 </template>
 
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
 <style>
 #app {
-  height: 100%;
+  height: fit-content;
   width: 100%;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  display: flex;
+  flex-direction: row;
+  color: black;
+  background-color: white;
+}
+
+#action-container {
+  min-width: max-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin: 0.1%;
+  padding: 0.1%;
+  border: solid black;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-  width: 100vw;
-  background-color: rgb(233, 227, 227);
+  margin: 0.005%;
+  padding: 0.005%;
 }
 </style>