fix(ui): style fixes after bootstrap 5.3 update (#421)

LizardByte · Jan 21, 2024 · 6b016fe · 6b016fe
1 parent 0a272de
commit 6b016fe
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/web/templates/base.html b/web/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" data-bs-theme="dark">
     <head>
         {% if title %}
             <title>RetroArcher - {{ title }}</title>

diff --git a/web/templates/config.html b/web/templates/config.html
@@ -13,23 +13,23 @@
         <!-- Sidebar -->
         <div id="sidebar-wrapper" class="sidebar-expanded shadow"><!-- d-* hides the Sidebar in smaller devices. Its items can be kept on the Navbar 'Menu' -->
             <!-- Bootstrap List Group -->
-            <ul class="list-group">
-                <a href="#" data-toggle="sidebar-collapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center no-hover">
+            <ul class="list-group list-group-flush">
+                <a href="#" data-toggle="sidebar-collapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center no-hover border-0">
                     <div class="d-flex w-100 justify-content-start align-items-center">
                         <button class="btn btn-outline-light">
                             <span id="collapse-icon" class="fa fa-fw"></span>
                         </button>
                     </div>
                 </a>
                 <!-- Separator with title -->
-                <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center">
+                <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center border-0">
                     <small>{{ title }}</small>
                 </li>
                 <!-- /END Separator -->
                 <!-- Menu -->
                 {% for key in config_spec %}
                     {% if config_spec[key]['type'] == 'section' %}
-                        <a href="#{{ key.lower() }}" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
+                        <a href="#{{ key.lower() }}" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start border-0">
                             <div class="sidebar-item d-flex w-100 justify-content-start align-items-center">
                                 <span class="fa fa-fw fa-lg fa-{{ config_spec[key]['icon'] }} mx-3"></span>
                                 <span class="invisible">-</span> {# this invisible text keeps the sidebar spacing the same when collapsing/expanding #}
@@ -43,7 +43,7 @@
 
         <!-- Page Content -->
         <div id="page-content-wrapper" class="sidebar-expanded">
-            <div class="container px-5 my-5 text-white">
+            <div class="container px-5 my-5">
 
                 <form id="configForm" data-parsley-validate enctype="multipart/form-data" method="post">
                     {%- for key in config_spec -%}

diff --git a/web/templates/home.html b/web/templates/home.html
@@ -10,13 +10,13 @@
             <div class="container px-5 my-5">
                 <div class="row gx-5">
                     {% for chart in chart_types %}
-                        <div class="card h-100 shadow border-0 rounded-0 bg-dark text-white mb-5">
-                            <div class="card-header">{{ _(translations[chart]['bare']) }}</div>
+                        <div class="card h-100 shadow border-0 rounded-0 bg-dark mb-5">
+                            <div class="card-header bg-dark">{{ _(translations[chart]['bare']) }}</div>
                             <div class="card-body">
                                 <div class="chart-plotly" id="chart-{{chart}}"></div>
                             </div>
                             {% if translations[chart]['name'] %}
-                                <div class="card-footer">{{ translations[chart]['name'] }}</div>
+                                <div class="card-footer bg-dark">{{ translations[chart]['name'] }}</div>
                             {% endif %}
                         </div>
                         <br>