Design improvements and custom component.

src/Squidex/app/features/administration/pages/users/user-page.component.html

@@ -36,14 +36,14 @@
             <sqx-form-error [error]="userForm.error | async"></sqx-form-error>
 
             <div class="form-group">
-                <label for="email">Email</label>
+                <label for="email">Email <small class="hint">(required)</small></label>
 
                 <sqx-control-errors for="email" [submitted]="userForm.submitted | async"></sqx-control-errors>
 
                 <input type="email" class="form-control" id="email" maxlength="100" formControlName="email" autocomplete="false"  />
             </div>
             <div class="form-group">
-                <label for="displayName">Display Name</label>
+                <label for="displayName">Display Name <small class="hint">(required)</small></label>
 
                 <sqx-control-errors for="displayName" [submitted]="userForm.submitted | async"></sqx-control-errors>
 
@@ -68,9 +68,7 @@
                 </div>
             </div>
 
-            <hr />
+            <div class="form-group form-group-permissions">
-
-            <div class="form-group">
                 <label for="permissions">Permissions</label>
 
                 <sqx-control-errors for="permissions" [submitted]="userForm.submitted | async"></sqx-control-errors>

src/Squidex/app/features/administration/pages/users/user-page.component.scss

@@ -5,6 +5,10 @@
     margin-top: 2rem;
 }
 
+.form-group-permissions {
+    margin-top: 2rem;
+}
+
 textarea {
     height: 200px;
     font-size: .9rem;

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -111,7 +111,7 @@
                 Viewing <strong>version {{version.value}}</strong>.
             </div>
 
-            <div *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)">
+            <ng-container *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)">
                 <sqx-content-field 
                     [form]="contentForm"
                     [field]="field"
@@ -121,7 +121,7 @@
                     [languages]="languages.mutableValues"
                     [(language)]="language">
                 </sqx-content-field>
-            </div>
+            </ng-container>
         </ng-container>
 
         <ng-container sidebar>

src/Squidex/app/features/content/shared/content-item-editor.component.ts

