From b6f07099cddcfdb028f33771407155d91f094af3 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Thu, 2 Nov 2023 16:38:08 -0700
Subject: [PATCH] Simplify login page styling on web client

- Center all elements: icon, text and button
- Use khoj icon not logo-text
- Simplify login title text
---
 src/khoj/interface/web/assets/khoj.css |  5 +++
 src/khoj/interface/web/login.html      | 54 +++++++++++---------------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 51b228c9..a4785be2 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -55,6 +55,8 @@
     font-family: roboto, karma, segoe ui, sans-serif;
     font-weight: 300;
 }
+
+.khoj-footer,
 .khoj-header {
     display: grid;
     grid-auto-flow: column;
@@ -62,6 +64,9 @@
     padding: 16px 0;
     margin: 0 0 16px 0;
 }
+.khoj-footer {
+    margin: 16px 0 0 0;
+}
 
 nav.khoj-nav {
     display: grid;
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
index e04fab7e..5d40397c 100644
--- a/src/khoj/interface/web/login.html
+++ b/src/khoj/interface/web/login.html
@@ -22,36 +22,30 @@
                 <button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
             </div>
         {% endif %}
-        <!--Add Header Logo and Nav Pane-->
-        <div class="khoj-header">
-            {% if demo %}
-                <a class="khoj-logo" href="https://khoj.dev" target="_blank">
-                    <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
-                </a>
-            {% else %}
-                <a class="khoj-logo" href="/">
-                    <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
-                </a>
-            {% endif %}
-        </div>
+        <div class="khoj-header"></div>
 
-        <!-- Sign Up button for Google OAuth -->
+        <!-- Login Modal -->
         <div id="login-modal">
-            <h1 class="login-modal-title">Become superhuman with your personal knowledge base copilot</h1>
+            <img class="khoj-logo" src="/static/assets/icons/favicon-128x128.png" alt="Khoj"></img>
+            <div class="login-modal-title">Log in to Khoj</div>
+            <!-- Sign Up/Login with Google OAuth -->
             <div
                 class="g_id_signin"
                 data-shape="circle"
                 data-text="continue_with"
                 data-logo_alignment="center"
                 data-size="large"
-                data-width="300"
                 data-type="standard">
             </div>
+            <div id="g_id_onload"
+                data-client_id="{{ google_client_id }}"
+                data-ux_mode="redirect"
+                data-login_uri="{{ redirect_uri }}"
+                data-auto-select="true">
+            </div>
         </div>
-        <div id="g_id_onload"
-            data-client_id="{{ google_client_id }}"
-            data-ux_mode="redirect"
-            data-login_uri="{{ redirect_uri }}">
+
+        <div class="khoj-footer"></div>
    </div>
 
 
@@ -62,7 +56,7 @@
             body {
                 display: grid;
                 grid-template-columns: 1fr;
-                grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
+                grid-template-rows: 1fr auto 1fr;
                 font-size: small!important;
             }
             body > * {
@@ -73,8 +67,7 @@
             body {
                 display: grid;
                 grid-template-columns: 1fr min(70vw, 100%) 1fr;
-                grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
-                padding-top: 60vw;
+                grid-template-rows: 1fr auto 1fr;
             }
             body > * {
                 grid-column: 2;
@@ -83,6 +76,7 @@
         body {
             padding: 0px;
             margin: 0px;
+            height: 100%;
             background: var(--background-color);
             color: var(--main-text-color);
             font-family: roboto, karma, segoe ui, sans-serif;
@@ -109,6 +103,7 @@
 
         a.khoj-logo {
             text-align: center;
+            justify-self: center;
         }
 
         button#khoj-banner-submit,
@@ -127,13 +122,9 @@
         div#login-modal {
             display: grid;
             grid-template-columns: 1fr;
-            grid-template-rows: 1fr auto auto auto;
-            gap: 10px;
-            padding: 10px;
-            margin: 10px;
-            border-radius: 5px;
-            border: 1px solid #475569;
-            box-shadow: 0 0 11px #aaa;
+            grid-template-rows: 1fr auto auto 1fr;
+            gap: 32px;
+            min-height: 300px;
             background: var(--background-color);
             margin-left: 25%;
             margin-right: 25%;
@@ -144,10 +135,11 @@
             display: block;
         }
 
-        h1.login-modal-title {
+        .login-modal-title {
             text-align: center;
             line-height: 28px;
-            font-size: x-large;
+            font-size: 24px;
+            font-weight: 500;
         }
 
         @media only screen and (max-width: 700px) {