From 7fd57d737e82c9d166e69593cc62febd3cf4d1a9 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Wed, 1 May 2024 14:19:47 +0530
Subject: [PATCH] Adjustments to improve overall styling of config page, email
 template

---
 src/interface/desktop/chat.html               |  2 +-
 src/khoj/interface/email/task.html            | 10 ++++------
 src/khoj/interface/web/chat.html              |  2 +-
 src/khoj/interface/web/config_automation.html | 13 +++++++------
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index c26fe4b5..73e88159 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -1509,7 +1509,7 @@
         #chat-input {
             font-family: var(--font-family);
             font-size: small;
-            height: 36px;
+            height: 48px;
             border-radius: 16px;
             resize: none;
             overflow-y: hidden;
diff --git a/src/khoj/interface/email/task.html b/src/khoj/interface/email/task.html
index 1e78ce34..92f0785a 100644
--- a/src/khoj/interface/email/task.html
+++ b/src/khoj/interface/email/task.html
@@ -11,20 +11,18 @@
 </a>
 <div class="calls-to-action" style="margin-top: 20px;">
     <div>
-        <h1 style="color: #333; font-size: large; font-weight: bold; margin: 0; line-height: 1.5; background-color: #fee285; padding: 8px; box-shadow: 6px 6px rgba(0, 0, 0, 1.5);">Your Open, Personal AI</h1>
-        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">Hey {{name}}! </p>
-        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">I've shared your automation results below:</p>
+        <h1 style="color: #333; font-size: large; font-weight: bold; margin: 0; line-height: 1.5; background-color: #fee285; padding: 8px; box-shadow: 6px 6px rgba(0, 0, 0, 1.5);">Your Automation, From Your Personal AI</h1>
 
         <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; margin-top: 20px;">
             <div style="border: 1px solid black; border-radius: 8px; padding: 8px; box-shadow: 6px 6px rgba(0, 0, 0, 1.0); margin-top: 20px;">
-                <a href="https://app.khoj.dev/config#tasks" style="text-decoration: none; text-decoration: underline dotted;">
+                <a href="https://app.khoj.dev/automations" style="text-decoration: none; text-decoration: underline dotted;">
                     <h3 style="color: #333; font-size: large; margin: 0; padding: 0; line-height: 2.0; background-color: #b8f1c7; padding: 8px; ">{{subject}}</h3>
                 </a>
                 <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">{{result}}</p>
             </div>
         </div>
-        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">The automation query I ran on your behalf: {{query}}</p>
-        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">You can view, delete your automations via <a href="https://app.khoj.dev/configure#tasks">the settings page</a></p>
+        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">The automation I ran on your behalf: {{query}}</p>
+        <p style="color: #333; font-size: medium; margin-top: 20px; padding: 0; line-height: 1.5;">You can manage your automations via <a href="https://app.khoj.dev/automations">the settings page</a>.</p>
     </div>
 </div>
 <p style="color: #333; font-size: large; margin-top: 20px; padding: 0; line-height: 1.5;">- Khoj</p>
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index cb18ba0a..86cfdf71 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -2164,7 +2164,7 @@ To get started, just start typing below. You can also type / to see a list of co
         #chat-input {
             font-family: var(--font-family);
             font-size: medium;
-            height: 36px;
+            height: 48px;
             border-radius: 16px;
             resize: none;
             overflow-y: hidden;
diff --git a/src/khoj/interface/web/config_automation.html b/src/khoj/interface/web/config_automation.html
index 902e7949..ca0a4257 100644
--- a/src/khoj/interface/web/config_automation.html
+++ b/src/khoj/interface/web/config_automation.html
@@ -5,14 +5,14 @@
         <h2 class="section-title">
             <img class="card-icon" src="/static/assets/icons/automation.svg?v={{ khoj_version }}" alt="Automate">
             <span class="card-title-text">Automate</span>
-            <!-- <div class="instructions">
-                <a href="https://docs.khoj.dev/features/automations">ⓘ Help</a>
-            </div> -->
+            <div class="instructions">
+                You can automate queries to run on a schedule using Khoj's automations. Results will be sent straight to your inbox.
+            </div>
         </h2>
         <div class="section-body">
             <button id="create-automation-button" type="button" class="positive-button">
                <img class="automation-action-icon" src="/static/assets/icons/new.svg" alt="Automations">
-               <span id="create-automation-button-text">Create</span>
+               <span id="create-automation-button-text">Build</span>
             </button>
             <div id="automations" class="section-cards"></div>
         </div>
@@ -27,6 +27,8 @@
         width: 100%;
         height: 100%;
         grid-template-rows: none;
+        background-color: var(--frosted-background-color);
+        padding: 12px;
     }
     #create-automation-button {
         width: auto;
@@ -60,10 +62,9 @@
     }
 
     div.new-automation {
-        background-color: #f9f9f9;
+        background-color: var(--frosted-background-color);
         border-radius: 10px;
         box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-        padding: 20px;
         margin-bottom: 20px;
         transition: box-shadow 0.3s ease, transform 0.3s ease;
     }