From 98a16c06206fd124312e646e3ff15b792d3f344f Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 31 Aug 2017 20:17:08 +0200
Subject: [PATCH] Some more design improvements.

---
 .../administration-area.component.html           |  2 +-
 .../app/features/api/api-area.component.html     |  2 +-
 .../pages/schemas/schemas-page.component.html    |  2 +-
 .../schemas/pages/schema/field.component.html    |  4 ++--
 .../pages/schema/schema-page.component.html      |  2 +-
 .../pages/schemas/schemas-page.component.html    |  2 +-
 .../pages/languages/language.component.html      |  2 +-
 .../settings/settings-area.component.html        |  2 +-
 .../pages/webhook-events-page.component.html     |  2 +-
 src/Squidex/app/theme/_bootstrap.scss            |  6 +++---
 src/Squidex/app/theme/_lists.scss                |  5 ++++-
 src/Squidex/app/theme/_panels.scss               | 16 +++++++++-------
 src/Squidex/app/theme/_vars.scss                 |  4 ++--
 13 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/Squidex/app/features/administration/administration-area.component.html b/src/Squidex/app/features/administration/administration-area.component.html
index 6314fc57b..6f9a1a759 100644
--- a/src/Squidex/app/features/administration/administration-area.component.html
+++ b/src/Squidex/app/features/administration/administration-area.component.html
@@ -1,5 +1,5 @@
 <div class="sidebar">
-    <ul class="nav flex-column">
+    <ul class="nav nav-panel flex-column">
         <li class="nav-item">
             <a class="nav-link" routerLink="event-consumers" routerLinkActive="active">
                 <i class="nav-icon icon-time"></i> <div class="nav-text">Consumers</div>
diff --git a/src/Squidex/app/features/api/api-area.component.html b/src/Squidex/app/features/api/api-area.component.html
index 59f99ff49..c94f15286 100644
--- a/src/Squidex/app/features/api/api-area.component.html
+++ b/src/Squidex/app/features/api/api-area.component.html
@@ -13,7 +13,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav flex-column nav-dark">
+            <ul class="nav nav-panel nav-dark flex-column">
                 <li class="nav-item">
                     <a class="nav-link" routerLink="graphql" routerLinkActive="active">
                         GraphQL
diff --git a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
index c164e056f..f1adf195c 100644
--- a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
@@ -23,7 +23,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav flex-column nav-dark nav-dark-bordered">
+            <ul class="nav nav-panel nav-dark nav-dark-bordered flex-column">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered | async">
                     <a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema | sqxDisplayName}} <i class="icon-angle-right"></i></a>
                 </li>
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 b98ff8805..a1df1c464 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html
@@ -19,7 +19,7 @@
             <div class="col col-options">
                 <div class="float-right">
                     <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="isEditing" (click)="toggleEditing()">
-                        <i class="icon-settings2"></i>
+                        <i class="icon-settings"></i>
                     </button>
 
                     <div class="dropdown dropdown-options">
@@ -61,7 +61,7 @@
     <div class="table-items-row-details" *ngIf="isEditing">
         <form [formGroup]="editForm" (ngSubmit)="save()" [attr.disabled]="field.isLocked">
             <div class="table-items-row-details-tabs clearfix">
-                <ul class="nav nav-inline nav-field-tabs">
+                <ul class="nav nav-tabs2">
                     <li class="nav-item">
                         <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
                     </li>
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 3f90ee48f..45ee79672 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
@@ -70,7 +70,7 @@
                         </div>
 
                         <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Field</button>
-                        <button type="button" class="btn btn-link" (click)="cancelAddField()">Cancel</button>
+                        <button type="button" class="btn btn-secondary" (click)="cancelAddField()">Cancel</button>
                     </div>
 
                     <div>
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
index 4c45aafdb..a9732fb3c 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
@@ -28,7 +28,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav flex-column nav-dark nav-dark-bordered">
+            <ul class="nav nav-panel nav-dark nav-dark-bordered flex-column">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered">
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         <div class="row">
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 dfb85e108..ccc590e0f 100644
--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@@ -10,7 +10,7 @@
             <div class="col col-4">
                 <div class="float-right">
                     <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="isEditing" (click)="toggleEditing()" *ngIf="!language.isMaster || allLanguages.length > 1">
