updating buttons, dark mode, flags, and configs

src/package.json

@@ -1,25 +1,34 @@
 {
     "private": true,
-    "scripts": {},
+    "scripts": {
-    "devDependencies": {
+        "dev": "npm run development",
-        "laravel-mix": "^6.0.43",
+        "development": "mix",
-        "postcss": "^8.4.13",
+        "watch": "mix watch",
-        "postcss-import": "^14.1.0",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "vue-loader": "^17.0.0"
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production"
     },
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",
-        "@tailwindcss/forms": "^0.5.0",
+        "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.2",
-        "axios": "^0.27.1",
+        "@vueuse/core": "^8.5.0",
-        "dayjs": "^1.11.1",
+        "axios": "^0.27.2",
+        "dayjs": "^1.11.2",
         "laravel-vue-i18n": "^1.4.3",
         "lodash": "^4.17.21",
         "notiwind": "^1.2.5",
         "tailwindcss": "^3.0.24",
         "tailwindcss-neumorphism": "^0.1.0",
-        "vue": "^3.2.33"
+        "vue": "^3.2.36"
+    },
+    "devDependencies": {
+        "laravel-mix": "^6.0.43",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "vue-loader": "^17.0.0"
     }
 }

src/resources/css/app.css

@@ -2,6 +2,8 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import 'extends/grid.css';
+
 @import 'animations.css';
 @import 'fontfaces.css';
 

src/resources/css/components/buttons.css

@@ -1,5 +1,5 @@
 .button {
-    @apply flex flex-row items-center;
+    @apply inline-grid grid-flow-col auto-cols-max gap-x-2 items-center;
 }
 
 .button-primary {

src/resources/js/Components/DarkModeToggle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, computed, onBeforeMount, provide } from 'vue'
+import { reactive, computed, onBeforeMount, onMounted, provide } from 'vue'
 
 const emit = defineEmits(['themeUpdate'])
 

src/resources/views/components/flags.blade.php

@@ -7,7 +7,7 @@
         <x-flags.es_MX />
         <x-flags.br_BR />
         <x-flags.jp_JP />
-        <x-flags.tw_TW />
+        <x-flags.zh_TW />
         <x-flags.cn_CN />
     </defs>
 </svg>

src/tailwind.config.js

@@ -48,6 +48,20 @@ module.exports = {
           900: '#74274d',
         },
 
+        'monza': {
+          50: '#fff0f0',
+          100: '#ffdede',
+          200: '#ffc3c4',
+          300: '#ff999a',
+          400: '#ff5e60',
+          500: '#ff2c2f',
+          600: '#f60c0f',
+          700: '#db0609',
+          800: '#ab090b',
+          900: '#8d0f11',
+        },
+
+
         // oranges
 
 
@@ -202,6 +216,32 @@ module.exports = {
           900: '#4b05ad',
         },
 
+        'seance': {
+          50: '#fcf3ff',
+          100: '#fae7ff',
+          200: '#f4ceff',
+          300: '#efa7ff',
+          400: '#e772ff',
+          500: '#d73df8',
+          600: '#bf1ddc',
+          700: '#a615bc',
+          800: '#851395',
+          900: '#70157a',
+        },
+
+        'lilac-bush': {
+          50: '#f8f5fd',
+          100: '#f2edfa',
+          200: '#e6def6',
+          300: '#d4c3ef',
+          400: '#bea1e4',
+          500: '#9f6dd3',
+          600: '#995ec9',
+          700: '#894bb6',
+          800: '#723f98',
+          900: '#5e357d',
+        },
+
 
         // pinks
         'mandy': {
@@ -230,6 +270,33 @@ module.exports = {
           900: '#8c0f45',
         },
 
+        'jazzberry-jam': {
+          50: '#fef1fa',
+          100: '#fee5f8',
+          200: '#ffcbf3',
+          300: '#ffa1e7',
+          400: '#ff67d4',
+          500: '#fa3abe',
+          600: '#eb179d',
+          700: '#cc0a80',
+          800: '#b10c6e',
+          900: '#8c0f59',
+        },
+
+        'scarlet-gum': {
+          50: '#f6ecff',
+          100: '#f0ddff',
+          200: '#e5c1ff',
+          300: '#d99cff',
+          400: '#d474ff',
+          500: '#d854ff',
+          600: '#d935f6',
+          700: '#c328da',
+          800: '#9a24af',
+          900: '#4e1859',
+        },
+
+
 
       },