Style improvements.

6 years ago · 04b0b964b9
36 changed files with 151 additions and 112 deletions
--- a/frontend/app/_theme.html
+++ b/frontend/app/_theme.html
@ -512,7 +512,7 @@
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email address</label>
                                    <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
-                                    <sqx-form-hint>We'll never share your email with anyone else.</small>
+                                    <small class="text-muted form-text">We'll never share your email with anyone else.</small>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
--- a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts
@ -15,7 +15,7 @@ import { EventConsumerDto, EventConsumersState } from '@app/features/administrat
    selector: '[sqxEventConsumer]',
    template: `
        <tr [class.faulted]="eventConsumer.error && eventConsumer.error?.length > 0">
-            <td class="auto-auto">
+            <td class="cell-auto">
                <span class="truncate">
                    <i class="faulted-icon icon icon-bug" (click)="error.emit()" [class.hidden]="!eventConsumer.error || eventConsumer.error?.length === 0"></i>

--- a/frontend/app/features/apps/pages/apps-page.component.html
+++ b/frontend/app/features/apps/pages/apps-page.component.html
@ -111,7 +111,7 @@
    </div>
 </div>

-<div *ngIf="info" class="info">{{info}}</div>
+<div class="info">asdsadd</div>

 <ng-container *sqxModal="addAppDialog">
    <sqx-app-form [template]="addAppTemplate"
--- a/frontend/app/features/content/pages/content/content-history-page.component.scss
+++ b/frontend/app/features/content/pages/content/content-history-page.component.scss
@ -3,11 +3,11 @@

 :host ::ng-deep {
    .user-ref {
-        color: $color-title;
+        font-weight: 500;
    }

    .marker-ref {
-        color: $color-title;
+        font-weight: 500;
    }
 }

@ -17,7 +17,6 @@

 .event {
    & {
-        color: $color-history;
        font-size: .9rem;
        font-weight: normal;
        margin-bottom: 1.5rem;
--- a/frontend/app/features/content/pages/contents/contents-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-page.component.scss
@ -33,7 +33,7 @@
 }

 .selection {
-    background: $color-table-footer;
+    background: $color-theme-secondary;
    border-bottom: 2px solid $color-border;
    padding: .25 * $panel-padding $panel-padding;
 }
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule.component.scss
@ -15,7 +15,7 @@
    }

    &-footer {
-        background: $color-table-footer;
+        background: $color-theme-secondary;
        font-weight: normal;
        font-size: 90%;
    }
--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.html
+++ b/frontend/app/features/schemas/pages/schema/field-wizard.component.html
@ -52,7 +52,7 @@
                    </div>

                    <sqx-form-hint>
-                        You can the field as localizable. It means that is dependent on the language, for example a city name.
+                        You can mark the field as localizable. It means that is dependent on the language, for example a city name.
                    </sqx-form-hint>
                </div>

--- a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
+++ b/frontend/app/features/schemas/pages/schema/field-wizard.component.scss
@ -6,6 +6,7 @@ $icon-size: 4.5rem;
 :host ::ng-deep {
    .table-items-row-details-tab {
        padding: 1.5rem 1.75rem;
+        padding-bottom: 0;
    }
 }

--- a/frontend/app/features/schemas/pages/schema/field.component.scss
+++ b/frontend/app/features/schemas/pages/schema/field.component.scss
@ -44,7 +44,7 @@ $padding: 1rem;
    position: relative;
    border: 1px solid $color-border;
    border-top-width: 0;
-    background: $color-table-footer;
+    background: $color-theme-secondary;
 }

 .nested-field {
--- a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
+++ b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts
@ -17,7 +17,7 @@ import { FieldDto } from '@app/shared';
            <div class="form-group row">
                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>

-                <div class="col-6">
+                <div class="col-7">
                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="standalone" />

                    <sqx-form-hint>
@ -29,13 +29,13 @@ import { FieldDto } from '@app/shared';
            <div class="form-group row">
                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>

-                <div class="col-6">
+                <div class="col-7">
                    <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>

                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />

                    <sqx-form-hint>
-                        Define the display name for the field for documentation and user interfaces.
+                        Display name for documentation and user interfaces.
                    </sqx-form-hint>
                </div>
            </div>
@ -43,13 +43,13 @@ import { FieldDto } from '@app/shared';
            <div class="form-group row">
                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>

-                <div class="col-6">
+                <div class="col-7">
                    <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>

                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />

                    <sqx-form-hint>
-                        Define some hints for the user and editor for the field for documentation and user interfaces.
+                        Describe this field for documentation and user interfaces.
                    </sqx-form-hint>
                </div>
            </div>
@ -87,7 +87,7 @@ import { FieldDto } from '@app/shared';
            <div class="form-group row" *ngIf="field.properties.isContentField">
                 <label class="col-3 col-form-label">Tags</label>

-                <div class="col-9">
+                <div class="col-7">
                    <sqx-tag-editor id="schemaTags" formControlName="tags"></sqx-tag-editor>

                    <sqx-form-hint>
--- a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
+++ b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts
@ -27,7 +27,7 @@ import { FieldDto, PatternDto } from '@app/shared';
            </ul>

            <div class="float-right" *ngIf="showButtons">
-                <button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="cancel.emit()">Cancel</button>
+                <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary" (click)="cancel.emit()">Cancel</button>
                <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
            </div>
        </div>
--- a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
+++ b/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html
@ -17,7 +17,7 @@
        
                <input type="text" class="form-control" id="schemaLabel" formControlName="label" />

-                <sqx-form-hint>If the label is defined it will be shown in the UI instead of the schema name.</sqx-form-hint>
+                <sqx-form-hint>Display name for documentation and user interfaces.</sqx-form-hint>
            </div>
        
            <div class="form-group">
--- a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
@ -15,6 +15,8 @@
 }

 .inner-header {
+    background: $color-theme-secondary;
+    border: 0;
    padding: 1rem $panel-padding;
 }

--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.html
+++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.html
@ -1,33 +1,31 @@
-<div class="fields">
-    <div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0">
-        No field created yet.
-        
-        <button type="button" class="btn btn-success btn-sm ml-2" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
-            <i class="icon icon-plus"></i> Add Field
-        </button>
-    </div>
+<div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0">
+    No field created yet.
+    
+    <button type="button" class="btn btn-success btn-sm ml-2" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
+        <i class="icon icon-plus"></i> Add Field
+    </button>
+</div>

-    <ng-container *ngIf="patternsState.patterns | async; let patterns">
-        <div
-            cdkDropList
-            [cdkDropListDisabled]="!schema.canOrderFields"
-            [cdkDropListData]="schema.fields"
-            (cdkDropListDropped)="sortFields($event)">
-            <div *ngFor="let field of schema.fields; trackBy: trackByFieldFn"
-                class="table-drag"
-                cdkDrag
-                cdkDragLockAxis="y">
-                <sqx-field [field]="field" [schema]="schema" [patterns]="patterns">
-                    <i cdkDragHandle class="icon-drag2 drag-handle"></i>
-                </sqx-field>
-            </div>
+<ng-container *ngIf="patternsState.patterns | async; let patterns">
+    <div
+        cdkDropList
+        [cdkDropListDisabled]="!schema.canOrderFields"
+        [cdkDropListData]="schema.fields"
+        (cdkDropListDropped)="sortFields($event)">
+        <div *ngFor="let field of schema.fields; trackBy: trackByFieldFn"
+            class="table-drag"
+            cdkDrag
+            cdkDragLockAxis="y">
+            <sqx-field [field]="field" [schema]="schema" [patterns]="patterns">
+                <i cdkDragHandle class="icon-drag2 drag-handle"></i>
+            </sqx-field>
        </div>
+    </div>

-        <button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
-            <i class="icon icon-plus field-button-icon"></i> <div class="field-button-text">Add Field</div>
-        </button>
-    </ng-container>
-</div>
+    <button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()" *ngIf="schema.canAddField">
+        <i class="icon icon-plus field-button-icon"></i> <div class="field-button-text">Add Field</div>
+    </button>
+</ng-container>

 <ng-container *sqxModal="addFieldDialog">
    <sqx-field-wizard [schema]="schema"
--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
@ -1,8 +1,11 @@
@import '_vars';
@import '_mixins';

-.fields {
+:host {
    padding: $panel-padding;
+    padding-bottom: 8rem;
+    overflow-y: auto;
+    overflow-x: hidden;
 }

 .field-button {
--- a/frontend/app/features/schemas/pages/schema/schema-page.component.ts
+++ b/frontend/app/features/schemas/pages/schema/schema-page.component.ts
@ -50,11 +50,13 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit {
    }

    public ngOnInit() {
+        this.updateTab();
+
        this.own(
            this.router.events
                .subscribe(event => {
                    if (Types.is(event, NavigationEnd)) {
-                        this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!;
+                        this.updateTab();
                    }
                }));

@ -65,6 +67,10 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit {
                }));
    }

+    private updateTab() {
+        this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!;
+    }
+
    public publish() {
        this.schemasState.publish(this.schema).subscribe();
    }
--- a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
@ -15,6 +15,8 @@
 }

 .inner-header {
+    background: $color-theme-secondary;
+    border: 0;
    padding: 1rem $panel-padding;
 }

--- a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html
+++ b/frontend/app/features/schemas/pages/schema/types/references-ui.component.html
@ -30,7 +30,7 @@
            </div>

            <sqx-form-hint>
-                Check this item to resolve display names for referenced items for the content list.<br />Can only be checked when the MaxItems field in the validation tab is set to 1.
+                Show the name of the referenced item in content list when MaxItems is set to 1.
            </sqx-form-hint>
        </div>
    </div>
--- a/frontend/app/features/settings/pages/clients/client-add-form.component.ts
+++ b/frontend/app/features/settings/pages/clients/client-add-form.component.ts
@ -25,7 +25,7 @@ import { AddClientForm, ClientsState } from '@app/shared';
                        <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoName | async">Add Client</button>
                    </div>
                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</button>
                    </div>
                </div>
            </form>
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
@ -12,5 +12,7 @@
 }

 .table-items-header {
+    border-width: 0;
+    border-bottom-width: 2px;
    margin: 0;
 }
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.html
@ -1,6 +1,6 @@
 <sqx-title message="Contributors"></sqx-title>

-<sqx-panel desiredWidth="50rem" [showSidebar]="true">
+<sqx-panel desiredWidth="50rem" contentClass="grid" [showSidebar]="true">
    <ng-container title>
        Contributors
    </ng-container>
@ -22,43 +22,45 @@

    <ng-container content>
        <ng-container *ngIf="contributorsState.isLoaded | async">
-            <ng-container *ngIf="contributorsState.maxContributors | async; let maxContributors">
-                <div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
-                    Your plan allows up to {{maxContributors}} contributors.
-                </div>
-            </ng-container>
-            
            <ng-container *ngIf="contributorsState.contributorsPaged | async; let contributors">
                <ng-container *ngIf="rolesState.roles | async; let roles">
+                    <ng-container *ngIf="contributorsState.maxContributors | async; let maxContributors">
+                        <div class="panel-alert panel-alert-success" *ngIf="maxContributors > 0">
+                            Your plan allows up to {{maxContributors}} contributors.
+                        </div>
+                    </ng-container>
                    <ng-container *ngIf="contributorsState.canCreate | async">
                        <sqx-contributor-add-form
                            [roles]="roles">
                        </sqx-contributor-add-form>
+                    </ng-container>
+                
+                    <div class="grid-content">

                        <div class="import-hint">
                            <sqx-form-hint class="text-right">
                                Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
                            </sqx-form-hint>
                        </div>
-                    </ng-container>
-                
-                    <ng-container *ngIf="contributors.length > 0; else noContributors">
-                        <table class="table table-items table-fixed">
-                            <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
-                                [sqxContributor]="contributor"
-                                [search]="contributorsState.snapshot.queryRegex"
-                                [roles]="roles">
-                            </tbody>
-                        </table>
+                        
+                        <ng-container *ngIf="contributors.length > 0; else noContributors">
+                            <table class="table table-items table-fixed">
+                                <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
+                                    [sqxContributor]="contributor"
+                                    [search]="contributorsState.snapshot.queryRegex"
+                                    [roles]="roles">
+                                </tbody>
+                            </table>

-                        <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
-                    </ng-container>
+                            <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
+                        </ng-container>

-                    <ng-template #noContributors>
-                        <div class="table-items-row table-items-row-empty">
-                            No contributors found.
-                        </div>
-                    </ng-template>
+                        <ng-template #noContributors>
+                            <div class="table-items-row table-items-row-empty">
+                                No contributors found.
+                            </div>
+                        </ng-template>
+                    </div>
                </ng-container>
            </ng-container>
        </ng-container>
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss
@ -3,6 +3,8 @@

 .import-hint {
    margin-bottom: 1rem;
-    font-weight: normal;
-    font-size: 90%;
+}
+
+.panel-alert {
+    margin: 0;
 }
--- a/frontend/app/features/settings/pages/languages/language.component.html
+++ b/frontend/app/features/settings/pages/languages/language.component.html
@ -29,8 +29,8 @@
        <form [formGroup]="editForm.form" (ngSubmit)="save()">
            <div class="table-items-row-details-tabs clearfix">
                <div class="float-right">
-                    <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
-                    <button type="submit" class="btn btn-primary" *ngIf="isEditable">Save</button>
+                    <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
                </div>
            </div>

--- a/frontend/app/features/settings/pages/roles/role-add-form.component.ts
+++ b/frontend/app/features/settings/pages/roles/role-add-form.component.ts
@ -25,7 +25,7 @@ import { AddRoleForm, RolesState } from '@app/shared';
                        <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">Add role</button>
                    </div>
                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</button>
                    </div>
                </div>
            </form>
--- a/frontend/app/features/settings/pages/roles/role.component.html
+++ b/frontend/app/features/settings/pages/roles/role.component.html
@ -32,8 +32,8 @@
        <form (ngSubmit)="save()">
            <div class="table-items-row-details-tabs clearfix">
                <div class="float-right">
-                    <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
-                    <button type="submit" class="btn btn-primary" *ngIf="isEditable">Save</button>
+                    <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">Save</button>
                </div>
            </div>

--- a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
+++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts
@ -25,7 +25,7 @@ import { AddWorkflowForm, WorkflowsState } from '@app/shared';
                        <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">Add Workflow</button>
                    </div>
                    <div class="col-auto pl-1">
-                        <button type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                        <button type="reset" class="btn btn-text-secondary" (click)="cancel()">Cancel</button>
                    </div>
                </div>
            </form>
--- a/frontend/app/features/settings/pages/workflows/workflow.component.html
+++ b/frontend/app/features/settings/pages/workflows/workflow.component.html
@ -34,8 +34,8 @@
    <div class="table-items-row-details" *ngIf="isEditing">
        <div class="table-items-row-details-tabs clearfix">
            <div class="float-right">
-                <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
-                <button type="submit" class="btn btn-primary" *ngIf="isEditable" (click)="save()">Save</button>
+                <button type="reset" class="btn btn-text-secondary" (click)="toggleEditing()">Cancel</button>
+                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">Save</button>
            </div>
        </div>

--- a/frontend/app/framework/angular/forms/form-hint.component.ts
+++ b/frontend/app/framework/angular/forms/form-hint.component.ts
@ -13,6 +13,17 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
        <small class="text-muted form-text {{class}}">
            <ng-content></ng-content>
        </small>`,
