Fix UI issues

app.rb

@@ -103,7 +103,7 @@ def url_without_tag
 end
 
 get '/inbox' do
-  @tasks = current_user.tasks.incomplete.where(project_id: nil).order(:name)
+  @tasks = current_user.tasks.incomplete.where(project_id: nil).where(due_date: nil).order(:name)
 
   erb :inbox
 end

app/helpers/task_helper.rb

@@ -20,10 +20,12 @@ def due_date_badge_class(due_date)
       'bg-primary'
     when Date.tomorrow
       'bg-info'
-    when Date.yesterday..Date.today
-      'bg-danger'
     else
-      'bg-light text-dark'
+      if due_date.to_date < Date.today
+        'bg-danger'
+      else
+        'bg-light text-dark'
+      end
     end
   end
 

app/views/notes/_form.erb

@@ -39,7 +39,7 @@
         <%= note.new_record? ? 'Create Note' : 'Update Note' %>
       </button>
       <% unless note.new_record? %>
-        <button type="submit" class="btn btn-outline-danger" onclick="deleteNote('<%= note.id %>')">
+        <button type="submit" class="btn btn-danger" onclick="deleteNote('<%= note.id %>')">
           <i class="bi bi-trash"></i>
         </button>
       <% end %>

app/views/notes/_note.erb

@@ -1,4 +1,4 @@
-<div class="border-0 rounded bg-white shadow-sm mb-1 px-2 py-2 d-flex align-items-center note-item" data-note-id="<%= note.id || 'new' %>">
+<div class="border-0 rounded shadow-sm mb-1 px-3 py-2 d-flex align-items-center note-item" data-note-id="<%= note.id || 'new' %>">
   <i class="fs-6 bi-journal-text me-2"></i>
   <div class="row flex-grow-1 align-items-center">
     <div class="col-md-4">
@@ -20,7 +20,7 @@
     </div>
     <div class="col-md-3">
       <% if note.project && params[:id].blank? %>
-        <a href="/project/<%= note.project.id %>" class="badge border text-decoration-none link-dark bg-light">
+        <a href="/project/<%= note.project.id %>" class="badge border border-secondary text-decoration-none link-dark">
           <%= note.project.name %>
         </a>
       <% end %>

app/views/notes/index.erb

@@ -22,11 +22,17 @@
     </div>
   </div>
 </div>
-<div class="rounded py-2 px-2 mx-3 d-flex align-items-center border" data-bs-toggle="collapse" data-bs-target="#newNoteForm" aria-expanded="false" aria-controls="newNoteForm" style="cursor: pointer; background: #eee;" data-context="notes">
-  <i class="bi bi-plus-circle-fill text-primary me-2"></i> <span class="">New note</span>
+<div class="rounded py-2 px-3 mx-3 d-flex align-items-center border border-black" 
+      data-bs-toggle="collapse" 
+      data-bs-target="#newNoteForm" 
+      aria-expanded="false" 
+      aria-controls="newNoteForm" 
+      style="cursor: pointer" 
+      data-context="notes">
+  + <span class="ms-2">Add note</span>
 </div>
 <div class="collapse" id="newNoteForm">
-  <div class="card rounded bg-white shadow-sm mt-2 p-4 mx-3">
+  <div class="card rounded shadow-sm mt-2 p-4 mx-3">
     <%= partial :'notes/_form',  locals: {note: Note.new, context: 'notes'} %>
   </div>
 </div>

app/views/projects/show.erb

@@ -1,4 +1,4 @@
-<h2 class="mb-5"><i class="bi bi-hexagon ms-3 me-2"></i><%= @project.name.upcase %>
+<h2 class="mb-5"><i class="bi bi-hexagon ms-3 me-4"></i><%= @project.name.upcase %>
   <div class="dropdown d-inline-block">
     <button class="btn btn-link text-secondary" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
       <i class="bi bi-three-dots-vertical fs-6"></i>
@@ -54,8 +54,14 @@
   <% end %>
 </div>
 <h4 class="mt-5 ms-4 fw-bold">Notes</h4>
-<div class="rounded py-2 px-2 mx-3 d-flex align-items-center border" data-bs-toggle="collapse" data-bs-target="#newNoteForm" aria-expanded="false" aria-controls="newNoteForm" style="cursor: pointer; background: #eee;">
-  <i class=" bi bi-plus-circle-fill text-primary me-2"></i> <span class="">New note</span>
+<div class="rounded py-2 px-3 mx-3 d-flex align-items-center border border-black" 
+      data-bs-toggle="collapse" 
+      data-bs-target="#newNoteForm" 
+      aria-expanded="false" 
+      aria-controls="newNoteForm" 
+      style="cursor: pointer" 
+      data-context="notes">
+  + <span class="ms-2">Add note</span>
 </div>
 <div class="collapse" id="newNoteForm">
   <div class="card rounded bg-white shadow-sm mt-2 p-4 mx-3">

app/views/tasks/_form.erb

@@ -64,7 +64,7 @@
           <%= task.new_record? ? 'Create Task' : 'Update Task' %>
         </button>
         <% unless task.new_record? %>
-          <button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
+          <button type="button" class="btn btn-danger" onclick="deleteTask('<%= task.id %>')">
             <i class="bi bi-trash"></i>
           </button>
         <% end %>

app/views/tasks/_task.erb

