Finalize profile settings page for v0.2.0-alpha (#1194)

* Finalize profile settings page

* Translations

* Add ghost button to search menu

app/assets/stylesheets/application.tailwind.css

@@ -107,8 +107,12 @@
     @apply bg-gray-900 text-white hover:bg-gray-700;
   }
 
-  .btn--light {
+  .btn--outline {
-    @apply bg-gray-25 border border-alpha-black-200 text-gray-900 hover:bg-gray-50;
+    @apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50;
+  }
+
+  .btn--ghost {
+    @apply border border-transparent text-gray-900 hover:bg-gray-50;
   }
 }
 

app/models/demo/generator.rb

@@ -70,6 +70,7 @@ class Demo::Generator
         email: "user@maybe.local",
         first_name: "Demo",
         last_name: "User",
+        role: "admin",
         password: "password"
     end
 

app/views/accounts/_sync_all_button.html.erb

@@ -1,4 +1,4 @@
-<%= button_to sync_all_accounts_path, class: "btn btn--light flex items-center gap-2", title: "Sync All" do %>
+<%= button_to sync_all_accounts_path, class: "btn btn--outline flex items-center gap-2", title: "Sync All" do %>
   <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
   <span><%= t("accounts.sync_all.button_text") %></span>
 <% end %>

app/views/settings/_nav.html.erb

@@ -1,4 +1,5 @@
-<div class="flex items-center gap-1 mb-6">
+<div class="space-y-4">
+  <div class="flex items-center gap-2 p-2">
     <%= link_to return_to_path(params), class: "flex items-center gap-1 text-gray-900 font-medium text-sm" do %>
       <%= lucide_icon "chevron-left", class: "w-5 h-5 text-gray-500" %>
       <span>Back</span>
@@ -6,10 +7,10 @@
     <span data-controller="hotkey" data-hotkey="Escape" data-action="hotkey#navigateBack" class="uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-gray-500 shadow-sm ml-1">
       esc
     </span>
-</div>
+  </div>
-<nav class="space-y-4">
+  <nav class="space-y-4">
     <section class="space-y-2">
-    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 px-3">
         <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".general_section_title") %></h3>
         <div class="h-px bg-alpha-black-100 w-full"></div>
       </div>
@@ -28,11 +29,11 @@
         <li>
           <%= sidebar_link_to t(".accounts_label"), accounts_path, icon: "layers" %>
         </li>
-    </li>
       </ul>
-</section>
+    </section>
-<section class="space-y-2">
+
-  <div class="flex items-center gap-2">
+    <section class="space-y-2">
+      <div class="flex items-center gap-2 px-3">
         <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".transactions_section_title") %></h3>
         <div class="h-px bg-alpha-black-100 w-full"></div>
       </div>
@@ -50,9 +51,10 @@
           <%= sidebar_link_to t(".imports_label"), imports_path, icon: "download" %>
         </li>
       </ul>
-</section>
+    </section>
-<section class="space-y-2">
+
-  <div class="flex items-center gap-2">
+    <section class="space-y-2">
+      <div class="flex items-center gap-2 px-3">
         <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".other_section_title") %></h3>
         <div class="h-px bg-alpha-black-100 w-full"></div>
       </div>
@@ -62,5 +64,13 @@
           <%= sidebar_link_to t(".feedback_label"), feedback_path, icon: "megaphone" %>
         </li>
       </ul>
-</section>
+    </section>
-</nav>
+
+    <section>
+      <%= button_to session_path, method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-xl border text-sm font-medium w-full text-error hover:bg-gray-100 border-transparent" do %>
+        <%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
+        <span><%= t(".logout") %></span>
+      <% end %>
+    </section>
+  </nav>
+</div>

app/views/settings/profiles/show.html.erb

@@ -61,12 +61,6 @@
               <p class="uppercase text-gray-500 font-medium text-xs"><%= Current.user.role %></p>
             </div>
           </div>
-          <div>
-            <button disabled class="cursor-not-allowed flex gap-1 justify-center w-full block items-center px-4 py-2">
-              <%= lucide_icon "plus", class: "w-4 h-4 text-gray-500" %>
-              <span class="text-gray-500 text-sm font-medium"><%= t(".add_member") %></span>
-            </button>
-          </div>
         </div>
       </div>
     <% end %>

app/views/transactions/_header.html.erb

@@ -11,7 +11,7 @@
         </div>
       <% end %>
 
-      <%= link_to new_import_path(enable_type_selector: true), class: "rounded-lg bg-gray-50 border border-gray-200 flex items-center gap-1 justify-center px-3 py-2", data: { turbo_frame: "modal" } do %>
+      <%= link_to new_import_path(enable_type_selector: true), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: "modal" } do %>
         <%= lucide_icon("download", class: "text-gray-500 w-4 h-4") %>
         <p class="text-sm font-medium text-gray-900"><%= t(".import") %></p>
       <% end %>

app/views/transactions/searches/_form.html.erb

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div data-controller="menu" class="relative">
-      <button id="transaction-filters-button" data-menu-target="button" type="button" class="border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
+      <button id="transaction-filters-button" data-menu-target="button" type="button" class="btn btn--outline flex items-center gap-2">
         <%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
         <p class="text-sm font-medium text-gray-900">Filter</p>
       </button>

app/views/transactions/searches/_menu.html.erb

@@ -33,7 +33,7 @@
     <div class="flex justify-between items-center gap-2 bg-white p-3">
       <div>
         <% if @q.present? %>
-          <%= link_to t(".clear_filters"), transactions_path, class: "text-sm underline text-gray-500" %>
+          <%= link_to t(".clear_filters"), transactions_path, class: "btn btn--ghost" %>
         <% end %>
       </div>
 

config/locales/views/settings/en.yml

@@ -34,8 +34,8 @@ en:
           password_placeholder: "*******"
           port: Port
           port_placeholder: 587
-          send_test_email: Send Test Email
+          send_test_email: Send test email
-          send_test_email_button: Send Test Email
+          send_test_email_button: Send test email
           send_test_email_description: Verify SMTP settings by sending a test email
           title: SMTP Email Configuration
           username: Username
@@ -62,6 +62,7 @@ en:
       feedback_label: Feedback
       general_section_title: General
       imports_label: Imports
+      logout: Logout
       merchants_label: Merchants
       other_section_title: More
       preferences_label: Preferences
@@ -89,13 +90,12 @@ en:
       destroy:
         success: Account deleted successfully.
       show:
-        add_member: Add Member
         confirm_delete:
           body: Are you sure you want to permanently delete your account? This action
             is irreversible.
           title: Delete account?
         danger_zone_title: Danger Zone
-        delete_account: Delete Account
+        delete_account: Delete account
         delete_account_warning: Deleting your account will permanently remove all
           your data and cannot be undone.
         household_form_input_placeholder: Enter household name