improve ui/ux (#158)

* chill

* nav

* chill

* copy

* pricing

app/controllers/static_controller.rb

@@ -1,4 +1,5 @@
 class StaticController < ApplicationController
   def pricing
+    @user = current_user
   end
 end

app/views/devise/registrations/edit.html.erb

@@ -3,8 +3,6 @@
     Edit <%= resource_name.to_s.humanize %>
   </h2>
 
-  <%= link_to "Pricing", pricing_path, class: "hover:underline" %>
-
   <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "space-y-6" }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
 

app/views/layouts/_navbar.html.erb

@@ -1,15 +1,27 @@
-<nav class="bg-black text-white p-5 text-white">
+<nav class="bg-gray-800 text-gray-100 p-4 shadow-md" data-controller="toggle">
   <div class="max-w-6xl flex justify-between w-full mx-auto items-center">
-    <%= link_to root_path, class: "flex flex-row" do %>
-      <%= image_tag "brand/logo_white_no_bg.png", alt: "Logo", class: "h-8 w-auto" %>
-      <span class="text-2xl font-extrabold ml-2 hidden lg:block"><%= APP_NAME %></span>
+    <%= link_to root_path, class: "flex items-center" do %>
+      <%= image_tag "brand/logo_black_no_bg.png", alt: "Logo", class: "h-8 w-auto" %>
+      <span class="text-lg font-semibold ml-2 hidden lg:block"><%= APP_NAME %></span>
     <% end %>
-    <ul class="flex space-x-6 text-xl">
+    <ul class="flex space-x-4 text-lg">
       <% if user_signed_in? %>
-        <li><%= link_to "Log out", destroy_user_session_path, method: :delete, class: "hover:text-gray-500" %></li>
+        <li class="relative">
+          <!-- User menu button -->
+          <button id="user-menu-button" class="text-black hover:underline flex items-center gap-2" data-action="click->toggle#toggle">
+            <%= render 'shared/profile_picture', user: @user %>
+          </button>
+        </li>
       <% else %>
-        <li><%= link_to "Login", new_user_session_path, class: "hover:text-gray-500" %></li>
+        <li>
+          <%= link_to "Login", new_user_session_path, class: "hover:text-gray-400 transition-colors duration-200 ease-in-out" %>
+        </li>
       <% end %>
     </ul>
   </div>
+  <!-- Dropdown menu -->
+  <div data-toggle-target="toggle" class="hidden">
+    <%= link_to "Settings", edit_user_registration_path, class: "block px-4 py-2 text-gray-700 hover:bg-gray-100" %>
+    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: "block px-4 py-2 text-gray-700 hover:bg-gray-100" %>
+  </div>
 </nav>

app/views/notes/_note.html.erb

@@ -1,27 +1,27 @@
 <!-- app/views/notes/_note.html.erb -->
-<li class="border-2 rounded-md shadow-xl border-black p-2 bg-white shadow-none" data-controller="toggle">
+<li class="border border-gray-300 rounded-lg shadow-md p-4 bg-white transition-shadow duration-150 hover:shadow-lg" data-controller="toggle">
   <!-- Display note content -->
   <div data-toggle-target="toggle" class="overflow-hidden">
-    <strong class="text-2xl font-bold uppercase text-black <%= 'line-through' if note.completed %>">
-    <% if note.penalty_enabled %>
-      <span class="text-red-500 text-lg">!</span>
-    <% end %>
+    <strong class="text-xl font-semibold text-gray-800 <%= 'line-through' if note.completed %>">
+      <% if note.penalty_enabled %>
+        <span class="text-red-500 text-lg">!</span>
+      <% end %>
       <%= note.title %>
     </strong>
-    <p class="text-lg text-black mt-2">
+    <p class="text-md text-gray-700 mt-2">
       <%= format_with_newlines(note.content) %>
     </p>
 
     <!-- Display Deadline -->
     <% if note.deadline.present? %>
