add dark mode support

ibm-skills-network · Jan 2, 2025 · 35b34cc · 35b34cc
1 parent 89780e4
commit 35b34cc
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 30 deletions.
diff --git a/app/components/sn_filterable/base_components/button_component.rb b/app/components/sn_filterable/base_components/button_component.rb
@@ -4,10 +4,10 @@
 class SnFilterable::BaseComponents::ButtonComponent < SnFilterable::BaseComponents::BaseComponent
   DEFAULT_BUTTON_TYPE = :default
   BUTTON_TYPE_MAPPINGS = {
-    DEFAULT_BUTTON_TYPE => "shadow-sm border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-violet-500",
-    :primary => "shadow-sm text-white bg-violet-600 hover:bg-violet-700 focus:ring-violet-500",
-    :danger => "border-transparent text-red-700 bg-red-100 hover:bg-red-200 focus:ring-red-500",
-    :disabled => "shadow-sm border-gray-300 text-gray-700 bg-gray-200 cursor-default"
+    DEFAULT_BUTTON_TYPE => "shadow-sm border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:ring-violet-500 dark:focus:ring-violet-400",
+    :primary => "shadow-sm text-white bg-violet-600 dark:bg-violet-700 hover:bg-violet-700 dark:hover:bg-violet-600 focus:ring-violet-500 dark:focus:ring-violet-400",
+    :danger => "border-transparent text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800 focus:ring-red-500 dark:focus:ring-red-400",
+    :disabled => "shadow-sm border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 cursor-default"
   }.freeze
   BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
 