+    styles: [`
+        :host {
+            display: block;
+            margin-top: 0;
+            margin-bottom: .5rem
+        }
+
+        :host::last-child {
+            margin-bottom: 0;
+        }`
+    ],
    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormHintComponent {
--- a/frontend/app/shared/components/comment.component.scss
+++ b/frontend/app/shared/components/comment.component.scss
@ -36,8 +36,4 @@
    &-created {
        font-size: .75rem;
    }
-}
-
-.text-muted {
-    color: $color-history;
 }
--- a/frontend/app/shared/components/history-list.component.scss
+++ b/frontend/app/shared/components/history-list.component.scss
@ -3,11 +3,11 @@

 :host ::ng-deep {
    .user-ref {
-        color: $color-title;
+        font-weight: 500;
    }

    .marker-ref {
-        color: $color-title;
+        font-weight: 500;
    }
 }

@ -21,7 +21,7 @@

 .event {
    & {
-        color: $color-history;
+        color: $color-text-decent;
        font-size: .9rem;
        font-weight: normal;
        margin-bottom: 1.5rem;
--- a/frontend/app/theme/_bootstrap-vars.scss
+++ b/frontend/app/theme/_bootstrap-vars.scss
@ -10,8 +10,6 @@ $h4-font-size:              $font-size-base * 1.1;
 $h5-font-size:              $font-size-base;
 $h6-font-size:              $font-size-base;

-$small-font-size:           90%;
-
 $body-bg:                   $color-background;

 $border-color:              $color-border;
@ -22,12 +20,16 @@ $secondary:                 $color-theme-secondary;
 $success:                   $color-theme-green;
 $warning:                   $color-theme-orange;

+$text-muted:                $color-text-decent;
+
 $alert-bg-level:            0;
 $alert-color-level:         -12.5;

-$input-bg-disabled:         $color-input-disabled;
+$label-margin-bottom:       .25rem;
+
+$input-disabled-bg:         $color-input-disabled;
 $input-border-color:        $color-input;
-$input-placeholder-color:   $color-text-decent;
+$input-placeholder-color:   lighten($color-text-decent, 20%);

 $badge-bg-level: 2;

--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@ -534,7 +534,7 @@ a {
    }

    &-tabs {
-        background: $color-border;
+        background: $color-theme-secondary;
        position: relative;
        padding: .75rem 1.25rem;
        height: 70px;
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@ -182,13 +182,28 @@
    }
 }

+.col-form-label {
+    font-size: 90%;
+}
+
 label {
    & {
        color: $color-title;
+        font-size: 90%;
+        font-weight: 500;
+    }
+
+    &.form-check-label {
+        font-size: 100%;
+        font-weight: normal;
    }

    .hint {
-        color: $color-text-decent2;
+        color: $color-text-decent;
+    }
+
+    .text-muted {
+        font-weight: normal;
    }
 }

--- a/frontend/app/theme/_lists.scss
+++ b/frontend/app/theme/_lists.scss
@ -126,16 +126,16 @@

            // Caret that is placed next to the expand button.
            &::before {
-                @include caret-top($color-border);
+                @include caret-top($color-theme-secondary);
                @include absolute(-1.1rem, 0, auto, auto);
            }

            &-tab {
-                padding: .75rem 1.25rem 1.25rem;
+                padding: 1.5rem;
            }

            &-tabs {
-                background: $color-border;
+                background: $color-table-footer;
                position: relative;
                padding: 1rem 1.25rem;
                height: 70px;
--- a/frontend/app/theme/_panels.scss
+++ b/frontend/app/theme/_panels.scss
@ -2,7 +2,7 @@
@import '_vars';

@mixin panel-icon {
-    color: $color-panel-icon;
+    color: $color-border-dark;
    font-size: 1.2rem;
    font-weight: 400;
    text-decoration: none;
@ -13,7 +13,8 @@
    &:hover,
    &:focus {
        text-decoration: none;
-        color: darken($color-panel-icon, 10%);
+        cursor: pointer;
+        color: darken($color-border-dark, 10%);
    }

    &.active {
@ -341,7 +342,7 @@

        &.active,
        &:hover {
-            background: $color-background;
+            background: $color-theme-secondary;
        }

        &.inactive {
--- a/frontend/app/theme/_vars.scss
+++ b/frontend/app/theme/_vars.scss
@ -6,17 +6,11 @@ $color-border-dark:         #b3bbbf;
 $color-title:               #000;
 $color-text:                #373a3c;
 $color-text-decent:         #8091a5;
-$color-text-decent2:        #a9b9c0;
 $color-tooltip:             #1a2129;
-$color-history:             #7f858c;

 $color-code-background:     #f5f7f9;
 $color-code-text:           #708090;

-$color-input:               #dbe4eb;
-$color-input-background:    #fff;
-$color-input-disabled:      #eef1f4;
-$color-input-border:        rgba(0, 0, 0, .15);
 $color-extern-google:           #d34836;
 $color-extern-google-icon:      #b02c1b;
 $color-extern-microsoft:        #004185;
@ -31,7 +25,7 @@ $color-theme-blue-dark:     #297ff6;
 $color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
-$color-theme-secondary:     #e1e4e8;
+$color-theme-secondary:     #ecf2f6;

 $color-theme-green:         #4bb958;
 $color-theme-green-dark:    #47b353;
@ -43,6 +37,11 @@ $color-theme-error-dark:    #c00;

 $color-theme-info:          #5bc0de;

+$color-input:               #dbe4eb;
+$color-input-background:    #fff;
+$color-input-disabled:      $color-theme-secondary;
+$color-input-border:        rgba(0, 0, 0, .15);
+
 $color-dark1-background:        #2e3842;
 $color-dark1-foreground:        #6a7681;
 $color-dark1-border1:           #37424c;
@ -62,8 +61,6 @@ $color-dark2-placeholder:       #757e8d;

 $color-dark-onboarding:         #273039;

-$color-panel-icon:              #a2b0b6;
-
 $color-badge-success-background:    #e4f6e6;
 $color-badge-success-foreground:    #4cc159;

@ -83,7 +80,7 @@ $color-badge-secondary-background:  #e6e6e6;
 $color-badge-secondary-foreground:  #999;

 $color-table-background:    #fff;
-$color-table-footer:        #ecf2f6;
+$color-table-footer:        $color-theme-secondary;

 $color-table-border:        $color-border;
 $color-table-header:        $color-text-decent;