@@ -1,10 +1,10 @@
-<div class="border-0 rounded shadow-sm mb-1 px-2 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
+<div class="border-0 rounded shadow-sm mb-1 px-3 py-2 d-flex align-items-center task-item <%= 'opacity-50' if task.done? %>" data-task-id="<%= task.id %>">
   <div class="row flex-grow-1 align-items-top">
     <div class="col-md-6">
       <span onclick="toggleTaskCompletion(event, <%= task.id %>)" class="toggle-completion">
         <i class="fs-6 bi <%= task.done? ? 'bi-check-circle-fill' : 'bi-circle' %> <%= priority_class(task) %> me-2"></i>
       </span>
-      <%= task.name %>
+      <span class="fw-light"><%= task.name %></span>
       <% if task.tags.any? %>
         <div class="ms-3 opacity-75 d-inline-block">
           <% task.tags.each do |tag| %>
@@ -17,18 +17,18 @@
     </div>
     <div class="col-md-3 text-end">
       <% if task.project && params[:id].blank? %>
-        <a href="/project/<%= task.project.id %>" class="badge border text-decoration-none link-dark">
+        <a href="/project/<%= task.project.id %>" class="badge border border-secondary text-decoration-none link-dark fw-light">
           <%= task.project.name %>
         </a>
       <% end %>
     </div>
     <div class="col-md-3 text-end">
       <% if task.due_date %>
-        <span class="badge <%= due_date_badge_class(task.due_date) %>">
+        <span class="badge <%= due_date_badge_class(task.due_date) %> fw-light">
           <i class="bi bi-clock me-2"></i> <%= format_due_date(task.due_date) %>
         </span>
       <% end %>
-      <span class="badge <%= status_badge_class(task.status) %>">
+      <span class="badge <%= status_badge_class(task.status) %> fw-light">
         <i class="bi bi-circle-fill me-1" style="font-size: 0.6em; position: relative; top: -0.15em;"></i> 
         <span class="text-dark"><%= task.status.gsub('_', ' ').capitalize %></span>
       </span>

public/css/app.css

@@ -50,16 +50,20 @@ h6 {
   cursor: pointer;
 }
 
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #eee;
-  opacity: 1; /* Firefox */
+  opacity: 1;
+  /* Firefox */
 }
 
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
+:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
   color: gray;
 }
 
-::-ms-input-placeholder { /* Microsoft Edge */
+::-ms-input-placeholder {
+  /* Microsoft Edge */
   color: gray;
 }
 
@@ -87,6 +91,7 @@ h6 {
 /* main */
 
 .main-content {
+  margin-top: 50px;
   margin-left: 250px;
   background: transparent;
 }
@@ -101,7 +106,7 @@ h6 {
 }
 
 .nav-link {
-  color: #000; 
+  color: var(--bs-dark);
 }
 
 .nav-link.active-link {
@@ -119,28 +124,30 @@ h6 {
 
 /* tasks, notes */
 
-.task-item {
+.task-item, .note-item {
   background: var(--bs-white);
 }
 
 .dark-mode .task-item,
 .dark-mode .note-item {
-  background: var(--bs-gray-dark);
+  background: var(--bs-gray-dark) !important;
 }
 
-.task-item:hover, .note-item:hover {
+.task-item:hover,
+.note-item:hover {
   background: #fafafa !important;
 }
 
-.dark-mode .task-item:hover, .dark-mode .note-item:hover {
+.dark-mode .task-item:hover,
+.dark-mode .note-item:hover {
   background: var(--bs-black) !important;
 }
 
 /* task form */
 
 .task-name-input::placeholder {
   color: #ccc;
-  opacity: 1; /* Firefox */
+  opacity: 1;
 }
 
 .new-task-input {
@@ -161,7 +168,7 @@ a.project-card .card:hover {
 
 /* dark mode */
 .dark-mode {
-  background-color:  var(--bs-dark);
+  background-color: var(--bs-dark);
   color: var(--bs-light);
 }
 
@@ -195,8 +202,8 @@ a.project-card .card:hover {
   border-color: var(--bs-black);
 }
 
-.dark-mode input, 
-.dark-mode tags, 
+.dark-mode input,
+.dark-mode tags,
 .dark-mode select,
 .dark-mode textarea {
   background-color: var(--bs-dark);
@@ -213,6 +220,7 @@ a.project-card .card:hover {
 .dark-mode tag {
   background-color: var(--bs-gray-dark) !important;
   color: var(--bs-light) !important;
+  me
 }
 
 .dark-mode .project-card .card {
@@ -242,7 +250,11 @@ a.project-card .card:hover {
   background-color: var(--bs-black);
 }
 
-/* .dark-mode .panel .progress {
-  background-color: var(--bs-black);
-} */
+#newNoteForm .card {
+  color: var(--bs-dark) !important;
+}
 
+.dark-mode #newNoteForm .card {
+  background-color: var(--bs-gray-dark) !important;
+  color: var(--bs-light) !important;
+}

public/js/app.js

@@ -34,6 +34,7 @@ function updateDarkMode(enabled) {
   darkModeIcon.classList.toggle('bi-sun', enabled);
   // Update link colors and other necessary elements
   updateLinkColors(enabled);
+  updateDropdownMenus(enabled);
 }
 
 function updateLinkColors(darkModeEnabled) {
@@ -54,6 +55,12 @@ function setInitialDarkModeState() {
   }
 }
 
+function updateDropdownMenus(enableDarkMode) {
+  document.querySelectorAll('.dropdown-menu').forEach(menu => {
+    menu.classList.toggle('dropdown-menu-dark', enableDarkMode);
+  });
+}
+
 function initializeTagifyOnNotes() {
   document.querySelectorAll('[id^="note_tags_new_"]').forEach(function(element) {
     new Tagify(element);