@@ -56,7 +56,7 @@ def initialize(
     end
 
     show_focus_ring = arguments[:show_focus_ring].nil? ? true : arguments[:show_focus_ring]
-    focus_ring_class = show_focus_ring ? "focus:ring-2 focus:ring-offset-2" : ""
+    focus_ring_class = show_focus_ring ? "focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800" : ""
 
     @arguments[:classes] = class_names(
       "inline-flex items-center border rounded-md #{focus_ring_class} focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",

diff --git a/app/components/sn_filterable/category_component.html.erb b/app/components/sn_filterable/category_component.html.erb
@@ -1,10 +1,17 @@
-<%= content_tag :fieldset, class: "w-full text-xs lg:text-sm app-word-break",
+<%= content_tag :fieldset,
+                class: "w-full text-xs lg:text-sm app-word-break dark:bg-gray-800",
                 "x-data": { open: @open }.to_json do %>
-  <button class="flex border-b justify-between w-full px-4 py-3 font-medium text-left text-gray-900 transition-colors hover:bg-gray-200 rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75" type="button" @click="open = !open">
+  <button class="flex border-b dark:border-gray-700 justify-between w-full px-4 py-3 font-medium text-left text-gray-900 dark:text-white transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 focus-visible:ring-opacity-75"
+          type="button"
+          @click="open = !open">
     <span><%= @title %></span>
-    <%= heroicon "chevron-down", options: { class: "transform w-5 h-5 text-gray-500 transition ease-out", ":class": "open && 'rotate-180'"} %>
+    <%= heroicon "chevron-down",
+                 options: {
+                   class: "transform w-5 h-5 text-gray-500 dark:text-gray-400 transition ease-out",
+                   ":class": "open && 'rotate-180'"
+                 } %>
   </button>
-  <div class="pb-2 text-gray-500" x-show="open" x-cloak>
+  <div class="pb-2 text-gray-500 dark:text-gray-400" x-show="open" x-cloak>
     <%= filter %>
     <%= content %>
   </div>

diff --git a/app/components/sn_filterable/chips_component.html.erb b/app/components/sn_filterable/chips_component.html.erb
@@ -1,21 +1,21 @@
 <% unless @known_filters.empty? %>
-  <div class="relative app-filter-chips-content bg-gray-50 -mx-8 mt-4" x-data="filteringChipContainer" x-init="updateSidebarGap()">
+  <div class="relative app-filter-chips-content bg-gray-50 dark:bg-gray-700 -mx-8 mt-4" x-data="filteringChipContainer" x-init="updateSidebarGap()">
     <div class="mx-auto py-3 px-4 flex items-center px-4 sm:px-6 lg:px-8">
-      <h3 class="sm:pr-0 text-xs font-semibold uppercase tracking-wide text-gray-500">
+      <h3 class="sm:pr-0 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">
         <span>Filters</span>
         <span class="sr-only">, active</span>
       </h3>
 
-      <div aria-hidden="true" class="w-px h-5 bg-gray-300 block ml-2 sm:ml-4"></div>
+      <div aria-hidden="true" class="w-px h-5 bg-gray-300 dark:bg-gray-500 block ml-2 sm:ml-4"></div>
 
       <div class="ml-2 sm:ml-4 flex-1">
         <div class="app-filter-chips-container -m-1 flex flex-wrap items-center">
           <% @known_filters.each do |filter| %>
-            <span class="app-filter-chip m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-xs sm:text-sm font-medium bg-white text-gray-900" x-data>
+            <span class="app-filter-chip m-1 inline-flex rounded-full border border-gray-200 dark:border-gray-600 items-center py-1.5 pl-3 pr-2 text-xs sm:text-sm font-medium bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-300" x-data>
               <span><%= filter[:name] %></span>
               <%= content_tag :a,
                               href: filter[:multi] ? remove_sub_filter_url(@filtered, filter[:parent], filter[:value], url: @url) : remove_filter_url(@filtered, filter[:parent], url: @url),
-                              class: "flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500",
+                              class: "flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500 dark:hover:bg-gray-600 dark:hover:text-gray-300",
                               "x-data": "filteringChip(#{filter.to_json})",
                               "@click": "$event.preventDefault(); onClick()" do %>
                 <span class="sr-only">Remove filter for Objects</span>
@@ -28,7 +28,11 @@
         </div>
       </div>
       <div class="pl-2 sm:pl-6">
-        <%= link_to t("shared.filterable.clear_all"), clear_filter_url(@filtered, url: @url), class: "text-sm text-gray-500", "x-data": "filteringClear", "@click": "$event.preventDefault(); onClick()" %>
+        <%= link_to t("shared.filterable.clear_all"),
+                    clear_filter_url(@filtered, url: @url),
+                    class: "text-sm text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100",
+                    "x-data": "filteringClear",
+                    "@click": "$event.preventDefault(); onClick()" %>
       </div>
     </div>
   </div>

diff --git a/app/components/sn_filterable/filter_category_component.html.erb b/app/components/sn_filterable/filter_category_component.html.erb
@@ -1,12 +1,15 @@
 <% @filter[:filters].each_with_index do |sub_filter, index| %>
-  <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 text-gray-700 hover:text-gray-900">
+  <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
     <div class="min-w-0 flex-1 flex-grow">
-      <%= content_tag :label, sub_filter[:name], class: "block py-2 pr-4 text-gray-600 select-none w-full cursor-pointer", for: "filter-#{@filter[:filter_name]}-#{index}" %>
+      <%= content_tag :label,
+                      sub_filter[:name],
+                      class: "block py-2 pr-4 text-gray-600 dark:text-gray-400 select-none w-full cursor-pointer",
+                      for: "filter-#{@filter[:filter_name]}-#{index}" %>
     </div>
     <div class="my-2 flex items-center">
       <% if @filter[:multi] %>
         <%= content_tag :input, "",
-                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0 rounded",
+                        class: "focus:ring-purple-400 dark:focus:ring-purple-600 cursor-pointer h-5 w-5 text-purple-500 dark:text-purple-400 bg-purple-100 dark:bg-purple-900 border-0 rounded",
                         type: "checkbox",
                         name: "filter[#{@filter[:filter_name]}][]",
                         value: sub_filter[:value],
@@ -17,7 +20,7 @@
         %>
       <% else %>
         <%= content_tag :input, "",
-                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0",
+                        class: "focus:ring-purple-400 dark:focus:ring-purple-600 cursor-pointer h-5 w-5 text-purple-500 dark:text-purple-400 bg-purple-100 dark:bg-purple-900 border-0",
                         type: "radio",
                         name: "filter[#{@filter[:filter_name]}]",
                         value: sub_filter[:value],
@@ -29,4 +32,4 @@
       <% end %>
     </div>
   </div>
-<% end %>
+<% end %>
diff --git a/app/components/sn_filterable/main_component.html.erb b/app/components/sn_filterable/main_component.html.erb
@@ -1,5 +1,5 @@
 <% url = @url || url_for %>
-<div x-data="{ filteringForm: $refs.filtering_form, entireComponenet: $el, filtersLoading: false, filtersPopupOpen: false, sidebarGapTarget: null }">
+<div x-data="{ filteringForm: $refs.filtering_form, entireComponenet: $el, filtersLoading: false, filtersPopupOpen: false, sidebarGapTarget: null }" class="dark:bg-gray-800 dark:text-white">
   <%= content_tag :form,
                   "x-ref": "filtering_form",
                   "action": url,
@@ -26,12 +26,12 @@
       <% if @show_sidebar %>
         <div class="mt-16 h-full pointer-events-auto">
           <div class="h-full" x-init="sidebarGapTarget = $el">
-            <div x-show="filtersPopupOpen" class="fixed top-0 left-0 right-0 bottom-0 z-10 sm:z-0 bg-gray-600 bg-opacity-75 sm:hidden" @click="filtersPopupOpen = false" x-cloak></div>
-            <div x-show="filtersPopupOpen" class="fixed bottom-0 h-2/3 z-10 sm:z-0 left-0 w-full bg-white pt-4 sm:sticky sm:!block row-span-2 shrink-0 mr-4 self-start sm:top-16 lg:w-64 sm:w-52 sm:pt-2 sm:pb-6 sm:overflow-y-auto sm:h-[70vh] sm:max-h-[calc(100vh_-_5rem)]" x-cloak>
+            <div x-show="filtersPopupOpen" class="fixed top-0 left-0 right-0 bottom-0 z-10 sm:z-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 sm:hidden" @click="filtersPopupOpen = false" x-cloak></div>
+            <div x-show="filtersPopupOpen" class="fixed bottom-0 h-2/3 z-10 sm:z-0 left-0 w-full bg-white dark:bg-gray-800 pt-4 sm:sticky sm:!block row-span-2 shrink-0 mr-4 self-start sm:top-16 lg:w-64 sm:w-52 sm:pt-2 sm:pb-6 sm:overflow-y-auto sm:h-[70vh] sm:max-h-[calc(100vh_-_5rem)]" x-cloak>
             <div class="absolute top-0 right-0 -mt-12 mb-2 mr-2" x-show="filtersPopupOpen">
-              <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" @click="filtersPopupOpen = false">
+              <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-gray-600" @click="filtersPopupOpen = false">
                 <span class="sr-only">Close filters</span>
-                <%= heroicon "x-mark", variant: :outline, options: { class: "h-6 w-6 text-grey-500" } %>
+                <%= heroicon "x-mark", variant: :outline, options: { class: "h-6 w-6 text-grey-500 dark:text-gray-400" } %>
               </button>
             </div>
             <div name="Filter Options" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" class="overflow-y-auto max-h-full">
@@ -43,15 +43,15 @@
               <%= render SnFilterable::CategoryComponent.new(title: t("shared.filterable.results_per_page"), open: @filtered.queries.dig("per").present?) do %>
                 <fieldset class="pt-2" x-data="{ wasInteracted: false }">
                   <% ([@filtered.items.default_per_page] | [10, 25, 50]).sort.each do |value| %>
-                    <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 text-gray-700 hover:text-gray-900">
+                    <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                       <div class="min-w-0 flex-1 flex-grow">
-                        <%= content_tag :label, value, class: "block py-2 pr-4 text-gray-600 select-none w-full cursor-pointer", for: "per-#{value}" %>
+                        <%= content_tag :label, value, class: "block py-2 pr-4 text-gray-600 dark:text-gray-400 select-none w-full cursor-pointer", for: "per-#{value}" %>
                       </div>
                       <div class="my-2 flex items-center">
                         <% selected_explcitly = value == @filtered.queries["per"].to_i %>
                         <% selected_by_default = @filtered.queries["per"].blank? && value == @filtered.items.default_per_page %>
                         <%= content_tag :input, "",
-                                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0",
+                                        class: "focus:ring-purple-400 dark:focus:ring-purple-600 cursor-pointer h-5 w-5 text-purple-500 dark:text-purple-400 bg-purple-100 dark:bg-purple-900 border-0",
                                         type: "radio",
                                         id: "per-#{value}",
                                         "x-data": { iteracted: selected_explcitly }.to_json,

diff --git a/app/components/sn_filterable/search_component.html.erb b/app/components/sn_filterable/search_component.html.erb
@@ -1,9 +1,9 @@
 <div class="mt-1 relative rounded-md shadow-sm">
   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-    <%= heroicon "magnifying-glass", options: { class: "h-5 w-5 text-gray-400" } %>
+    <%= heroicon "magnifying-glass", options: { class: "h-5 w-5 text-gray-400 dark:text-gray-500" } %>
   </div>
   <%= content_tag :input, "",
-                  class: "focus:ring-violet-500 focus:border-violet-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md",
+                  class: "focus:ring-violet-500 focus:border-violet-500 block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400",
                   placeholder: "Search...",
                   type: "search",
                   ":name": "hasValue && `filter[#{@filter_name}]`",