Frontend user list and modal dialog fixes

src/frontend/scss/custom.scss

@@ -0,0 +1,25 @@
+$primary-color: #2bcbba;
+
+.loader {
+    color: $primary-color;
+}
+
+a {
+    color: $primary-color;
+}
+
+a:hover {
+    color: darken($primary-color, 10%);
+}
+
+.dropdown-item.active, .dropdown-item:active {
+    background-color: $primary-color;
+}
+
+.custom-switch-input:checked ~ .custom-switch-indicator {
+    background: $primary-color;
+}
+
+.min-100 {
+    min-height: 100px;
+}

src/frontend/scss/styles.scss

@@ -1,4 +1,6 @@
 @import "~tabler-ui/dist/assets/css/dashboard";
+@import "tabler-extra";
+@import "custom";
 
 /* Before any JS content is loaded */
 #app > .loader, #login > .loader, .container > .loader {
@@ -10,4 +12,4 @@
 
 .no-js-warning {
     margin-top: 100px;
-}
+}

src/frontend/scss/tabler-extra.scss

@@ -0,0 +1,26 @@
+$teal: #2bcbba;
+
+/* For Card bodies where I don't want padding */
+.card-body.no-padding {
+    padding: 0;
+}
+
+/* Teal Outline Buttons */
+.btn-outline-teal {
+    color: $teal;
+    background-color: transparent;
+    background-image: none;
+    border-color: $teal;
+}
+
+.btn-outline-teal:hover {
+    color: #fff;
+    background-color: $teal;
+    border-color: $teal;
+}
+
+.btn-outline-teal:not(:disabled):not(.disabled):active, .btn-outline-teal:not(:disabled):not(.disabled).active, .show > .btn-outline-teal.dropdown-toggle {
+    color: #fff;
+    background-color: $teal;
+    border-color: $teal;
+}