Merge pull request #37 from connorabbas/develop

Styling

Author: connorabbas

resources/css/app.css

@@ -6,4 +6,13 @@
 @layer tailwind-utilities {
     @tailwind components;
     @tailwind utilities;
-}
+}
+
+@layer components {
+    .dynamic-bg {
+        @apply bg-surface-0 dark:bg-surface-900;
+    }
+    .dynamic-border {
+        @apply border-surface-100 dark:border-surface-800;
+    }
+}

resources/js/Layouts/AuthenticatedLayout.vue

@@ -80,11 +80,11 @@ watchEffect(() => {
     <div>
         <div class="min-h-screen">
             <nav
-                class="bg-surface-0 dark:bg-surface-900 border-b"
+                class="dynamic-bg border-b"
                 :class="
                     $slots.header
-                        ? 'border-surface-100 dark:border-surface-800'
-                        : 'border-surface-0 dark:border-surface-900 shadow'
+                        ? 'dynamic-border'
+                        : 'shadow'
                 "
             >
                 <!-- Primary Navigation Menu -->
@@ -93,7 +93,7 @@ watchEffect(() => {
                         :model="mainMenuItems"
                         :pt="{
                             root: {
-                                class: 'px-0 py-3 border-0 rounded-none bg-surface-0 dark:bg-surface-900',
+                                class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
                             },
                             button: {
                                 class: 'hidden',
@@ -207,7 +207,7 @@ watchEffect(() => {
 
             <!-- Page Heading -->
             <header
-                class="bg-surface-0 dark:bg-surface-900 shadow"
+                class="dynamic-bg shadow"
                 v-if="$slots.header"
             >
                 <Container>

resources/js/theme-preset.js

@@ -1,7 +1,7 @@
-import Aura from '@primevue/themes/aura';
+import Preset from '@primevue/themes/lara';
 import { definePreset } from '@primevue/themes';
 
-const customThemePreset = definePreset(Aura, {
+const customThemePreset = definePreset(Preset, {
     semantic: {
         primary: {
             50: '{indigo.50}',