aligning midpoint adminlte template to figma designs (primary color n…

…ow lightblue, default and secondary also changed a bit)

gui/admin-gui/src/frontend/scss/_bootstrap-variables.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) 2022 Evolveum and contributors
+ *
+ * This work is dual-licensed under the Apache License 2.0
+ * and European Union Public License. See LICENSE file for details.
+ */
+
+// taken from adminlte and bootstrap, also based on figma
+$gray-700: #495057 !default;
+$lightblue: #3c8dbc !default;
+
+$midpoint-secondary: #818D98 !default;
+
+// override bootstrap defaults where necessary
+$primary: $lightblue;
+$secondary: $midpoint-secondary;
+
+$body-color: $gray-700;

gui/admin-gui/src/frontend/scss/midpoint-variables.scss → gui/admin-gui/src/frontend/scss/_midpoint-variables.scss

@@ -7,7 +7,12 @@
 
 @import "../../../node_modules/admin-lte/node_modules/bootstrap/scss/functions.scss";
 
+@import "bootstrap-variables";
+
 @import "../../../node_modules/admin-lte/build/scss/bootstrap-variables";
+
+@import "admin-lte-variables";
+
 @import "../../../node_modules/admin-lte/build/scss/variables";
 @import "../../../node_modules/admin-lte/build/scss/variables-alt";
 

gui/admin-gui/src/frontend/scss/bs-stepper-custom.scss

@@ -8,3 +8,11 @@
 .active .bs-stepper-circle {
   background-color: $lightblue;
 }
+
+.bs-stepper-circle {
+  background-color: $secondary;
+}
+
+.bs-stepper-label {
+  color: $secondary;
+}

gui/admin-gui/src/frontend/scss/midpoint.scss

@@ -1764,7 +1764,7 @@ th.debug-list-buttons {
 
   &:hover,
   &.active {
-    border: 2px solid $lightblue;
+    border: 2px solid $primary;
     border-radius: $border-radius;
   }
 }
@@ -1776,7 +1776,7 @@ th.debug-list-buttons {
 
   &:hover,
   &.active {
-    border: 2px solid $lightblue;
+    border: 2px solid $primary;
     border-radius: $border-radius;
   }
 }