Css Update (#93)

* css

* css

Author: vswamidass-sfdc

app/views/assistants/index.html.erb

@@ -5,7 +5,7 @@
     <div>
       <% if policy(Assistant.new).edit? %>
         <div class="inline-flex rounded-md shadow-sm" role="group">
-          <%= render partial: 'shared/button_group', locals: { buttons: { "New +" => new_assistant_path, "Import" =>  import_assistants_path} } %>
+          <%= render partial: 'shared/button_group', locals: { buttons: { "New" => new_assistant_path, "Import" =>  import_assistants_path} } %>
         </div>
       <% end %>
     </div>
@@ -22,7 +22,7 @@
             <p class="text-stone-600 text-sm"><%= assistant.description %></p>
           </div>
           <div class="">
-            <%= link_to new_assistant_chat_path(assistant_id: assistant.id), class: "rounded-lg py-2 px-4 bg-white text-sky-500 border border-sky-500 font-medium hover:bg-sky-100 flex items-center space-x-2" do %>
+            <%= link_to new_assistant_chat_path(assistant_id: assistant.id), class: "rounded-lg py-2 px-4 bg-white text-sky-500 font-medium hover:bg-yellow-500 hover:text-white flex items-center space-x-2" do %>
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
               </svg>

app/views/chats/_form.html.erb

@@ -14,6 +14,6 @@
     <%= form.text_area :first_message, rows: 5,placeholder: ("Please give me " + chat.assistant.input).capitalize, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
   <div class="inline">
-    <%= form.submit "Start Chatting", class: "rounded-lg py-3 px-5 bg-sky-600 text-white inline-block font-medium cursor-pointer" %>
+    <%= form.submit "Start Chatting", class: "rounded-lg py-3 px-5 bg-sky-600 hover:bg-yellow-500 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <% end %>

app/views/chats/index.html.erb

@@ -2,7 +2,7 @@
   <% content_for :title, "Chats" %>
   <div class="flex justify-between items-center mb-4">
     <%= render 'shared/page_header', title: 'Chats', subtitle: 'Discussion with assistants' %>
-    <%= render partial: 'shared/button_group', locals: { buttons: { "New +" => assistants_path } } %>
+    <%= render partial: 'shared/button_group', locals: { buttons: { "New" => assistants_path } } %>
   </div>
   <div class="flex justify-between items-center mb-4">
     <%= paginate @chats, class: "flex-1" %>

app/views/documents/_document.html.erb

@@ -1,55 +1,57 @@
-<div id="<%= dom_id document %>" class="border">
-  <div class="text-xs text-stone-500">
-    <div class="flex justify-between p-3 <%= @document.enabled ? "bg-sky-800" : "bg-stone-400" %> rounded-t-lg">
-      <h1 class="text-3xl font-light <%= @document.enabled ? "text-sky-100" : "text-stone-200" %>"><%= document.title %></h1>
+<div id="<%= dom_id document %>" class="border bg-gray-100 rounded-lg shadow-lg">
+  <div class="text-sm text-gray-700">
+    <div class="flex justify-between p-4 <%= @document.enabled ? 'bg-sky-700' : 'bg-gray-500' %> rounded-t-lg">
+      <h1 class="text-2xl font-semibold <%= @document.enabled ? 'text-white' : 'text-gray-200' %>"><%= document.title %></h1>
       <% if policy(@document).edit? %>
-        <div class="text-stone-800">
+        <div class="text-gray-100">
           <%= form_with model: @document, url: document_path(@document), method: :patch, data: { turbo_frame: dom_id(@document) } do |form| %>
-            <div class="flex items-center space-x-2"> <!-- Use a flex container to align buttons -->
+            <div class="flex items-center space-x-3">
               <% if !@document.enabled %>
                 <%= form.hidden_field :enabled, value: true %>
-                <button type="submit" class="text-stone-500 bg-stone-50 p-2 text-sm rounded-lg border hover:border-stone-300">
+                <button type="submit" class="text-yellow-500 bg-white hover:bg-sky-100  px-3 py-2 rounded-lg border">
                   <span class="flex items-center space-x-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                     </svg>
+                    <span>Enable</span>
                   </span>
                 </button>
               <% else %>
                 <%= form.hidden_field :enabled, value: false %>
-                <button type="submit" class="text-yellow-500 bg-stone-50 p-2 text-sm rounded-lg border hover:border-stone-300">
+                <button type="submit" class="text-stone-500 bg-white hover:bg-sky-100 px-3 py-2 rounded-lg border">
                   <span class="flex items-center space-x-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                       <path d="M12 .75a8.25 8.25 0 0 0-4.135 15.39c.686.398 1.115 1.008 1.134 1.623a.75.75 0 0 0 .577.706c.352.083.71.148 1.074.195.323.041.6-.218.6-.544v-4.661a6.714 6.714 0 0 1-.937-.171.75.75 0 1 1 .374-1.453 5.261 5.261 0 0 0 2.626 0 .75.75 0 1 1 .374 1.452 6.712 6.712 0 0 1-.937.172v4.66c0 .327.277.586.6.545.364-.047.722-.112 1.074-.195a.75.75 0 0 0 .577-.706c.02-.615.448-1.225 1.134-1.623A8.25 8.25 0 0 0 12 .75Z" />
                       <path fill-rule="evenodd" d="M9.013 19.9a.75.75 0 0 1 .877-.597 11.319 11.319 0 0 0 4.22 0 .75.75 0 1 1 .28 1.473 12.819 12.819 0 0 1-4.78 0 .75.75 0 0 1-.597-.876ZM9.754 22.344a.75.75 0 0 1 .824-.668 13.682 13.682 0 0 0 2.844 0 .75.75 0 1 1 .156 1.492 15.156 15.156 0 0 1-3.156 0 .75.75 0 0 1-.668-.824Z" clip-rule="evenodd" />
                     </svg>
+                    <span>Disable</span>
                   </span>
                 </button>
               <% end %>
-              <%= link_to edit_document_path(@document), class: "inline-flex items-center bg-white hover:bg-sky-100 text-sky-500 p-2 text-sm border rounded-lg" do %>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <%= link_to edit_document_path(@document), class: "inline-flex items-center bg-white hover:bg-sky-100 text-stone-500 px-3 py-2 text-sm border rounded-lg" do %>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
                 </svg>
+                <span class="ml-2">Edit</span>
               <% end %>
             </div>
           <% end %>
         </div>
       <% end %>
     </div>
-    <div class="flex justify-between items-center p-3 bg-stone-100">
+    <div class="flex justify-between items-center p-4 bg-gray-200">
       <div class="w-full">
-        <p class="text-xs text-stone-500 font-semibold mt-1">
-          Created <%= time_ago_in_words(document.created_at) %> ago 
-          | Updated <%= time_ago_in_words(document.updated_at) %> ago
+        <p class="text-xs text-gray-600 mt-1">
+          <%= render partial: 'shared/meta_info', locals: { email: document.user.email, created_at: document.created_at, updated_at: document.updated_at } %>
           <%= "| Synced #{time_ago_in_words(document.synced_at)} ago" if document.synced_at.present? %>
         </p>
         <% if document.source_url %>
-          <div class="flex items-center space-x-2 text-xs mt-2">
-            <span>Source</span>
-            <%= link_to document.source_url, document.source_url, class:"text-sky-500", target:"_source" %>
+          <div class="flex items-center space-x-3 text-xs mt-2">
+            <span>Source:</span>
+            <%= link_to document.source_url, document.source_url, class:"text-blue-600 underline", target:"_source" %>
             <% if document.source_type == 'quip' %>
-              <%= image_tag 'quip_logo.png', alt: 'Quip Logo', class: 'h-6 mb-1' %>
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mb-2 <%= "text-green-500" if document.last_sync_result == "SUCCESS" %> <%= "text-red-500" if document.last_sync_result == "FAILED" %>">
+              <%= image_tag 'quip_logo.png', alt: 'Quip Logo', class: 'h-6' %>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 <%= "text-green-600" if document.last_sync_result == "SUCCESS" %> <%= "text-red-600" if document.last_sync_result == "FAILED" %>">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
               </svg>
             <% end %>
@@ -58,20 +60,20 @@
       </div>
     </div>
   </div>
-  <div class="px-3 py-5 text-stone-800 bg-white font-light">
+  <div class="px-4 py-6 text-gray-800 bg-white font-normal">
     <% cache document do %>
       <%= render partial: 'shared/markdown', locals: {text: document.document } %>
     <% end %>
   </div>
-  <div class="text-xs p-3 text-stone-500  bg-stone-800 rounded-b-lg">
-    <p class="text-stone-400">Info for nerds:</p>
-    <p class=""><%= document.token_count %> Tokens | <%= document.embedding.present? ? "Embedding Ready" : "Embedding Missing"%>  | External id <%= document.external_id.present? ? document.external_id : " not provided"%>| <%= document.enabled ? "Enabled" : "Disabled" %> </p>
+  <div class="text-xs px-4 py-3 text-gray-400 bg-gray-900 rounded-b-lg">
+    <p class="text-gray-500">Info for nerds:</p>
+    <p class=""><%= document.token_count %> Tokens | <%= document.embedding.present? ? "Embedding Ready" : "Embedding Missing"%> | External id <%= document.external_id.present? ? document.external_id : " not provided"%> | <%= document.enabled ? "Enabled" : "Disabled" %></p>
   </div>
 </div>
 <% if session[:debug] == "true" then %>
-  <h1 class="text-3xl font-light py-4 text-stone-500">Embedding</h1>
-  <div class="markdown-content leading-5">
-    <div class="break-words font-mono p-5 border border-sky-600 rounded-b-lg bg-stone-200">
+  <h1 class="text-2xl font-semibold py-4 text-gray-600">Embedding</h1>
+  <div class="markdown-content leading-6">
+    <div class="break-words font-mono p-5 border border-blue-500 rounded-b-lg bg-gray-300">
       <%= document.embedding unless document.embedding.nil? %>
     </div>
   </div>

app/views/documents/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :title, @document.title %>
 
-<%= render partial: 'shared/breadcrumb', locals: { breadcrumbs: [['Home', root_path], [@document.library.name, library_path(@document.library)], [@document.title, document_path(@document)]] } %>
+<%= render partial: 'shared/breadcrumb', locals: { breadcrumbs: [['Home', root_path], [@document.library.name, library_path(@document.library)], ["Document", document_path(@document)]] } %>
 
 <%= render @document %>
 

app/views/layouts/application.html.erb

@@ -10,7 +10,7 @@
     <%= javascript_importmap_tags %>
     <%= favicon_link_tag 'favicon.ico' %>
   </head>
-  <body class="bg-slate-100">
+  <body class="bg-slate-50">
     <header class="p-4 bg-white shadow">
       <div class="flex container mx-auto justify-between items-center">
         <div class="flex font-mono">
@@ -60,57 +60,53 @@
       <% end %>
     </div>
   </header>
-  <div class="px-4 bg-sky-900 border-t-2 border-sky-500">
-    <div class="text-sky-300 flex mx-auto container justify-between items-center">
+  <div class="p-1 bg-sky-900">
+    <div class="container mx-auto flex justify-between items-center text-sky-100">
       <% if current_user %>
         <nav>
-          <ul class="flex font-light">
+          <ul class="flex space-x-4 text-md font-light">
             <li>
-              <a href="/questions" class="<%= controller_name == 'questions' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-300 hover:text-sky-100 flex items-center mr-2 p-2">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
+              <a href="/questions" class="flex items-center px-3 py-2 rounded-md transition-colors duration-200 <%= controller_name == 'questions' ? 'bg-sky-600 text-sky-50' : 'hover:bg-sky-800 hover:text-sky-100' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                 </svg>
                 Questions
               </a>
             </li>
             <li>
-              <a href="/libraries" class="<%= controller_name == 'libraries' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-300 hover:text-sky-100 flex items-center mr-2 p-2">
-                <!-- Add your chosen SVG icon for 'Libraries' here -->
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
+              <a href="/libraries" class="flex items-center px-3 py-2 rounded-md transition-colors duration-200 <%= controller_name == 'libraries' ? 'bg-sky-600 text-sky-50' : 'hover:bg-sky-800 hover:text-sky-100' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                 </svg>
                 Libraries
               </a>
             </li>
             <li>
-              <a href="/documents" class="<%= controller_name == 'documents' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
+              <a href="/documents" class="flex items-center px-3 py-2 rounded-md transition-colors duration-200 <%= controller_name == 'documents' ? 'bg-sky-600 text-sky-50' : 'hover:bg-sky-800 hover:text-sky-100' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                 </svg>
                 Documents
               </a>
             </li>
             <li>
-              <a href="/chats" class="<%= controller_name == 'chats' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
+              <a href="/chats" class="flex items-center px-3 py-2 rounded-md transition-colors duration-200 <%= controller_name == 'chats' ? 'bg-sky-600 text-sky-50' : 'hover:bg-sky-800 hover:text-sky-100' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                 </svg>
                 Chats
               </a>
             </li>
             <li>
-              <a href="/assistants" class="<%= controller_name == 'assistants' ? 'text-sky-100 border-sky-300 bg-sky-600' : '' %> hover:border-sky-400 hover:text-sky-100 flex items-center mr-2 p-2">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
+              <a href="/assistants" class="flex items-center px-3 py-2 rounded-md transition-colors duration-200 <%= controller_name == 'assistants' ? 'bg-sky-600 text-sky-50' : 'hover:bg-sky-800 hover:text-sky-100' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
                 </svg>
                 Assistants
               </a>
             </li>
-            <% if session[:beta] == "true" then %>
-            <% end %>
           </ul>
         </nav>
-      <% else %>
       <% end %>
     </div>
   </div>

app/views/questions/_form.html.erb

@@ -14,7 +14,7 @@
       <form class="flex" action="#" method="post">
         <%= form.text_area :question, id:"text-field" ,placeholder:"I can answer questions about " + Library.all.order(documents_count: :desc).limit(4).pluck(:name).join(", ") + ", and more.",class:"bg-white placeholder-gray-400 focus:outline-none text-stone-700 py-2 px-3 rounded border-0 focus:outline-none focus:border-0 w-full" %>
         <div class="float-right">
-          <button type="submit" id="submit-button" class="mt-1 bg-sky-500 text-stone-200 rounded hover:bg-sky-600 text-white py-2 px-5" >
+          <button type="submit" id="submit-button" class="mt-1 bg-sky-500 text-stone-200 rounded hover:bg-yellow-500 text-white py-2 px-5" >
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
             </svg>