Tailwind Config (#144)

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

Hide file tree

Showing 8 changed files with 33 additions and 37 deletions.
diff --git a/app/javascript/controllers/root_controller.js b/app/javascript/controllers/root_controller.js
@@ -50,8 +50,8 @@ export default class extends Controller {
   // }
 
   highlightListItem() {
-    this.listItemTargets.forEach((listItem, index) => {
-      listItem.classList.toggle("bg-neutral-700/10", index === this.listItemIndex)
+    this.listItemTargets.forEach((element, idx) => {
+      element.setAttribute('aria-selected', idx === 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,8 @@
 <!-- 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/10 border-b border-neutral-900">
+    aria-selected="false"
+    class="group flex items-center justify-between h-[44px] px-2 aria-selected:bg-highlight hover:bg-highlight border-b border-borderPrimary">
   <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"> -->
@@ -15,6 +16,6 @@
     <p class="truncate"><%= message.body %></p>
   </div>
   <div class="flex justify-end ml-2.5">
-    <p class="truncate text-xs font-medium text-neutral-500"><%= format_date(message.created_at) %></p>
+    <p class="truncate text-xs font-medium text-neutral-500 aria-selected:text-white"><%= format_date(message.created_at) %></p>
   </div>
 </div>
diff --git a/app/views/email_threads/inbox.html.erb b/app/views/email_threads/inbox.html.erb
@@ -1,6 +1,6 @@
 <div class="flex h-screen divide-x divide-neutral-700/40 overflow-hidden">
   <div class="flex-grow overflow-y-scroll">
-    <div class="fixed w-full bg-black">
+    <div class="fixed w-full">
       <%= render 'shared/navbar' %>
       <%= render 'shared/toolbar' %>
     </div>

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-[#0E0F0F]">
+    <div data-controller="root" class="min-h-screen text-white bg-primary">
       <!-- TODO: Remove menu controller -->
       <div data-controller="menu">
         <%= render 'shared/command_palette' %>

diff --git a/app/views/shared/_command_palette.html.erb b/app/views/shared/_command_palette.html.erb
@@ -1,10 +1,10 @@
 <div data-root-target="commandPalette"
      data-menu-target="searchModal"
      data-action="keydown@window->root#rootKeydown"
-     class="hidden fixed top-44">
-  <div class="flex justify-center w-screen">
-    <div class="bg-[#323232] backdrop-filter backdrop-blur border border-neutral-600 rounded-2xl shadow-xl">
-      <div class="p-1 border-b border-neutral-600">
+     class="hidden">
+  <div class="absolute flex justify-center w-screen h-screen bg-black/20 z-20">
+    <div class="fixed z-30 top-44 bg-modal border border-borderPrimary rounded-lg shadow-xl">
+      <div class="p-1 border-b border-borderPrimary">
         <label>
           <!-- TODO: Fix nonresponsive width -->
           <input type="text" placeholder="Search inbox" class="w-[600px] px-2 py-1.5 bg-transparent border-none focus:ring-0 rounded-lg text-lg placeholder:text-lg placeholder:text-neutral-400">
@@ -13,7 +13,7 @@
       <div class="flex flex-col gap-y-0.5 p-1">
         <p class="p-1 text-xs font-medium text-neutral-500">Actions</p>
         <div aria-selected="false"
-          class="group flex items-center justify-between p-2.5 text-neutral-400 hover:text-white aria-selected:text-white hover:bg-neutral-600/50 aria-selected:bg-neutral-600/50 rounded-xl"
+          class="group flex items-center justify-between p-2.5 text-neutral-400 hover:text-white aria-selected:text-white hover:bg-highlight aria-selected:bg-highlight rounded-md"
           data-root-target="commandPaletteItem">
           <div>
             <p class="text-sm">Create filter with prompt</p>
@@ -25,7 +25,7 @@
           </div>
         </div>
         <div aria-selected="false"
-          class="group flex items-center justify-between p-2.5 text-neutral-400 hover:text-white aria-selected:text-white hover:bg-neutral-600/50 aria-selected:bg-neutral-600/50 rounded-xl"
+          class="group flex items-center justify-between p-2.5 text-neutral-400 hover:text-white aria-selected:text-white hover:bg-highlight aria-selected:bg-highlight rounded-md"
           data-root-target="commandPaletteItem">
           <div>
             <p class="text-sm">Create filter</p>

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,24 +1,30 @@
-<nav class="flex items-center justify-between w-full h-10">
+<nav class="flex items-center justify-between w-full h-10 bg-secondary">
   <div class="flex-grow flex items-center">
     <div data-controller="user-dropdown">
       <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">
+            class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-white rounded-lg hover:bg-highlight 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>
     </div>
-    <div class="flex items-center gap-x-1 h-10 px-4 bg-[#0E0F0F] border-x border-neutral-800/50">
+    <div class="flex items-center gap-x-1 h-10 px-4 bg-secondary 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>
+        <p class="text-xs font-medium">Inbox<span class="ml-3 text-amber-500"><%= @email_threads.count %></span></p>
+      </div>
+    </div>
+    <div class="flex items-center gap-x-1 h-10 px-4 border-b border-r border-neutral-800/50 hover:bg-highlight">
+      <div data-root-target="filter"
+          class="flex items-center">
+        <p class="text-xs font-medium">Reply later<span class="ml-3 text-neutral-500">3</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">
+    <div class="flex items-center justify-center w-7 h-7 text-neutral-400 hover:text-white hover:bg-highlight rounded-lg rotate-180">
       <%= render 'shared/icons/preview_toggle' %>
     </div>
   </div>

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-800/70 bg-[#0E0F0F]">
+<div class="flex items-center justify-between w-full h-[44px] px-2 border-b border-neutral-800/70 bg-secondary">
   <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/config/tailwind.config.js b/config/tailwind.config.js
@@ -10,32 +10,21 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      colors: {
+        base: '#0E0F0F',
+        primary: '#161618',
+        secondary: '#141414',
+        highlight: '#1B1B1D',
+        modal: '#161618',
+        borderPrimary: '#212121'
+      },
       backdropFilter: {
         'none': 'none',
         'blur': 'blur(500px)',
       },
       boxShadow: {
         'xs': '0px 1px 2px 0px #1018280D'
       },
-      colors: {
-        background: {
-          light: '#F9FAFB',
-          dark: '#191919'
-        },
-        border: {
-          light: '#E5E7EB',
-          dark: '#1A1A1C'
-        },
-        heading: {
-          light: '#262626',
-          dark: '#a3a3a3'
-        },
-        highlight: {
-          light: '#eaeaea',
-          dark: '#262626'
-        },
-        offwhite: '#F9FAFB'
-      },
       dropShadow: {
         'form': '0px 4px 10px rgba(52, 54, 60, 0.08)',
       },