Some more design improvements.

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>

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

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>

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>

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>

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">

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"

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

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>

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;
         }
 

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 {

src/Squidex/app/theme/_panels.scss

@@ -94,14 +94,16 @@
             overflow-y: scroll;
         }
 
-        & .flex-column {
+        & .nav-panel {
-            margin-left: -$panel-padding;
+            & {
-            margin-right: -$panel-padding;
+                margin-left: -$panel-padding;
-        }
+                margin-right: -$panel-padding;
+            }
 
-        & .nav-link {
+            & .nav-link {
-            padding-left: $panel-padding;
+                padding-left: $panel-padding;
-            padding-right: $panel-padding;
+                padding-right: $panel-padding;
+            }
         }
     }
 

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;