Updated styling on dark mode to make it easier to see

which tab is being displayed.
kobaltz · Feb 10, 2024 · 04717f9 · 04717f9
1 parent 09c6106
commit 04717f9
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    mission_control-servers (0.2.1)
+    mission_control-servers (0.2.2)
       importmap-rails
       rails (>= 7.1.3)
       stimulus-rails

diff --git a/app/assets/builds/mission_control_servers_application.css b/app/assets/builds/mission_control_servers_application.css
diff --git a/app/assets/stylesheets/mission_control/servers/application.tailwind.css b/app/assets/stylesheets/mission_control/servers/application.tailwind.css
@@ -66,7 +66,7 @@
   .tab-link {
     @apply  relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium focus:z-10;
     @apply flex items-center justify-center;
-    @apply text-gray-100;
+    @apply text-gray-500 dark:text-gray-100;
     @apply bg-white hover:bg-gray-50;
     @apply dark:bg-indigo-800 hover:bg-gray-50;
   }

diff --git a/app/javascript/mission_control/servers/controllers/tabs_controller.js b/app/javascript/mission_control/servers/controllers/tabs_controller.js
@@ -32,7 +32,7 @@ export default class extends Controller {
     const activeContent = this.contentTargets.find(content => content.dataset.target === targetId);
 
     if (activeTab && activeContent) {
-      activeTab.classList.add("text-xl", "text-gray-100", 'bg-indigo-500', 'transition', 'duration-300', 'ease-in-out');
+      activeTab.classList.add("text-xl", "text-gray-100", 'bg-indigo-500', 'dark:bg-indigo-900', 'transition', 'duration-300', 'ease-in-out');
 
       activeContent.classList.remove('absolute', 'top-0', 'left-full', 'w-0', 'h-0');
       activeContent.classList.add('relative');
@@ -42,7 +42,7 @@ export default class extends Controller {
   resetTabs() {
     this.linkTargets.forEach(link => {
       link.classList.add('transition', 'duration-300', 'ease-in-out');
-      link.classList.remove("text-xl", "text-gray-100", 'bg-indigo-500');
+      link.classList.remove("text-xl", "text-gray-100", 'bg-indigo-500', "dark:bg-indigo-900");
     });
     this.contentTargets.forEach(content => {
       content.classList.add('absolute', 'top-0', 'left-full', 'w-0', 'h-0');

diff --git a/app/views/mission_control/servers/projects/index.html.erb b/app/views/mission_control/servers/projects/index.html.erb
@@ -10,7 +10,7 @@
 <div class="px-4 sm:px-6 lg:px-8">
   <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
-      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">Projects</h1>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Projects</h1>
       <p class="mt-2 text-sm text-gray-normal">Resource monitor for your Ruby on Rails applications.</p>
     </div>
     <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">

diff --git a/lib/mission_control/servers/version.rb b/lib/mission_control/servers/version.rb
@@ -1,5 +1,5 @@
 module MissionControl
   module Servers
-    VERSION = "0.2.1"
+    VERSION = "0.2.2"
   end
 end