Merge pull request #13940 from saraycp/adjust_colors

Adjust colors after Bootstrap 5 migration
openSUSE · Mar 3, 2023 · f26fc84 · f26fc84
2 parents 4b62fbf + 2916596
commit f26fc84
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 9 deletions.
diff --git a/src/api/app/assets/stylesheets/webui/application.scss b/src/api/app/assets/stylesheets/webui/application.scss
@@ -74,6 +74,7 @@
 @import 'request_show_redesign/build_results';
 @import 'accordion-reviews-component';
 @import 'tokens';
+@import 'colors';
 
 html {
     overflow-y: scroll !important;

diff --git a/src/api/app/assets/stylesheets/webui/colors.scss b/src/api/app/assets/stylesheets/webui/colors.scss
@@ -0,0 +1,3 @@
+.bg-gray-800 {
+  background-color: $gray-800;
+}
diff --git a/src/api/app/assets/stylesheets/webui/navbar.scss b/src/api/app/assets/stylesheets/webui/navbar.scss
@@ -1,9 +1,10 @@
 .navbar-dark {
+  // Dropdown: Your profile & Logout
   .dropdown-menu {
-    @extend .bg-dark;
+    background-color: $gray-800;
 
     .dropdown-item:hover {
-      @extend .bg-dark;
+      background-color: $gray-800;
       color: $gray-300;
     }
   }
@@ -19,7 +20,6 @@
       padding-left: 1rem;
       overflow-y: auto;
       visibility: hidden;
-      background-color: #343a40;
       color: $gray-400;
       transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
       transition: transform .3s ease-in-out, visibility .3s ease-in-out;

diff --git a/src/api/app/views/layouts/webui/_bottom_navigation.html.haml b/src/api/app/views/layouts/webui/_bottom_navigation.html.haml
@@ -1,4 +1,4 @@
-%nav.navbar.fixed-bottom.navbar-dark.bg-dark.border-top.border-gray-500.p-0
+%nav.navbar.fixed-bottom.navbar-dark.bg-gray-800.border-top.border-gray-500.p-0
   %ul.nav.justify-content-center.w-100.nav-justified
     - if User.session
       %li.nav-item

diff --git a/src/api/app/views/layouts/webui/_bottom_navigation_collapse.html.haml b/src/api/app/views/layouts/webui/_bottom_navigation_collapse.html.haml
@@ -1,4 +1,4 @@
-.navbar-collapse.navbar-dark{ class: "#{collapse_type}-collapse" }
+.navbar-collapse.navbar-dark.bg-gray-800{ class: "#{collapse_type}-collapse" }
   .navbar-nav
     .nav.justify-content-end.py-2
       %button.navbar-toggler{ type: 'button', 'data-toggle': collapse_type, aria: { expanded: 'false', label: "Toggle #{collapse_type}" } }

diff --git a/src/api/app/views/layouts/webui/_left_navigation_collapse_button.html.haml b/src/api/app/views/layouts/webui/_left_navigation_collapse_button.html.haml
@@ -1,4 +1,4 @@
-.bg-dark.border-top.border-gray-500#toggle-sidebar-button
+.navbar-dark.bg-gray-800.border-top.border-gray-500#toggle-sidebar-button
   %ul.nav.flex-column.ms-auto.pt-0.text-nowrap.menu-options
     %li.nav-item
       %a.nav-link{ type: 'button' }

diff --git a/src/api/app/views/layouts/webui/_top_navigation.html.haml b/src/api/app/views/layouts/webui/_top_navigation.html.haml
@@ -1,4 +1,4 @@
-%nav.navbar.navbar-dark.bg-dark.fixed-top
+%nav.navbar.navbar-dark.bg-gray-800.fixed-top
   .container-fluid.d-flex.flex-nowrap.justify-content-between.w-100
     = link_to(root_path, class: 'navbar-brand', alt: 'Logo') do
       = image_tag('obs-logo_small.svg')

diff --git a/src/api/app/views/layouts/webui/webui.html.haml b/src/api/app/views/layouts/webui/webui.html.haml
@@ -42,7 +42,7 @@
     #grid
       #top-navigation-area
         = render partial: 'layouts/webui/top_navigation'
-      .bg-dark#left-navigation-area{ class: "#{'collapsed' if sidebar_collapsed?}" }
+      .navbar-dark.bg-gray-800#left-navigation-area{ class: "#{'collapsed' if sidebar_collapsed?}" }
         = render partial: 'layouts/webui/left_navigation', locals: { spider_bot: @spider_bot }
         = render partial: 'layouts/webui/left_navigation_collapse_button'
       .d-flex.flex-column#content-area
@@ -77,7 +77,7 @@
 
       -# Collapsible menu shared between top and bottom navigation
       - if User.session
-        .navbar-collapse.watchlist-collapse.navbar-dark
+        .navbar-dark.bg-gray-800.navbar-collapse.watchlist-collapse
           = render WatchlistComponent.new(user: User.session!,
                                           bs_request: @bs_request,
                                           package: @package,