-                        <i class="icon-settings2"></i>
+                        <i class="icon-settings"></i>
                     </button>
 
                     <button type="button" class="btn btn-link btn-danger" [class.invisible]="language.isMaster"
diff --git a/src/Squidex/app/features/settings/settings-area.component.html b/src/Squidex/app/features/settings/settings-area.component.html
index b215de605..20320c74f 100644
--- a/src/Squidex/app/features/settings/settings-area.component.html
+++ b/src/Squidex/app/features/settings/settings-area.component.html
@@ -13,7 +13,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav flex-column nav-dark">
+            <ul class="nav nav-panel nav-dark flex-column">
                 <li class="nav-item">
                     <a class="nav-link" routerLink="clients" routerLinkActive="active">
                         Clients
diff --git a/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html b/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html
index 55fca4595..b68b5b51c 100644
--- a/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html
+++ b/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.html
@@ -64,7 +64,7 @@
                             </td>
                             <td>
                                 <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="selectedEventId === event.id" (click)="selectEvent(event.id)">
-                                    <i class="icon-settings2"></i>
+                                    <i class="icon-settings"></i>
                                 </button>
                             </td>
                         </tr>
diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss
index 8ea390987..0caa9a68f 100644
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@@ -189,7 +189,7 @@ a {
 //
 // Tab control navigation.
 //
-.nav-field-tabs {
+.nav-tabs2 {
     & {
         @include absolute(auto, auto, 0, 1.25rem);
     }
@@ -198,9 +198,9 @@ a {
         & {
             color: $color-text;
             cursor: pointer;
-            padding: 1rem .625rem;
+            padding: 1rem 0;
             border-bottom: .25rem solid transparent;
-            width: 6.25rem;
+            margin: 0 1rem;
             text-align: center;
         }
 
diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss
index fb1ae513d..6f53dd43b 100644
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@@ -123,7 +123,7 @@
             // Caret that is placed next to the expand button.
             &::before {
                 @include caret-top;
-                @include absolute(-.5rem, 5.7rem, auto, auto);
+                @include absolute(-.5rem, 5.2rem, auto, auto);
                 border-color: transparent transparent $color-border;
                 border-width: .6rem;
             }
@@ -156,6 +156,9 @@
             line-height: 1rem;
             font-size: 1rem;
             font-weight: normal;
+            padding-left: 0;
+            padding-right: 0;
+            width: 2.2rem;
         }
 
         &:hover {
diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss
index 450ff32f2..0e714a181 100644
--- a/src/Squidex/app/theme/_panels.scss
+++ b/src/Squidex/app/theme/_panels.scss
@@ -94,14 +94,16 @@
             overflow-y: scroll;
         }
 
-        & .flex-column {
-            margin-left: -$panel-padding;
-            margin-right: -$panel-padding;
-        }
+        & .nav-panel {
+            & {
+                margin-left: -$panel-padding;
+                margin-right: -$panel-padding;
+            }
 
-        & .nav-link {
-            padding-left: $panel-padding;
-            padding-right: $panel-padding;
+            & .nav-link {
+                padding-left: $panel-padding;
+                padding-right: $panel-padding;
+            }
         }
     }
 
diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss
index 426f4fb2f..c7792b492 100644
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@@ -1,6 +1,6 @@
 $color-background:          #eef1f4;
 
-$color-border:              #dae4e9;
+$color-border:              #e7ebef;
 $color-border-dark:         #b3bbbf;
 
 $color-title:               #000;
@@ -24,7 +24,7 @@ $color-theme-blue-dark:     #3082f2;
 $color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
-$color-theme-secondary:     #dce5e8;
+$color-theme-secondary:     #d9dfe5;
 
 $color-theme-green:         #4bb958;
 $color-theme-green-dark:    #47b353;