Hide preview & style changes (#143)

caley-io · Mar 24, 2024 · adf42f2 · adf42f2
1 parent f519481
commit adf42f2
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 19 deletions.
diff --git a/app/javascript/controllers/root_controller.js b/app/javascript/controllers/root_controller.js
@@ -51,7 +51,7 @@ export default class extends Controller {
 
   highlightListItem() {
     this.listItemTargets.forEach((listItem, index) => {
-      listItem.classList.toggle("bg-neutral-700/50", index === this.listItemIndex)
+      listItem.classList.toggle("bg-neutral-700/10", index === this.listItemIndex)
     })
   }
 

diff --git a/app/views/email_threads/_email_list_item.html.erb b/app/views/email_threads/_email_list_item.html.erb
@@ -1,7 +1,7 @@
 <!-- TODO: Clean this up w/ custom CSS instead of Tailwind (for keyboard nav) -->
 <!-- TODO: Replace border-b with a divider -->
 <div data-root-target="listItem"
-    class="group flex items-center justify-between px-2 py-2.5 hover:bg-neutral-700/50 border-b border-neutral-700/40">
+    class="group flex items-center justify-between px-2 py-2.5 hover:bg-neutral-700/10 border-b border-neutral-900">
   <div class="flex items-center gap-x-2 truncate text-[13px]">
     <!-- TODO: Add checkbox -->
     <!-- <input type="checkbox" class="rounded bg-neutral-700 border border-neutral-600 opacity-0 group-hover:opacity-100"> -->

diff --git a/app/views/email_threads/inbox.html.erb b/app/views/email_threads/inbox.html.erb
@@ -1,11 +1,11 @@
 <div class="flex h-screen divide-x divide-neutral-700/40 overflow-hidden">
   <div class="flex-grow overflow-y-scroll">
-    <div class="w-full bg-neutral-800">
+    <div class="fixed w-full bg-black">
       <%= render 'shared/navbar' %>
       <%= render 'shared/toolbar' %>
     </div>
 
-    <div class="overflow-y-scroll">
+    <div class="overflow-y-scroll pt-[84px]">
       <% if @email_threads.any? %>
         <%= render partial: "email_list", locals: { threads: @email_threads } %>
       <% else %>
@@ -16,7 +16,7 @@
       <% end %>
     </div>
   </div>
-  <div class="flex flex-col lg:w-[400px] h-screen overflow-hidden">
+  <div class="hidden flex flex-col lg:w-[400px] h-screen overflow-hidden">
     <div class="flex items-center justify-between h-[44px] pl-4 pr-2 border-b border-neutral-700/40">
       <div class="flex items-center gap-x-1.5">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -26,9 +26,7 @@
         <p class="text-xs">Preview</p>
       </div>
       <div class="flex items-center justify-center w-7 h-7 text-neutral-400 hover:text-white hover:bg-neutral-700 rounded-lg rotate-180">
-        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h4.5a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2h-4.5m-8-2V6.75a2 2 0 0 1 2-2h2.5v14.5h-2.5a2 2 0 0 1-2-2Z"></path>
-        </svg>
+        <%= render 'shared/icons/preview_toggle' %>
       </div>
     </div>
     <div class="flex items-center h-[44px] px-4 border-b border-neutral-700/40">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -31,7 +31,7 @@
   </head>
 
   <body>
-    <div data-controller="root" class="dark min-h-screen text-white bg-neutral-800">
+    <div data-controller="root" class="dark min-h-screen text-white bg-[#0E0F0F]">
       <!-- TODO: Remove menu controller -->
       <div data-controller="menu">
         <%= render 'shared/command_palette' %>

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,15 +1,25 @@
-<nav class="flex items-center justify-between w-full h-[44px] px-1 border-b border-neutral-700/40">
-  <div class="flex items-center gap-x-1">
+<nav class="flex items-center justify-between w-full h-10">
+  <div class="flex-grow flex items-center">
     <div data-controller="user-dropdown">
-      <div data-action="click->user-dropdown#toggleDropdown"
-          class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-white rounded-lg hover:bg-neutral-700 cursor-pointer">
-        <%= render 'medium_profile_placeholder', color: current_user.profile_color.to_sym, name: current_user.first_name.first %>
+      <div class="flex items-center justify-center h-10 px-1 border-b border-neutral-800/70">
+        <div data-action="click->user-dropdown#toggleDropdown"
+            class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-white rounded-lg hover:bg-neutral-700 cursor-pointer">
+          <%= render 'medium_profile_placeholder', color: current_user.profile_color.to_sym, name: current_user.first_name.first %>
+        </div>
+        <%= render 'shared/navigation/user' %>
       </div>
-      <%= render 'shared/navigation/user' %>
     </div>
-    <div data-root-target="filter"
-        class="flex items-center">
-      <p class="text-xs font-medium">Inbox<span class="ml-1 text-amber-500"><%= @email_threads.count %></span></p>
+    <div class="flex items-center gap-x-1 h-10 px-4 bg-[#0E0F0F] border-x border-neutral-800/50">
+      <div data-root-target="filter"
+          class="flex items-center">
+        <p class="text-xs font-medium">Inbox<span class="ml-1 text-amber-500"><%= @email_threads.count %></span></p>
+      </div>
+    </div>
+    <div class="flex-grow h-10 border-b border-neutral-800/70">
+  </div>
+  <div class="flex items-center justify-center h-10 px-1 border-b border-neutral-800/70">
+    <div class="flex items-center justify-center w-7 h-7 text-neutral-400 hover:text-white hover:bg-neutral-700 rounded-lg rotate-180">
+      <%= render 'shared/icons/preview_toggle' %>
     </div>
   </div>
 </nav>
diff --git a/app/views/shared/_toolbar.html.erb b/app/views/shared/_toolbar.html.erb
@@ -1,4 +1,4 @@
-<div class="flex items-center justify-between w-full h-[44px] px-2 border-b border-neutral-700/40">
+<div class="flex items-center justify-between w-full h-[44px] px-2 border-b border-neutral-800/70 bg-[#0E0F0F]">
   <div class="flex items-center gap-x-1.5">
     <input type="checkbox" disabled class="bg-neutral-800 border border-neutral-700 rounded">
     <p class="text-xs text-neutral-500">Select all</p>

diff --git a/app/views/shared/icons/_preview_toggle.html.erb b/app/views/shared/icons/_preview_toggle.html.erb
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h4.5a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2h-4.5m-8-2V6.75a2 2 0 0 1 2-2h2.5v14.5h-2.5a2 2 0 0 1-2-2Z"></path>
+</svg