Fix: Improve theme switcher UX (#3497)

Because: * Current behaviour is inconsistent and confusing This PR: * Moves theme switcher out of dropdown menu when logged in * Adjusts position to be consistent when logged in or out * Tidy broken Lookbook previews due to removal of GA tracking
TheOdinProject · Jun 18, 2023 · a45530c · a45530c
1 parent 1fdb7c8
commit a45530c
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 16 deletions.
diff --git a/app/components/theme/switcher_component.yml b/app/components/theme/switcher_component.yml
@@ -4,7 +4,7 @@ link:
   mobile: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 text-base font-medium py-2 px-2 dark:hover:bg-gray-700/60 dark:hover:text-gray-200'
   icon_only: 'py-2 px-3'
 icon:
-  base: 'h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400'
+  base: 'h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-300'
   default: 'mr-3'
   mobile: 'mr-4 h-6 w-6'
-  icon_only: 'text-gray-500 group-hover:text-gray-700'
+  icon_only: 'text-gray-500 group-hover:text-gray-400'
diff --git a/app/components/user/profile_dropdown_component.html.erb b/app/components/user/profile_dropdown_component.html.erb
@@ -24,10 +24,6 @@
       Settings
     <% end %>
 
-    <%= turbo_frame_tag 'theme_switcher' do %>
-      <%= render Theme::SwitcherComponent.new(current_theme:) %>
-    <% end %>
-
     <%= link_to sign_out_path, class: 'text-gray-700 dark:text-gray-300 group flex items-center px-3 py-2 text-sm' do %>
       <%= inline_svg_tag 'icons/sign-out.svg', class: 'mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400', aria: true, title: 'Sign out icon' %>
       Sign out

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -21,8 +21,8 @@
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
     <%= stylesheet_link_tag 'application_stylesheet', media: 'all' %>
     <%= stylesheet_pack_tag 'application' %>

diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -16,6 +16,5 @@
     max-width: <%= params.dig(:lookbook, :display, :max_width) || '100%' %>
   ">
       <%= yield %>
-      <%= render 'shared/ga' %>
     </div>
 </html>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -15,7 +15,7 @@
       <div class="hidden md:ml-6 md:flex sm:items-center">
         <% if user_signed_in? %>
           <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-             <%= render Nav::ItemComponent.new(path: dashboard_path, text: 'Dashboard', test_id: 'nav-dashboard') %>
+            <%= render Nav::ItemComponent.new(path: dashboard_path, text: 'Dashboard', test_id: 'nav-dashboard') %>
             <%= render Nav::ItemComponent.new(path: paths_url, text: 'All Paths', test_id: 'nav-all-paths') %>
             <%= render Nav::ItemComponent.new(path: ODIN_CHAT_URL, text: 'Community', test_id: 'nav-community') %>
           </div>
@@ -27,18 +27,20 @@
               <% end %>
             <%= inline_svg_tag 'icons/bell.svg', class: 'h-6 w-6', aria: true, title: 'Notifications icon' %>
           <% end %>
-
+          <%= turbo_frame_tag 'theme_switcher', class: 'flex items-center justify-center' do %>
+            <%= render Theme::SwitcherComponent.new(current_theme:, type: :icon_only) %>
+          <% end %>
           <%= render User::ProfileDropdownComponent.new(current_user:) %>
         <% else %>
           <div class="hidden md:ml-6 md:flex sm:space-x-8">
           <%= render Nav::ItemComponent.new(path: paths_url, text: 'All Paths', test_id: 'nav-all-paths') %>
           <%= render Nav::ItemComponent.new(path: about_path, text: 'About', test_id: 'nav-about') %>
           <%= render Nav::ItemComponent.new(path: ODIN_CHAT_URL, text: 'Community', test_id: 'nav-community') %>
           <%= render Nav::ItemComponent.new(path: sign_in_path, text: 'Sign in', test_id: 'nav-sign-in') %>
-          <%= link_to 'Get Started', sign_up_path, class: 'button button--primary md:px-2 md:py-2 lg:px-4 text-sm', data: { test_id: 'nav-sign-up' } %>
-          <%= turbo_frame_tag 'theme_switcher', class: 'flex items-center justify-center' do %>
+          <%= turbo_frame_tag 'theme_switcher', class: 'flex items-center justify-center w-6' do %>
             <%= render Theme::SwitcherComponent.new(current_theme:, type: :icon_only) %>
           <% end %>
+          <%= link_to 'Get Started', sign_up_path, class: 'button button--primary md:px-2 md:py-2 lg:px-4 text-sm', data: { test_id: 'nav-sign-up' } %>
         </div>
 
         <% end %>

diff --git a/app/views/themes/update.turbo_stream.erb b/app/views/themes/update.turbo_stream.erb
@@ -1,9 +1,7 @@
 <%= turbo_stream.update "theme_switcher" do %>
-  <%= render Theme::SwitcherComponent.new(current_theme: current_theme, type: current_user ? :default : :icon_only) %>
+  <%= render Theme::SwitcherComponent.new(current_theme: current_theme, type: :icon_only) %>
 <% end %>
 
 <%= turbo_stream.update "theme_switcher_mobile" do %>
   <%= render Theme::SwitcherComponent.new(current_theme: current_theme, type: :mobile) %>
 <% end %>
-
-