Styling fixes and improvements.

frontend/app/_theme.html

@@ -173,16 +173,6 @@
                         <button type="button" class="btn btn-text-secondary2">Secondary2</button>
                     </p>
 
-                    <p class="bs-component">
-                        <button type="button" class="btn btn-text-primary btn-outline-secondary">Primary</button>
-                        <button type="button" class="btn btn-text-secondary btn-outline-secondary">Secondary</button>
-                        <button type="button" class="btn btn-text-success btn-outline-secondary">Success</button>
-                        <button type="button" class="btn btn-text-info btn-outline-secondary">Info</button>
-                        <button type="button" class="btn btn-text-warning btn-outline-secondary">Warning</button>
-                        <button type="button" class="btn btn-text-danger btn-outline-secondary">Danger</button>
-                        <button type="button" class="btn btn-text-secondary2 btn-outline-secondary">Secondary2</button>
-                    </p>
-
                     <p class="bs-component">
                         <button type="button" class="btn btn-primary disabled">Primary</button>
                         <button type="button" class="btn btn-secondary disabled">Secondary</button>

frontend/app/features/rules/pages/rule/rule-page.component.html

@@ -15,7 +15,7 @@
 
         <ng-container menu>
             <ng-container *ngIf="isManual; else notManual">
-                <button class="btn btn-secondary" [disabled]="!rule?.canTrigger"
+                <button class="btn btn-outline-secondary btn-run" [disabled]="!rule?.canTrigger"
                     (sqxConfirmClick)="trigger()"
                     confirmTitle="i18n:rules.triggerConfirmTitle"
                     confirmText="i18n:rules.triggerConfirmText"

frontend/app/features/rules/pages/rule/rule-page.component.scss

@@ -19,11 +19,21 @@
     margin-left: 2rem;
 }
 
