Merge branch 'user-styling-improvements' into 'main'

Improve UI for users

See merge request !27

app/views/admin/dashboard/index.html.erb

@@ -7,7 +7,7 @@
       <div class="px-4 py-5 sm:p-6">
         <dl>
           <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Conferences</dt>
-          <dd class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
             <%= link_to @conferences_count, admin_conferences_path, class: "hover:underline" %>
           </dd>
         </dl>
@@ -18,7 +18,7 @@
       <div class="px-4 py-5 sm:p-6">
         <dl>
           <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Sessions</dt>
-          <dd class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
             <%= @sessions_count %>
           </dd>
         </dl>
@@ -29,7 +29,7 @@
       <div class="px-4 py-5 sm:p-6">
         <dl>
           <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Users</dt>
-          <dd class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
             <%= link_to @users_count, admin_users_path, class: "hover:underline" %>
           </dd>
         </dl>
@@ -40,7 +40,7 @@
       <div class="px-4 py-5 sm:p-6">
         <dl>
           <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Assignments</dt>
-          <dd class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
             <%= @assignments_count %>
           </dd>
         </dl>
@@ -63,7 +63,7 @@
                   <div class="flex items-center space-x-4">
                     <div class="flex-1 min-w-0">
                       <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
-                        <%= link_to import.conference.name, admin_conference_path(import.conference), class: "text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" %>
+                        <%= link_to import.conference.name, admin_conference_path(import.conference), class: "text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" %>
                         <% status_class = case import.status 
                           when 'completed' then 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                           when 'failed' then 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
@@ -82,7 +82,7 @@
                     </div>
                     <div>
                       <% if import.conference %>
-                        <%= link_to "Details", import_history_admin_conference_path(import.conference), class: "text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" %>
+                        <%= link_to "Details", import_history_admin_conference_path(import.conference), class: "text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" %>
                       <% end %>
                     </div>
                   </div>

app/views/assignments/_listview_date.html.erb

-<h5 class="text-base mt-2 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>"><%= date %></h5>
-<ol class="list-inside">
-<% assignments_on_date.each do |assignment| %>
-    <li class="<%= assignment.session.starts_at < now ? "past" : "future" %> indent-[-1rem] ml-4">
-    <span class="tabular-nums"><%= assignment.session.starts_at.strftime('%H:%M') %> &ndash; <%= assignment.session.ends_at.strftime('%H:%M') %></span>:
-    <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %><%= link_to assignment.session.title, conference_session_path(assignment.session.conference, assignment.session) %><%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %> @ <%= assignment.session.stage.name %>
-    <small><% assignment.session.assignments.map(&:user).each do |other_user| %>
-        <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
-    <% end %></small>
-    </li>
-<% end %>
-</ol>
+<div class="mb-6 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>">
+  <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3"><%= date %></h3>
+  <ul class="space-y-3">
+    <% assignments_on_date.each do |assignment| %>
+      <li class="<%= assignment.session.starts_at < now ? "past" : "future" %> pl-4 border-l-4 border-gray-200 dark:border-gray-700">
+        <div class="flex flex-col md:flex-row md:items-center gap-2">
+          <span class="tabular-nums font-medium text-gray-900 dark:text-gray-100 min-w-28">
+            <%= assignment.session.starts_at.strftime('%H:%M') %> &ndash; <%= assignment.session.ends_at.strftime('%H:%M') %>
+          </span>
+          <div class="flex-1">
+            <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %>
+            <%= link_to assignment.session.title, conference_session_path(assignment.session.conference, assignment.session), class: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" %>
+            <%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %>
+            <span class="text-gray-500 dark:text-gray-400 ml-1">@ <%= assignment.session.stage.name %></span>
+          </div>
+          <div class="flex items-center space-x-1">
+            <% assignment.session.assignments.map(&:user).each do |other_user| %>
+              <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
+            <% end %>
+          </div>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/assignments/by_user.html.erb

 <div class="container mx-auto px-4 py-8">
   <div class="max-w-full">
