Added Dark Mode

kobaltz · Feb 9, 2024 · 2e5d3bd · 2e5d3bd
1 parent 0c3819b
commit 2e5d3bd
Show file tree

Hide file tree

Showing 17 changed files with 199 additions and 70 deletions.
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
@@ -2,6 +2,74 @@
 @tailwind components;
 @tailwind utilities;
 
-.btn-default {
-  @apply inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover: bg-gray-50 dark:bg-gray-800 dark:text-white dark:ring-gray-600 dark:hover:bg-gray-700;
+@layer base {
+  body {
+    @apply bg-white text-gray-900;
+    @apply dark:bg-gray-900 dark:text-gray-300;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply text-white;
+    @apply dark:text-gray-300;
+  }
+}
+
+@layer components {
+  .text-gray-light {
+    @apply text-gray-500 ;
+    @apply dark:text-gray-400;
+  }
+
+  .text-gray-normal {
+    @apply text-gray-700 ;
+    @apply dark:text-gray-300;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center rounded-md;
+    @apply px-3 py-2 text-sm font-semibold;
+    @apply shadow-sm ring-1 ring-inset;
+  }
+
+  .btn-default {
+    @apply bg-white text-gray-900 ring-gray-300 hover:bg-gray-50;
+    @apply dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-600 dark:hover:bg-gray-700;
+  }
+
+  .btn-primary {
+    @apply bg-indigo-600 text-white ring-indigo-500 hover:bg-indigo-700;
+    @apply dark:bg-indigo-900 dark:text-gray-400 dark:ring-indigo-400 dark:hover:bg-indigo-400;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 text-white ring-red-500 hover:bg-red-700;
+    @apply dark:bg-red-900 dark:text-gray-300 dark:ring-red-400 dark:hover:bg-red-400;
+  }
+
+  .btn-primary-subtle {
+    @apply bg-indigo-50 text-indigo-600 hover:bg-indigo-100;
+    @apply dark:bg-indigo-800 dark:text-indigo-200 dark:hover:bg-indigo-700;
+  }
+}
+
+@layer components {
+  .card-heading {
+    @apply order-first text-3xl font-semibold tracking-tight;
+    @apply text-gray-900;
+    @apply dark:text-gray-400;
+  }
+}
+
+@layer components {
+  .progress-bar {
+    @apply bg-gray-300;
+    @apply dark:bg-gray-600;
+  }
+
+  .progress {
+    @apply bg-indigo-600;
+    @apply dark:bg-indigo-800;
+  }
 }
diff --git a/app/javascript/mission_control/servers/controllers/dark_mode_controller.js b/app/javascript/mission_control/servers/controllers/dark_mode_controller.js
@@ -8,8 +8,10 @@ export default class extends Controller {
   toggleDarkMode() {
     if (localStorage.getItem('darkMode') === 'true') {
       document.documentElement.classList.add('dark');
+      this.element.innerHTML = 'Light Mode';
     } else {
       document.documentElement.classList.remove('dark');
+      this.element.innerHTML = 'Dark Mode';
     }
   }
 
@@ -18,9 +20,11 @@ export default class extends Controller {
     if (htmlClasses.contains('dark')) {
       htmlClasses.remove('dark');
       localStorage.setItem('darkMode', 'false');
+      this.element.innerHTML = 'Dark Mode';
     } else {
       htmlClasses.add('dark');
       localStorage.setItem('darkMode', 'true');
+      this.element.innerHTML = 'Light Mode';
     }
   }
 }
diff --git a/app/javascript/mission_control/servers/controllers/pie_chart_controller.js b/app/javascript/mission_control/servers/controllers/pie_chart_controller.js
@@ -8,25 +8,57 @@ export default class extends Controller {
     idleLabel: String,
     usedLabel: String,
     idleColor: "rgb(235, 235, 235)",
-    usedColor: "rgb(54, 162, 235)"
+    idleDarkColor: "rgb(32, 32, 32)",
+    usedColor: "rgb(54, 162, 235)",
+    usedDarkColor: "rgb(32, 32, 128)",
+    darkBorderColor: "rgb(255, 255, 255, 0.1)",
+    lightBorderColor: "rgb(0, 0, 0, 0.1)"
   }
+
   connect() {
-    const ctx = this.element
-    new Chart(ctx, {
+    this.observeHtmlClassChanges();
+    this.displayChart();
+  }
+
+  observeHtmlClassChanges() {
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          this.updateChartColors();
+        }
+      });
+    });
+    observer.observe(document.documentElement, { attributes: true });
+  }
+
+  updateChartColors() {
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const idleColor = isDarkMode ? this.idleDarkColorValue : this.idleColorValue;
+    const usedColor = isDarkMode ? this.usedDarkColorValue : this.usedColorValue;
+    this.chart.data.datasets.forEach(dataset => {
+      dataset.backgroundColor = [usedColor, idleColor];
+      dataset.borderColor = isDarkMode ? this.darkBorderColorValue : this.lightBorderColorValue;
+    });
+    this.chart.update();
+  }
+
+  displayChart() {
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const idleColor = isDarkMode ? this.idleDarkColorValue : this.idleColorValue;
+    const usedColor = isDarkMode ? this.usedDarkColorValue : this.usedColorValue;
+    this.chart = new Chart(this.element, {
       type: 'doughnut',
       data: {
         labels: [this.usedLabelValue, this.idleLabelValue],
-        datasets: [
-          {
-            label: this.labelValue,
-            data: [this.usedValue, this.idleValue],
-            backgroundColor: [this.usedColorValue,this.idleColorValue],
-            hoverOffset: 4
-          }
-        ]
+        datasets: [{
+          label: this.labelValue,
+          data: [this.usedValue, this.idleValue],
+          backgroundColor: [usedColor, idleColor],
+          borderColor: isDarkMode ? this.darkBorderColorValue : this.lightBorderColorValue,
+          hoverOffset: 4
+        }]
       },
       options: { animation: false }
     });
   }