-      <p class="text-sm text-black mt-1">
+      <p class="text-sm text-gray-600 mt-1">
         Deadline: <%= note.deadline.strftime("%B %d, %Y") %>
       </p>
     <% end %>
 
     <!-- Display Collaborators -->
     <% if note.users.any? { |collaborator| collaborator != current_user } %>
-      <div class="mt-3 text-sm text-gray-700">
+      <div class="mt-3 text-sm text-gray-600">
         <strong>Collaborators:</strong>
         <ul class="list-disc list-inside">
           <% note.users.each do |collaborator| %>
@@ -39,15 +39,15 @@
       <%= form_with model: note, local: true do |f| %>
         <div class="flex items-center space-x-2">
           <!-- Submit the form when checkbox changes -->
-          <%= f.check_box :completed, checked: note.completed, class: "mr-2 w-5 h-5", onchange: 'this.form.submit();' %>
-          <label class="text-lg text-black">Completed</label>
+          <%= f.check_box :completed, checked: note.completed, class: "w-5 h-5 rounded border-gray-300 text-gray-600 focus:ring-gray-500", onchange: 'this.form.submit();' %>
+          <label class="text-md text-gray-700">Completed</label>
         </div>
       <% end %>
     </div>
 
-    <div class="mt-4 flex space-x-6">
-      <button type="button" data-action="click->toggle#toggle" class="text-blue-500 underline hover:text-blue-700 uppercase">Edit</button>
-      <%= link_to 'Delete', archive_note_path(note), class: 'text-red-500 underline hover:text-red-700 uppercase', data: { turbo_method: :patch, turbo_confirm: 'Are you sure?' } %>
+    <div class="mt-4 flex space-x-4">
+      <button type="button" data-action="click->toggle#toggle" class="text-blue-500 hover:text-blue-600 underline transition-colors duration-150">Edit</button>
+      <%= link_to 'Delete', archive_note_path(note), class: 'text-red-500 hover:text-red-600 underline transition-colors duration-150', data: { turbo_method: :patch, turbo_confirm: 'Are you sure?' } %>
     </div>
   </div>
 

app/views/notes/_note_form.html.erb

@@ -1,32 +1,32 @@
 <!-- app/views/notes/_note_form.html.erb -->
-<div class="my-container border-4 border border-black rounded-xl shadow-xl !p-4">
-  <h1 class="text-4xl font-bold uppercase tracking-wide text-black mb-6 border-b-4 border-black">
+<div class="my-container border border-gray-300 rounded-lg shadow-lg p-6 bg-white">
+  <h1 class="text-3xl font-semibold text-gray-800 mb-6">
     <%= note.persisted? ? "Edit Note" : "New Note" %>
   </h1>
-  <%= form_with model: note, local: true, class: "space-y-6" do |form| %>
+  <%= form_with model: note, local: true, class: "space-y-4" do |form| %>
     <div class="flex flex-col">
-      <%= form.label :title, class: "text-lg font-semibold text-black uppercase tracking-wide" %>
-      <%= form.text_field :title, class: "border-2 border-black px-4 py-2 bg-white text-black focus:outline-none focus:border-gray-700" %>
+      <%= form.label :title, class: "text-lg font-medium text-gray-700" %>
+      <%= form.text_field :title, class: "border border-gray-300 rounded-md px-4 py-2 bg-gray-50 text-gray-800 focus:outline-none focus:border-gray-500 transition-all duration-150" %>
     </div>
     <div class="flex flex-col">
-      <%= form.label :content, class: "text-lg font-semibold text-black uppercase tracking-wide" %>
-      <%= form.text_area :content, class: "border-2 border-black px-4 py-2 bg-white text-black focus:outline-none focus:border-gray-700 h-48" %>
+      <%= form.label :content, class: "text-lg font-medium text-gray-700" %>
+      <%= form.text_area :content, class: "border border-gray-300 rounded-md px-4 py-2 bg-gray-50 text-gray-800 focus:outline-none focus:border-gray-500 h-40 transition-all duration-150" %>
     </div>
     <div class="flex flex-col max-w-xs">
