Clean up app.vue (#5102)

packages/client/hmi-client/src/App.vue

@@ -1,38 +1,25 @@
 <template>
- <!-- Sets the Toast notification groups and their respective levels-->
- <Toast position="top-center" group="error" />
- <Toast position="top-center" group="warn" />
- <Toast position="top-center" group="info" />
- <Toast position="top-center" group="success" />
- <header>
- <tera-navbar :active="displayNavBar" />
- </header>
- <main>
- <router-view v-slot="{ Component }">
- <component class="page" :is="Component" />
- </router-view>
- <ConfirmDialog class="w-4" />
- </main>
- <footer>
- <tera-footer />
- </footer>
+ <Toast position="top-center" />
+ <tera-navbar :active="displayNavBar" />
+ <router-view v-slot="{ Component }">
+ <component class="page" :is="Component" />
+ </router-view>
+ <tera-footer />
  <tera-common-modal-dialogs />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue';
-import Toast from 'primevue/toast';
-
-import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { useRoute, useRouter } from 'vue-router';
+import Toast from 'primevue/toast';
 import API from '@/api/api';
 import TeraNavbar from '@/components/navbar/tera-navbar.vue';
 import TeraFooter from '@/components/navbar/tera-footer.vue';
+import TeraCommonModalDialogs from '@/components/widgets/tera-common-modal-dialogs.vue';
 import { useProjects } from '@/composables/project';
+import { useCurrentRoute } from '@/router';
+import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { Project } from '@/types/Types';
-import ConfirmDialog from 'primevue/confirmdialog';
-import TeraCommonModalDialogs from './components/widgets/tera-common-modal-dialogs.vue';
-import { useCurrentRoute } from './router/index';
 
 const toast = useToastService();
 
@@ -59,37 +46,23 @@ onMounted(() => useProjects().getAll());
 // Update the project when the projectId changes
 watch(
  () => route.params.projectId,
- (projectId) => {
- useProjects().get(projectId as Project['id']);
+ (projectId, oldProjectId) => {
+ if (projectId !== oldProjectId) {
+ useProjects().get(projectId as Project['id']);
+ }
  },
  { immediate: true }
 );
 </script>
 
 <style scoped>
-main {
- grid-area: main;
+.page {
  display: flex;
- flex-grow: 1;
+ flex: 1;
+ grid-area: main;
  isolation: isolate;
- z-index: 1;
  overflow: hidden;
  position: relative;
-}
-
-header {
- grid-area: header;
-}
-
-footer {
- grid-area: footer;
-}
-
-.page {
  z-index: 1;
- flex: 1;
- min-width: 0;
- display: flex;
- flex-grow: 1;
 }
 </style>

packages/client/hmi-client/src/components/navbar/tera-footer.vue

@@ -1,6 +1,6 @@
 <template>
- <section>
- <img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" class="ml-2" />
+ <footer>
+ <img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" />
  <nav>
  <a target="_blank" rel="noopener noreferrer" href="https://terarium.canny.io/report-an-issue">
  Report an issue
@@ -9,27 +9,32 @@
  Request a feature
  </a>
  </nav>
- </section>
+ </footer>
 </template>
 
 <style scoped>
-section {
+footer {
  align-items: center;
  background-color: var(--surface-section);
  border-top: 1px solid var(--surface-border-light);
  display: flex;
- gap: 2rem;
+ gap: var(--gap-8);
+ grid-area: footer;
  height: 3rem;
  justify-content: space-between;
 }
 
+img {
+ margin-left: var(--gap-2);
+}
+
 nav {
- font-size: var(--font-caption);
- margin: 0 2rem;
- display: flex;
  align-items: center;
+ display: flex;
+ font-size: var(--font-caption);
+ gap: var(--gap-8);
  justify-content: space-around;
- gap: 2rem;
+ margin: 0 var(--gap-8);
 }
 
 a {
@@ -39,8 +44,4 @@ a {
 p {
  max-width: 40rem;
 }
-
-article > img {
- margin: 1rem 0;
-}
 </style>

packages/client/hmi-client/src/components/navbar/tera-navbar.vue

@@ -450,9 +450,10 @@ nav {
  align-items: center;
  background-color: var(--surface-section);
  border-bottom: 1px solid var(--surface-border-light);
- padding: 0.5rem 1rem;
+ padding: var(--gap-2) var(--gap-4);
  display: flex;
  gap: var(--gap-large);
+ grid-area: header;
 
  a,
  a:hover {
@@ -461,21 +462,21 @@ nav {
 }
 
 .terarium-logo {
- margin-top: 5px;
+ margin-top: var(--gap-1-5);
 }
 .layout-project-selection {
  margin-right: auto;
 }
 
 .avatar {
- color: var(--text-color-subdued);
  background-color: var(--primary-color-lighter);
+ color: var(--text-color-subdued);
  cursor: pointer;
 }
 
 .avatar:hover {
- color: var(--text-color);
  background-color: var(--primary-color-light);
+ color: var(--text-color);
 }
 
 /* Split button
@@ -597,12 +598,12 @@ nav {
 }
 .status-chip {
  background-color: var(--surface-highlight);
+ border-radius: var(--border-radius);
  padding: var(--gap-small);
- border-radius: 3rem;
 }
 .field-checkbox {
- font-size: var(--font-small);
+ font-size: var(--font-body-small);
  color: var(--text-color-primary);
- margin-bottom: 0rem;
+ margin-bottom: 0;
 }
 </style>

packages/client/hmi-client/src/services/toast.ts

@@ -33,7 +33,6 @@ export const useToastService = () => {
  ToastEventBus.emit('add', {
  severity: ToastSeverity.warn,
  summary: summary || ToastSummaries.WARNING,
- group: ToastSeverity.warn,
  detail,
  life
  });
@@ -43,7 +42,6 @@ export const useToastService = () => {
  ToastEventBus.emit('add', {
  severity: ToastSeverity.error,
  summary: summary || ToastSummaries.ERROR,
- group: ToastSeverity.error,
  detail,
  life
  });
@@ -53,7 +51,6 @@ export const useToastService = () => {
  ToastEventBus.emit('add', {
  severity: ToastSeverity.success,
  summary: summary || ToastSummaries.SUCCESS,
- group: ToastSeverity.success,
  detail,
  life
  });
@@ -63,7 +60,6 @@ export const useToastService = () => {
  ToastEventBus.emit('add', {
  severity: ToastSeverity.info,
  summary: summary || ToastSummaries.INFO,
- group: ToastSeverity.info,
  detail,
  life
  });