-
 }
diff --git a/app/views/layouts/mission_control/servers/application.html.erb b/app/views/layouts/mission_control/servers/application.html.erb
@@ -6,7 +6,6 @@
   <%= csp_meta_tag %>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
   <%= stylesheet_link_tag "mission_control_servers_application", media: "all" %>
   <%= javascript_importmap_tags "application-mcs" %>
 </head>

diff --git a/app/views/mission_control/servers/dashboards/cpu_histories/show.html.erb b/app/views/mission_control/servers/dashboards/cpu_histories/show.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag dom_id(@project, [@hostname, :cpu_history].join('-')) do %>
-  <div class="progress-bar bg-gray-300" style="height: 5px; width: 100%;">
-    <div class="progress bg-blue-500" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
+  <div class="progress-bar" style="height: 5px; width: 100%;">
+    <div class="progress" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
   </div>
   <div class="flex flex-col bg-gray-400/5 p-8">
     <dt class="text-sm font-semibold leading-6 text-gray-600">
@@ -10,6 +10,6 @@
         data-line-chart-data-array-value="<%= @cpu_history_data[:cpu_usages] %>"
         data-line-chart-color-value="rgb(54, 162, 235)"></canvas>
     </dt>
-    <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">CPU History</dd>
+    <dd class="card-heading">CPU History</dd>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/dashboards/cpu_usages/show.html.erb b/app/views/mission_control/servers/dashboards/cpu_usages/show.html.erb
@@ -1,18 +1,16 @@
 <%= turbo_frame_tag dom_id(@project, [@hostname, :cpu_usage].join('-')) do %>
-  <div class="progress-bar bg-gray-300" style="height: 5px; width: 100%;">
-    <div class="progress bg-blue-500" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
+  <div class="progress-bar" style="height: 5px; width: 100%;">
+    <div class="progress" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
   </div>
   <div class="flex flex-col bg-gray-400/5 p-8">
     <dt class="text-sm font-semibold leading-6 text-gray-600">
       <canvas data-controller="pie-chart"
         data-pie-chart-label-value="CPU Usage"
         data-pie-chart-idle-value="<%= 100.0 - @service.cpu %>"
         data-pie-chart-idle-label-value="Idle"
-        data-pie-chart-idle-color-value="rgb(235, 235, 235)"
         data-pie-chart-used-value="<%= @service.cpu %>"
-        data-pie-chart-used-label-value="Active"
-        data-pie-chart-used-color-value="rgb(54, 162, 235)"></canvas>
+        data-pie-chart-used-label-value="Active"></canvas>
     </dt>
-    <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">CPU Usage</dd>
+    <dd class="card-heading">CPU Usage</dd>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/dashboards/disk_frees/show.html.erb b/app/views/mission_control/servers/dashboards/disk_frees/show.html.erb
@@ -6,6 +6,6 @@
     <dt class="text-6xl font-semibold leading-6 mt-5 text-gray-600">
       <%= @service.disk_free %>
     </dt>