-.card-body {
+.card {
+    &-header {
+        margin-bottom: -1px;
+    }
+
+    &-body {
         &:empty {
             display: none;
         }
     }
+}
+
+.btn-run {
+    color: $color-theme-blue !important;
+}
 
 .btn-enabled {
     border-color: $color-border;

frontend/app/features/rules/pages/rules/rule.component.html

@@ -73,7 +73,7 @@
             </div>
             <div class="col col-last text-end">
                 <ng-container *ngIf="isManual; else notManual">
-                    <button class="btn btn-secondary" [disabled]="!rule.canTrigger"
+                    <button class="btn btn-outline-secondary btn-run" [disabled]="!rule.canTrigger"
                         (sqxConfirmClick)="trigger()"
                         confirmTitle="i18n:rules.triggerConfirmTitle"
                         confirmText="i18n:rules.triggerConfirmText"
@@ -91,10 +91,14 @@
     <div class="card-footer">
         <div class="row">
             <div class="col-3">
-                {{ 'common.succeeded' | sqxTranslate }}: <strong>{{rule.numSucceeded}}</strong>
+                {{ 'common.succeeded' | sqxTranslate }} 
+                
+                <span class="badge badge-success rounded-pill" *ngIf="rule.numSucceeded > 0">{{rule.numSucceeded}}</span>
             </div>
             <div class="col-3">
-                {{ 'common.failed' | sqxTranslate }}: <strong>{{rule.numFailed}}</strong>
+                {{ 'common.failed' | sqxTranslate }} 
+                
+                <span class="badge badge-danger rounded-pill" *ngIf="rule.numFailed > 0">{{rule.numFailed}}</span>
             </div>
             <div class="col">
                 {{ 'common.executed' | sqxTranslate }}: <span>{{rule.lastExecuted | sqxFromNow:'-'}}</span>

frontend/app/features/rules/pages/rules/rule.component.scss

@@ -1,25 +1,15 @@
-%card-element {
-    padding: .75rem 1.25rem;
-}
-
 .card {
-    margin-bottom: .25rem;
-
-    &-header {
-        @extend %card-element;
-    }
-
-    &-body {
-        @extend %card-element;
-    }
+    margin-bottom: .5rem;
 
     &-footer {
-        background: $color-border-lighter;
         font-size: $font-small;
-        font-weight: normal;
     }
 }
 
+.btn-run {
+    color: $color-theme-blue !important;
+}
+
 a {
     text-decoration: none;
 }

frontend/app/features/settings/pages/clients/client.component.scss

@@ -1,5 +1,5 @@
 .card {
-    margin-bottom: .25rem;
+    margin-bottom: .5rem;
 
     &-header {
         padding: .75rem 1.25rem;

frontend/app/features/settings/pages/roles/role.component.html

@@ -4,10 +4,14 @@
             <span class="role-name">{{role.name}}</span>
         </div>
         <div class="col text-decent">
-            {{ 'common.clients' | sqxTranslate }}: <span class="badge badge-secondary rounded-pill" [class.text-force]="role.numClients > 0">{{role.numClients}}</span>
+            {{ 'common.clients' | sqxTranslate }}
+            
+            <span class="badge badge-secondary rounded-pill" [class.text-muted]="role.numClients <= 0">{{role.numClients}}</span>
         </div>
         <div class="col text-decent">
-            {{ 'common.users' | sqxTranslate }}: <span class="badge badge-secondary rounded-pill" [class.text-force]="role.numContributors > 0">{{role.numContributors}}</span>
+            {{ 'common.users' | sqxTranslate }}
+            
+            <span class="badge badge-secondary rounded-pill" [class.text-muted]="role.numContributors <=  0">{{role.numContributors}}</span>
         </div>
         <div class="col-auto">
             <div class="float-end">

frontend/app/features/settings/pages/roles/role.component.scss

@@ -46,10 +46,6 @@
     max-width: 100%;
 }
 
-.text-force {
-    color: $color-text;
-}
-
 .built {
     font-weight: bold;
 }

frontend/app/theme/_bootstrap.scss

@@ -585,12 +585,21 @@ $icon-size: 4.5rem;
     }
 }
 
-.card-title {
-    margin-bottom: 1rem;
+// 
+// Cards
+// 
+.card {
+    &-header,
+    &-footer {
+        margin-left: .5rem;
+        margin-right: .5rem;
+        padding-left: .5rem;
+        padding-right: .5rem;
     }
 
-.card-footer {
-    padding: .75rem 1.25rem;
+    &-title {
+        margin-bottom: 1rem;
+    }
 }
 
 // 

frontend/app/theme/_forms.scss

@@ -213,7 +213,7 @@
 // Form group error.
 //
 .form-group {
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
 
     // Remove the margin after the last form group.
     &:last-child {

frontend/app/theme/_vars.scss

@@ -49,22 +49,22 @@ $color-input-placeholder:   lighten($color-text-decent, 20%);
 $color-input-shortcut:      rgba(255, 255, 255, .2);
 
 $color-badge-success-background:    #e4f6e6;
-$color-badge-success-foreground:    #4cc159;
+$color-badge-success-foreground:    #42a54c;
 
 $color-badge-warning-background:    #ffe8cc;
-$color-badge-warning-foreground:    #efa243;
+$color-badge-warning-foreground:    #d18c3e;
 
 $color-badge-danger-background:     #fce0e3;
-$color-badge-danger-foreground:     #f56a76;
+$color-badge-danger-foreground:     #e56471;
 
 $color-badge-info-background:       #d0f2fb;
-$color-badge-info-foreground:       #43ccef;
+$color-badge-info-foreground:       #3bb1cc;
 
 $color-badge-primary-background:    #cce1ff;
-$color-badge-primary-foreground:    #438cef;
+$color-badge-primary-foreground:    #4186e0;
 
 $color-badge-secondary-background:  #e6e6e6;
-$color-badge-secondary-foreground:  #999;
+$color-badge-secondary-foreground:  #555;
 
 $border-radius:             .25rem;