fix: js dark mode component initial toggle (#1021)

ArkEcosystem · Jan 13, 2022 · 0333cae · 0333cae
1 parent 4ff7e61
commit 0333cae
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git a/app/Http/Livewire/NavbarSettings.php b/app/Http/Livewire/NavbarSettings.php
@@ -18,23 +18,20 @@ public function mount(): void
         $this->state = Settings::all();
     }
 
-    public function updatedState(): void
+    public function updatedState(mixed $value, string $key): void
     {
         $originalCurrency = Arr::get(Settings::all(), 'currency');
         $newCurrency      = Arr::get($this->state, 'currency');
 
-        $originalTheme = Arr::get(Settings::all(), 'darkTheme');
-        $newTheme      = Arr::get($this->state, 'darkTheme');
-
         Cookie::queue('settings', json_encode($this->state), 60 * 24 * 365 * 5);
 
         if ($originalCurrency !== $newCurrency) {
             $this->emit('currencyChanged', $newCurrency);
         }
 
-        if ($originalTheme !== $newTheme) {
+        if ($key === 'darkTheme') {
             $this->dispatchBrowserEvent('setThemeMode', [
-                'theme' => $newTheme === true ? 'dark' : 'light',
+                'theme' => $this->state['darkTheme'] === true ? 'dark' : 'light',
             ]);
         }
     }

diff --git a/composer.json b/composer.json
@@ -11,7 +11,7 @@
         "php": "^8.0",
         "ext-gmp": "*",
         "arkecosystem/crypto": "^1.8",
-        "arkecosystem/foundation": "^0.30",
+        "arkecosystem/foundation": "^0.30.14",
         "blade-ui-kit/blade-icons": "^1.1",
         "brick/math": "^0.9",
         "doctrine/dbal": "^3.2",

diff --git a/composer.lock b/composer.lock
diff --git a/resources/views/components/navbar/navbar.blade.php b/resources/views/components/navbar/navbar.blade.php
@@ -9,7 +9,7 @@ class="fixed z-20 w-full"
             showSettings: false
         })"
         x-init="init"
-        @theme-changed.window="dark = !dark"
+        @theme-changed.window="dark = $event.detail.theme === 'dark'"
     >
         <nav x-ref="nav" class="relative z-30 bg-white border-b border-theme-secondary-300 dark:bg-theme-secondary-900 dark:border-theme-secondary-800">
             <div class="px-8 md:px-10">

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -38,7 +38,7 @@
         class="table-compact"
         x-data="{ 'compact': {{ Settings::usesCompactTables() ? 'true' : 'false' }} }"
         :class="{ 'table-compact-until-md': !compact, }"
-        @toggle-compact-table="compact = ! compact"
+        @toggle-compact-table="compact = ! $event.detail.expand"
     >
         <div id="app" class="flex flex-col antialiased bg-white dark:bg-theme-secondary-900">
             <x-navbar.navbar

diff --git a/resources/views/livewire/navbar-settings.blade.php b/resources/views/livewire/navbar-settings.blade.php
@@ -49,7 +49,7 @@ class="fixed top-0 right-0 left-0 z-30 px-4 pt-3 mt-20 w-full md:absolute md:lef
                     <x-ark-toggle
                         name="state.darkTheme"
                         hide-label
-                        default="window.getThemeMode() === 'dark' ? true : false"
+                        default="window.getThemeMode() === 'dark'"
                     />
                 </x-navbar.setting-option>
 
@@ -62,7 +62,7 @@ class="fixed top-0 right-0 left-0 z-30 px-4 pt-3 mt-20 w-full md:absolute md:lef
                         name="state.compactTables"
                         hide-label
                         :default="$this->state['compactTables'] ? 'false' : 'true'"
-                        alpine-click="$dispatch('toggle-compact-table')"
+                        alpine-click="$dispatch('toggle-compact-table', { expand: value })"
                     />
                 </x-navbar.setting-option>
             </div>