From f56e91352154a9ac9d3b572f717f7d72241d09c8 Mon Sep 17 00:00:00 2001
From: Ben Busby <benbusby@protonmail.com>
Date: Thu, 22 Apr 2021 16:23:00 -0400
Subject: [PATCH] Remove gap between input and result types

Enforces 0 margin for the search input form on the result page, which
removes the weird gap that is seen by default.

Also made minor changes to the border styling. Desktop searches now have
a single bottom border in dark mode rather than an all around border,
and the border around the mobile search result input was removed
entirely.
---
 app/static/css/dark-theme.css | 2 +-
 app/static/css/header.css     | 7 ++++++-
 app/templates/header.html     | 9 ++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css
index 3579752..d006540 100644
--- a/app/static/css/dark-theme.css
+++ b/app/static/css/dark-theme.css
@@ -70,7 +70,7 @@ select {
 }
 
 #search-bar {
-    border: 2px solid var(--whoogle-dark-element-bg) !important;
+    border-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-dark-text) !important;
 }
 
diff --git a/app/static/css/header.css b/app/static/css/header.css
index a7c8461..61f6479 100644
--- a/app/static/css/header.css
+++ b/app/static/css/header.css
@@ -27,6 +27,11 @@ header {
     font-smoothing: antialiased;
 }
 
+.search-bar-desktop {
+    border-radius: 8px 8px 0 0;
+    height: 40px !important;
+}
+
 .search-div {
     border-radius: 8px 8px 0 0;
     box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
@@ -37,6 +42,7 @@ header {
     height: 39px;
     display: flex;
     width: 100%;
+    margin: 0px;
 }
 
 .search-input {
@@ -61,7 +67,6 @@ header {
     display: block;
 }
 
-
 #main>div:focus-within {
     border-radius: 8px;
     box-shadow: 0 0 6px 1px #2375e8;
diff --git a/app/templates/header.html b/app/templates/header.html
index 1e0cbd3..4eb7822 100644
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -1,7 +1,7 @@
 {% if mobile %}
     <header>
-        <div class="bz1lBb">
-            <form class="Pg70bf" id="search-form" method="POST">
+        <div style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;" class="bz1lBb">
+            <form class="search-form Pg70bf" id="search-form" method="POST">
                 <a class="logo-link mobile-logo"
                    href="/"
                    style="display:flex; justify-content:center; align-items:center;">
@@ -21,7 +21,6 @@
                             name="q"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                    color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
                             type="text" 
                             value="{{ query }}">
                         <input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
@@ -51,14 +50,14 @@
                             autocapitalize="none" 
                             autocomplete="off" 
                             autocorrect="off"
-                            class="noHIxc" 
+                            class="search-bar-desktop noHIxc" 
                             name="q"
                             spellcheck="false"
                             type="text"
                             value="{{ query }}"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                    color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">
+                                   border-bottom: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }};">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>