dark mode fixes; width fixes (#202)

getzep · Sep 26, 2023 · 5be6617 · 5be6617
1 parent 9ba09cd
commit 5be6617
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 34 deletions.
diff --git a/pkg/web/static/output.css b/pkg/web/static/output.css
@@ -1764,6 +1764,16 @@ video {
     border-color: rgb(55 65 81 / var(--tw-divide-opacity));
   }
 
+  .dark\:border-gray-50 {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-500 {
+    --tw-border-opacity: 1;
+    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+  }
+
   .dark\:border-gray-700 {
     --tw-border-opacity: 1;
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1774,11 +1784,21 @@ video {
     border-color: rgb(31 41 55 / var(--tw-border-opacity));
   }
 
+  .dark\:bg-gray-100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-gray-200 {
     --tw-bg-opacity: 1;
     background-color: rgb(229 231 235 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-gray-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-gray-700 {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));

diff --git a/pkg/web/templates/components/chat_history.html b/pkg/web/templates/components/chat_history.html
@@ -22,9 +22,9 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Chat History
                                     {{ template "ChatBubble" dict "Message" $msg "BgColor" "bg-fuchsia-50" }}
                                 {{ else }}
                                     {{ if mod $i 2 }}
-                                        {{ template "ChatBubble" dict "Message" $msg "BgColor" "bg-gray-50" }}
+                                        {{ template "ChatBubble" dict "Message" $msg "BgColor" "bg-gray-50 dark:bg-gray-100" }}
                                     {{ else }}
-                                        {{ template "ChatBubble" dict "Message" $msg "BgColor" "bng-white" }}
+                                        {{ template "ChatBubble" dict "Message" $msg "BgColor" "bg-white dark:bg-gray-300" }}
                                     {{ end }}
                                 {{ end }}
                             {{ end }}
@@ -52,7 +52,7 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Chat History
             </p>
             <div class="flex justify-between">
                 <!-- Message Content -->
-                <div class="border-r border-gray-200 w-[50%] pr-6 max-h-44 overflow-y-auto">
+                <div class="border-r border-gray-200 dark:border-gray-50 w-[50%] pr-6 max-h-44 overflow-y-auto">
                     <p class="text-sm">
                         {{ .Message.Content }}
                     </p>

diff --git a/pkg/web/templates/components/collections_table.html b/pkg/web/templates/components/collections_table.html
@@ -138,7 +138,7 @@
 
     <td class="h-px w-px whitespace-nowrap">
         <div class="px-6 py-1.5">
-            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium"
+            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium dark:text-gray-200"
                 href="{{ .Path }}/{{ .Collection.Name }}">
                 View
             </a>

diff --git a/pkg/web/templates/components/session_table.html b/pkg/web/templates/components/session_table.html
@@ -71,7 +71,7 @@
     <!-- End CreatedAt -->
     <td class="h-px w-px whitespace-nowrap">
         <div class="px-6 py-1.5">
-            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium"
+            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium dark:text-gray-200"
                 href="{{ $path }}/{{ .Session.SessionID }}">
                 View
             </a>

diff --git a/pkg/web/templates/components/user_table.html b/pkg/web/templates/components/user_table.html
@@ -102,7 +102,7 @@
 
     <td class="h-px w-px whitespace-nowrap">
         <div class="px-6 py-1.5">
-            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium"
+            <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium  dark:text-gray-200"
                 href="/admin/users/{{ .UserID }}">
                 View
             </a>

diff --git a/pkg/web/templates/pages/collection_details.html b/pkg/web/templates/pages/collection_details.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="collection_details">
+<div id="collection_details" class="max-w-[85rem] mx-auto">
     {{ template "BreadCrumbs" .}}
     {{ template "PageTitlesWithStatus" . }}
     {{ template "CollectionView" . }}
@@ -39,7 +39,7 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Danger</h3>
     <!-- Grid -->
     <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
         <!-- Card -->
-        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-800">
+        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-200 dark:border-gray-800">
             <div class="p-4 md:p-5">
                 <div class="flex items-center gap-x-2">
                     <p class="text-xs uppercase tracking-wide text-gray-500">
@@ -65,7 +65,7 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Danger</h3>
         <!-- End Card -->
 
         <!-- Card -->
-        <div class=" flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-800">
+        <div class=" flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-200 dark:border-gray-800">
             <div class="p-4 md:p-5">
                 <div class="flex items-center gap-x-2">
                     <p class="text-xs uppercase tracking-wide text-gray-500">
@@ -74,7 +74,7 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Danger</h3>
                 </div>
 
                 <div class="mt-1 flex items-center">
-                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
+                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 ">
                         {{ .Data.DocumentCount }}
                     </h3>
 
@@ -84,7 +84,7 @@ <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
         <!-- End Card -->
 
         <!-- Card -->
-        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-800">
+        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-200 dark:border-gray-800">
             <div class="p-4 md:p-5">
                 <div class="flex items-center gap-x-2">
                     <p class="text-xs uppercase tracking-wide text-gray-500">
@@ -111,7 +111,7 @@ <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
                 </div>
 
                 <div class="mt-1 flex items-center">
-                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
+                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 ">
                         {{ .Data.DocumentEmbeddedCount }}
                     </h3>
                     {{ if ne .Data.DocumentEmbeddedCount .Data.DocumentCount }}
@@ -127,7 +127,7 @@ <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
         <!-- End Card -->
 
         <!-- Card -->
-        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-800">
+        <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-200 dark:border-gray-800">
             <div class="p-4 md:p-5">
                 <div class="flex items-center gap-x-2">
                     <p class="text-xs uppercase tracking-wide text-gray-500">
@@ -136,7 +136,7 @@ <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
                 </div>
 
                 <div class="mt-1 flex items-center">
-                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
+                    <h3 class="text-xl sm:text-2xl font-medium text-gray-800 ">
                         {{ .Data.EmbeddingDimensions }}
                     </h3>
                 </div>
@@ -155,15 +155,15 @@ <h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
 <!-- Card Section -->
 <div class="px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
     <!-- Card -->
-    <div class="bg-white rounded-xl shadow p-4 sm:p-7 dark:bg-slate-900">
+    <div class="bg-white rounded-xl shadow p-4 sm:p-7 dark:bg-gray-200">
         <div class="flex items-start gap-x-6 my-2">
-            <div class="text-sm text-gray-800 dark:text-gray-200 font-bold w-20">
+            <div class="text-sm text-gray-800 font-bold w-20">
                 Status
             </div>
             <div>{{ .Data.IsIndexed | ternary "Indexed" "Not Indexed" }}</div>
         </div>
         <div class="flex items-start gap-x-6 my-2">
-            <div class="text-sm text-gray-800 dark:text-gray-200 font-bold w-20">
+            <div class="text-sm text-gray-800 font-bold w-20">
                 Type
             </div>
             <div>IVFFLAT</div>

diff --git a/pkg/web/templates/pages/collections.html b/pkg/web/templates/pages/collections.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="collections">
+<div id="collections" class="max-w-[85rem] mx-auto">
     {{template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     {{ template "CollectionsTable" . }}

diff --git a/pkg/web/templates/pages/dashboard.html b/pkg/web/templates/pages/dashboard.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="dasbhboard">
+<div id="dasbhboard" class="max-w-[85rem] mx-auto">
   {{template "BreadCrumbs" .}}
   {{ template "PageTitles" . }}
   <!-- Card Section -->
@@ -10,12 +10,12 @@
     <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
       <!-- Card -->
       <a target="_blank"
-        class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800"
+        class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-500"
         href="https://discord.gg/W8Kw6bsgXQ">
         <div class="p-4 md:p-5">
           <div class="flex">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
-              role="img" class="iconify iconify--ic" class="mt-1 shrink-0 w-5 h-5 text-gray-800 dark:text-gray-200"
+              role="img" class="mt-1 shrink-0 w-5 h-5 text-gray-800 dark:text-gray-200"
               width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
               <path fill="currentColor"
                 d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z">
@@ -37,7 +37,7 @@
       <!-- End Card -->
 
       <!-- Card -->
-      <a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800"
+      <a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-500"
         href="https://docs.getzep.com/" target="_blank">
         <div class="p-4 md:p-5">
           <div class="flex">
@@ -61,12 +61,12 @@
       <!-- End Card -->
 
       <!-- Card -->
-      <a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800"
+      <a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-500"
         href="https://github.com/getzep/zep/issues" target="_blank">
         <div class="p-4 md:p-5">
           <div class="flex">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
-              role="img" lass="mt-1 shrink-0 w-5 h-5 text-gray-800 dark:text-gray-200" width="24" height="24"
+              role="img" class="mt-1 shrink-0 w-5 h-5 text-gray-800 dark:text-gray-200" width="24" height="24"
               preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
               <path fill="currentColor"
                 d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">

diff --git a/pkg/web/templates/pages/session_details.html b/pkg/web/templates/pages/session_details.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="sessions">
+<div id="sessions" class="max-w-[85rem] mx-auto">
     {{template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     {{ template "SessionDetails" . }}
@@ -21,7 +21,7 @@ <h3 class="mt-8 text-xl text-gray-800 font-bold dark:text-gray-400">Danger</h3>
         <div class="-m-1.5 overflow-x-auto">
             <div class="p-1.5 min-w-full inline-block align-middle">
                 <div
-                    class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
+                    class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-gray-200 dark:border-gray-700">
                     <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 lg:py-8 mx-auto">
                         <p class="text-sm">Created: {{ .Data.Session.CreatedAt.Format "2006-01-02 15:04:05" }} 
                             <span class="px-3">|</span> Updated: {{ .Data.Session.UpdatedAt.Format "2006-01-02 15:04:05"}} 

diff --git a/pkg/web/templates/pages/sessions.html b/pkg/web/templates/pages/sessions.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="sessions">
+<div id="sessions" class="max-w-[85rem] mx-auto">
     {{template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     {{ template "SessionTable" . }}

diff --git a/pkg/web/templates/pages/settings.html b/pkg/web/templates/pages/settings.html
@@ -1,15 +1,12 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="settings">
+<div id="settings" class="max-w-[85rem] mx-auto">
     {{template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     <div class="px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
         <!-- Card -->
-        <div class="bg-white rounded-xl shadow p-4 sm:p-7 dark:bg-slate-900">
-            <div class="max-w-[85rem] px-4 py-1 sm:px-6 lg:px-8 lg:py-2 mx-auto">
-                <h3 class="my-2 text-xl text-gray-800 font-bold dark:text-gray-400">Loaded Config</h3>
-            </div>
+        <div class="bg-white rounded-xl shadow p-4 sm:p-7 dark:bg-gray-200">
             <div class="pl-10 py-10 text-xs max-h-[40rem] overflow-y-scroll">
                 {{ .Data.ConfigHTML }}
             </div>

diff --git a/pkg/web/templates/pages/user_details.html b/pkg/web/templates/pages/user_details.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="users_details">
+<div id="users_details" class="max-w-[85rem] mx-auto">
     {{ template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     {{ template "UserDetailsForm" . }}

diff --git a/pkg/web/templates/pages/users.html b/pkg/web/templates/pages/users.html
@@ -1,7 +1,7 @@
 {{ template "Content" . }}
 
 {{ define "Content" }}
-<div id="users">
+<div id="users" class="max-w-[85rem] mx-auto">
     {{ template "BreadCrumbs" .}}
     {{ template "PageTitles" . }}
     {{ template "UserTable" . }}