From f952e90363f26c2a722e199b2f6bc720604af847 Mon Sep 17 00:00:00 2001
From: Pranav <vedmapranav@gmail.com>
Date: Sun, 29 Sep 2024 15:33:29 -0400
Subject: [PATCH 1/4] light-dark-theme

---
 backend/static/css/app.css             |  97 +++++++++++++++++++++++++
 backend/static/img/light-bulb-2-16.png | Bin 0 -> 374 bytes
 backend/static/img/moon-4-16.png       | Bin 0 -> 295 bytes
 backend/templates/base.html            |  66 +++++++++++++++--
 4 files changed, 156 insertions(+), 7 deletions(-)
 create mode 100644 backend/static/css/app.css
 create mode 100644 backend/static/img/light-bulb-2-16.png
 create mode 100644 backend/static/img/moon-4-16.png

diff --git a/backend/static/css/app.css b/backend/static/css/app.css
new file mode 100644
index 0000000..d248f8f
--- /dev/null
+++ b/backend/static/css/app.css
@@ -0,0 +1,97 @@
+.page {
+    background-color: #f4f6fc;
+}
+
+.page-dark {
+    background-color: #000000de;
+}
+
+.page-dark .card {
+    background-color: #00000005;
+    color: white;
+    border-color: white;
+}
+
+.page-dark [data-bs-toggle="tooltip"] {
+    color: white;
+    border: none !important;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 19px;
+    margin-right: 3px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: black;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px black;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 15px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.toggle-btn {
+    margin-right: 10px;
+    width: 90px;
+}
+
+.toggle-btn img {
+    vertical-align: baseline;
+    height: 20px;
+}
+
+
+
+
+
+
+
+
diff --git a/backend/static/img/light-bulb-2-16.png b/backend/static/img/light-bulb-2-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bd48a6845203d0f25bfef2f4950959350f7d169
GIT binary patch
literal 374
zcmV-+0g3*JP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000ie
z000ie0hKEb8vp<SC`m*?R5*=&(myXmQ4j_2AN#Teilriv6^%q9(JK`ay+TE!Q3%nh
zd<M~pauXi}C50#?1dTt1#AYiiDBf(`ecp4DN#@R+J9p;X;V<fmzYtcI1GSO@>*(SY
z-*`tGb6CbjN**XFkYNlX$?Iq6;0>QCc`)&J<5GrgtfGlKEJZ8}&Q4he<56%6x0uEW
zuH)4vHgSM2JQp?SU?SR|!X93NEVP)$6CSEG*uW)ju#(K1;W)Zj!jU9V)MO^QsN*Bz
zz3=<duUr2?uJ({zxE3bET9IE2PGx~B%*wy3jp49%bTuEGf6>5Uw7nlzk65EfE?XpW
zvDWYy=iV6iMPgCJ9v(63cf`@M%ly?K#kqV>YB;ST{a4_+!tX=X2;|GuP5e^)01CS~
Uo=8iWb^rhX07*qoM6N<$g1i)-%>V!Z

literal 0
HcmV?d00001

diff --git a/backend/static/img/moon-4-16.png b/backend/static/img/moon-4-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..e83915b97f72e933415bbab132c266828be07a9d
GIT binary patch
literal 295
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F5M?jcysy3fAQ1GUw
zi(`mI@7zo4y_y4Mj(y~RFT)eob10#QwLRht+hGF^v-|@|8@m$CH#{-zn4VxF!Q*zY
z^&#t?gBuKZjCk5MZzx~z_;2~Q=3u^>{rjI6%xn99`4BJP2fd=I8A=ay#O^uII>_k0
zv1z$|!GS`anoW%CF;`oKW1iiae_Z9q3C|DRe|I&lmvKD6UG|D2jkT$vdUg7=bJ?8=
z4<!F8?P%m{Q|11(<Cx;C$VFys7OA0&TwS{s6>q;+w3~HKQn{|j2LZ<OPp{Y><gge0
qFuSX-#PAr){h1$x`*&>kxYpaQKV?!|u8b|vlMJ4&elF{r5}E*T=Xg2*

literal 0
HcmV?d00001

diff --git a/backend/templates/base.html b/backend/templates/base.html
index 316be10..d6259cb 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,6 +11,7 @@
         </title>
         <link rel="stylesheet"
               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+        <link rel="stylesheet" href="/static/css/app.css"/>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -23,14 +24,10 @@
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-        <style>
-            .page {
-                background-color: #f4f6fc;
-            }
-        </style>
+    {% block extra_css %}{% endblock extra_css %}
     </head>
     <body class="page">
-        {% block content %}
+    <div id="theme-toggle-app">
             <div class="banner">
                 <nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4"
                      data-bs-theme="light"
@@ -57,8 +54,63 @@
                             </div>
                         </div>
                     </div>
+                    <div class="toggle-btn">
+                        <theme-toggle></theme-toggle>
+                    </div>
                 </nav>
             </div>
-        {% endblock content %}
+    </div>
+       {% block content %} {% endblock content %}
+    <script>
+    const ThemeToggle = {
+        template: `
+            <img src="/static/img/light-bulb-2-16.png" alt="Light theme"/>
+                <label class="switch">
+                    <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme">
+                    <span class="slider round"></span>
+                </label>
+                <img src="/static/img/moon-4-16.png" alt="Dark theme"/>
+        `,
+        data() {
+            return {
+                isDarkTheme: false
+            }
+        },
+        mounted() {
+            const currentTheme = localStorage.getItem('theme')
+            if (currentTheme) {
+                this.isDarkTheme = currentTheme === 'dark'
+                this.applyTheme()
+            }
+        },
+        methods: {
+            toggleTheme() {
+                this.applyTheme()
+                localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
+            },
+            applyTheme() {
+                //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
+                if (this.isDarkTheme){
+                    document.body.classList.remove("page");
+                    document.body.classList.add("page-dark");
+
+                }else{
+                     document.body.classList.remove("page-dark");
+                    document.body.classList.add("page");
+                }
+
+            }
+        }
+    }
+
+    const themeToggleApp = Vue.createApp({
+        components: {
+            ThemeToggle
+        }
+    })
+
+    themeToggleApp.mount('#theme-toggle-app')
+    </script>
+    {% block extra_js %}{% endblock extra_js %}
     </body>
 </html>

From 27a246957276100b42931d821a722a9bd9d1d1dc Mon Sep 17 00:00:00 2001
From: Pranav <vedmapranav@gmail.com>
Date: Tue, 1 Oct 2024 23:00:42 -0400
Subject: [PATCH 2/4] fix pre-commit issues

---
 backend/static/css/app.css  |  8 ----
 backend/templates/base.html | 95 +++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/backend/static/css/app.css b/backend/static/css/app.css
index d248f8f..f130de3 100644
--- a/backend/static/css/app.css
+++ b/backend/static/css/app.css
@@ -87,11 +87,3 @@ input:checked + .slider:before {
     vertical-align: baseline;
     height: 20px;
 }
-
-
-
-
-
-
-
-
diff --git a/backend/templates/base.html b/backend/templates/base.html
index d6259cb..31972bc 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,7 +11,7 @@
         </title>
         <link rel="stylesheet"
               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-        <link rel="stylesheet" href="/static/css/app.css"/>
+        <link rel="stylesheet" href="/static/css/app.css" />
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -24,10 +24,11 @@
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    {% block extra_css %}{% endblock extra_css %}
+        {% block extra_css %}
+        {% endblock extra_css %}
     </head>
     <body class="page">
-    <div id="theme-toggle-app">
+        <div id="theme-toggle-app">
             <div class="banner">
                 <nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4"
                      data-bs-theme="light"
@@ -59,58 +60,60 @@
                     </div>
                 </nav>
             </div>
-    </div>
-       {% block content %} {% endblock content %}
-    <script>
-    const ThemeToggle = {
-        template: `
-            <img src="/static/img/light-bulb-2-16.png" alt="Light theme"/>
+        </div>
+        {% block content %}
+        {% endblock content %}
+        <script>
+            const ThemeToggle = {
+                template: `
+            <img src="/static/img/light-bulb-2-16.png" alt="Light theme" />
                 <label class="switch">
                     <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme">
                     <span class="slider round"></span>
                 </label>
-                <img src="/static/img/moon-4-16.png" alt="Dark theme"/>
+                <img src="/static/img/moon-4-16.png" alt="Dark theme" />
         `,
-        data() {
-            return {
-                isDarkTheme: false
-            }
-        },
-        mounted() {
-            const currentTheme = localStorage.getItem('theme')
-            if (currentTheme) {
-                this.isDarkTheme = currentTheme === 'dark'
-                this.applyTheme()
-            }
-        },
-        methods: {
-            toggleTheme() {
-                this.applyTheme()
-                localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
-            },
-            applyTheme() {
-                //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
-                if (this.isDarkTheme){
-                    document.body.classList.remove("page");
-                    document.body.classList.add("page-dark");
+                data() {
+                    return {
+                        isDarkTheme: false
+                    }
+                },
+                mounted() {
+                    const currentTheme = localStorage.getItem('theme')
+                    if (currentTheme) {
+                        this.isDarkTheme = currentTheme === 'dark'
+                        this.applyTheme()
+                    }
+                },
+                methods: {
+                    toggleTheme() {
+                        this.applyTheme()
+                        localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
+                    },
+                    applyTheme() {
+                        //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
+                        if (this.isDarkTheme) {
+                            document.body.classList.remove("page");
+                            document.body.classList.add("page-dark");
 
-                }else{
-                     document.body.classList.remove("page-dark");
-                    document.body.classList.add("page");
-                }
+                        } else {
+                            document.body.classList.remove("page-dark");
+                            document.body.classList.add("page");
+                        }
 
+                    }
+                }
             }
-        }
-    }
 
-    const themeToggleApp = Vue.createApp({
-        components: {
-            ThemeToggle
-        }
-    })
+            const themeToggleApp = Vue.createApp({
+                components: {
+                    ThemeToggle
+                }
+            })
 
-    themeToggleApp.mount('#theme-toggle-app')
-    </script>
-    {% block extra_js %}{% endblock extra_js %}
+            themeToggleApp.mount('#theme-toggle-app')
+        </script>
+        {% block extra_js %}
+        {% endblock extra_js %}
     </body>
 </html>

From 3a0e50145568dbb8ee85a2c0e94c96fd05a3b482 Mon Sep 17 00:00:00 2001
From: Pranav <vedmapranav@gmail.com>
Date: Wed, 2 Oct 2024 00:08:17 -0400
Subject: [PATCH 3/4] Revert "fix pre-commit issues"

This reverts commit 27a246957276100b42931d821a722a9bd9d1d1dc.
---
 backend/static/css/app.css  |  8 ++++
 backend/templates/base.html | 95 ++++++++++++++++++-------------------
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/backend/static/css/app.css b/backend/static/css/app.css
index f130de3..d248f8f 100644
--- a/backend/static/css/app.css
+++ b/backend/static/css/app.css
@@ -87,3 +87,11 @@ input:checked + .slider:before {
     vertical-align: baseline;
     height: 20px;
 }
+
+
+
+
+
+
+
+
diff --git a/backend/templates/base.html b/backend/templates/base.html
index 31972bc..d6259cb 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,7 +11,7 @@
         </title>
         <link rel="stylesheet"
               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-        <link rel="stylesheet" href="/static/css/app.css" />
+        <link rel="stylesheet" href="/static/css/app.css"/>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -24,11 +24,10 @@
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-        {% block extra_css %}
-        {% endblock extra_css %}
+    {% block extra_css %}{% endblock extra_css %}
     </head>
     <body class="page">
-        <div id="theme-toggle-app">
+    <div id="theme-toggle-app">
             <div class="banner">
                 <nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4"
                      data-bs-theme="light"
@@ -60,60 +59,58 @@
                     </div>
                 </nav>
             </div>
-        </div>
-        {% block content %}
-        {% endblock content %}
-        <script>
-            const ThemeToggle = {
-                template: `
-            <img src="/static/img/light-bulb-2-16.png" alt="Light theme" />
+    </div>
+       {% block content %} {% endblock content %}
+    <script>
+    const ThemeToggle = {
+        template: `
+            <img src="/static/img/light-bulb-2-16.png" alt="Light theme"/>
                 <label class="switch">
                     <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme">
                     <span class="slider round"></span>
                 </label>
-                <img src="/static/img/moon-4-16.png" alt="Dark theme" />
+                <img src="/static/img/moon-4-16.png" alt="Dark theme"/>
         `,
-                data() {
-                    return {
-                        isDarkTheme: false
-                    }
-                },
-                mounted() {
-                    const currentTheme = localStorage.getItem('theme')
-                    if (currentTheme) {
-                        this.isDarkTheme = currentTheme === 'dark'
-                        this.applyTheme()
-                    }
-                },
-                methods: {
-                    toggleTheme() {
-                        this.applyTheme()
-                        localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
-                    },
-                    applyTheme() {
-                        //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
-                        if (this.isDarkTheme) {
-                            document.body.classList.remove("page");
-                            document.body.classList.add("page-dark");
-
-                        } else {
-                            document.body.classList.remove("page-dark");
-                            document.body.classList.add("page");
-                        }
+        data() {
+            return {
+                isDarkTheme: false
+            }
+        },
+        mounted() {
+            const currentTheme = localStorage.getItem('theme')
+            if (currentTheme) {
+                this.isDarkTheme = currentTheme === 'dark'
+                this.applyTheme()
+            }
+        },
+        methods: {
+            toggleTheme() {
+                this.applyTheme()
+                localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
+            },
+            applyTheme() {
+                //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
+                if (this.isDarkTheme){
+                    document.body.classList.remove("page");
+                    document.body.classList.add("page-dark");
 
-                    }
+                }else{
+                     document.body.classList.remove("page-dark");
+                    document.body.classList.add("page");
                 }
+
             }
+        }
+    }
 
-            const themeToggleApp = Vue.createApp({
-                components: {
-                    ThemeToggle
-                }
-            })
+    const themeToggleApp = Vue.createApp({
+        components: {
+            ThemeToggle
+        }
+    })
 
-            themeToggleApp.mount('#theme-toggle-app')
-        </script>
-        {% block extra_js %}
-        {% endblock extra_js %}
+    themeToggleApp.mount('#theme-toggle-app')
+    </script>
+    {% block extra_js %}{% endblock extra_js %}
     </body>
 </html>

From 671b093f1ccf1821a41d5f730ea7c6a6a7a01cc5 Mon Sep 17 00:00:00 2001
From: Pranav <vedmapranav@gmail.com>
Date: Wed, 2 Oct 2024 13:14:34 -0400
Subject: [PATCH 4/4] Fixed the pre-commit issues got Pass on all checks in
 pre-commit

---
 backend/static/css/app.css  |  8 ----
 backend/templates/base.html | 95 +++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/backend/static/css/app.css b/backend/static/css/app.css
index d248f8f..f130de3 100644
--- a/backend/static/css/app.css
+++ b/backend/static/css/app.css
@@ -87,11 +87,3 @@ input:checked + .slider:before {
     vertical-align: baseline;
     height: 20px;
 }
-
-
-
-
-
-
-
-
diff --git a/backend/templates/base.html b/backend/templates/base.html
index d6259cb..31972bc 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,7 +11,7 @@
         </title>
         <link rel="stylesheet"
               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-        <link rel="stylesheet" href="/static/css/app.css"/>
+        <link rel="stylesheet" href="/static/css/app.css" />
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -24,10 +24,11 @@
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    {% block extra_css %}{% endblock extra_css %}
+        {% block extra_css %}
+        {% endblock extra_css %}
     </head>
     <body class="page">
-    <div id="theme-toggle-app">
+        <div id="theme-toggle-app">
             <div class="banner">
                 <nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4"
                      data-bs-theme="light"
@@ -59,58 +60,60 @@
                     </div>
                 </nav>
             </div>
-    </div>
-       {% block content %} {% endblock content %}
-    <script>
-    const ThemeToggle = {
-        template: `
-            <img src="/static/img/light-bulb-2-16.png" alt="Light theme"/>
+        </div>
+        {% block content %}
+        {% endblock content %}
+        <script>
+            const ThemeToggle = {
+                template: `
+            <img src="/static/img/light-bulb-2-16.png" alt="Light theme" />
                 <label class="switch">
                     <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme">
                     <span class="slider round"></span>
                 </label>
-                <img src="/static/img/moon-4-16.png" alt="Dark theme"/>
+                <img src="/static/img/moon-4-16.png" alt="Dark theme" />
         `,
-        data() {
-            return {
-                isDarkTheme: false
-            }
-        },
-        mounted() {
-            const currentTheme = localStorage.getItem('theme')
-            if (currentTheme) {
-                this.isDarkTheme = currentTheme === 'dark'
-                this.applyTheme()
-            }
-        },
-        methods: {
-            toggleTheme() {
-                this.applyTheme()
-                localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
-            },
-            applyTheme() {
-                //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
-                if (this.isDarkTheme){
-                    document.body.classList.remove("page");
-                    document.body.classList.add("page-dark");
+                data() {
+                    return {
+                        isDarkTheme: false
+                    }
+                },
+                mounted() {
+                    const currentTheme = localStorage.getItem('theme')
+                    if (currentTheme) {
+                        this.isDarkTheme = currentTheme === 'dark'
+                        this.applyTheme()
+                    }
+                },
+                methods: {
+                    toggleTheme() {
+                        this.applyTheme()
+                        localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
+                    },
+                    applyTheme() {
+                        //document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
+                        if (this.isDarkTheme) {
+                            document.body.classList.remove("page");
+                            document.body.classList.add("page-dark");
 
-                }else{
-                     document.body.classList.remove("page-dark");
-                    document.body.classList.add("page");
-                }
+                        } else {
+                            document.body.classList.remove("page-dark");
+                            document.body.classList.add("page");
+                        }
 
+                    }
+                }
             }
-        }
-    }
 
-    const themeToggleApp = Vue.createApp({
-        components: {
-            ThemeToggle
-        }
-    })
+            const themeToggleApp = Vue.createApp({
+                components: {
+                    ThemeToggle
+                }
+            })
 
-    themeToggleApp.mount('#theme-toggle-app')
-    </script>
-    {% block extra_js %}{% endblock extra_js %}
+            themeToggleApp.mount('#theme-toggle-app')
+        </script>
+        {% block extra_js %}
+        {% endblock extra_js %}
     </body>
 </html>