Merge pull request #1549 from tryzealot/feature/upgrade-adminlte-4

Upgrade adminlte 4

Gemfile

@@ -69,9 +69,6 @@ gem 'pghero', '~> 3.6.0'
 gem 'sentry-ruby', '~> 5.18.0'
 gem 'sentry-rails', '~> 5.18.1'
 
-## Jenkins SDK
-gem 'improved_jenkins_client', '~> 1.6.7'
-
 # Background job
 gem 'good_job', '~> 3.30.0'
 gem 'activejob-status', '~> 1.0.2'

Gemfile.lock

@@ -131,8 +131,6 @@ GEM
       ssrf_filter (~> 1.0)
     case_transform (0.2)
       activesupport
-    chef-utils (18.4.12)
-      concurrent-ruby
     childprocess (5.0.0)
     chunky_png (1.4.0)
     coderay (1.1.3)
@@ -234,14 +232,6 @@ GEM
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
     image_size (3.4.0)
-    improved_jenkins_client (1.6.7)
-      addressable (~> 2.7)
-      json (>= 1.0)
-      mixlib-shellout (>= 1.1.0)
-      nokogiri (~> 1.6)
-      socksify (>= 1.7.0)
-      terminal-table (>= 1.4.0)
-      thor (>= 0.16.0)
     interception (0.5)
     io-console (0.7.2)
     iostruct (0.1.2)
@@ -312,8 +302,6 @@ GEM
     mini_mime (1.1.5)
     mini_portile2 (2.8.7)
     minitest (5.24.1)
-    mixlib-shellout (3.2.8)
-      chef-utils
     msgpack (1.7.2)
     multi_json (1.15.0)
     multi_xml (0.7.1)
@@ -574,7 +562,6 @@ GEM
       actionpack (>= 3.1)
       railties (>= 3.1)
       slim (>= 3.0, < 6.0, != 5.0.0)
-    socksify (1.7.1)
     solid_cache (0.6.0)
       activejob (>= 7)
       activerecord (>= 7)
@@ -592,8 +579,6 @@ GEM
     sys-filesystem (1.5.0)
       ffi (~> 1.1)
     temple (0.10.3)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
     thor (1.3.1)
     tilt (2.4.0)
     timeout (0.4.1)
@@ -673,7 +658,6 @@ DEPENDENCIES
   graphiql-rails
   graphql (~> 2.3.6)
   health_check (~> 3.1.0)
-  improved_jenkins_client (~> 1.6.7)
   jb (~> 0.8.2)
   jsbundling-rails (~> 1.3)
   kaminari (~> 1.2.2)

app/assets/stylesheets/_button.scss

@@ -0,0 +1,74 @@
+:root {
+  --bs-btn-success-bg: #28a745;
+  --bs-btn-success-color: #fff;
+  --bs-btn-danger-bg: #dc3545;
+  --bs-btn-danger-color: #fff;
+}
+
+// TODO: improve color in light mode
+// .btn-primary {
+//   --bs-btn-font-weight: 600;
+//   --bs-btn-color: var(--bs-white);
+//   --bs-btn-bg: var(--bd-violet-bg);
+//   --bs-btn-border-color: var(--bd-violet-bg);
+//   --bs-btn-hover-color: var(--bs-white);
+//   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+//   --bs-btn-active-color: var(--bs-btn-hover-color);
+// }
+
+.btn-secondary {
+  --bs-btn-bg: #f8f9fa !important;
+  --bs-btn-color: #444 !important;
+  --bs-btn-border-color: var(--bs-border-color-translucent) !important;
+  --bs-btn-hover-bg: #e9ecef !important;
+}
+
+@include color-mode(dark) {
+  --bs-primary-bg: #3f6791;
+  --bs-primary-color: #fff;
+  --bs-primary-border-color: #35597f;
+  --bs-primary-hover-bg: #335476;
+  --bs-primary-hover-color: #fff;
+  --bs-primary-hover-border-color: #304e6d;
+  --bs-success-bg: #1c6543;
+  --bs-success-color: #fff;
+  --bs-success-border-color: #186340;
+  --bs-warning-bg: #e99d24;
+  --bs-warning-color: #fff;
+  --bs-wanring-border-color: #997404;
+  --bs-info-bg: #3498db;
+  --bs-danger-bg: #e74c3c;
+  --bs-outline-secondary-color: #cecece;
+
+  .btn-primary {
+    background-color: var(--bs-primary-bg);
+    color: var(--bs-primary-color);
+    border-color: var(--bs-primary-border-color);
+
+    &:hover {
+      background-color: var(--bs-primary-hover-bg);
+      color: var(--bs-primary-hover-color);
+      border-color: var(--bs-primary-hover-border-color);
+    }
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #6c757d !important;
+    --bs-btn-color: var(--bs-body-color) !important;
+    --bs-btn-border-color: var(--bs-border-color-translucent) !important;
+  }
+
+  .btn-success {
+    background-color: var(--bs-success-bg);
+    color: var(--bs-success-color);
+    border-color: var(--bs-success-border-color);
+  }
+
+  .btn-danger {
+    background-color: var(--bs-danger-bg);
+  }
+
+  .btn-outline-secondary {
+    color: var(--bs-outline-secondary-color);
+  }
+}

