updating buttons, dark mode, flags, and configs

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>