refactor: improve layout

Author: mrholek

src/js/colors.js

@@ -14,11 +14,11 @@ for (const element of document.querySelectorAll('.theme-color')) {
   table.innerHTML = `
       <table class="w-100">
         <tr>
-          <td class="text-muted">HEX:</td>
+          <td class="text-body-secondary">HEX:</td>
           <td class="font-weight-bold">${coreui.Utils.rgbToHex(color)}</td>
         </tr>
         <tr>
-          <td class="text-muted">RGB:</td>
+          <td class="text-body-secondary">RGB:</td>
           <td class="font-weight-bold">${color}</td>
         </tr>
       </table>

src/pug/_partials/header.pug

@@ -57,8 +57,7 @@ header.header.header-sticky.mb-4
           .avatar.avatar-md
             img.avatar-img(src="assets/img/avatars/8.jpg" alt="user@email.com")
         .dropdown-menu.dropdown-menu-end.pt-0
-          .dropdown-header.bg-body-tertiary.rounded-top
-            .fw-semibold Account
+          .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.rounded-top Account
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
@@ -83,7 +82,7 @@ header.header.header-sticky.mb-4
               |
             |  Comments
             span.badge.badge-sm.bg-warning.ms-2 42
-          .dropdown-header.bg-body-tertiary
+          .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.bg-body-tertiary
             .fw-semibold Settings
           a.dropdown-item(href="#")
             svg.icon.me-2

src/pug/_partials/sidebar.pug

@@ -1,7 +1,7 @@
 .sidebar.sidebar-fixed.border-end.sidebar-dark#sidebar
   .sidebar-header.border-bottom
     .sidebar-brand
-      svg.sidebar-brand-full(width="88" height="32" alt="CoreUI Logo")
+      svg.sidebar-brand-full(width="88" height="32" alt="CoreUI Logo" style="margin-left:3px")
         use(xlink:href="assets/brand/coreui.svg#full")
         |
       svg.sidebar-brand-narrow(width="32" height="32" alt="CoreUI Logo")

src/views/base/accordion.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/breadcrumb.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/cards.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/carousel.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/collapse.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/list-group.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">

src/views/base/navs-tabs.html

@@ -48,7 +48,7 @@
     <div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
       <div class="sidebar-header border-bottom">
         <div class="sidebar-brand">
-          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
+          <svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo" style="margin-left:3px">
             <use xlink:href="assets/brand/coreui.svg#full"></use>
           </svg>
           <svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
@@ -252,9 +252,7 @@
             <li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 <div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
               <div class="dropdown-menu dropdown-menu-end pt-0">
-                <div class="dropdown-header bg-body-tertiary rounded-top">
-                  <div class="fw-semibold">Account</div>
-                </div><a class="dropdown-item" href="#">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
                   </svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
@@ -267,7 +265,7 @@
                   <svg class="icon me-2">
                     <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
                   </svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
-                <div class="dropdown-header bg-body-tertiary">
+                <div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold bg-body-tertiary">
                   <div class="fw-semibold">Settings</div>
                 </div><a class="dropdown-item" href="#">
                   <svg class="icon me-2">