-    <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">Disk Free</dd>
+    <dd class="card-heading">Disk Free</dd>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/dashboards/memory_histories/show.html.erb b/app/views/mission_control/servers/dashboards/memory_histories/show.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag dom_id(@project, [@hostname, :memory_history].join('-')) do %>
-  <div class="progress-bar bg-gray-300" style="height: 5px; width: 100%;">
-    <div class="progress bg-blue-500" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
+  <div class="progress-bar" style="height: 5px; width: 100%;">
+    <div class="progress" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
   </div>
   <div class="flex flex-col bg-gray-400/5 p-8">
     <dt class="text-sm font-semibold leading-6 text-gray-600">
@@ -10,6 +10,6 @@
         data-line-chart-data-array-value="<%= @memory_history_data[:memory_usages] %>"
         data-line-chart-color-value="rgb(54, 162, 235)"></canvas>
     </dt>
-    <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">Memory Used History</dd>
+    <dd class="card-heading">Memory Used History</dd>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/dashboards/memory_usages/show.html.erb b/app/views/mission_control/servers/dashboards/memory_usages/show.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag dom_id(@project, [@hostname, :memory_usage].join('-')) do %>
-  <div class="progress-bar bg-gray-300" style="height: 5px; width: 100%;">
-    <div class="progress bg-blue-500" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
+  <div class="progress-bar" style="height: 5px; width: 100%;">
+    <div class="progress" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
   </div>
   <div class="flex flex-col bg-gray-400/5 p-8">
     <dt class="text-sm font-semibold leading-6 text-gray-600">
@@ -13,6 +13,6 @@
         data-pie-chart-used-label-value="Active"
         data-pie-chart-used-color-value="rgb(54, 162, 235)"></canvas>
     </dt>
-    <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">Memory Usage</dd>
+    <dd class="card-heading">Memory Usage</dd>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/dashboards/project_tables/show.html.erb b/app/views/mission_control/servers/dashboards/project_tables/show.html.erb
@@ -1,17 +1,17 @@
 <%= turbo_frame_tag dom_id(@project, "table") do %>
   <div class="mx-4 my-4 ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg">
-    <div class="progress-bar ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg bg-gray-300" style="height: 5px; width: 100%;">
-      <div class="progress bg-blue-500 ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
+    <div class="progress-bar" style="height: 5px; width: 100%;">
+      <div class="progress" data-refresh-target="progressBar" style="height: 100%; width: 100%;"></div>
     </div>
     <table class="min-w-full divide-y divide-gray-300">
       <thead>
         <tr>
-          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Hostname</th>
-          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">CPU Usage</th>
-          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Memory Used</th>
-          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Memory Used %</th>
-          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Memory Free</th>
-          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Disk Free</th>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-normal sm:pl-6">Hostname</th>
+          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-normal">CPU Usage</th>
+          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-normal lg:table-cell">Memory Used</th>
+          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-normal lg:table-cell">Memory Used %</th>
+          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-normal lg:table-cell">Memory Free</th>
+          <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-normal lg:table-cell">Disk Free</th>
           <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
             <span class="sr-only">Select</span>
           </th>
@@ -21,16 +21,16 @@
         <% @project.services.group_by(&:hostname).each do |hostname, services| %>
           <tr>
             <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
-              <div class="font-medium text-gray-900"><%= hostname%></div>
+              <div class="font-medium text-gray-normal"><%= hostname%></div>
             </td>
-            <td class="px-3 py-3.5 text-sm text-gray-500 lg:table-cell"><%= services.last.cpu %>%</td>
-            <td class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"><%= number_to_human_size(services.last.mem_used.to_f * 1.megabyte) %></td>
-            <td class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"><%= services.last.mem_percent %>%</td>
-            <td class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"><%= number_to_human_size(services.last.mem_free.to_f * 1.megabyte) %></td>
-            <td class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"><%= services.last.disk_free %></td>
+            <td class="px-3 py-3.5 text-sm text-gray-light lg:table-cell"><%= services.last.cpu %>%</td>
+            <td class="hidden px-3 py-3.5 text-sm text-gray-light lg:table-cell"><%= number_to_human_size(services.last.mem_used.to_f * 1.megabyte) %></td>
+            <td class="hidden px-3 py-3.5 text-sm text-gray-light lg:table-cell"><%= services.last.mem_percent %>%</td>
+            <td class="hidden px-3 py-3.5 text-sm text-gray-light lg:table-cell"><%= number_to_human_size(services.last.mem_free.to_f * 1.megabyte) %></td>
+            <td class="hidden px-3 py-3.5 text-sm text-gray-light lg:table-cell"><%= services.last.disk_free %></td>
             <td class="relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-              <%= link_to "Dashboard", project_path(@project, hostname: hostname), target: :_top, class: "inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white" %>
