From 88dfb40c630ac5f6bb3548092adfeca3fa2f3fbd Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 12 Apr 2020 19:06:34 +0100
Subject: [PATCH] Some further dark-mode fixes, added toggle to homepage

- Homepage toggle especially useful for not-logged-in users since they
do not have a dropdown.
---
 resources/sass/_header.scss                         | 11 +++++------
 resources/sass/_lists.scss                          |  2 ++
 resources/views/common/header.blade.php             | 10 +---------
 resources/views/common/home-book.blade.php          |  1 +
 resources/views/common/home-custom.blade.php        |  1 +
 resources/views/common/home-shelves.blade.php       |  1 +
 resources/views/common/home.blade.php               | 13 +++++++++++--
 resources/views/partials/dark-mode-toggle.blade.php |  9 +++++++++
 8 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 resources/views/partials/dark-mode-toggle.blade.php

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index e0a8ad1a4..4c3f6c619 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -167,8 +167,8 @@ header .search-box {
 
 @include smaller-than($l) {
   header .header-links {
+    @include lightDark(background-color, #fff, #333);
     display: none;
-    background-color: #FFF;
     z-index: 10;
     right: $-m;
     border-radius: 4px;
@@ -180,19 +180,18 @@ header .search-box {
       display: block;
     }
   }
-  header .links a, header .dropdown-container ul li a {
+  header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
     text-align: start;
     display: block;
     padding: $-s $-m;
     color: $text-dark;
-    fill: $text-dark;
+    @include lightDark(color, $text-dark, #eee);
     svg {
       margin-inline-end: $-s;
     }
     &:hover {
-      background-color: #EEE;
-      color: #444;
-      fill: #444;
+      @include lightDark(background-color, #eee, #333);
+      @include lightDark(color, #000, #fff);
       text-decoration: none;
     }
   }
diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 5eb672697..32c56f385 100644
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -581,6 +581,8 @@ ul.pagination {
     @include lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
+    line-height: 1.6;
+    cursor: pointer;
     &:hover, &:focus {
       text-decoration: none;
       background-color: var(--color-primary-light);
diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index 98bd01788..4937f7cb0 100644
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -72,15 +72,7 @@
                             </li>
                             <li><hr></li>
                             <li>
-                                <form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
-                                    {{ csrf_field() }}
-                                    {{ method_field('patch') }}
-                                    @if(setting()->getForCurrentUser('dark-mode-enabled'))
-                                        <button>@icon('light-mode'){{ trans('common.light_mode') }}</button>
-                                    @else
-                                        <button>@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
-                                    @endif
-                                </form>
+                                @include('partials.dark-mode-toggle')
                             </li>
                         </ul>
                     </div>
diff --git a/resources/views/common/home-book.blade.php b/resources/views/common/home-book.blade.php
index 8caae814a..3dbcd2875 100644
--- a/resources/views/common/home-book.blade.php
+++ b/resources/views/common/home-book.blade.php
@@ -14,6 +14,7 @@
         <div class="icon-list text-primary">
             @include('partials.view-toggle', ['view' => $view, 'type' => 'books'])
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/common/home-custom.blade.php b/resources/views/common/home-custom.blade.php
index 56e281dcb..e08203057 100644
--- a/resources/views/common/home-custom.blade.php
+++ b/resources/views/common/home-custom.blade.php
@@ -19,6 +19,7 @@
         <h5>{{ trans('common.actions') }}</h5>
         <div class="icon-list text-primary">
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/common/home-shelves.blade.php b/resources/views/common/home-shelves.blade.php
index bac6fa154..fccbef288 100644
--- a/resources/views/common/home-shelves.blade.php
+++ b/resources/views/common/home-shelves.blade.php
@@ -14,6 +14,7 @@
         <div class="icon-list text-primary">
             @include('partials.view-toggle', ['view' => $view, 'type' => 'shelves'])
             @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+            @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
         </div>
     </div>
 @stop
\ No newline at end of file
diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php
index cd27ff568..63b76aa10 100644
--- a/resources/views/common/home.blade.php
+++ b/resources/views/common/home.blade.php
@@ -3,8 +3,17 @@
 @section('body')
 
     <div class="container px-xl py-s">
-        <div class="icon-list inline block">
-            @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+        <div class="grid half">
+            <div>
+                <div class="icon-list inline block">
+                    @include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+                </div>
+            </div>
+            <div class="text-m-right">
+                <div class="icon-list inline block">
+                    @include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
+                </div>
+            </div>
         </div>
     </div>
 
diff --git a/resources/views/partials/dark-mode-toggle.blade.php b/resources/views/partials/dark-mode-toggle.blade.php
new file mode 100644
index 000000000..0812e487a
--- /dev/null
+++ b/resources/views/partials/dark-mode-toggle.blade.php
@@ -0,0 +1,9 @@
+<form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
+    {{ csrf_field() }}
+    {{ method_field('patch') }}
+    @if(setting()->getForCurrentUser('dark-mode-enabled'))
+        <button class="{{ $classes ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
+    @else
+        <button class="{{ $classes ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
+    @endif
+</form>
\ No newline at end of file