From 9c1e8ee51af6dc13d780b3605e2d680527c86ee3 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Sat, 24 Jul 2021 21:22:24 +0200
Subject: [PATCH] Styling fixes and improvements.

---
 frontend/app/_theme.html                      | 10 ----------
 .../rules/pages/rule/rule-page.component.html |  2 +-
 .../rules/pages/rule/rule-page.component.scss | 16 ++++++++++++---
 .../rules/pages/rules/rule.component.html     | 10 +++++++---
 .../rules/pages/rules/rule.component.scss     | 20 +++++--------------
 .../pages/clients/client.component.scss       |  2 +-
 .../settings/pages/roles/role.component.html  |  8 ++++++--
 .../settings/pages/roles/role.component.scss  |  4 ----
 frontend/app/theme/_bootstrap.scss            | 19 +++++++++++++-----
 frontend/app/theme/_forms.scss                |  2 +-
 frontend/app/theme/_vars.scss                 | 12 +++++------
 11 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html
index 60714a2ea..5aed4d7e3 100644
--- a/frontend/app/_theme.html
+++ b/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>
diff --git a/frontend/app/features/rules/pages/rule/rule-page.component.html b/frontend/app/features/rules/pages/rule/rule-page.component.html
index 5f65f7722..5c3869c1b 100644
--- a/frontend/app/features/rules/pages/rule/rule-page.component.html
+++ b/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"
diff --git a/frontend/app/features/rules/pages/rule/rule-page.component.scss b/frontend/app/features/rules/pages/rule/rule-page.component.scss
index b73e56312..073f7e29b 100644
--- a/frontend/app/features/rules/pages/rule/rule-page.component.scss
+++ b/frontend/app/features/rules/pages/rule/rule-page.component.scss
@@ -19,10 +19,20 @@
     margin-left: 2rem;
 }
 
-.card-body {
-    &:empty {
-        display: none;
+.card {
+    &-header {
+        margin-bottom: -1px;
     }
+
+    &-body {
+        &:empty {
+            display: none;
+        }
+    }
+}
+
+.btn-run {
+    color: $color-theme-blue !important;
 }
 
 .btn-enabled {
diff --git a/frontend/app/features/rules/pages/rules/rule.component.html b/frontend/app/features/rules/pages/rules/rule.component.html
index 2d8abf4b0..bf8e85a56 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.html
+++ b/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>
diff --git a/frontend/app/features/rules/pages/rules/rule.component.scss b/frontend/app/features/rules/pages/rules/rule.component.scss
index 64f71e462..1060ed243 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/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;
 }
diff --git a/frontend/app/features/settings/pages/clients/client.component.scss b/frontend/app/features/settings/pages/clients/client.component.scss
index d146b126d..032a081af 100644
--- a/frontend/app/features/settings/pages/clients/client.component.scss
+++ b/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;
diff --git a/frontend/app/features/settings/pages/roles/role.component.html b/frontend/app/features/settings/pages/roles/role.component.html
index df21fb09d..cde6fb1a9 100644
--- a/frontend/app/features/settings/pages/roles/role.component.html
+++ b/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">
diff --git a/frontend/app/features/settings/pages/roles/role.component.scss b/frontend/app/features/settings/pages/roles/role.component.scss
index e776fd152..2ccb86b1b 100644
--- a/frontend/app/features/settings/pages/roles/role.component.scss
+++ b/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;
 }
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index 2c15ed131..77ccffd3d 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/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;
+    }
 }
 
 // 
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 88c58b1e2..011418fed 100644
--- a/frontend/app/theme/_forms.scss
+++ b/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 {
diff --git a/frontend/app/theme/_vars.scss b/frontend/app/theme/_vars.scss
index fbcb9c35f..057fee44f 100644
--- a/frontend/app/theme/_vars.scss
+++ b/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;