update layout

src/main.js

@@ -11,6 +11,8 @@ import { definePreset } from '@primevue/themes';
 import '@/assets/styles.scss';
 import '@/assets/tailwind.css';
 import Aura from '@primevue/themes/aura';
+import Lara from '@primevue/themes/lara';
+import Nora from '@primevue/themes/nora';
 import axios from 'axios';
 
 axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL; //'http://localhost:8082'
@@ -48,15 +50,74 @@ const app = createApp(App);
 app.use(router);
 app.use(auth);
 
-const MyPreset = definePreset(Aura, {
+const preset = definePreset(Nora, {
     semantic: {
-        primary: {50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344'  }
+        primary: {
+            50: '{violet.50}',
+            100: '{violet.100}',
+            200: '{violet.200}',
+            300: '{violet.300}',
+            400: '{violet.400}',
+            500: '{violet.500}',
+            600: '{violet.600}',
+            700: '{violet.700}',
+            800: '{violet.800}',
+            900: '{violet.900}',
+            950: '{violet.950}'
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: '#f3f3f3',
+                    50: '{viva.50}',
+                    100: '{viva.100}',
+                    200: '{viva.200}',
+                    300: '{viva.300}',
+                    400: '{viva.400}',
+                    500: '{viva.500}',
+                    600: '{viva.600}',
+                    700: '{viva.700}',
+                    800: '{viva.800}',
+                    900: '{viva.900}',
+                    950: '{viva.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}'
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}'
+                }
+            }
+        },
+        focusRing: {
+            width: '2px',
+            color: '{primary.color}',
+            offset: '1px'
+        }
     }
 });
 
 app.use(PrimeVue, {
     theme: {
-        preset: MyPreset,
+        preset: preset,
         options: {
             prefix: 'p',
             darkModeSelector: '.app-dark'