From 1c6f1d94f55d8e5bb64921809e53224a1c8e6017 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Thu, 1 Feb 2024 22:26:44 +0530
Subject: [PATCH] Fix styling of Whatsapp card & notify banner in config page
 of web app

- Put Whatsapp card back in Client section.
  - Fixes side spacing on cards
  - Improve Whatsapp card row gaps

- Hide notification banner on web app load. Previously it showed up as
  a yellow dot on smaller displays
---
 src/khoj/interface/web/base_config.html | 7 +++++--
 src/khoj/interface/web/config.html      | 4 +---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 285936b6..eff69fb6 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -85,15 +85,18 @@
         div.api-settings {
             grid-template-rows: 1fr 1fr auto;
         }
-
         #api-settings-card-description {
             margin: 8px 0 0 0;
         }
-
         #api-settings-keys-table {
             margin-bottom: 16px;
         }
 
+        #phone-number-input-card {
+            grid-template-rows: auto;
+            gap: 20px;
+        }
+
         div.instructions {
             font-size: large;
         }
diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index ab8de4f3..d9829628 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -194,8 +194,6 @@
                 </button>
             </div>
         </div>
-    </div>
-    <div id="whatsapp" class="section">
         <div id="phone-number-input-card" class="api-settings">
             <div class="card-title-row">
                 <img class="card-icon" src="/static/assets/icons/whatsapp.svg" alt="WhatsApp icon">
@@ -294,7 +292,7 @@
     <div class="section"></div>
     </div>
     <div class="section" id="notification-banner-parent">
-        <div id="notification-banner"></div>
+        <div id="notification-banner" style="display: none;"></div>
     </div>
 </div>
 <script>