-      <%= form.label :deadline, class: "text-lg font-bold text-black uppercase mb-1" %>
-      <%= form.text_field :deadline, id: "datepicker-#{note.id}", class: "border-4 border-black px-3 py-2 bg-white text-black focus:outline-none shadow-none" %>
+      <%= form.label :deadline, class: "text-lg font-medium text-gray-700 mb-1" %>
+      <%= form.text_field :deadline, id: "datepicker-#{note.id}", class: "border border-gray-300 rounded-md px-4 py-2 bg-gray-50 text-gray-800 focus:outline-none focus:border-gray-500 transition-all duration-150" %>
     </div>
-    <div class="flex flex-col">
-      <%= form.label :penalty_enabled, "Enable Penalty", class: "text-lg font-bold text-black uppercase mb-1" %>
-      <%= form.check_box :penalty_enabled, class: "mr-2" %>
+    <div class="flex items-center">
+      <%= form.check_box :penalty_enabled, class: "rounded text-gray-600 focus:ring-gray-500 mr-2" %>
+      <%= form.label :penalty_enabled, "Enable Penalty", class: "text-lg font-medium text-gray-700" %>
     </div>
     <div class="flex flex-col">
-      <%= form.label :collaborators, "Add Collaborators", class: "text-lg font-semibold text-black uppercase tracking-wide" %>
-      <%= select_tag "note[user_ids][]", options_from_collection_for_select(@public_users, :id, :username, note.user_ids), multiple: true, class: "border-2 border-black px-4 py-2 bg-white text-black focus:outline-none focus:border-gray-700" %>
+      <%= form.label :collaborators, "Add Collaborators", class: "text-lg font-medium text-gray-700" %>
+      <%= select_tag "note[user_ids][]", options_from_collection_for_select(@public_users, :id, :username, note.user_ids), multiple: true, class: "border border-gray-300 rounded-md px-4 py-2 bg-gray-50 text-gray-800 focus:outline-none focus:border-gray-500 transition-all duration-150" %>
     </div>
-    <div>
-      <%= form.submit note.persisted? ? 'Update Note' : 'Create Note', class: "bg-black text-white px-6 py-2 uppercase font-bold tracking-wider hover:bg-gray-800 transition-all cursor-pointer" %>
-      <button type="button" data-action="click->toggle#toggle" class="text-red-700 underline hover:text-gray-700 uppercase">Cancel</button>
+    <div class="flex space-x-4">
+      <%= form.submit note.persisted? ? 'Update Note' : 'Create Note', class: "bg-gray-800 text-black px-6 py-2 rounded-md font-semibold hover:bg-gray-700 transition-all duration-150" %>
+      <button type="button" data-action="click->toggle#toggle" class="text-gray-600 underline hover:text-gray-800 transition-all duration-150">Cancel</button>
     </div>
   <% end %>
 </div>

app/views/notes/index.html.erb

@@ -1,19 +1,10 @@
 <div class="my-container" data-controller="toggle">
-  <h1 class="text-4xl font-bold uppercase tracking-wide text-black mb-6 border-b-4 border-black">
-    Your Notes
-  </h1>
-
-  <%= link_to edit_user_registration_path, class: 'text-black hover:underline flex flex-row gap-2 items-center' do %>
-    <%= render 'shared/profile_picture', user: @user %>
-    <span>Settings</span>
-  <% end %>
-
-  <h3 class="my-8 text-xl font-bold uppercase tracking-wide text-black">
+  <h3 class="my-8 text-xl font-bold tracking-wide text-black">
     ⭐️: <%= @points.count %>
   </h3>
 
   <!-- New Note Button -->
-  <button data-action="click->toggle#toggle" class="bg-black text-white px-4 py-2 uppercase font-bold tracking-wider hover:bg-gray-800 transition-all">
+  <button data-action="click->toggle#toggle" class="bg-black text-white px-4 py-2 font-bold tracking-wider rounded-xl shadow-xl transition-transform transform active:translate-y-1 hover:-translate-y-1">
     New Note
   </button>
 

app/views/pages/home.html.erb

