ui - refactor theme handling in templates to use a unified 'theme' va…

…riable and move upgrade to pro button
bunkerity · Nov 13, 2024 · 1052e15 · 1052e15
1 parent d107dd4
commit 1052e15
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 71 deletions.
diff --git a/src/ui/app/static/css/overrides.css b/src/ui/app/static/css/overrides.css
@@ -171,10 +171,7 @@ button.list-group-item-secondary.active {
 }
 
 .buy-now .btn-buy-now {
-  position: fixed;
-  bottom: 3rem;
-  right: 1.625rem;
-  z-index: 1080;
+  position: unset;
   box-shadow: 0 1px 20px 1px var(--bs-primary); /* Initial shadow */
   background-color: var(--bs-bw-green); /* Initial background color */
   color: #fff;
@@ -306,10 +303,16 @@ button.list-group-item-secondary.active {
   animation: fadeIn 1.5s infinite alternate;
 } */
 
+.btn-responsive {
+  padding: 6px 14px;
+  font-size: 90%;
+  line-height: 1.2;
+}
+
 @media (max-width: 768px) {
   .btn-responsive {
-    padding: 4px 9px;
-    font-size: 80%;
+    padding: 2px 6px;
+    font-size: 70%;
     line-height: 1;
   }
 
@@ -321,9 +324,9 @@ button.list-group-item-secondary.active {
 
 @media (min-width: 769px) and (max-width: 992px) {
   .btn-responsive {
-    padding: 8px 18px;
-    font-size: 90%;
-    line-height: 1.2;
+    padding: 4px 9px;
+    font-size: 80%;
+    line-height: 1.1;
   }
 }
 

diff --git a/src/ui/app/static/js/utils.js b/src/ui/app/static/js/utils.js
@@ -439,6 +439,7 @@ $(document).ready(() => {
         .addClass("bg-dark-subtle")
         .removeClass("bg-light-subtle");
       $("html").attr("data-bs-theme", "dark");
+      $(".dark-mode-toggle-icon").removeClass("bx-sun").addClass("bx-moon");
     } else {
       $("html").removeClass("dark-style").addClass("light-style");
       $(".btn-outline-light")
@@ -450,6 +451,7 @@ $(document).ready(() => {
         .addClass("bg-light-subtle")
         .removeClass("bg-dark-subtle");
       $("html").attr("data-bs-theme", null);
+      $(".dark-mode-toggle-icon").removeClass("bx-moon").addClass("bx-sun");
     }
 
     $("#theme").val(darkMode ? "dark" : "light");

diff --git a/src/ui/app/templates/base.html b/src/ui/app/templates/base.html
@@ -24,9 +24,9 @@
 } %}
 <!DOCTYPE html>
 <html lang="en"
-      class="{{ current_user.theme }}-style layout-navbar-fixed layout-menu-fixed"
+      class="{{ theme }}-style layout-navbar-fixed layout-menu-fixed"
       data-theme="theme-default"
-      {% if current_user.theme == 'dark' %}data-bs-theme="dark"{% endif %}>
+      {% if theme == 'dark' %}data-bs-theme="dark"{% endif %}>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport"
@@ -67,7 +67,7 @@
             <link rel="stylesheet"
                   href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.css') }}"
                   nonce="{{ style_nonce }}" />
-            {% if current_user.theme == 'dark' %}
+            {% if theme == 'dark' %}
                 <link rel="stylesheet"
                       href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.dark.css') }}"
                       nonce="{{ style_nonce }}" />
@@ -126,7 +126,7 @@
     </head>
     <body>
         <input type="hidden" id="is-read-only" value="{{ is_readonly }}" />
-        <input type="hidden" id="theme" value="{{ current_user.theme }}" />
+        <input type="hidden" id="theme" value="{{ theme }}" />
         <!-- prettier-ignore -->
         {% if current_endpoint != "loading" %}
             {% include "flash.html" %}

diff --git a/src/ui/app/templates/dashboard.html b/src/ui/app/templates/dashboard.html
@@ -28,7 +28,7 @@
                                     </button>
                                     <!-- Collapsible floating menu -->
                                     <div class="collapse mt-2" id="mode-selection-floating">
-                                        <ul class="nav nav-pills flex-column bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} p-2 rounded shadow-sm mode-selection-menu"
+                                        <ul class="nav nav-pills flex-column bg-{% if theme == 'light' %}white{% else %}dark{% endif %} p-2 rounded shadow-sm mode-selection-menu"
                                             role="tablist">
                                             {% if current_endpoint != "global-config" %}
                                                 <li class="nav-item mb-1" role="presentation">
@@ -122,7 +122,7 @@
                             <ul class="d-flex mb-0 list-unstyled">
                                 <li class="me-3">
                                     <a role="button"
-                                       class="btn btn-sm btn-outline-{% if current_user.theme == 'light' %}dark{% else %}light{% endif %} d-flex align-items-center h-100"
+                                       class="btn btn-sm btn-outline-{% if theme == 'light' %}dark{% else %}light{% endif %} d-flex align-items-center h-100"
                                        aria-pressed="true"
                                        href="https://panel.bunkerweb.io/order/support/?utm_campaign=self&utm_source=ui"
                                        target="_blank"
@@ -153,7 +153,7 @@
                                 <li class="position-relative">
                                     <button id="news-button"
                                             type="button"
-                                            class="btn btn-sm btn-{% if current_user.theme == 'light' %}dark{% else %}light{% endif %} text-uppercase d-flex align-items-center"
+                                            class="btn btn-sm btn-{% if theme == 'light' %}dark{% else %}light{% endif %} text-uppercase d-flex align-items-center"
                                             aria-pressed="true"
                                             data-bs-toggle="offcanvas"
                                             data-bs-target="#side-offcanvas-news"
@@ -170,23 +170,6 @@
                     {% include "footer.html" %}
                     {% include "sidebar-notifications.html" %}
                     {% include "sidebar-news.html" %}
-                    {% if not is_pro_version %}
-                        <div class="buy-now courier-prime">
-                            <a class="btn btn-responsive btn-buy-now"
-                               role="button"
-                               aria-pressed="true"
-                               href="https://panel.bunkerweb.io/order/bunkerweb-pro?utm_campaign=self&utm_source=ui"
-                               target="_blank"
-                               rel="noopener">
-                                <span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
-                                    <img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
-                                         alt="Pro plugin"
-                                         width="18px"
-                                         height="15.5px">
-                                </span>
-                            Upgrade to PRO</a>
-                        </div>
-                    {% endif %}
                     <div class="content-backdrop fade"></div>
                 </div>
                 <!-- Content wrapper -->

diff --git a/src/ui/app/templates/flash.html b/src/ui/app/templates/flash.html
@@ -8,7 +8,7 @@
         {% endif %}
         <!-- flash message-->
         {% for category, message in messages %}
-            <div class="bs-toast toast fade show bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}"
+            <div class="bs-toast toast fade show bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true">

diff --git a/src/ui/app/templates/instances.html b/src/ui/app/templates/instances.html
@@ -141,7 +141,7 @@
         </table>
     </div>
     <div id="feedback-toast"
-         class="bs-toast toast fade bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border"
+         class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"

diff --git a/src/ui/app/templates/loading.html b/src/ui/app/templates/loading.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block page %}
-    <div class="bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle">
+    <div class="bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle">
         <div class="login-background">
             <div class="container-xxl">
                 <div class="authentication-wrapper authentication-basic container-p-y">

diff --git a/src/ui/app/templates/login.html b/src/ui/app/templates/login.html
@@ -13,7 +13,7 @@
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
-                       {% if current_user.theme == "dark" %}checked{% endif %} />
+                       {% if theme == "dark" %}checked{% endif %} />
             </div>
             <label class="setting-checkbox-label mb-0 fw-bold text-secondary"
                    for="dark-mode-toggle">Dark</label>

diff --git a/src/ui/app/templates/menu.html b/src/ui/app/templates/menu.html
@@ -30,6 +30,34 @@
         "logs": {"url": url_for('logs'), "icon": "bx-file-find"},
         } %}
         <ul class="menu-inner py-1">
+            <!-- Dark mode toggle -->
+            <li class="menu-item mt-1 mb-1">
+                <div class="menu-link">
+                    <input type="hidden"
+                           id="csrf_token"
+                           name="csrf_token"
+                           value="{{ csrf_token() }}" />
+                    <i class="menu-icon tf-icons dark-mode-toggle-icon bx bx-{% if theme == "light" %}sun{% else %}moon{% endif %}"></i>
+                    <div class="d-flex align-items-center justify-content-center w-100 h-100">
+                        <label class="setting-checkbox-label me-2 mb-0"
+                               for="dark-mode-toggle">Light</label>
+                        <div class="form-check form-switch mb-0"
+                             {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The database is in readonly mode, therefore the theme cannot be changed"{% endif %}>
+                            <input id="dark-mode-toggle"
+                                   name="dark-mode-toggle"
+                                   class="form-check-input"
+                                   type="checkbox"
+                                   role="switch"
+                                   data-root-url="{{ url_for('profile') }}"
+                                   {% if theme == "dark" %}checked{% endif %}
+                                   {% if is_readonly %}disabled{% endif %} />
+                        </div>
+                        <label class="setting-checkbox-label mb-0"
+                               for="dark-mode-toggle">Dark</label>
+                    </div>
+                </div>
+            </li>
+            <!--/ Dark mode toggle -->
             {% for endpoint, item in menu_items.items() %}
                 <li class="menu-item{% if endpoint == current_endpoint or endpoint != 'plugins' and endpoint in request.path.split('/')[1] %} active{% endif %}{% if item.get('sub') and item.get('open', True) %} open{% endif %}">
                     <a href="{{ item['url'] }}"

diff --git a/src/ui/app/templates/navbar.html b/src/ui/app/templates/navbar.html
@@ -32,7 +32,7 @@
         {% elif current_endpoint == 'pro' %}
             {% set documentation_endpoint = "/professional-services" %}
         {% endif %}
-        <div class="navbar-nav align-items-center">
+        <div class="d-none d-md-inline navbar-nav align-items-center">
             <div class="nav-item d-flex align-items-center">
                 <a role="button"
                    class="btn btn-text-secondary p-1 p-md-2"
@@ -41,7 +41,7 @@
                    target="_blank"
                    rel="noopener">
                     <span class="tf-icons bx bx-file me-md-2"></span>
-                    <span class="d-none d-md-inline">Documentation</span>
+                    <span class="d-none d-lg-inline">Documentation</span>
                 </a>
                 <a role="button"
                    class="btn btn-outline-github p-1 p-md-2 ms-1 ms-md-2"
@@ -50,7 +50,7 @@
                    target="_blank"
                    rel="noreferrer">
                     <i class="tf-icons bx bxl-github me-md-2"></i>
-                    <span class="d-none d-md-inline">Github</span>
+                    <span class="d-none d-lg-inline">Github</span>
                 </a>
                 <a role="button"
                    class="btn btn-outline-discord p-1 p-md-2 ms-1 ms-md-2"
@@ -59,37 +59,31 @@
                    target="_blank"
                    rel="noopener">
                     <i class="tf-icons bx bxl-discord me-md-2"></i>
-                    <span class="d-none d-md-inline">Discord</span>
+                    <span class="d-none d-lg-inline">Discord</span>
                 </a>
             </div>
         </div>
         <!-- /Buttons -->
         <ul class="navbar-nav flex-row align-items-center ms-auto">
-            <!-- Dark mode toggle -->
+            {% if not is_pro_version %}
             <li class="nav-item lh-1 me-4">
-                <div class="d-flex mt-1">
-                    <input type="hidden"
-                           id="csrf_token"
-                           name="csrf_token"
-                           value="{{ csrf_token() }}" />
-                    <label class="setting-checkbox-label d-flex align-items-center ps-0"
-                           for="dark-mode-toggle">Light</label>
-                    <div class="form-switch ms-2 mb-1"
-                         {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The database is in readonly mode, therefore the theme cannot be changed"{% endif %}>
-                        <input id="dark-mode-toggle"
-                               name="dark-mode-toggle"
-                               class="form-check-input"
-                               type="checkbox"
-                               role="switch"
-                               data-root-url="{{ url_for('profile') }}"
-                               {% if current_user.theme == "dark" %}checked{% endif %}
-                               {% if is_readonly %}disabled{% endif %} />
-                    </div>
-                    <label class="setting-checkbox-label d-flex align-items-center ps-0"
-                           for="dark-mode-toggle">Dark</label>
+                <div class="buy-now courier-prime">
+                    <a class="btn btn-responsive btn-buy-now"
+                        role="button"
+                        aria-pressed="true"
+                        href="https://panel.bunkerweb.io/order/bunkerweb-pro?utm_campaign=self&utm_source=ui"
+                        target="_blank"
+                        rel="noopener">
+                        <span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
+                            <img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
+                                    alt="Pro plugin"
+                                    width="18px"
+                                    height="15.5px">
+                        </span>
+                    Upgrade to PRO</a>
                 </div>
             </li>
-            <!--/ Dark mode toggle -->
+            {% endif %}
             <!-- Stars -->
             <li class="d-none d-md-inline nav-item lh-1 me-4">
                 <a class="github-button"

diff --git a/src/ui/app/templates/profile.html b/src/ui/app/templates/profile.html
@@ -173,7 +173,7 @@ <h5 class="card-header">Edit Profile</h5>
                 <div class="col-md-6">
                     <!-- Theme -->
                     <div class="card position-relative">
-                        <i class='bx bx-{% if current_user.theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3'></i>
+                        <i class='bx bx-{% if theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3'></i>
                         <h5 class="card-header">Change Theme</h5>
                         <div class="card-body pb-4">
                             <form method="POST" action="{{ profile_url }}/edit">
@@ -182,10 +182,10 @@ <h5 class="card-header">Change Theme</h5>
                                     <div class="col-md-12 form-floating">
                                         <select class="form-select" id="theme" name="theme">
                                             <option value="light"
-                                                    {% if current_user.theme == "light" %}selected{% endif %}>
+                                                    {% if theme == "light" %}selected{% endif %}>
                                                 Light
                                             </option>
-                                            <option value="dark" {% if current_user.theme == "dark" %}selected{% endif %}>Dark</option>
+                                            <option value="dark" {% if theme == "dark" %}selected{% endif %}>Dark</option>
                                         </select>
                                         <label for="theme">Theme</label>
                                     </div>

diff --git a/src/ui/app/templates/setup.html b/src/ui/app/templates/setup.html
@@ -25,7 +25,7 @@
                                        class="form-check-input"
                                        type="checkbox"
                                        role="switch"
-                                       {% if current_user.theme == "dark" %}checked{% endif %} />
+                                       {% if theme == "dark" %}checked{% endif %} />
                             </div>
                             <label class="setting-checkbox-label mb-0 fw-bold text-secondary"
                                    for="dark-mode-toggle">Dark</label>
@@ -949,7 +949,7 @@ <h6 class="mt-2 mb-1 fw-bold">2FA Setup</h6>
             </div>
         </div>
         <div id="feedback-toast"
-             class="bs-toast toast fade bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border"
+             class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"

diff --git a/src/ui/app/templates/sidebar-news.html b/src/ui/app/templates/sidebar-news.html
@@ -57,7 +57,7 @@
         </div>
     </div>
     <!-- Newsletter Signup Section -->
-    <div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
+    <div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
         <h5 class="mb-3 text-primary">Join the Newsletter</h5>
         <form action="https://bunkerity.us1.list-manage.com/subscribe/post?u=ec5b1577cf427972b9bd491a6&id=37076d9d67"
               method="POST">

diff --git a/src/ui/app/templates/sidebar-notifications.html b/src/ui/app/templates/sidebar-notifications.html
@@ -54,7 +54,7 @@
                     {% set content = message[0] %}
                     {% set category = message[1] %}
                     {% set datetime = message[2] %}
-                    <div class="col-12 bs-toast toast show bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}">
+                    <div class="col-12 bs-toast toast show bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}">
                         <div class="toast-header d-flex align-items-center{% if category == 'error' %} text-danger{% elif category == 'warning' %} text-warning{% else %} text-primary{% endif %}">
                             <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell me-2"></i>
                             <span class="fw-medium me-auto">
@@ -78,7 +78,7 @@
         {% endif %}
     </div>
     <!-- Newsletter Signup Section -->
-    <div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
+    <div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
         <h5 class="mb-3 text-primary">Join the Newsletter</h5>
         <form action="https://bunkerity.us1.list-manage.com/subscribe/post?u=ec5b1577cf427972b9bd491a6&id=37076d9d67"
               method="POST">