From 0f49ebc4efeca5440d6715ca93cd05e508492a9c Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Wed, 10 May 2017 20:13:50 +0200
Subject: [PATCH] Color unification

---
 .../pages/users/users-page.component.html        |  6 +++---
 .../assets/pages/assets-page.component.html      |  6 +++---
 .../pages/contents/content-item.component.html   |  2 +-
 .../pages/contents/contents-page.component.html  |  6 +++---
 .../schemas/pages/schema/field.component.html    |  2 +-
 .../schemas/pages/schema/field.component.scss    |  2 +-
 .../pages/schema/schema-page.component.html      |  2 +-
 .../settings/pages/clients/client.component.html |  2 +-
 .../pages/clients/clients-page.component.html    |  2 +-
 .../pages/languages/language.component.html      |  4 ++--
 .../pages/languages/language.component.scss      |  8 ++++----
 src/Squidex/app/theme/_bootstrap.scss            | 16 ++++------------
 src/Squidex/app/theme/_lists.scss                |  4 ++++
 src/Squidex/app/theme/_vars.scss                 |  6 +++---
 14 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/Squidex/app/features/administration/pages/users/users-page.component.html b/src/Squidex/app/features/administration/pages/users/users-page.component.html
index 8354c1c19..5f0b81c4a 100644
--- a/src/Squidex/app/features/administration/pages/users/users-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html
@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -82,10 +82,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{usersPager.itemFirst}}-{{usersPager.itemLast}} of {{usersPager.numberOfItems}}</span>
 
-                    <button class="btn btn-decent pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>
diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html
index cf933e6eb..c20cc9755 100644
--- a/src/Squidex/app/features/assets/pages/assets-page.component.html
+++ b/src/Squidex/app/features/assets/pages/assets-page.component.html
@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -56,10 +56,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span>
 
-                    <button class="btn btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>
diff --git a/src/Squidex/app/features/content/pages/contents/content-item.component.html b/src/Squidex/app/features/content/pages/contents/content-item.component.html
index 3bcc29e84..a84546e53 100644
--- a/src/Squidex/app/features/content/pages/contents/content-item.component.html
+++ b/src/Squidex/app/features/content/pages/contents/content-item.component.html
@@ -12,7 +12,7 @@
 </td>
 <td>
     <div class="dropdown dropdown-options" *ngIf="content">
-        <button type="button" class="btn btn-decent" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async">
+        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async">
             <i class="icon-dots"></i>
         </button>
         <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [@fade]>
diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
index e9a6c10e6..ec55b49c4 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -77,10 +77,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{contentsPager.itemFirst}}-{{contentsPager.itemLast}} of {{contentsPager.numberOfItems}}</span>
 
-                    <button class="btn btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>
diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html
index 892009258..94b97b5ad 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html
@@ -22,7 +22,7 @@
                     </button>
 
                     <div class="dropdown dropdown-options">
-                        <button type="button" class="btn btn-decent" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async">
+                        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async">
                             <i class="icon-dots"></i>
                         </button>
                         <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [@fade]>
diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.scss b/src/Squidex/app/features/schemas/pages/schema/field.component.scss
index 7a7fd0383..90ae400de 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.scss
@@ -17,7 +17,7 @@ $field-header: #e7ebef;
     }
 
     &-hidden {
-        color: $color-border-dark;
+        color: $color-subtext;
     }
 
     .tag {
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index 6af09ea26..bf1356832 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -14,7 +14,7 @@
                 </div>
 
                <div class="dropdown dropdown-options">
-                    <button type="button" class="btn btn-decent btn-sm" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async">
+                    <button type="button" class="btn btn-link btn-decent btn-sm" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async">
                         <i class="icon-dots"></i>
                     </button>
                     <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" closeAlways="true" [@fade]>
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html
index e5831d678..502c15f07 100644
--- a/src/Squidex/app/features/settings/pages/clients/client.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/client.component.html
@@ -22,7 +22,7 @@
 
                         <button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid">Save</button>
 
-                        <button class="btn btn-decent btn-cancel" (click)="cancelRename()">
+                        <button class="btn btn-link btn-decent btn-cancel" (click)="cancelRename()">
                             <i class="icon-close"></i>
                         </button>
                     </form>
diff --git a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
index 69351fd9c..209f67718 100644
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
@@ -13,7 +13,7 @@
 
     <div class="panel-main">
         <div class="panel-content panel-content-scroll">
-            <div class="table-items-row" *ngIf="appClients && appClients.length === 0">
+            <div class="table-items-row table-items-row-empty" *ngIf="appClients && appClients.length === 0">
                 No client created yet.
             </div>
 
diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.html b/src/Squidex/app/features/settings/pages/languages/language.component.html
index 4c2bc1c32..238752a57 100644
--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@@ -2,10 +2,10 @@
     <div class="table-items-row-summary">        
         <div class="row">
             <div class="col col-2">
-                <span class="language-code" [class.language-master]="language.isMaster">{{language.iso2Code}}</span>
+                <span class="language-code" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.iso2Code}}</span>
             </div>
             <div class="col col-6">
-                <span class="language-name" [class.language-master]="language.isMaster">{{language.englishName}}</span>
+                <span class="language-name" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.englishName}}</span>
             </div>
             <div class="col col-4">
                 <div class="float-right">
diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.scss b/src/Squidex/app/features/settings/pages/languages/language.component.scss
index bcedc32dd..f32ca58c0 100644
--- a/src/Squidex/app/features/settings/pages/languages/language.component.scss
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.scss
@@ -11,16 +11,16 @@ $field-header: #e7ebef;
     &-master {
         font-weight: bold;
     }
+
+    &-optional {
+        color: $color-subtext;
+    }
 }
 
 .btn-danger {
     width: 3.2rem;
 }
 
-.master {
-    font-weight: bold;
-}
-
 .fallback {
     &-languages {
         @include border-radius;
diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss
index 0a2e202dc..952f8b0ff 100644
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@@ -167,18 +167,6 @@ body {
 }
 
 .btn {
-    &-decent {
-        & {
-            background: transparent;
-            color: $color-border-dark;
-        }
-
-        &:hover,
-        &.active {
-            color: $color-text;
-        }
-    }
-
     &-cancel {
         padding: .4rem;
         font-size: 1.1rem;
@@ -241,6 +229,10 @@ body {
         &.btn-success {
             @include link-button($color-theme-green);
         }
+
+        &.btn-decent {
+            @include link-button($color-subtext);
+        }
     }
 }
 
diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss
index 892c6937b..739ac440a 100644
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@@ -86,6 +86,10 @@
             padding: 0;
         }
 
+        &-empty {
+            color: $color-empty;
+        }
+
         &-details {
             & {
                 position: relative;
diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss
index e21fc5a77..e1484f4e7 100644
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@@ -6,8 +6,8 @@ $color-border-dark: darken($color-border, 20%);
 $color-title: #000;
 $color-text: #373a3c;
 $color-text-decent: #a9b2bb;
-$color-subtext: #818181;
-$color-empty: #949494;
+$color-subtext: $color-text-decent;
+$color-empty: $color-text-decent;
 $color-control: rgba(0, 0, 0, .15);
 $color-input: #dbe4eb;
 $color-disabled: #eef1f4;
@@ -45,7 +45,7 @@ $color-panel-icon: #a2b0b6;
 $color-table: #fff;
 $color-table-footer: #ecf2f6;
 $color-table-border: #e9ecef;
-$color-table-header: #a0a0a0;
+$color-table-header: $color-text-decent;
 
 $color-modal-header-background: #2e3842;
 $color-modal-header-foreground: #6a7681;