@@ -1,40 +1,33 @@
 <div class="flex flex-col mx-auto p-5 max-w-6xl lg:px-0">
-  <% if user_signed_in? %>
-    <div class="text-3xl my-8">
-      Welcome, <%= current_user.email %>
-    </div>
-    <%= link_to 'View All Notes', notes_path, class: "text-3xl" %>
-  <% else %>
     <!-- Hero Section -->
     <section class="flex-1 bg-white text-black p-10 animate-in">
       <div class="container mx-auto flex flex-col justify-center items-center text-center">
-        <h1 class="text-6xl font-extrabold text-black tracking-tight leading-none">
+        <h1 class="text-3xl font-extrabold text-black tracking-tight leading-none">
           Organize your work and life, finally.
         </h1>
-        <p class="mt-6 text-2xl text-gray-800 max-w-2xl">
-          Turns to-do lists into exciting challenges to boost your accountability!
+        <p class="mt-6 text-xl text-gray-800 max-w-2xl">
+          Simplify your life with fun and accountability through gamified task lists!
         </p>
         <%# Animated Line %>
-        <div class='animate-grow my-8 h-2 w-full bg-black'></div>
-        <%= link_to "Get Started", new_user_session_path, class: "mt-10 inline-block bg-black text-white px-8 py-4 text-2xl font-bold border-4 border-black shadow-xl transition-transform transform active:translate-y-1 hover:-translate-y-1" %>
+        <div class="my-8 h-1 w-24 bg-gray-500"></div>
+        <%= link_to "Get Started", new_user_session_path, class: "mt-10 inline-block rounded-xl px-8 py-4 text-2xl font-bold border border-black shadow-xl transition-transform transform active:translate-y-1 hover:-translate-y-1" %>
       </div>
     </section>
     <!-- Features Section -->
-    <section class="bg-gray-100 p-10">
+    <section class="bg-gray-50 p-10">
       <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="p-8 bg-white border-4 border-black text-center">
-          <h2 class="text-3xl font-bold mb-4">Duel Tasks</h2>
-          <p>Turn any task into a duel—win or pay up!</p>
+        <div class="p-8 bg-white shadow-md rounded-lg text-center transition-all duration-150 hover:shadow-xl">
+          <h2 class="text-2xl font-semibold mb-4">Duel Tasks</h2>
+          <p class="text-gray-700">Turn any task into a duel—win or pay up!</p>
         </div>
-        <div class="p-8 bg-white border-4 border-black text-center">
-          <h2 class="text-3xl font-bold mb-4">Real Rewards</h2>
-          <p>Set monetary penalties for incomplete tasks.</p>
+        <div class="p-8 bg-white shadow-md rounded-lg text-center transition-all duration-150 hover:shadow-xl">
+          <h2 class="text-2xl font-semibold mb-4">Real Rewards</h2>
+          <p class="text-gray-700">Set monetary penalties for incomplete tasks.</p>
         </div>
-        <div class="p-8 bg-white border-4 border-black text-center">
-          <h2 class="text-3xl font-bold mb-4">Teamwork</h2>
-          <p>Track progress, earn rewards, and stay motivated.</p>
+        <div class="p-8 bg-white shadow-md rounded-lg text-center transition-all duration-150 hover:shadow-xl">
+          <h2 class="text-2xl font-semibold mb-4">Teamwork</h2>
+          <p class="text-gray-700">Track progress, earn rewards, and stay motivated together.</p>
         </div>
       </div>
     </section>
-  <% end %>
 </div>

app/views/shared/_profile_picture.html.erb

@@ -2,5 +2,5 @@
 <% if user.present? && user.persisted? && user.profile_picture.attached? %>
   <%= image_tag user.profile_picture, alt: user.username, class: "h-10 w-10 rounded-full flex border border-black object-cover" %>
 <% else %>
-  <%= image_tag "default-avatar.png", alt: user.username, class: "h-10 w-10 rounded-full flex" %>
+  <%= image_tag "default-avatar.png", alt: "default-avatar", class: "h-10 w-10 rounded-full flex" %>
 <% end %>