-  <h1 class="text-xl my-4 dark:text-red-500">
-    Assignments for
-    <%= link_to @user.name, user_assignments_path(@user) %>
-    <span class="text-base ml-2 mb-2 inline p-2 border bg-slate-50 hover:bg-slate-100 border-slate-200 hover:border-slate-200 shadow font-normal rounded-md"><%= link_to user_assignments_path(@user, format: 'ics') do %><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" fill="currentColor" aria-hidden="true" class="size-6 inline-block stroke-slate-400 fill-slate-400"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"></path></svg> iCal<% end %></span>
-  </h1>
-  <% now = Time.now %>
-  <div>
-    <h2 class="text-lg my-4">List View</h2>
-    <% @user.assignments.includes(:session, session: :conference).order('sessions.starts_at').group_by { |a| a.session.starts_at.strftime('%Y-%m-%d') }.each do |date, assignments_on_date| %>
-      <%= render partial: 'listview_date', locals: { assignments_on_date:, date:, now: } %>
+  <div class="flex items-center mb-6">
+    <h1 class="text-2xl font-bold dark:text-gray-200">
+      Assignments for
+      <%= link_to @user.name, user_assignments_path(@user), class: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" %>
+    </h1>
+    <%= link_to user_assignments_path(@user, format: 'ics'), class: "btn btn-info-light ml-4" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" fill="currentColor" aria-hidden="true" class="size-5 inline-block mr-1"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"></path></svg> iCal
     <% end %>
   </div>
+  <% now = Time.now %>
+  <div class="mb-8">
+    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">List View</h2>
+    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+      <% @user.assignments.includes(:session, session: :conference).order('sessions.starts_at').group_by { |a| a.session.starts_at.strftime('%Y-%m-%d') }.each do |date, assignments_on_date| %>
+        <%= render partial: 'listview_date', locals: { assignments_on_date:, date:, now: } %>
+      <% end %>
+    </div>
+  </div>
 
   <div class="overflow-x-auto max-w-full">
-    <h2 class="text-lg my-4 sticky left-0">Table View</h2>
-    <table class="border *:border w-full">
-      <thead>
-        <tr class="*:font-bold *:border">
-          <th>Date</th>
-          <th>Starts</th>
-          <th>Ends</th>
-          <th>Stage</th>
-          <th>Session</th>
-          <th>Collaborators</th>
-        </tr>
-      </thead>
-      <tbody>
-    <% @user.assignments.includes(:session, session: :conference).order('sessions.starts_at').each do |assignment| %>
-      <tr class="*:border *:p-1 <%= assignment.session.ends_at < Time.now ? "past" : "future" %>">
-        <td><%= assignment.session.starts_at.strftime('%Y-%m-%d') %></td>
-        <td><%= assignment.session.starts_at.strftime('%H:%M') %></td>
-        <td><%= assignment.session.ends_at.strftime('%H:%M') %></td>
-        <td><%= assignment.session.stage.name %></td>
-        <td><%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %><%= link_to assignment.session.title, assignment.session.url, target: "_blank" %><%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %></td>
-        <td><% assignment.session.assignments.map(&:user).each do |other_user| %><%= render partial: 'application/user_avatar', locals: { user: other_user } %><% end %></td>
-      </tr>
-    <% end %>
-    </table>
+    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4 sticky left-0">Table View</h2>
+    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Starts</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ends</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Stage</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Session</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Collaborators</th>
+          </tr>
+        </thead>
+        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+        <% @user.assignments.includes(:session, session: :conference).order('sessions.starts_at').each do |assignment| %>
+          <tr class="<%= assignment.session.ends_at < Time.now ? "past" : "future" %>">
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"><%= assignment.session.starts_at.strftime('%Y-%m-%d') %></td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"><%= assignment.session.starts_at.strftime('%H:%M') %></td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"><%= assignment.session.ends_at.strftime('%H:%M') %></td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"><%= assignment.session.stage.name %></td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">
+              <%= render partial: 'shared/session_filedrop', locals: { session: assignment.session } %>
+              <%= link_to assignment.session.title, assignment.session.url, target: "_blank", class: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" %>
+              <%= render partial: 'shared/session_engelsystem', locals: { session: assignment.session } %>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+              <% assignment.session.assignments.map(&:user).each do |other_user| %>
+                <%= render partial: 'application/user_avatar', locals: { user: other_user } %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
+</div>