app/assets/stylesheets/_root.scss

@@ -0,0 +1,37 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+    "background": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+@import "bootstrap/scss/utilities/api";

app/assets/stylesheets/admin/backups.scss

@@ -12,7 +12,7 @@
   }
 }
 
-.dark-mode {
+@include color-mode(dark) {
   .backups,
   .backup {
     .run-backup,

app/assets/stylesheets/admin/settings.scss

@@ -73,5 +73,9 @@
       background-color: #e9ecef;
       color: gray;
     }
+
+    pre {
+      padding: 0.75rem;
+    }
   }
 }

app/assets/stylesheets/admin/system_info.scss

@@ -54,7 +54,9 @@ dl.system-info {
   }
 }
 
-.dark-mode dl.system-info dd pre {
-  background-color: #2f2936;
-  color: #f7f8f9;
+@include color-mode(dark) {
+  dl.system-info dd pre {
+    background-color: #181818;
+    color: #f7f8f9;
+  }
 }

app/assets/stylesheets/adminlte.scss

@@ -1,14 +1,53 @@
 @import "bootstrap/scss/bootstrap";
-@import "bootstrap/scss/functions";
-@import "admin-lte/build/scss/_bootstrap-variables";
-
-@import "admin-lte/build/scss/variables";
-@import "admin-lte/build/scss/variables-alt";
-@import "admin-lte/build/scss/mixins";
-
-@import "admin-lte/build/scss/parts/core";
-@import "admin-lte/build/scss/parts/components";
-@import "admin-lte/build/scss/parts/extra-components";
-@import "admin-lte/build/scss/parts/pages";
-@import "admin-lte/build/scss/parts/plugins";
-@import "admin-lte/build/scss/parts/miscellaneous";
+@import "admin-lte/src/scss/adminlte";
+
+@include color-mode(dark) {
+  --bs-border-color: rgba(255, 255, 255, 0.15);
+
+  // input {
+  //   background-color: #393a3c !important;
+  //   border-color: #505356 !important;
+  //   color: #999 !important;
+  // }
+
+  .app-header {
+    border-color: var(--bs-border-color) !important;
+  }
+
+  .text-bg-info {
+    background-color: var(--bs-info-bg) !important;
+  }
+
+  .card-info {
+    .card-header {
+      background-color: var(--bs-info-bg) !important;
+      color: #fff !important;
+    }
+  }
+
+  .card-danger {
+    .card-header {
+      background-color: var(--bs-danger-bg) !important;
+    }
+  }
+
+  .card-warning {
+    border-top: 3px solid var(--bs-warning-border-subtle);
+
+    .card-header {
+      background-color: var(--bs-warning-bg-subtle) !important;
+      color: var(--bd-callout-color) !important;
+    }
+  }
+
+  .card-header {
+    border-color: var(--bs-border-color) !important;
+  }
+
+  .pagination {
+    .active > a {
+      background-color: var(--bs-primary-bg);
+      border-color: var(--bs-primary-bg);
+    }
+  }
+}

app/assets/stylesheets/app.scss

@@ -14,13 +14,13 @@ $ios-install-issue-color: rgb(245, 39, 90);
 }
 
 .widget-app {
+  @extend .mb-4;
+
   .app-icon {
     margin: 0 auto;
     padding: 3px;
-    width: 100px;
-
-    max-width: 120px;
-    max-height: 120px;
+    width: 120px;
+    height: 120px;
   }
 
   .profile-username {
@@ -146,43 +146,14 @@ $ios-install-issue-color: rgb(245, 39, 90);
     }
   }
 
-  .install-buttons {
+  .action-buttons {
     .btn {
       margin-bottom: 10px;
     }
   }
 }
 
-.callout, .changelog {
-  ul {
-    padding-inline-start: 24px;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  a {
-    color: #212529;
-    text-decoration: underline;
-
-    &:hover {
-      color: #007bff;
-    }
-  }
-
-  .dark-mode & {
-    a {
-      color: #fff;
-
-      &:hover {
-        color: #64adfb;
-      }
-    }
-  }
-}
-
-.dark-mode {
+@include color-mode(dark) {
   .app-icon {
     background-color: #fff;
   }

app/assets/stylesheets/application.sass.scss

@@ -1,3 +1,7 @@
+// base
+@import '_root';
+@import '_button';
+
 // frameworks
 @import 'adminlte';
 @import 'fontawesome';