-              <%= link_to "Remove", project_path(@project, hostname: hostname), data: { "turbo-method": :delete, "turbo-confirm": "Are you sure?" }, class: "inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white" %>
+              <%= link_to "Dashboard", project_path(@project, hostname: hostname), target: :_top, class: "btn btn-default" %>
+              <%= link_to "Remove", project_path(@project, hostname: hostname), data: { "turbo-method": :delete, "turbo-confirm": "Are you sure?" }, class: "btn btn-danger" %>
             </td>
           </tr>
         <% end %>

diff --git a/app/views/mission_control/servers/projects/_form.html.erb b/app/views/mission_control/servers/projects/_form.html.erb
@@ -21,7 +21,7 @@
   </div>
 
   <div class="flex items-center justify-between">
-    <%= form.submit class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" %>
-    <%= link_to "Cancel", project, class: "text-blue-600 px-4 hover:text-blue-800 transition duration-150 ease-in-out" %>
+    <%= form.submit class: "btn btn-primary btn-block" %>
+    <%= link_to "Cancel", project, class: "text-gray-light px-4 transition duration-150 ease-in-out" %>
   </div>
 <% end %>
diff --git a/app/views/mission_control/servers/projects/edit.html.erb b/app/views/mission_control/servers/projects/edit.html.erb
@@ -1,9 +1,18 @@
+<div class="lg:flex lg:items-center lg:justify-between">
+  <div class="min-w-0 flex-1"></div>
+  <div class="mt-5 flex lg:ml-4 lg:mt-0">
+    <span class="hidden sm:block">
+      <button data-controller="dark-mode" data-action="click->dark-mode#toggle" class="btn btn-default">Dark Mode</button>
+    </span>
+  </div>
+</div>
+
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 my-10">
-  <h1 class="text-2xl text-center font-semibold text-gray-900 mb-8">Editing project</h1>
+  <h1 class="text-2xl text-center font-semibold text-gray-normal mb-8">Editing project</h1>
 
   <%= render "form", project: @project %>
 
   <div class="text-center mt-6">
-    <%= link_to "Back to projects", projects_path, class: "text-blue-600 px-4 hover:text-blue-800 transition duration-150 ease-in-out" %>
+    <%= link_to "Back to projects", projects_path, class: "text-gray-light px-4 transition duration-150 ease-in-out" %>
   </div>
 </div>
diff --git a/app/views/mission_control/servers/projects/index.html.erb b/app/views/mission_control/servers/projects/index.html.erb
@@ -1,26 +1,35 @@
+<div class="lg:flex lg:items-center lg:justify-between">
+  <div class="min-w-0 flex-1"></div>
+  <div class="mt-5 flex lg:ml-4 lg:mt-0">
+    <span class="hidden sm:block">
+      <button data-controller="dark-mode" data-action="click->dark-mode#toggle" class="btn btn-default">Dark Mode</button>
+    </span>
+  </div>
+</div>
+
 <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 text-gray-900 sm:text-4xl">Projects</h1>
-      <p class="mt-2 text-sm text-gray-700">Resource monitor for your Ruby on Rails applications.</p>
+      <h1 class="text-3xl font-bold tracking-tight 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">
       <% if allowed_to_create_project? %>
-        <%= link_to "New project", new_project_path, class: "block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+        <%= link_to "New project", new_project_path, class: "btn btn-primary" %>
       <% end %>
     </div>
   </div>
   <div class="mt-8 flow-root">
     <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="inline-block min-w-full py-2 align-middle">
         <table class="min-w-full divide-y divide-gray-300">
-          <tbody class="divide-y divide-gray-200 bg-white">
+          <tbody class="divide-y divide-gray-200">
             <% @projects.each do |project| %>
               <tr>
-                <td class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl"><%= project.title %></td>
+                <td class="whitespace-nowrap text-2xl font-bold tracking-tight text-gray-normal sm:text-3xl"><%= project.title %></td>
                 <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <%= link_to "Dashboards", project, target: :_top, class: "rounded-md bg-indigo-50 px-2.5 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" %>
-                  <%= link_to "Remove", project, data: { "turbo-method": :delete, "turbo-confirm": "Are you sure?" }, class: "inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white" %>
+                  <%= link_to "Dashboards", project, target: :_top, class: "btn btn-default" %>
+                  <%= link_to "Remove", project, data: { "turbo-method": :delete, "turbo-confirm": "Are you sure?" }, class: "btn btn-danger" %>
                 </td>
               </tr>
               <tr>