app/views/conferences/show.html.erb

@@ -13,12 +13,12 @@ current_time = Time.zone.now.in_time_zone(@conference.time_zone)
     <%= render partial: 'assignments/filteredlist_option', locals: { user: } %>
   <% end %>
 </template>
-<div class="container mx-auto px-4 py-8">
+<div class="container mx-auto px-4 py-8 text-black dark:text-white">
   <div class="mb-4">
     <a href="#now" onclick="document.querySelector('#now')?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); return false" class="underline text-blue-500">Jump to current time</a>
   </div>
-  <h1 class="text-2xl font-bold my-2 dark:text-red-500"><%= @conference.name %></h1>
-  <p class="text-xs mb-6">
+  <h1 class="text-2xl font-bold my-2 text-black dark:text-white"><%= @conference.name %></h1>
+  <p class="text-xs mb-6 text-black dark:text-white">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline-block size-4 stroke-slate-500">
       <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
     </svg>

app/views/layouts/admin.html.erb

 <!DOCTYPE html>
-<html>
+<html class="<%= "dark" if current_user&.darkmode == "dark"%>">
   <head>
     <title>Admin - re:scheduled</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">

app/views/layouts/application.html.erb

@@ -14,10 +14,13 @@
   <body <%= tag.attributes(body_data_attributes) %> class="bg-gray-100 dark:bg-gray-900 min-h-screen">
     <header class="bg-white dark:bg-gray-800 shadow">
       <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-        <div class="flex items-center">
+        <div class="flex items-center space-x-4">
           <h1 class="text-xl font-bold text-gray-900 dark:text-white">
             <%= link_to "re:scheduled", root_path %>
           </h1>
+
+          <%= link_to 'Conferences', conferences_path, class: 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white' %>
+          <%= link_to 'Assignments', assignments_path, class: 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white' %>
         </div>
 
         <nav class="flex items-center space-x-4">

app/views/shared/_admin_nav.html.erb

-<header class="bg-gray-800 text-white shadow">
+<header class="bg-gray-800 dark:bg-stone-200 text-white dark:text-black shadow">
   <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-    <div class="flex items-center">
+    <div class="flex items-center space-x-4">
       <h1 class="text-xl font-bold">
         <%= link_to "re:scheduled admin", admin_root_path %>
       </h1>
+
+      <%= link_to "Dashboard", admin_dashboard_path, class: "text-gray-300 dark:text-gray-600 hover:text-white dark:hover:text-black" %>
+      <%= link_to "Users", admin_users_path, class: "text-gray-300 dark:text-gray-600 hover:text-white dark:hover:text-black" %>
+      <%= link_to "Roles", admin_roles_path, class: "text-gray-300 dark:text-gray-600 hover:text-white dark:hover:text-black" %>
+      <%= link_to "Conferences", admin_conferences_path, class: "text-gray-300 dark:text-gray-600 hover:text-white dark:hover:text-black" %>
     </div>
-    <nav class="flex items-center space-x-4">
-      <%= link_to admin_user_path(current_user), class: "flex items-center ml-4 text-gray-300 hover:text-white" do %>
-        <%= render partial: "application/user_avatar", locals: { user: current_user } %>
-      <% end %>
 
-      <%= link_to "Dashboard", admin_dashboard_path, class: "text-gray-300 hover:text-white" %>
-      <%= link_to "Users", admin_users_path, class: "text-gray-300 hover:text-white" %>
-      <%= link_to "Roles", admin_roles_path, class: "text-gray-300 hover:text-white" %>
-      <%= link_to "Conferences", admin_conferences_path, class: "text-gray-300 hover:text-white" %>
-      
-      <%= link_to "Back to Site", root_path, class: "ml-4 text-gray-300 hover:text-white" %>
+    <nav class="flex items-center space-x-4">
+      <%= render partial: "application/user_avatar", locals: { user: current_user } %>
+      <%= link_to "Back to Site", root_path, class: "ml-4 text-gray-300 dark:text-gray-600 hover:text-white dark:hover:text-black" %>
     </nav>
   </div>
 </header>