move theme button to top level menu again and make it available at all times, without the need to register (#104)

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/navigation.css

@@ -184,16 +184,11 @@
 }
 
 .theme-toggle {
-  border-color: var(--color-border);
-  background: var(--color-bg-card);
-  color: var(--color-text-secondary);
   cursor: pointer;
-  box-shadow: var(--shadow-sm);
-  border-radius: 999px;
-
-  &:hover {
-    background: var(--color-bg-hover);
-  }
+  appearance: none;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
 }
 
 .nav-overflow-dropdown {
@@ -367,15 +362,20 @@
     display: none;
   }
 
-  .mobile-nav-menu .nav-link {
-    width: 100%;
-    justify-content: space-between;
-  }
+.mobile-nav-menu .nav-link {
+  width: 100%;
+  justify-content: space-between;
+}
 
-  .mobile-nav-menu .nav-user {
-    display: block;
-    padding: 0 var(--spacing-2);
-  }
+.mobile-nav-theme-control {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.mobile-nav-menu .nav-user {
+  display: block;
+  padding: 0 var(--spacing-2);
+}
 
   .mobile-nav-menu {
     position: fixed;

app/javascript/controllers/theme_controller.js

@@ -49,11 +49,13 @@ export default class extends Controller {
     }
 
     if (this.hasIconTarget) {
-      this.iconTarget.classList.remove("fa-moon", "fa-sun")
+      this.iconTarget.classList.remove("fa-regular", "fa-solid", "fa-moon", "fa-sun")
+      this.iconTarget.classList.add("fa-solid")
       this.iconTarget.classList.add(theme === "dark" ? "fa-sun" : "fa-moon")
     }
 
     this.element.setAttribute("aria-pressed", theme === "dark")
+    this.element.setAttribute("aria-label", `Switch to ${theme === "dark" ? "light" : "dark"} mode`)
     this.element.setAttribute("title", `Switch to ${theme === "dark" ? "light" : "dark"} mode`)
 
     if (this.hasButtonTarget) {

app/views/layouts/application.html.slim

@@ -56,6 +56,7 @@ html data-theme="light"
               span.mobile-nav-label Menu
               i.fa-solid.fa-caret-down
             .mobile-nav-menu data-action="click->sidebar#closeMenuOnNavigate"
+              = render "shared/theme_control", extra_class: "mobile-nav-theme-control", show_label: true
               = link_to "Topics", topics_path, class: "nav-link"
               - if user_signed_in?
                 - icon_class = starred_active ? "fa-solid fa-star" : "fa-regular fa-star"
@@ -101,6 +102,7 @@ html data-theme="light"
               - if user_signed_in?
                 - if current_user&.person&.default_alias
                   = link_to current_user.person.default_alias.name, person_path(current_user.person.default_alias.email), class: "nav-link nav-user"
+                = render "shared/theme_control", extra_class: "nav-theme-control", show_label: false
                 - unread = activity_unread_count
                 = link_to activities_path, class: "nav-link nav-link-activity", title: "Activity" do
                   i.fa-regular.fa-bell
@@ -109,6 +111,7 @@ html data-theme="light"
               - else
                 = link_to "Sign in", new_session_path, class: "nav-link"
                 = link_to "Register", new_registration_path, class: "nav-link"
+                = render "shared/theme_control", extra_class: "nav-theme-control", show_label: false
           details.nav-overflow-dropdown data-controller="nav-dropdown"
             summary.nav-link.nav-overflow-toggle aria-label="Menu" data-action="click->sidebar#closeMenuOnNavigate"
               i.fa-solid.fa-bars

app/views/settings/profiles/show.html.slim

@@ -11,19 +11,6 @@
         = f.text_field :username, placeholder: "your_name", value: current_user.username
       = f.submit "Save username", class: "button-primary"
 
-  .settings-section
-    h2 Appearance
-    p.settings-hint Choose your preferred theme.
-    .theme-choice data-controller="theme"
-      span.theme-choice-label Theme
-      .theme-choice-buttons
-        button.theme-choice-button type="button" data-theme-value="light" data-theme-target="button" data-action="click->theme#select"
-          i.fa-solid.fa-sun aria-hidden="true"
-          span Light
-        button.theme-choice-button type="button" data-theme-value="dark" data-theme-target="button" data-action="click->theme#select"
-          i.fa-regular.fa-moon aria-hidden="true"
-          span Dark
-
   .settings-section
     h2 Mention Settings
     p.settings-hint Control who can @mention you in notes.

app/views/shared/_theme_control.html.slim

@@ -0,0 +1,5 @@
+- classes = ["nav-link", "theme-toggle", local_assigns[:extra_class]].compact.join(" ")
+button class=classes type="button" data-controller="theme" data-action="click->theme#toggle" aria-label="Toggle theme"
+  i.fa-regular.fa-moon data-theme-target="icon" aria-hidden="true"
+  - if local_assigns.fetch(:show_label, true)
+    span Theme