UI improvements.

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button type="button" class="btn btn-link btn-export mr-1" (click)="exportSchemaDialog.show()">
+        <button type="button" class="btn btn-link mr-1" (click)="exportSchemaDialog.show()">
             JSON Preview
         </button>
 
@@ -102,13 +102,15 @@
 </ng-container>
 
 <ng-container *sqxModalView="exportSchemaDialog;onRoot:true">
-    <sqx-modal-dialog (closed)="exportSchemaDialog.hide()">
+    <sqx-modal-dialog (closed)="exportSchemaDialog.hide()" large="true">
         <ng-container title>
             Export Schema
         </ng-container>
 
         <ng-container content>
-            <sqx-json-editor disabled [ngModel]="schemaExport"></sqx-json-editor>
+            <div class="json-preview">
+                <sqx-json-editor disabled [ngModel]="schemaExport"></sqx-json-editor>
+            </div>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>

src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss

@@ -20,10 +20,6 @@
     margin: 0;
 }
 
-.btn-export {
-    margin-right: 1rem;
-}
-
 .schemas {
     padding-bottom: 7rem;
 }

src/Squidex/app/framework/angular/forms/code-editor.component.scss

@@ -1,8 +1,25 @@
 @import '_mixins';
 @import '_vars';
 
-.editor {
-    background: $color-dark-foreground;
-    border: 1px solid $color-input;
-    height: 20rem;
+// sass-lint:disable class-name-format
+
+:host /deep/ {
+    .ace_editor {
+        background: $color-dark-foreground;
+        border: 1px solid $color-input;
+        height: 20rem;
+    }
+
+    .ace_active-line,
+    .ace_gutter-active-line {
+        background: none !important;
+    }
+
+    .ace_gutter-active-line {
+        background: darken($color-border, 5%) !important;
+    }
+
+    .ace_gutter {
+        background: $color-border !important;
+    }
 }

src/Squidex/app/framework/angular/forms/json-editor.component.scss

@@ -1,8 +1,25 @@
 @import '_mixins';
 @import '_vars';
 
-.editor {
-    background: $color-dark-foreground;
-    border: 1px solid $color-input;
-    height: 20rem;
+// sass-lint:disable class-name-format
+
+:host /deep/ {
+    .ace_editor {
+        background: $color-dark-foreground;
+        border: 1px solid $color-input;
+        height: 20rem;
+    }
+
+    .ace_active-line,
+    .ace_gutter-active-line {
+        background: none !important;
+    }
+
+    .ace_gutter-active-line {
+        background: darken($color-border, 5%) !important;
+    }
+
+    .ace_gutter {
+        background: $color-border !important;
+    }
 }