Use svg logo w/ custom styling on results pages

app/filter.py

@@ -3,6 +3,7 @@ from app.utils.results import *
 from bs4 import BeautifulSoup
 from bs4.element import ResultSet, Tag
 from cryptography.fernet import Fernet
+from flask import render_template
 import re
 import urllib.parse as urlparse
 from urllib.parse import parse_qs
@@ -152,8 +153,7 @@ class Filter:
 
         if src.startswith(LOGO_URL):
             # Re-brand with Whoogle logo
-            element['src'] = 'static/img/logo.png'
-            element['style'] = 'height:40px;width:162px'
+            element.replace_with(BeautifulSoup(render_template('logo.html')))
             return
         elif src.startswith(GOOG_IMG) or GOOG_STATIC in src:
             element['src'] = BLANK_B64

app/routes.py

@@ -126,6 +126,7 @@ def index():
     return render_template('index.html',
                            languages=app.config['LANGUAGES'],
                            countries=app.config['COUNTRIES'],
+                           logo=render_template('logo.html'),
                            config=g.user_config,
                            tor_available=int(os.environ.get('TOR_AVAILABLE')),
                            version_number=app.config['VERSION_NUMBER'])
@@ -224,6 +225,7 @@ def search():
         search_header=(render_template(
             'header.html',
             config=g.user_config,
+            logo=render_template('logo.html'),
             query=urlparse.unquote(query),
             search_type=search_util.search_type,
             mobile=g.user_request.mobile)

app/templates/header.html

@@ -4,8 +4,10 @@
             <form class="Pg70bf" id="search-form" method="POST">
                 <a class="logo-link mobile-logo"
                    href="/"
-                   style="display:flex; justify-content:center; align-items:center; color:#685e79; font-size:18px; ">
-                    <span style="color: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }} !important">Whoogle</span>
+                   style="display:flex; justify-content:center; align-items:center;">
+                    <div style="height: 1.75em;">
+                        {{ logo|safe }}
+                    </div>
                 </a>
                 <div class="H0PQec" style="width: 100%;">
                     <div class="sbc esbc autocomplete">
@@ -26,7 +28,9 @@
     <header>
         <div class="logo-div">
             <a class="logo-link" href="/">
-                <span style="color: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }} !important">Whoogle</span>
+                <div style="height: 1.65em;">
+                    {{ logo|safe }}
+                </div>
             </a>
         </div>
         <div class="search-div">