@@ -14,49 +14,49 @@ import { FieldDto } from '@app/shared';
     selector: 'sqx-content-item-editor',
     template: `
         <div [formGroup]="form">
-            <div [ngSwitch]="field.properties.fieldType">
+            <ng-container [ngSwitch]="field.properties.fieldType">
-                <div *ngSwitchCase="'Number'">
+                <ng-container *ngSwitchCase="'Number'">
-                    <div [ngSwitch]="field.properties['editor']">
+                    <ng-container [ngSwitch]="field.properties['editor']">
-                        <div *ngSwitchCase="'Input'">
+                        <ng-container *ngSwitchCase="'Input'">
                             <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
-                        </div>
+                        </ng-container>
-                        <div *ngSwitchCase="'Dropdown'">
+                        <ng-container *ngSwitchCase="'Dropdown'">
                             <select class="form-control" [formControlName]="field.name">
                                 <option [ngValue]="null"></option>
                                 <option *ngFor="let value of field.properties['allowedValues']" [ngValue]="value">{{value}}</option>
                             </select>
-                        </div>
+                        </ng-container>
-                    </div>
+                    </ng-container>
-                </div>
+                </ng-container>
-                <div *ngSwitchCase="'String'">
+                <ng-container *ngSwitchCase="'String'">
-                    <div [ngSwitch]="field.properties['editor']">
+                    <ng-container [ngSwitch]="field.properties['editor']">
-                        <div *ngSwitchCase="'Input'">
+                        <ng-container *ngSwitchCase="'Input'">
                             <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
-                        </div>
+                        </ng-container>
-                        <div *ngSwitchCase="'Slug'">
+                        <ng-container *ngSwitchCase="'Slug'">
                             <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
-                        </div>
+                        </ng-container>
-                        <div *ngSwitchCase="'Dropdown'">
+                        <ng-container *ngSwitchCase="'Dropdown'">
                             <select class="form-control" [formControlName]="field.name">
                                 <option [ngValue]="null"></option>
                                 <option *ngFor="let value of field.properties['allowedValues']" [ngValue]="value">{{value}}</option>
                             </select>
-                        </div>
+                        </ng-container>
-                    </div>
+                    </ng-container>
-                </div>
+                </ng-container>
-                <div *ngSwitchCase="'Boolean'">
+                <ng-container *ngSwitchCase="'Boolean'">
-                    <div [ngSwitch]="field.properties['editor']">
+                    <ng-container [ngSwitch]="field.properties['editor']">
-                        <div *ngSwitchCase="'Toggle'">
+                        <ng-container *ngSwitchCase="'Toggle'">
                             <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired"></sqx-toggle>
-                        </div>
+                        </ng-container>
-                        <div *ngSwitchCase="'Checkbox'">
+                        <ng-container *ngSwitchCase="'Checkbox'">
-                            <div class="form-check form-check-inline">
+                            <ng-container class="form-check form-check-inline">
                                 <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
-                            </div>
+                            </ng-container>
-                        </div>
+                        </ng-container>
-                    </div>
+                    </ng-container>
-                </div>
+                </ng-container>
-            </div>
+            </ng-container>
         </div>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -149,8 +149,8 @@
 	</div>
 
 	<ng-container *ngIf="field.properties.hints; let hints">
-		<small class="form-text text-muted" *ngIf="hints.length > 0">
+		<sqx-form-hint *ngIf="hints.length > 0">
 			{{hints}}
-		</small>
+		</sqx-form-hint>
 	</ng-container>
 </ng-container>

src/Squidex/app/features/rules/pages/rules/actions/generic-action.component.html

@@ -1,36 +1,36 @@
 <div [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row" *ngFor="let property of definition.properties">
         <label class="col-3 col-form-label" [for]="property.name">
-            <span *ngIf="property.editor !== 'Checkbox'">{{property.display}}</span>
+            <ng-container *ngIf="property.editor !== 'Checkbox'">{{property.display}}</ng-container> <small class="hint" *ngIf="property.isRequired">&nbsp;*</small>
         </label>
 
         <div class="col-9">
             <sqx-control-errors [for]="property.name" [submitted]="actionFormSubmitted"></sqx-control-errors>
 
-            <div [ngSwitch]="property.editor">
+            <ng-container [ngSwitch]="property.editor">
-                <div *ngSwitchCase="'TextArea'">
+                <ng-container *ngSwitchCase="'TextArea'">
                     <textarea class="form-control" id="{{property.name}}" [formControlName]="property.name"></textarea>
-                </div>
+                </ng-container>
-                <div *ngSwitchCase="'Checkbox'">
+                <ng-container *ngSwitchCase="'Checkbox'">
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [formControlName]="property.name" />
                         <label class="form-check-label" [for]="property.name">
                             {{property.display}}
                         </label>
                     </div>
-                </div>
+                </ng-container>
-                <div *ngSwitchDefault>
+                <ng-container *ngSwitchDefault>
                     <input type="{{property.editor | lowercase}}" class="form-control" id="{{property.name}}" [formControlName]="property.name" />
-                </div>
+                </ng-container>
-            </div>
+            </ng-container>
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 {{property.description}}
 
                 <ng-container *ngIf="property.isFormattable">
                     You can use advanced formatting: <a href="https://docs.squidex.io/concepts/rules#3-formatting" sqxExternalLink>Documentation</a>
                 </ng-container>
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
 </div>

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss

@@ -7,7 +7,7 @@
 
 .wizard-title {
     background: $color-border;
-    margin: -1rem;
+    margin: -1.5rem -1.75rem;
     margin-bottom: 1rem;
     font-weight: 400;
     font-size: 1.05rem;

src/Squidex/app/features/rules/pages/rules/triggers/usage-trigger.component.html

@@ -6,9 +6,9 @@
 
         <input type="number" step="1" class="form-control" id="limit" formControlName="limit" />
         
-        <small class="form-text text-muted">
+        <sqx-form-hint>
             The monthly api calls to trigger.
-        </small>
+        </sqx-form-hint>
     </div>
 
     <div class="form-group">
@@ -18,8 +18,8 @@
 
         <input type="number" step="1" class="form-control" id="condition" formControlName="numDays" />
         
-        <small class="form-text text-muted">
+        <sqx-form-hint>
             The number of days to check or empty to check the current month.
-        </small>
+        </sqx-form-hint>
     </div>
 </div>

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

@@ -52,10 +52,14 @@
                         </label>
                     </div>
 
-                    <small class="form-text text-muted">
+                    <sqx-form-hint>
                         You can the field as localizable. It means that is dependent on the language, for example a city name.
-                    </small>
+                    </sqx-form-hint>
                 </div>
+
+                <sqx-form-alert class="mt-4">
+                    These values cannot be changed later.
+                </sqx-form-alert>
             </form>
         </ng-container>
 

src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
             
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 The name of the field in the API response.
-            </small>
+            </sqx-form-hint>
         </div>                        
     </div>
 
@@ -19,9 +19,9 @@
 
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the display name for the field for documentation and user interfaces.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
 
@@ -33,9 +33,9 @@
 
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define some hints for the user and editor for the field for documentation and user interfaces.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
 
@@ -48,9 +48,9 @@
                 </label>
             </div>
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-ui.component.html

@@ -1,29 +1,29 @@
-<div [ngSwitch]="field.properties.fieldType">
+<ng-container [ngSwitch]="field.properties.fieldType">
-    <div *ngSwitchCase="'Number'">
+    <ng-container *ngSwitchCase="'Number'">
         <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'String'">
+    <ng-container *ngSwitchCase="'String'">
         <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-string-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Boolean'">
+    <ng-container *ngSwitchCase="'Boolean'">
         <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'DateTime'">
+    <ng-container *ngSwitchCase="'DateTime'">
         <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Geolocation'">
+    <ng-container *ngSwitchCase="'Geolocation'">
         <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Json'">
+    <ng-container *ngSwitchCase="'Json'">
         <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Assets'">
+    <ng-container *ngSwitchCase="'Assets'">
         <sqx-assets-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-assets-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'References'">
+    <ng-container *ngSwitchCase="'References'">
         <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-ui>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Tags'">
+    <ng-container *ngSwitchCase="'Tags'">
         <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-ui>
-    </div>
+    </ng-container>
-</div>
+</ng-container>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.html

@@ -1,29 +1,29 @@
-<div [ngSwitch]="field.properties.fieldType">
+<ng-container [ngSwitch]="field.properties.fieldType">
-    <div *ngSwitchCase="'Number'">
+    <ng-container *ngSwitchCase="'Number'">
         <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'String'">
+    <ng-container *ngSwitchCase="'String'">
         <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.properties" [patterns]="patterns"></sqx-string-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Boolean'">
+    <ng-container *ngSwitchCase="'Boolean'">
         <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'DateTime'">
+    <ng-container *ngSwitchCase="'DateTime'">
         <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Geolocation'">
+    <ng-container *ngSwitchCase="'Geolocation'">
         <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Json'">
+    <ng-container *ngSwitchCase="'Json'">
         <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Assets'">
+    <ng-container *ngSwitchCase="'Assets'">
         <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-assets-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'References'">
+    <ng-container *ngSwitchCase="'References'">
         <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-validation>
-    </div>
+    </ng-container>
-    <div *ngSwitchCase="'Tags'">
+    <ng-container *ngSwitchCase="'Tags'">
         <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-validation>
-    </div>
+    </ng-container>
-</div>
+</ng-container>

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

@@ -70,9 +70,11 @@
             <div class="schemas"
                 [sqxSortModel]="schema.fields"
                 (sqxSort)="sortFields($event)">
-                <div *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)">
+                <sqx-field *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)"
-                    <sqx-field [field]="field" [schema]="schema" [patterns]="patterns"></sqx-field>
+                    [field]="field"
-                </div>
+                    [schema]="schema"
+                    [patterns]="patterns">
+                </sqx-field>
             </div>
     
             <button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()">

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.html

@@ -5,7 +5,13 @@
         </ng-container>
 
         <ng-container content>
-            <h3 class="title">Preview Urls define where the content is used</h3>
+            <sqx-form-hint>
+                Adding a preview url generates a link in the content editor, referring to your custom preview environment where the content item is used.
+            </sqx-form-hint>
+
+            <sqx-form-hint>
+                Read the <a href="https://https://docs.squidex.io/guides/09-preview" sqxExternalLink>documentation</a> before setting up a custom content preview urls.
+            </sqx-form-hint>
 
             <div class="content">
                 <div class="form-group row no-gutters" *ngFor="let form of editForm.form.controls; let i = index">

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss

@@ -3,6 +3,7 @@
 
 .content {
     min-height: 200px;
+    margin-top: 1rem;
 }
 
 .btn-delete {
@@ -16,13 +17,4 @@
 .col-name {
     min-width: 14rem;
     max-width: 14rem;
-}
-
-.title {
-    background: $color-border;
-    margin: -1rem;
-    margin-bottom: 1rem;
-    font-weight: 400;
-    font-size: 1.05rem;
-    padding: 1rem;
 }

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

@@ -14,11 +14,11 @@
 
         <ng-container content>
             <div class="form-group">
-                <div *ngFor="let script of editForm.form.controls | sqxKeys">
+                <ng-container *ngFor="let script of editForm.form.controls | sqxKeys">
                     <ng-container *ngIf="selectedField === script">
                         <sqx-code-editor [formControlName]="script"></sqx-code-editor>
                     </ng-container>
-                </div>
+                </ng-container>
             </div>
         </ng-container>
 

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">
@@ -16,9 +16,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the placeholder for the input control.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">
@@ -16,9 +16,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the placeholder for the input control.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">
@@ -16,9 +16,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the placeholder for the input control.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">
@@ -16,9 +16,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the placeholder for the input control.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.html

@@ -5,9 +5,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Url to your plugin if you use a custom editor.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">
@@ -16,9 +16,9 @@
         <div class="col-6">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
-            <small class="form-text text-muted">
+            <sqx-form-hint>
                 Define the placeholder for the input control.
-            </small>
+            </sqx-form-hint>
         </div>
     </div>
     <div class="form-group row">

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

@@ -14,25 +14,25 @@
             <sqx-form-error [error]="createForm.error | async"></sqx-form-error>
         
             <div class="form-group name-group">
-                <label for="schemaName">Name</label>
+                <label for="schemaName">Name <small class="hint">(required)</small></label>
                 
                 <sqx-control-errors for="name" submitOnly="true" [submitted]="createForm.submitted | async"></sqx-control-errors>
         
                 <input type="text" class="form-control" id="schemaName" formControlName="name" autocomplete="off" sqxTransformInput="LowerCase" sqxFocusOnInit />
 
-                <small class="form-text text-muted">
+                <sqx-form-hint>
-                    You can only use letters, numbers and dashes and not more than 40 characters. The name cannot be changed later.
+                    You can only use letters, numbers and dashes and not more than 40 characters.
-                </small>
+                </sqx-form-hint>
                 
-                <small class="form-text text-muted">
+                <sqx-form-hint>
                     The schema name becomes part of the api url:
-                </small>
+                </sqx-form-hint>
 
                 <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/{{createForm.schemaName | async}}</sqx-code>
             </div>
 
             <div class="form-group">
-                <div class="row no-gutters">
+                <div class="row">
                     <div class="col-6 type">
                         <label>
                             <input type="radio" class="radio-input" name="isSingleton" formControlName="isSingleton" [value]="false" />
@@ -81,6 +81,10 @@
         
                 <sqx-json-editor *ngIf="showImport" formControlName="import"></sqx-json-editor>
             </div>
+
+            <sqx-form-alert>
+                These values cannot be changed later.
+            </sqx-form-alert>
         </ng-container>
 
         <ng-container footer>

src/Squidex/app/features/settings/pages/languages/language.component.html

@@ -80,9 +80,9 @@
                             </label>
                         </div>
     
-                        <small class="form-text text-muted">
+                        <sqx-form-hint>
                             Other languages fall back to the master if no fallback is defined.
-                        </small>
+                        </sqx-form-hint>
                     </div>
                 </div>
 
@@ -95,9 +95,9 @@
                             </label> 
                         </div>
 
-                        <small class="form-text text-muted">
+                        <sqx-form-hint>
                             Values for optional languages must not be entered, even if field is required.
-                        </small>
+                        </sqx-form-hint>
                     </div>
                 </div>
             </div>

src/Squidex/app/framework/angular/forms/control-errors.component.html

@@ -1,7 +1,7 @@
  <div class="errors-container" *ngIf="snapshot.errorMessages.length > 0" @fade>
     <div class="errors">
-        <span *ngFor="let message of snapshot.errorMessages">
+        <ng-container *ngFor="let message of snapshot.errorMessages">
             {{message}}
-        </span>
+        </ng-container>
     </div>
 </div>

src/Squidex/app/framework/angular/forms/form-alert.component.ts

@@ -0,0 +1,21 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'sqx-form-alert',
+    template: `
+        <div class="alert alert-info mt-2 {{class}}">
+            <i class="icon-info-outline"></i> <ng-content></ng-content>
+        </div>`,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormAlertComponent {
+    @Input()
+    public class: string;
+}

src/Squidex/app/framework/angular/forms/form-error.component.html

@@ -1,3 +0,0 @@
-<ng-container *ngIf="error">
-    <div class="form-alert form-alert-error" [innerHTML]="error" @fade></div>
-</ng-container>

src/Squidex/app/framework/angular/forms/form-error.component.scss

@@ -1,2 +0,0 @@
-@import '_mixins';
-@import '_vars';

src/Squidex/app/framework/angular/forms/form-error.component.ts

@@ -11,8 +11,10 @@ import { fadeAnimation } from './../animations';
 
 @Component({
     selector: 'sqx-form-error',
-    styleUrls: ['./form-error.component.scss'],
+    template: `
-    templateUrl: './form-error.component.html',
+        <ng-container *ngIf="error">
+            <div class="form-alert form-alert-error" [innerHTML]="error" @fade></div>
+        </ng-container>`,
     animations: [
         fadeAnimation
     ],

src/Squidex/app/framework/angular/forms/form-hint.component.ts

@@ -0,0 +1,18 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'sqx-form-hint',
+    template: `
+        <small class="text-muted form-text">
+            <ng-content></ng-content>
+        </small>`,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormHintComponent {}

src/Squidex/app/framework/angular/modals/modal-dialog.component.html

@@ -1,5 +1,5 @@
 <div class="modal" @fade>
-    <div class="modal-backdrop"></div>
+    <div class="modal-backdrop show"></div>
 
     <div class="modal-dialog" [class.modal-lg]="large" [class.modal-fh]="fullHeight">
         <div class="modal-content">
@@ -9,7 +9,7 @@
                 </h4>
 
                 <button type="button" class="close" (click)="emitClose()">
-                    <span aria-hidden="true">&times;</span>
+                    <i class="icon-close"></i>
                 </button>
             </div>
 

src/Squidex/app/framework/declarations.ts

@@ -15,7 +15,9 @@ export * from './angular/forms/copy.directive';
 export * from './angular/forms/date-time-editor.component';
 export * from './angular/forms/file-drop.directive';
 export * from './angular/forms/focus-on-init.directive';
+export * from './angular/forms/form-alert.component';
 export * from './angular/forms/form-error.component';
+export * from './angular/forms/form-hint.component';
 export * from './angular/forms/forms-helper';
 export * from './angular/forms/iframe-editor.component';
 export * from './angular/forms/indeterminate-value.directive';

src/Squidex/app/framework/module.ts

@@ -37,7 +37,9 @@ import {
     FileDropDirective,
     FileSizePipe,
     FocusOnInitDirective,
+    FormAlertComponent,
     FormErrorComponent,
+    FormHintComponent,
     FromNowPipe,
     FullDateTimePipe,
     HoverBackgroundDirective,
@@ -115,7 +117,9 @@ import {
         FileDropDirective,
         FileSizePipe,
         FocusOnInitDirective,
+        FormAlertComponent,
         FormErrorComponent,
+        FormHintComponent,
         FromNowPipe,
         FullDateTimePipe,
         HoverBackgroundDirective,
@@ -178,7 +182,9 @@ import {
         FileDropDirective,
         FileSizePipe,
         FocusOnInitDirective,
+        FormAlertComponent,
         FormErrorComponent,
+        FormHintComponent,
         FormsModule,
         FromNowPipe,
         FullDateTimePipe,

src/Squidex/app/shared/components/app-form.component.html

@@ -14,21 +14,25 @@
             <sqx-form-error [error]="createForm.error | async"></sqx-form-error>
         
             <div class="form-group">
-                <label for="appName">Name</label>
+                <label for="appName">Name <small class="hint">(required)</small></label>
                 
                 <sqx-control-errors for="name" submitOnly="true" [submitted]="createForm.submitted | async"></sqx-control-errors>
         
                 <input type="text" class="form-control" id="appName" formControlName="name" autocomplete="off" sqxTransformInput="LowerCase" sqxFocusOnInit />
                     
-                <small class="form-text text-muted">
+                <sqx-form-hint>
-                    You can only use letters, numbers and dashes and not more than 40 characters. The name cannot be changed later.
+                    You can only use letters, numbers and dashes and not more than 40 characters.
-                </small>
+                </sqx-form-hint>
                 
-                <small class="form-text text-muted">
+                <sqx-form-hint>
                     The app name becomes part of the api url:
-                </small>
+                </sqx-form-hint>
 
                 <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{createForm.appName | async}}</sqx-code>
+
+                <sqx-form-alert class="mt-4">
+                    The app name cannot be changed later.
+                </sqx-form-alert>
             </div>
         </ng-container>
 

src/Squidex/app/theme/_bootstrap-vars.scss

@@ -10,8 +10,12 @@ $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;
+
 $danger:                    $color-theme-error;
 $primary:                   $color-theme-blue;
 $secondary:                 $color-theme-secondary;
@@ -20,6 +24,7 @@ $warning:                   $color-theme-orange;
 
 $alert-bg-level:            0;
 $alert-color-level:         -12.5;
+$alert-margin-bottom:       0;
 
 $input-bg-disabled:         $color-input-disabled;
 $input-border-color:        $color-input;
@@ -32,4 +37,16 @@ $dropdown-border-color:     $color-border;
 $card-border-color:         $color-border;
 $card-cap-bg:               $panel-light-background;
 
-$paragraph-margin-bottom:   .5rem;
+$paragraph-margin-bottom:   .5rem;
+
+$modal-backdrop-opacity:    .35;
+$modal-footer-border-width: 1px;
+$modal-header-border-width: 0;
+$modal-header-padding:      1.25rem 1.75rem;
+$modal-inner-padding:       1.5rem 1.75rem;
+$modal-md:                  560px;
+$modal-title-line-height:   1.8rem;
+
+$close-font-weight:         normal;
+$close-font-size:           1rem;
+$close-text-shadow:         none;

src/Squidex/app/theme/_bootstrap.scss

@@ -77,8 +77,22 @@
 }
 
 .alert-info {
-    background: $color-theme-blue;
+    @include border-radius(0);
-    border: 0;
+    background: lighten($color-theme-blue, 35%);
+    border: 1px solid $color-border;
+    font-size: 90%;
+    color: $color-text;
+
+    .alert-link {
+        color: $color-text !important;
+    }
+
+    i {
+        color: $color-theme-blue;
+        font-size: 1.2rem;
+        font-weight: normal;
+        vertical-align: text-bottom;
+    }
 }
 
 a {
@@ -435,15 +449,6 @@ a {
 // Restyle modal dialogs.
 //
 .modal {
-    &-content,
-    &-header {
-        border: 0;
-    }
-
-    &-backdrop {
-        @include opacity(.5);
-    }
-
     &-header,
     &-footer {
         @include flex-shrink(0);
@@ -457,8 +462,7 @@ a {
         & {
             @include border-radius-top(.25rem);
             background: $color-modal-header-background;
-            font-size: 1rem;
+            border: 0;
-            font-weight: normal;
             color: $color-modal-header-foreground;
         }
 
@@ -469,11 +473,7 @@ a {
 
         .close {
             & {
-                @include opacity(1);
-                @include text-shadow-none;
                 color: $color-modal-header-foreground;
-                font-size: 1.6rem;
-                font-weight: 400;
             }
 
             &:hover {

src/Squidex/app/theme/_common.scss

@@ -52,7 +52,7 @@ body {
 //
 .help {
     & {
-        font-size: .9rem;
+        font-size: 90%;
     }
 
     h2,

src/Squidex/app/theme/_forms.scss

@@ -140,6 +140,16 @@
     }
 }
 
+label {
+    & {
+        color: black;
+    }
+
+    .hint {
+        color: $color-text-decent2;
+    }
+}
+
 //
 // Custom search form.
 //

src/Squidex/app/theme/_vars.scss

@@ -5,7 +5,8 @@ $color-border-dark:         #b3bbbf;
 
 $color-title:               #000;
 $color-text:                #373a3c;
-$color-text-decent:         #a9b2bb;
+$color-text-decent:         #8091a5;
+$color-text-decent2:        #a9b9c0;
 $color-tooltip:             #1a2129;
 $color-history:             #7f858c;
 
@@ -88,7 +89,7 @@ $color-table-border:        $color-border;
 $color-table-header:        $color-text-decent;
 
 $color-modal-header-background: #2e3842;
-$color-modal-header-foreground: #6a7681;
+$color-modal-header-foreground: #9eafbc;
 
 $color-dark-black:          #000;
 $color-dark-foreground:     #fff;

src/Squidex/app/theme/icomoon/demo.html

@@ -9,10 +9,26 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;119)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;120)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-info-outline">
+                
+                </span>
+                <span class="mls"> icon-info-outline</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e974" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe974;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-upload-2">
@@ -2120,7 +2136,7 @@
         </label>
         <input id="testText" type="text" class="phl size1of1 mvl"
         placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="icon-">&nbsp;
+        <div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
         </div>
     </div>
     <!--<![endif]-->

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -123,6 +123,7 @@
 <glyph unicode="&#xe971;" glyph-name="upload-4" d="M853.333 320v-170.667c0-5.845-1.152-11.349-3.2-16.299-2.133-5.205-5.333-9.899-9.301-13.867s-8.661-7.125-13.867-9.301c-4.949-2.048-10.453-3.2-16.299-3.2h-597.333c-5.845 0-11.349 1.152-16.299 3.2-5.205 2.133-9.899 5.333-13.867 9.301s-7.125 8.661-9.301 13.867c-2.048 4.949-3.2 10.453-3.2 16.299v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-170.667c0-17.28 3.456-33.835 9.728-48.981 6.485-15.701 16-29.781 27.776-41.557s25.856-21.291 41.557-27.776c15.104-6.229 31.659-9.685 48.939-9.685h597.333c17.28 0 33.835 3.456 48.981 9.728 15.701 6.485 29.781 16 41.557 27.776s21.291 25.856 27.776 41.557c6.229 15.104 9.685 31.659 9.685 48.939v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM469.333 729.003v-409.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v409.003l140.501-140.501c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-213.333 213.333c-0.043 0.043-0.128 0.085-0.171 0.171-4.053 4.011-8.704 7.040-13.653 9.088-10.453 4.309-22.229 4.309-32.683 0-4.949-2.048-9.6-5.077-13.653-9.088-0.043-0.043-0.128-0.085-0.171-0.171l-213.333-213.333c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
 <glyph unicode="&#xe972;" glyph-name="upload-2" d="M214 170.667h596v-86h-596v86zM384 256.667v256h-170l298 298 298-298h-170v-256h-256z" />
 <glyph unicode="&#xe973;" glyph-name="upload-3" d="M469.333 345.003v-281.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v281.003l97.835-97.835c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-170.667 170.667c-0.085 0.085-0.171 0.171-0.256 0.256-4.053 3.968-8.661 6.955-13.568 9.003-5.12 2.133-10.624 3.2-16.085 3.243-0.171 0-0.341 0-0.469 0-5.461-0.043-10.965-1.109-16.085-3.243-4.949-2.048-9.557-5.035-13.568-9.003-0.085-0.085-0.171-0.171-0.256-0.256l-170.667-170.667c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0zM890.411 137.899c30.379 16.555 56.149 38.443 76.672 63.915 21.333 26.411 36.949 56.619 46.379 88.576s12.629 65.835 9.003 99.584c-3.456 32.512-13.269 64.896-29.824 95.232-14.208 26.069-32.384 48.768-53.376 67.669-21.717 19.541-46.421 34.944-72.875 45.952-30.891 12.8-64.171 19.584-98.048 19.84h-22.528c-13.312 37.717-32.085 72.235-55.168 102.912-30.635 40.661-68.821 74.453-111.915 99.84s-91.179 42.411-141.568 49.536c-48.597 6.784-99.243 4.395-149.504-8.619s-95.744-35.413-134.912-64.939c-40.661-30.635-74.453-68.821-99.84-111.915s-42.411-91.179-49.493-141.568c-6.827-48.555-4.395-99.2 8.576-149.461 15.872-61.312 45.781-115.627 84.267-158.421 15.744-17.536 42.752-18.944 60.245-3.2s18.944 42.752 3.2 60.245c-29.355 32.64-52.693 74.667-65.109 122.752-10.155 39.253-11.989 78.592-6.699 116.224 5.504 39.125 18.773 76.501 38.571 110.123s46.080 63.317 77.653 87.083c30.379 22.869 65.664 40.32 104.917 50.475s78.592 11.989 116.224 6.699c39.125-5.504 76.544-18.731 110.123-38.528s63.317-46.080 87.083-77.653c22.869-30.379 40.32-65.664 50.475-104.917 4.907-18.56 21.547-32 41.301-32h53.461c22.869-0.171 45.269-4.736 65.92-13.312 17.707-7.339 34.133-17.621 48.512-30.592 13.909-12.501 25.984-27.605 35.541-45.099 11.093-20.352 17.579-41.899 19.883-63.488 2.389-22.443 0.256-45.013-6.016-66.432s-16.725-41.515-30.933-59.093c-13.611-16.896-30.763-31.445-51.115-42.581-20.693-11.264-28.331-37.205-17.024-57.899s37.205-28.331 57.899-17.024z" />
+<glyph unicode="&#xe974;" glyph-name="info-outline" d="M470 554.667v86h84v-86h-84zM512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM470 212.667v256h84v-256h-84z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?6bqpt3');
+  src:  url('fonts/icomoon.eot?f0elb7');
-  src:  url('fonts/icomoon.eot?6bqpt3#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?f0elb7#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?6bqpt3') format('truetype'),
+    url('fonts/icomoon.ttf?f0elb7') format('truetype'),
-    url('fonts/icomoon.woff?6bqpt3') format('woff'),
+    url('fonts/icomoon.woff?f0elb7') format('woff'),
-    url('fonts/icomoon.svg?6bqpt3#icomoon') format('svg');
+    url('fonts/icomoon.svg?f0elb7#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-info-outline:before {
+  content: "\e974";
+}
 .icon-upload-2:before {
   content: "\e972";
 }

src/Squidex/wwwroot/_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">
-                                    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+                                    <sqx-form-hint>We'll never share your email with anyone else.</small>
                                 </div>
                                 <div class="form-group">
                                     <label for="exampleInputPassword1">Password</label>
@@ -545,7 +545,7 @@
                                 <div class="form-group">
                                     <label for="exampleInputFile">File input</label>
                                     <input type="file" class="form-control-file" aria-describedby="fileHelp">
-                                    <small class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+                                    <sqx-form-hint>This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
                                 </div>
                                 <fieldset class="form-group">
                                     <legend>Radio buttons</legend>
@@ -848,7 +848,7 @@
                 <div class="col-lg-12">
                     <h2>Alerts</h2>
                     <div class="bs-component">
-                        <div class="alert alert-dismissible alert-warning">
+                        <div class="alert alert-dismissible alert-warning mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
                             <h4>Warning!</h4>
                             <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
@@ -859,7 +859,7 @@
             <div class="row">
                 <div class="col-lg-4">
                     <div class="bs-component">
-                        <div class="alert alert-dismissible alert-danger">
+                        <div class="alert alert-dismissible alert-danger mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
                             <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
                         </div>
@@ -867,7 +867,7 @@
                 </div>
                 <div class="col-lg-4">
                     <div class="bs-component">
-                        <div class="alert alert-dismissible alert-success">
+                        <div class="alert alert-dismissible alert-success mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
                             <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
                         </div>
@@ -875,9 +875,9 @@
                 </div>
                 <div class="col-lg-4">
                     <div class="bs-component">
-                        <div class="alert alert-dismissible alert-info">
+                        <div class="alert alert-dismissible alert-info mt-2">
                             <button type="button" class="close" data-dismiss="alert">&times;</button>
-                            <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+                            <i class="icon-info-outline"></i> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
                         </div>
                     </div>
                 </div>
@@ -1192,7 +1192,7 @@
                     <h2>Modals</h2>
                     <div class="bs-component">
                         <div class="modal" style="position: relative; width: 100%; height: 500px">
-                            <div class="modal-backdrop" style="position: absolute"></div> 
+                            <div class="modal-backdrop show" style="position: absolute"></div> 
                         
                             <div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px">
                                 <div class="modal-content">