Minor UI improvements.

backend/src/Squidex.Shared/Permissions.cs

@@ -53,8 +53,7 @@ namespace Squidex.Shared
 
         public const string AppDelete = "squidex.apps.{app}.delete";
         public const string AppUpdate = "squidex.apps.{app}.update";
-        public const string AppUpdateImage = "squidex.apps.{app}.update";
-        public const string AppUpdateGeneral = "squidex.apps.{app}.general";
+        public const string AppUpdateImage = "squidex.apps.{app}.image";
 
         public const string AppHistory = "squidex.apps.{app}.history";
 
@@ -64,8 +63,6 @@ namespace Squidex.Shared
 
         public const string AppTranslate = "squidex.apps.{app}.translate";
 
-        public const string AppUsage = "squidex.apps.{app}.usage";
-
         public const string AppComments = "squidex.apps.{app}.comments";
         public const string AppCommentsRead = "squidex.apps.{app}.comments.read";
         public const string AppCommentsCreate = "squidex.apps.{app}.comments.create";
@@ -148,6 +145,8 @@ namespace Squidex.Shared
         public const string AppContentsVersionDelete = "squidex.apps.{app}.contents.{name}.version.delete";
         public const string AppContentsDelete = "squidex.apps.{app}.contents.{name}.delete";
 
+        public const string AppUsage = "squidex.apps.{app}.usage";
+
         static Permissions()
         {
             foreach (var field in typeof(Permissions).GetFields(BindingFlags.Public | BindingFlags.Static))

backend/src/Squidex/Areas/Api/Controllers/Apps/AppsController.cs

@@ -156,7 +156,7 @@ namespace Squidex.Areas.Api.Controllers.Apps
         [HttpPut]
         [Route("apps/{app}/")]
         [ProducesResponseType(typeof(AppDto), 200)]
-        [ApiPermissionOrAnonymous(Permissions.AppUpdateGeneral)]
+        [ApiPermissionOrAnonymous(Permissions.AppUpdate)]
         [ApiCosts(0)]
         public async Task<IActionResult> UpdateApp(string app, [FromBody] UpdateAppDto request)
         {
@@ -268,7 +268,7 @@ namespace Squidex.Areas.Api.Controllers.Apps
         [HttpDelete]
         [Route("apps/{app}/image")]
         [ProducesResponseType(typeof(AppDto), 200)]
-        [ApiPermissionOrAnonymous(Permissions.AppUpdate)]
+        [ApiPermissionOrAnonymous(Permissions.AppUpdateImage)]
         [ApiCosts(0)]
         public async Task<IActionResult> DeleteImage(string app)
         {

backend/src/Squidex/Areas/Api/Controllers/Apps/Models/AppDto.cs

@@ -168,7 +168,7 @@ namespace Squidex.Areas.Api.Controllers.Apps.Models
                 AddDeleteLink("delete", resources.Url<AppsController>(x => nameof(x.DeleteApp), values));
             }
 
-            if (resources.IsAllowed(P.AppUpdateGeneral, Name, additional: permissions))
+            if (resources.IsAllowed(P.AppUpdate, Name, additional: permissions))
             {
                 AddPutLink("update", resources.Url<AppsController>(x => nameof(x.UpdateApp), values));
             }

frontend/app/_theme.html

@@ -525,7 +525,7 @@
                                 </div>
                                 <div class="form-group">
                                     <label for="exampleSelect1">Example select</label>
-                                    <select class="form-control">
+                                    <select class="custom-select">
                                         <option>1</option>
                                         <option>2</option>
                                         <option>3</option>
@@ -535,7 +535,7 @@
                                 </div>
                                 <div class="form-group">
                                     <label for="exampleSelect2">Example multiple select</label>
-                                    <select multiple class="form-control">
+                                    <select multiple class="custom-select">
                                         <option>1</option>
                                         <option>2</option>
                                         <option>3</option>
@@ -554,28 +554,28 @@
                                 </div>
                                 <fieldset class="form-group">
                                     <legend>Radio buttons</legend>
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option1" checked>
+                                    <div class="custom-control custom-checkbox">
+                                        <label class="custom-control-label">
+                                            <input type="radio" class="custom-control-input" name="optionsRadios" value="option1" checked>
                                             Option one is this and that&mdash;be sure to include why it's great
                                         </label>
                                     </div>
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option2">
+                                    <div class="custom-control custom-checkbox">
+                                        <label class="custom-control-label">
+                                            <input type="radio" class="custom-control-input" name="optionsRadios" value="option2">
                                             Option two can be something else and selecting it will deselect option one
                                         </label>
                                     </div>
-                                    <div class="form-check disabled">
-                                        <label class="form-check-label">
-                                            <input type="radio" class="form-check-input" name="optionsRadios" value="option3" disabled>
+                                    <div class="custom-control custom-checkbox disabled">
+                                        <label class="custom-control-label">
+                                            <input type="radio" class="custom-control-input" name="optionsRadios" value="option3" disabled>
                                             Option three is disabled
                                         </label>
                                     </div>
                                 </fieldset>
-                                <div class="form-check">
-                                    <label class="form-check-label">
-                                        <input class="form-check-input" type="checkbox">
+                                <div class="custom-control custom-checkbox">
+                                    <label class="custom-control-label">
+                                        <input class="custom-control-input" type="checkbox">
                                         Check me out
                                     </label>
                                 </div>

frontend/app/features/administration/pages/restore/restore-page.component.html

@@ -57,7 +57,9 @@
                         <input class="form-control" formControlName="name" placeholder="{{ 'backups.restoreNewAppName' | sqxTranslate }}">
                     </div>
                     <div class="col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="restoreForm.hasNoUrl | async">{{ 'backups.restore' | sqxTranslate }}</button>
+                        <button type="submit" class="btn btn-success" [disabled]="restoreForm.hasNoUrl | async">
+                            {{ 'backups.restore' | sqxTranslate }}
+                        </button>
                     </div>
                 </div>
             </form>

frontend/app/features/content/pages/contents/contents-page.component.html

@@ -82,7 +82,13 @@
                         <thead>
                             <tr>
                                 <th class="cell-select">
-                                    <input type="checkbox" class="form-check" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
+                                    <div class="custom-control custom-checkbox">
+                                        <input class="custom-control-input" type="checkbox" id="all_selected"
+                                            [ngModel]="selectedAll" 
+                                            (ngModelChange)="selectAll($event)">
+
+                                        <label class="custom-control-label" for="all_selected"></label>
+                                    </div>
                                 </th>
                                 <th class="cell-actions cell-actions-left">
                                     {{ 'common.actions' | sqxTranslate }}

frontend/app/features/content/pages/contents/custom-view-editor.component.html

@@ -14,9 +14,9 @@
         <div *ngFor="let field of fieldNames" cdkDrag>
             <i class="icon-drag2 drag-handle"></i> 
             
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
-                <label class="form-check-label" for="field_{{field}}">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
+                <label class="custom-control-label" for="field_{{field}}">
                     {{field}}
                 </label>
             </div>
@@ -29,9 +29,9 @@
         <div *ngFor="let field of fieldsNotAdded">    
             <i class="icon-drag2 drag-handle invisible"></i> 
 
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" (click)="addField(field)" id="field_{{field}}">
-                <label class="form-check-label" for="field_{{field}}">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" (click)="addField(field)" id="field_{{field}}">
+                <label class="custom-control-label" for="field_{{field}}">
                     {{field}}
                 </label>
             </div>

frontend/app/features/content/shared/due-time-selector.component.html

@@ -5,16 +5,16 @@
         </ng-container>
     
         <ng-container content>
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
-                <label class="form-check-label" for="immediately">
+            <div class="custom-control custom-radio">
+                <input class="custom-control-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
+                <label class="custom-control-label" for="immediately">
                     {{ 'contents.changeStatusToImmediately' | sqxTranslate: { action: dueTimeAction } }}
                 </label>
             </div>
     
-            <div class="form-check">
-                <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
-                <label class="form-check-label" for="scheduled">
+            <div class="custom-control custom-radio">
+                <input class="custom-control-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
+                <label class="custom-control-label" for="scheduled">
                     {{ 'contents.changeStatusToLater' | sqxTranslate: { action: dueTimeAction } }}
                 </label>
             </div>
@@ -23,8 +23,13 @@
         </ng-container>
     
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancelStatusChange()">{{ 'common.cancel' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>{{ 'common.confirm' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary" (click)="cancelStatusChange()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
+    
+            <button type="button" class="btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>
+                {{ 'common.confirm' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>

frontend/app/features/content/shared/forms/field-editor.component.html

@@ -36,7 +36,10 @@
                             <sqx-toggle [formControl]="editorControl" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Checkbox'">
-                            <input type="checkbox" [formControl]="editorControl" class="form-check" sqxIndeterminateValue />
+                            <div class="custom-control custom-checkbox">
+                                <input class="custom-control-input" type="checkbox" [formControl]="editorControl" id="{{uniqueId}}" sqxIndeterminateValue>
+                                <label class="custom-control-label" for="{{uniqueId}}"></label>
+                            </div>
                         </ng-container>
                     </ng-container>
                 </ng-container>
@@ -52,21 +55,21 @@
 				<ng-container *ngSwitchCase="'Number'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder">
 						</ng-container>
 						<ng-container *ngSwitchCase="'Stars'">
 							<sqx-stars [formControl]="editorControl" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="editorControl">
+							<select class="custom-select" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
-							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" />
-								<label class="form-check-label">
+							<div class="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
+								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
+								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
 									{{value}}
 								</label>
 							</div>
@@ -110,10 +113,10 @@
 				<ng-container *ngSwitchCase="'String'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder">
 						</ng-container>
 						<ng-container *ngSwitchCase="'Slug'">
-							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify">
 						</ng-container>
 						<ng-container *ngSwitchCase="'TextArea'">
 							<textarea class="form-control" [formControl]="editorControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
@@ -131,15 +134,15 @@
 							<sqx-stock-photo-editor [formControl]="editorControl"></sqx-stock-photo-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="editorControl">
+							<select class="custom-select" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
-							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="editorControl" [name]="uniqueId" />
-								<label class="form-check-label">
+							<div class="custom-control custom-radio custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
+								<input class="custom-control-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
+								<label class="custom-control-label" for="{{uniqueId}}_{{value}}">
 									{{value}}
 								</label>
 							</div>
@@ -158,7 +161,7 @@
                             <sqx-checkbox-group [formControl]="editorControl" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Dropdown'">
-                            <select multiple class="form-control" [formControl]="editorControl">
+                            <select multiple class="custom-select" [formControl]="editorControl">
                                 <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                             </select>
                         </ng-container>

frontend/app/features/content/shared/list/content-value-editor.component.html

@@ -3,13 +3,13 @@
         <ng-container *ngSwitchCase="'Number'">
             <ng-container [ngSwitch]="field.rawProperties.editor">
                 <ng-container *ngSwitchCase="'Input'">
-                    <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                    <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Stars'">
                     <sqx-stars [formControlName]="field.name" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Dropdown'">
-                    <select class="form-control" [formControlName]="field.name">
+                    <select class="custom-select" [formControlName]="field.name">
                         <option [ngValue]="null"></option>
                         <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                     </select>
@@ -19,13 +19,13 @@
         <ng-container *ngSwitchCase="'String'">
             <ng-container [ngSwitch]="field.rawProperties.editor">
                 <ng-container *ngSwitchCase="'Input'">
-                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Slug'">
-                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+                    <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify">
                 </ng-container>
                 <ng-container *ngSwitchCase="'Dropdown'">
-                    <select class="form-control" [formControlName]="field.name">
+                    <select class="custom-select" [formControlName]="field.name">
                         <option [ngValue]="null"></option>
                         <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                     </select>
@@ -38,8 +38,9 @@
                     <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Checkbox'">
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
+                    <div class="custom-control custom-checkbox custom-control custom-checkbox-inline">
+                        <input class="custom-control-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue>
+                        <label class="custom-control-label"></label>
                     </div>
                 </ng-container>
             </ng-container>

frontend/app/features/content/shared/list/content.component.html

@@ -1,6 +1,12 @@
 <tr [sqxTabRouterLink]="link">
     <td class="cell-select inline-edit" sqxStopClick>
-        <input type="checkbox" class="form-check" [ngModel]="selected" (ngModelChange)="selectedChange.emit($event)">
+        <div class="custom-control custom-checkbox">
+            <input class="custom-control-input" type="checkbox" id="{{content.id}}_selected" 
+                [ngModel]="selected"
+                (ngModelChange)="selectedChange.emit($event)" />
+
+            <label class="custom-control-label" for="{{content.id}}_selected" ></label>
+        </div>
 
         <ng-container *ngIf="isDirty">
             <div class="edit-menu">

frontend/app/features/content/shared/references/content-creator.component.html

@@ -2,7 +2,7 @@
     <ng-container title>
         <div class="row">
             <div class="col-selector">
-                <select class="form-control form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
+                <select class="custom-select form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
                     <option *ngFor="let schema of schemas" [ngValue]="schema.id">
                         {{ 'contents.referencesSelectSchema' | sqxTranslate: { schema: schema.displayName } }}
                     </option>

frontend/app/features/content/shared/references/content-selector-item.component.html

@@ -1,6 +1,6 @@
 <tr (click)="toggle()">
     <td class="cell-select" sqxStopClick>
-        <input type="checkbox" class="form-check"
+        <input type="checkbox" class="custom-control custom-checkbox"
             [disabled]="!selectable"
             [ngModel]="selected || !selectable"
             (ngModelChange)="select($event)"

frontend/app/features/content/shared/references/content-selector.component.html

@@ -2,7 +2,7 @@
     <ng-container title>
         <div class="row">
             <div class="col-selector">
-                <select class="form-control form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
+                <select class="custom-select form-control-dark" [ngModel]="schema?.id" (ngModelChange)="selectSchema($event)">
                     <option *ngFor="let schema of schemas" [ngValue]="schema.id">
                         {{ 'contents.referencesSelectSchema' | sqxTranslate: { schema: schema.displayName } }}
                     </option>
@@ -44,7 +44,7 @@
                         <thead>
                             <tr>
                                 <th class="cell-select">
-                                    <input type="checkbox" class="form-check" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
+                                    <input type="checkbox" class="custom-control custom-checkbox" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)">
                                 </th>
                                 <th sqxContentListCell="meta.lastModifiedBy.avatar">
                                     <sqx-content-list-header field="meta.lastModifiedBy.avatar"></sqx-content-list-header>
@@ -85,7 +85,7 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="button" class="btn btn-secondary" (click)="emitComplete()">
+        <button type="button" class="btn text-secondary" (click)="emitComplete()">
             {{ 'common.cancel' | sqxTranslate }}
         </button>
 

frontend/app/features/dashboard/pages/cards/api-performance-card.component.html

@@ -3,10 +3,10 @@
         {{ 'dashboard.apiPerformanceCard' | sqxTranslate: { summary: chartSummary } }}
 
         <div class="float-right">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
 
-                <label class="form-check-label" for="stacked">
+                <label class="custom-control-label" for="stacked">
                     {{ 'dashboard.stackedChart' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html

@@ -3,10 +3,10 @@
         {{ 'dashboard.trafficHeader' | sqxTranslate }}: {{chartSummary | sqxFileSize}}
 
         <div class="float-right">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="stacked" [ngModel]="isStacked" (ngModelChange)="isStackedChange.emit($event)">
 
-                <label class="form-check-label" for="stacked">
+                <label class="custom-control-label" for="stacked">
                     {{ 'dashboard.stackedChart' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/dashboard/pages/dashboard-config.component.html

@@ -6,10 +6,10 @@
     <ng-container *sqxModal="dropdownModal">
         <div class="dropdown-menu" [sqxAnchoredTo]="buttonSettings" @fade position="bottom-right">
             <div class="dropdown-item" *ngFor="let item of configDefaults">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="field_{{item.type}}" [ngModel]="isSelected(item)" (ngModelChange)="addOrRemove(item)">
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" id="field_{{item.type}}" [ngModel]="isSelected(item)" (ngModelChange)="addOrRemove(item)">
     
-                    <label class="form-check-label" for="field_{{item.type}}">
+                    <label class="custom-control-label" for="field_{{item.type}}">
                         {{item.name | sqxTranslate}}
                     </label>
                 </div>
@@ -47,9 +47,13 @@
             </ng-container>
     
             <ng-container footer>
-                <button type="button" class="btn btn-secondary" (click)="expertDialog.hide()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-text-secondary2" (click)="expertDialog.hide()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
 
-                <button type="button" class="btn btn-primary" (click)="completeExpertMode()">{{ 'common.update' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-primary" (click)="completeExpertMode()">
+                    {{ 'common.update' | sqxTranslate }}
+                </button>
             </ng-container>
         </sqx-modal-dialog>
     </ng-container>

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

@@ -12,15 +12,15 @@
                     <textarea class="form-control" id="{{property.name}}" [formControlName]="property.name"></textarea>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Checkbox'">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="{{property.name}}" [formControlName]="property.name" />
-                        <label class="form-check-label" for="{{property.name}}">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="{{property.name}}" [formControlName]="property.name">
+                        <label class="custom-control-label" for="{{property.name}}">
                             {{property.display}}
                         </label>
                     </div>
                 </ng-container>
                 <ng-container *ngSwitchDefault>
-                    <input type="{{property.editor | lowercase}}" class="form-control" id="{{property.name}}" [formControlName]="property.name" />
+                    <input type="{{property.editor | lowercase}}" class="form-control" id="{{property.name}}" [formControlName]="property.name">
                 </ng-container>
             </ng-container>
 

frontend/app/features/rules/pages/rules/rule-wizard.component.html

@@ -106,14 +106,23 @@
 
     <ng-container footer>
         <ng-container *ngIf="step === 2 || step === 4">
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
         </ng-container>
 
         <ng-container *ngIf="isEditable">
-            <button *ngIf="step === 2 &&  isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">{{ 'common.continue' | sqxTranslate }}</button>
-            <button *ngIf="step === 2 && !isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">{{ 'common.save' | sqxTranslate }}</button>
+            <button *ngIf="step === 2 &&  isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">
+                {{ 'common.continue' | sqxTranslate }}
+            </button>
 
-            <button *ngIf="step === 4" type="submit" class="btn btn-primary" (click)="saveAction()">{{ 'common.save' | sqxTranslate }}</button>
+            <button *ngIf="step === 2 && !isWizard" type="submit" class="btn btn-primary" (click)="saveTrigger()">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
+
+            <button *ngIf="step === 4" type="submit" class="btn btn-primary" (click)="saveAction()">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </ng-container>
     </ng-container>
 </sqx-modal-dialog>

frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html

@@ -38,7 +38,7 @@
     <div class="section" *ngIf="schemasToAdd.length > 0">
         <form class="form-inline" (ngSubmit)="addSchema()">
             <div class="form-group mr-1">
-                <select class="form-control schemas-control" [disabled]="triggerForm.disabled" [(ngModel)]="schemaToAdd" name="schema">
+                <select class="custom-select schemas-control" [disabled]="triggerForm.disabled" [(ngModel)]="schemaToAdd" name="schema">
                     <option *ngFor="let schema of schemasToAdd; trackBy: trackBySchema" [ngValue]="schema">{{schema.displayName}}</option>
                 </select>
             </div>
@@ -74,9 +74,9 @@
 </ng-container>
 
 <div class="form-group" [formGroup]="triggerForm">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="handleAll" formControlName="handleAll" />
-        <label class="form-check-label" for="handleAll">
+    <div class="custom-control custom-checkbox">
+        <input class="custom-control-input" type="checkbox" id="handleAll" formControlName="handleAll">
+        <label class="custom-control-label" for="handleAll">
             Trigger on all content events
         </label>
     </div>

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

@@ -4,7 +4,7 @@
 
         <sqx-control-errors for="limit"></sqx-control-errors>
 
-        <input type="number" step="1" class="form-control" id="limit" formControlName="limit" />
+        <input type="number" step="1" class="form-control" id="limit" formControlName="limit">
         
         <sqx-form-hint>
             The monthly api calls to trigger.
@@ -16,7 +16,7 @@
 
         <sqx-control-errors for="numDays" fieldName="Days"></sqx-control-errors>
 
-        <input type="number" step="1" class="form-control" id="condition" formControlName="numDays" />
+        <input type="number" step="1" class="form-control" id="condition" formControlName="numDays">
         
         <sqx-form-hint>
             The number of days to check or empty to check the current month.

frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.html

@@ -61,7 +61,9 @@
             </div>
         </div>
         <div class="card-footer">
-            <button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>

frontend/app/features/schemas/pages/schema/export/schema-export-form.component.html

@@ -4,23 +4,25 @@
             <div class="col"></div>
             <div class="col-auto">
                 <div class="form-inline">
-                    <div class="form-check pr-4">
-                        <input class="form-check-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete">
-                        <label class="form-check-label" for="fieldsDelete">
+                    <div class="custom-control custom-checkbox pr-4">
+                        <input class="custom-control-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete">
+                        <label class="custom-control-label" for="fieldsDelete">
                             {{ 'schemas.export.deleteFields' | sqxTranslate }}
                         </label>
                     </div>
     
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate">
-                        <label class="form-check-label" for="fieldsRecreate">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate">
+                        <label class="custom-control-label" for="fieldsRecreate">
                             {{ 'schemas.export.recreateFields' | sqxTranslate }}
                         </label>
                     </div>
                 </div>
             </div>
             <div class="col-auto">
-                <button type="submit" class="btn btn-primary">{{ 'schemas.export.synchronize' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-primary">
+                    {{ 'schemas.export.synchronize' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </div>

frontend/app/features/schemas/pages/schema/fields/field-wizard.component.html

@@ -43,9 +43,9 @@
                 </div>
 
                 <div class="form-group" *ngIf="!parent && (addFieldForm.isContentField | async)">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable">
-                        <label class="form-check-label" for="isLocalizable">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable">
+                        <label class="custom-control-label" for="isLocalizable">
                             {{ 'schemas.field.localizable' | sqxTranslate }}
                         </label>
                     </div>
@@ -70,17 +70,32 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button type="reset" class="float-left btn btn-text-secondary2" (click)="emitComplete()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
         <div *ngIf="!editing">
-            <button type="button" class="btn btn-outline-success" (click)="addField(false)">{{ 'schemas.addFieldAndClose' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-success ml-1" (click)="addField(true)">{{ 'schemas.addFieldAndCreate' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-success ml-1" (click)="addField(false, true)">{{ 'schemas.addFieldAndEdit' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-outline-success" (click)="addField(false)">
+                {{ 'schemas.addFieldAndClose' | sqxTranslate }}
+            </button>
+
+            <button type="button" class="btn btn-success ml-1" (click)="addField(true)">
+                {{ 'schemas.addFieldAndCreate' | sqxTranslate }}
+            </button>
+
+            <button type="button" class="btn btn-success ml-1" (click)="addField(false, true)">
+                {{ 'schemas.addFieldAndEdit' | sqxTranslate }}
+            </button>
         </div>
 
         <div *ngIf="editing">
-            <button type="button" class="btn btn-success" (click)="save(true)">{{ 'schemas.saveFieldAndNew' | sqxTranslate }}</button>
-            <button type="button" class="btn btn-primary ml-1" (click)="save()">{{ 'schemas.saveFieldAndClose' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-success" (click)="save(true)">
+                {{ 'schemas.saveFieldAndNew' | sqxTranslate }}
+            </button>
+            
+            <button type="button" class="btn btn-primary ml-1" (click)="save()">
+                {{ 'schemas.saveFieldAndClose' | sqxTranslate }}
+            </button>
         </div>
     </ng-container>
 </sqx-modal-dialog>

frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldRequired">
                     {{ 'schemas.field.required' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.html

@@ -12,9 +12,13 @@
     </ul>
 
     <div class="float-right" *ngIf="showButtons">
-        <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button [disabled]="field.isLocked" type="reset" class="btn btn-text-secondary2" (click)="cancel.emit()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
-        <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 </div>
 

frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html

@@ -4,7 +4,7 @@
         <label class="col-3 col-form-label" for="{{field.fieldId}}_previewMode">{{ 'schemas.fieldTypes.assets.previewMode' | sqxTranslate }}</label>
 
         <div class="col-6">
-            <select type="text" class="form-control" id="{{field.fieldId}}_previewMode" formControlName="previewMode">
+            <select class="custom-select" id="{{field.fieldId}}_previewMode" formControlName="previewMode">
                 <option value="ImageAndFileName">{{ 'schemas.fieldTypes.assets.previewImageAndFileName' | sqxTranslate }}</option>
                 <option value="Image">{{ 'schemas.fieldTypes.assets.previewImage' | sqxTranslate }}</option>
                 <option value="FileName">{{ 'schemas.fieldTypes.assets.previewFileName' | sqxTranslate }}</option>
@@ -18,9 +18,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldResolveFirst" formControlName="resolveFirst">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldResolveFirst">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldResolveFirst" formControlName="resolveFirst">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldResolveFirst">
                     {{ 'schemas.fieldTypes.assets.resolve' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.html

@@ -30,9 +30,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldMustBeImage" formControlName="mustBeImage">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldMustBeImage">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldMustBeImage" formControlName="mustBeImage">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldMustBeImage">
                     {{ 'schemas.fieldTypes.assets.mustBeImage' | sqxTranslate }}
                 </label>
             </div>
@@ -89,9 +89,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldAllowDuplicates">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldAllowDuplicates">
                     {{ 'schemas.fieldTypes.assets.allowDuplicates' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.html

@@ -25,9 +25,9 @@
     </div>
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
-                <label class="form-check-label" for="{{field.fieldId}}_fieldDefaultValue">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue>
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldDefaultValue">
                     {{ 'schemas.field.defaultValue' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.html

@@ -20,7 +20,7 @@
             <label class="col-3 col-form-label">{{ 'schemas.fieldTypes.dateTime.defaultMode' | sqxTranslate }}</label>
 
             <div class="col-3">
-                <select class="form-control" formControlName="calculatedDefaultValue">
+                <select class="custom-select" formControlName="calculatedDefaultValue">
                     <option></option>
                     <option *ngFor="let value of calculatedDefaultValues" [ngValue]="value">{{value}}</option>
                 </select>

frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.html

@@ -32,9 +32,9 @@
     </div>
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row" *ngIf="showUnique">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
-                <label class="form-check-label" for="{{field.fieldId}}_fieldUnique">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldUnique">
                     {{ 'schemas.field.unique' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/references-ui.component.html

@@ -15,9 +15,9 @@
 
     <div class="form-group row" *ngIf="field.properties.isContentField">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldResolveReferences" formControlName="resolveReference">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldResolveReferences">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldResolveReferences" formControlName="resolveReference">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldResolveReferences">
                     Resolve reference
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html

@@ -10,9 +10,9 @@
 
     <div class="form-group row">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldAllowDuplicates">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldAllowDuplicates" formControlName="allowDuplicates">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldAllowDuplicates">
                     {{ 'schemas.fieldTypes.assets.allowDuplicates' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/string-ui.component.html

@@ -95,9 +95,9 @@
     </div>
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
-                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldInlineEditable">
                     {{ 'schemas.field.inlineEditable' | sqxTranslate }}
                 </label>
             </div>

frontend/app/features/schemas/pages/schema/fields/types/string-validation.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row" *ngIf="showUnique">
         <div class="col-9 offset-3">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
-                <label class="form-check-label" for="{{field.fieldId}}_fieldUnique">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldUnique" formControlName="isUnique"> 
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldUnique">
                     {{ 'schemas.field.unique' | sqxTranslate }}
                 </label>
             </div>
@@ -66,7 +66,7 @@
         <label class="col-3 col-form-label">{{ 'schemas.fieldTypes.string.contentType' | sqxTranslate }}</label>
 
         <div class="col-6">
-            <select class="form-control" formControlName="contentType">
+            <select class="custom-select" formControlName="contentType">
                 <option *ngFor="let contentType of contentTypes" [ngValue]="contentType">{{contentType}}</option>
             </select>
         </div>

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

@@ -54,7 +54,9 @@
             </div>
         </div>
         <div class="card-footer" *ngIf="isEditable">
-            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>

frontend/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html

@@ -12,7 +12,7 @@
                     <div class="col col-action pr-1">
                         <sqx-control-errors for="action"></sqx-control-errors>
 
-                        <select class="form-control" formControlName="action">
+                        <select class="custom-select" formControlName="action">
                             <option *ngFor="let fieldAction of fieldActions" [ngValue]="fieldAction">{{fieldAction}}</option>
                         </select>
                     </div>
@@ -20,7 +20,7 @@
                     <div class="col-3 pr-1">
                         <sqx-control-errors for="field"></sqx-control-errors>
 
-                        <select class="form-control" formControlName="field">
+                        <select class="custom-select" formControlName="field">
                             <option *ngFor="let field of fieldNames" [ngValue]="field">{{field}}</option>
                         </select>
                     </div>
@@ -72,7 +72,9 @@
             </div>
         </div>
         <div class="card-footer" *ngIf="isEditable">
-            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+            <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+                {{ 'common.save' | sqxTranslate }}
+            </button>
         </div>
     </div>
 </form>

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

@@ -6,7 +6,9 @@
             </li>
         </ul>
         
-        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 
     <div class="inner-main">

frontend/app/features/schemas/pages/schema/ui/schema-ui-form.component.html

@@ -6,7 +6,9 @@
             </li>
         </ul>
 
-        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+        <button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">
+            {{ 'common.save' | sqxTranslate }}
+        </button>
     </div>
 
     <div class="inner-main">

frontend/app/features/schemas/pages/schemas/schema-form.component.html

@@ -82,9 +82,13 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancel.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="cancel.emit()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
-            <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+            <button type="submit" class="btn btn-success">
+                {{ 'common.create' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </form>

frontend/app/features/settings/pages/clients/client-add-form.component.html

@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="id" maxlength="40" placeholder="{{ 'clients.clientNamePlaceholder' | sqxTranslate }}" autocomplete="off" sqxTransformInput="LowerCase">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">{{ 'clients.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoId | async">
+                    {{ 'clients.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>

frontend/app/features/settings/pages/clients/client-connect-form.component.html

@@ -157,6 +157,8 @@
     </ng-container>
 
     <ng-container footer>
-        <button class="btn btn-secondary" [disabled]="isStart" (click)="go('Start')">{{ 'common.back' | sqxTranslate }}</button>
+        <button class="btn btn-text-secondary2" [disabled]="isStart" (click)="go('Start')">
+            {{ 'common.back' | sqxTranslate }}
+        </button>
     </ng-container>
 </sqx-modal-dialog>

frontend/app/features/settings/pages/clients/client.component.html

@@ -6,7 +6,9 @@
                 </sqx-editable-title>
             </div>
             <div class="col-auto">
-                <button type="button" class="btn btn-primary" (click)="connectDialog.show()">{{ 'clients.connect' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-primary" (click)="connectDialog.show()">
+                    {{ 'clients.connect' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto cell-actions no-padding">
                 <button type="button" class="btn btn-text-danger" [disabled]="!client.canRevoke"
@@ -52,7 +54,7 @@
                     {{ 'common.role' | sqxTranslate }}
                 </label>
                 <div class="col cell-input">
-                    <select class="form-control" [disabled]="!client.canUpdate" [ngModel]="client.role" (ngModelChange)="updateRole($event)">
+                    <select class="custom-select" [disabled]="!client.canUpdate" [ngModel]="client.role" (ngModelChange)="updateRole($event)">
                         <option *ngFor="let role of clientRoles; trackBy: trackByRole" [ngValue]="role.name">{{role.name}}</option>
                     </select>
                 </div>
@@ -60,10 +62,10 @@
             </div>
             <div class="form-group row">
                 <div class="col cell-input offset-3">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="{{client.id}}_allowAnonymous" [disabled]="!client.canUpdate" [ngModel]="client.allowAnonymous" (ngModelChange)="updateAllowAnonymous($event)">
+                    <div class="custom-control custom-checkbox">
+                        <input class="custom-control-input" type="checkbox" id="{{client.id}}_allowAnonymous" [disabled]="!client.canUpdate" [ngModel]="client.allowAnonymous" (ngModelChange)="updateAllowAnonymous($event)">
             
-                        <label class="form-check-label" for="{{client.id}}_allowAnonymous">
+                        <label class="custom-control-label" for="{{client.id}}_allowAnonymous">
                             {{ 'clients.allowAnonymous' | sqxTranslate }}
                         </label>
                     </div>
@@ -79,7 +81,7 @@
                     {{ 'clients.apiCallsLimit' | sqxTranslate }}
                 </label>
                 <div class="col cell-input">
-                    <input type="number" class="form-control" min="0" [disabled]="!client.canUpdate" [(ngModel)]="apiCallsLimit" />
+                    <input type="number" class="form-control" min="0" [disabled]="!client.canUpdate" [(ngModel)]="apiCallsLimit">
 
                     <sqx-form-hint>{{ 'clients.apiCallsLimitHint' | sqxTranslate }}</sqx-form-hint>
                 </div>

frontend/app/features/settings/pages/contributors/contributor-add-form.component.html

@@ -13,12 +13,14 @@
                 </sqx-autocomplete>
             </div>
             <div class="col-3 pl-1">
-                <select class="form-control" formControlName="role">
+                <select class="custom-select" formControlName="role">
                     <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
                 </select>
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">{{ 'contributors.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">
+                    {{ 'contributors.add' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>

frontend/app/features/settings/pages/contributors/contributor.component.html

@@ -6,7 +6,7 @@
         <span class="user-name table-cell" [innerHTML]="contributor.contributorName | sqxHighlight:search"></span>
     </td>
     <td class="cell-time">
-        <select class="form-control" [ngModel]="contributor.role" (ngModelChange)="changeRole($event)" [disabled]="!contributor.canUpdate">
+        <select class="custom-select" [ngModel]="contributor.role" (ngModelChange)="changeRole($event)" [disabled]="!contributor.canUpdate">
             <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
         </select>
     </td>

frontend/app/features/settings/pages/contributors/import-contributors-dialog.component.html

@@ -25,7 +25,7 @@
                         </div>
 
                         <div class="col-5 pl-1">
-                            <select class="form-control" [(ngModel)]="status.role" [ngModelOptions]="standalone">
+                            <select class="custom-select" [(ngModel)]="status.role" [ngModelOptions]="standalone">
                                 <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
                             </select>
                         </div>
@@ -48,15 +48,21 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="close.emit()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="close.emit()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
             <ng-container [ngSwitch]="importStage">
                 <ng-container *ngSwitchCase="'Start'">
-                    <button type="submit" class="btn btn-success" [disabled]="importForm.hasNoUser | async">{{ 'contributors.import.run' | sqxTranslate }}</button>
+                    <button type="submit" class="btn btn-success" [disabled]="importForm.hasNoUser | async">
+                        {{ 'contributors.import.run' | sqxTranslate }}
+                    </button>
                 </ng-container>
 
                 <ng-container *ngSwitchCase="'Change'">
-                    <button type="button" class="btn btn-success" [disabled]="importStatus.length === 0" (click)="import()">{{ 'contributors.import.run2' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-success" [disabled]="importStatus.length === 0" (click)="import()">
+                        {{ 'contributors.import.run2' | sqxTranslate }}
+                    </button>
                 </ng-container>
             </ng-container>
         </ng-container>

frontend/app/features/settings/pages/languages/language-add-form.component.html

@@ -2,12 +2,14 @@
     <form [formGroup]="addLanguageForm.form" (ngSubmit)="addLanguage()">
         <div class="row no-gutters">
             <div class="col">
-                <select class="form-control" formControlName="language">
+                <select class="custom-select" formControlName="language">
                     <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
                 </select>
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success">{{ 'languages.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success">
+                    {{ 'languages.add' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>

frontend/app/features/settings/pages/languages/language.component.html

@@ -29,8 +29,13 @@
         <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-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                        {{ 'common.cancel' | sqxTranslate }}
+                    </button>
+                    
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+                        { 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
 
@@ -60,12 +65,14 @@
                         <form class="form fallback-form" (ngSubmit)="addFallbackLanguage()" *ngIf="otherLanguage && isEditable">
                             <div class="row no-gutters">
                                 <div class="col">
-                                    <select class="form-control fallback-select" [(ngModel)]="otherLanguage" name="otherLanguage">
+                                    <select class="custom-select fallback-select" [(ngModel)]="otherLanguage" name="otherLanguage">
                                         <option *ngFor="let otherLanguage of fallbackLanguagesNew; trackBy: trackByLanguage" [ngValue]="otherLanguage">{{otherLanguage.englishName}}</option>
                                     </select>
                                 </div>
                                 <div class="col-auto pl-1">
-                                    <button type="submit" class="btn btn-success">{{ 'languages.add' | sqxTranslate }}</button>
+                                    <button type="submit" class="btn btn-success">
+                                        {{ 'languages.add' | sqxTranslate }}
+                                    </button>
                                 </div>
                             </div>
                         </form>
@@ -74,9 +81,9 @@
 
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isMaster" formControlName="isMaster">
-                            <label class="form-check-label" for="{{language.iso2Code}}_isMaster">
+                        <div class="custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="{{language.iso2Code}}_isMaster" formControlName="isMaster">
+                            <label class="custom-control-label" for="{{language.iso2Code}}_isMaster">
                                 {{ 'languages.master' | sqxTranslate }}
                             </label>
                         </div>
@@ -89,9 +96,9 @@
 
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isOptional" formControlName="isOptional">
-                            <label class="form-check-label" for="{{language.iso2Code}}_isOptional">
+                        <div class="custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="{{language.iso2Code}}_isOptional" formControlName="isOptional">
+                            <label class="custom-control-label" for="{{language.iso2Code}}_isOptional">
                                 {{ 'languages.optional' | sqxTranslate }}
                             </label> 
                         </div>

frontend/app/features/settings/pages/more/more-page.component.html

@@ -35,7 +35,9 @@
                 </div>
 
                 <div class="card-footer">
-                    <button type="submit" class="float-right btn btn-primary">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="submit" class="float-right btn btn-primary">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
         </form>

frontend/app/features/settings/pages/roles/role-add-form.component.html

@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="{{ 'roles.roleNamePlaceholder' | sqxTranslate }}" autocomplete="off">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">{{ 'roles.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addRoleForm.hasNoName | async">
+                    {{ 'roles.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>

frontend/app/features/settings/pages/roles/role.component.html

@@ -32,8 +32,13 @@
         <form (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                        {{ 'common.cancel' | sqxTranslate }}
+                    </button>
+                    
+                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </div>
             </div>
 
@@ -45,20 +50,18 @@
                 </sqx-form-hint>
 
                 <ng-container *ngIf="!role.isDefaultRole; else defaultRole">
-                    <table class="table table-bordered table-fixed table-sm">
-                        <tr *ngFor="let control of editForm.controls; let i = index">
-                            <td class="col-name">
-                                <sqx-control-errors [for]="control" [fieldName]="'Permission'"></sqx-control-errors>
-    
-                                <sqx-autocomplete inputStyle="empty" [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
-                            </td>
-                            <td class="col-action" *ngIf="isEditable">
-                                <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
-                                    <i class="icon-bin2"></i>
-                                </button>
-                            </td>
-                        </tr>
-                    </table>
+                    <div class="row no-gutters mb-1" *ngFor="let control of editForm.controls; let i = index">
+                        <div class="col">
+                            <sqx-control-errors [for]="control" [fieldName]="'Permission'"></sqx-control-errors>
+
+                            <sqx-autocomplete [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
+                        </div>
+                        <div class="col-auto pl-1" *ngIf="isEditable">
+                            <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
+                                <i class="icon-bin2"></i>
+                            </button>
+                        </div>
+                    </div>
                 </ng-container>
 
                 <ng-template #defaultRole>
@@ -69,7 +72,7 @@
                     <table class="table table-bordered table-fixed table-sm">
                         <tr *ngFor="let control of editForm.controls; let i = index">
                             <td>
-                                <input class="form-control form-control-empty" [formControl]="control" />
+                                {{control.value}}
                             </td>
                         </tr>
                     </table>
@@ -96,13 +99,13 @@
                     </sqx-form-hint>
 
                     <div class="row rule-section">
-                        <div class="form-check col-6" *ngFor="let property of propertiesSimple; trackBy: trackByProperty">
-                            <input class="form-check-input" type="checkbox" id="{{role.name}}_{{property.key}}"
+                        <div class="custom-control custom-checkbox  col-6" *ngFor="let property of propertiesSimple; trackBy: trackByProperty">
+                            <input class="custom-control-input" type="checkbox" id="{{role.name}}_{{property.key}}"
                                 [disabled]="!isEditable"
                                 [ngModel]="getProperty(property.key)"
                                 (ngModelChange)="setProperty(property.key, $event)"
                                 [ngModelOptions]="standalone">
-                            <label class="form-check-label" for="{{role.name}}{{property.key}}">
+                            <label class="custom-control-label" for="{{role.name}}_{{property.key}}">
                                 {{ property.name | sqxTranslate }}
                             </label>
                         </div>
@@ -112,13 +115,13 @@
                         <h5>{{ 'common.schemas' | sqxTranslate }}</h5>
 
                         <div class="row rule-section">
-                            <div class="form-check col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
-                                <input class="form-check-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
+                            <div class="custom-control custom-checkbox col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
+                                <input class="custom-control-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
                                     [disabled]="!isEditable"
                                     [ngModel]="getProperty(propertiesList.HIDE_CONTENTS(schema.name))"
                                     (ngModelChange)="setProperty(propertiesList.HIDE_CONTENTS(schema.name), $event)"
                                     [ngModelOptions]="standalone">
-                                <label class="form-check-label truncate" for="{{role.name}}_schema_{{schema.name}}">
+                                <label class="custom-control-label truncate" for="{{role.name}}_schema_{{schema.name}}">
                                     {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
                                 </label>
                             </div>

frontend/app/features/settings/pages/workflows/workflow-add-form.component.html

@@ -7,10 +7,14 @@
                 <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="{{ 'workflows.workflowNamePlaceholder' | sqxTranslate }}" autocomplete="off">
             </div>
             <div class="col-auto pl-1">
-                <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">{{ 'workflows.add' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async">
+                    {{ 'workflows.add' | sqxTranslate }}
+                </button>
             </div>
             <div class="col-auto pl-1">
-                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="cancel()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
             </div>
         </div>
     </form>

frontend/app/features/settings/pages/workflows/workflow-step.component.html

@@ -50,10 +50,10 @@
         <div class="row transition-prevent-updates no-gutters">
             <div class="col col-arrow"></div>
             <div class="col col-step">
-                <div class="form-check float-right">
-                    <input class="form-check-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}" [disabled]="disabled" [ngModel]="step.noUpdate" (ngModelChange)="changeNoUpdate($event)">
+                <div class="custom-control custom-checkbox float-right">
+                    <input class="custom-control-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}" [disabled]="disabled" [ngModel]="step.noUpdate" (ngModelChange)="changeNoUpdate($event)">
 
-                    <label class="form-check-label" for="preventUpdates_{{step.name}}">
+                    <label class="custom-control-label" for="preventUpdates_{{step.name}}">
                         {{ 'workflows.preventUpdates' | sqxTranslate }}
                     </label>
                 </div>

frontend/app/features/settings/pages/workflows/workflow.component.html

@@ -42,8 +42,13 @@
             </ul>
 
             <div class="float-right">
-                <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
-                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">{{ 'common.save' | sqxTranslate }}</button>
+                <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
+
+                <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable" (click)="save()">
+                    {{ 'common.save' | sqxTranslate }}
+                </button>
             </div>
         </div>
 

frontend/app/framework/angular/forms/editable-title.component.html

@@ -9,7 +9,9 @@
                 </div>
             </div>
             <div class="col-auto">
-                <button type="submit" class="btn btn-primary mr-1" [disabled]="!renameForm.valid || !renameForm.dirty">{{ 'common.save' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-primary mr-1" [disabled]="!renameForm.valid || !renameForm.dirty">
+                    {{ 'common.save' | sqxTranslate }}
+                </button>
         
                 <button type="button" class="btn btn-text-secondary btn-cancel mr-4" (click)="toggleRename()">
                     <i class="icon-close"></i>

frontend/app/framework/angular/forms/editors/checkbox-group.component.html

@@ -1,11 +1,13 @@
 <div #container (sqxResized)="updateContainerWidth($event.width)">
-    <div class="form-check" [class.form-check-block]="!snapshot.isSingleLine" [class.form-check-inline]="snapshot.isSingleLine" *ngFor="let value of valuesSorted">
-        <input type="checkbox" class="form-check-input" id="{{controlId}}{{value}}"
+    <div class="custom-control custom-checkbox" *ngFor="let value of valuesSorted"
+        [class.custom-control-block]="!snapshot.isSingleLine"
+        [class.custom-control-inline]="snapshot.isSingleLine">
+        <input class="custom-control-input" type="checkbox" id="{{controlId}}_{{value}}"
             (blur)="callTouched()"
             (change)="check($event.target.checked, value)" 
             [checked]="isChecked(value)"
             [disabled]="snapshot.isDisabled">
     
-        <label class="form-check-label" for="{{controlId}}{{value}}">{{value}}</label>
+        <label class="custom-control-label" for="{{controlId}}_{{value}}">{{value}}</label>
     </div>
 </div>

frontend/app/framework/angular/forms/editors/checkbox-group.component.scss

@@ -1,10 +1,10 @@
-.form-check-block {
+.custom-control-block {
     & {
         margin-bottom: .5rem;
         margin-left: 0;
     }
 
-    .form-check-input {
+    .custom-control-input {
         margin-top: .3rem;
     }
 }

frontend/app/framework/angular/forms/editors/stars.component.html

@@ -4,7 +4,9 @@
             <span class="star" *ngFor="let star of snapshot.starsArray" (mouseenter)="setPreview(star)" (click)="setValue(star)" [class.selected]="star <= snapshot.stars"></span>
         </span>
 
-        <button type="button" class="btn btn-text" [class.hidden]="!snapshot.value" (click)="reset()">{{ 'common.clear' | sqxTranslate }}</button>
+        <button type="button" class="btn btn-text" [class.hidden]="!snapshot.value" (click)="reset()">
+            {{ 'common.clear' | sqxTranslate }}
+        </button>
     </ng-container>
 
     <ng-template #noStars>

frontend/app/framework/angular/forms/editors/tag-editor.component.html

@@ -47,13 +47,13 @@
             <div class="control-dropdown suggestions-dropdown" [sqxAnchoredTo]="form" position="bottom-left" @fade>
                 <div class="row">
                     <div class=" col-6" *ngFor="let item of suggestionsSorted; let i = index">
-                        <div class="form-check form-check">
-                            <input class="form-check-input" type="checkbox" id="tag_{{i}}"
+                        <div class="custom-control custom-checkbox custom-control custom-checkbox">
+                            <input class="custom-control-input" type="checkbox" id="tag_{{i}}"
                                 [ngModel]="isSelected(item)"
                                 (ngModelChange)="toggleValue($event, item)"
                             />
 
-                            <label class="form-check-label truncate" for="tag_{{i}}" title="{{item.name}}" titlePosition="top-left">
+                            <label class="custom-control-label truncate" for="tag_{{i}}" title="{{item.name}}" titlePosition="top-left">
                                 {{item.name}}
                             </label>
                         </div>

frontend/app/framework/angular/modals/dialog-renderer.component.html

@@ -9,19 +9,23 @@
         <ng-container content>
             <span [innerHTML]="request.text | sqxTranslate | sqxMarkdown"></span>
 
-            <div class="form-check mt-4" *ngIf="request.canRemember">
-                <input class="form-check-input" type="checkbox" id="remember" [(ngModel)]="request.remember">
+            <div class="custom-control custom-checkbox mt-4" *ngIf="request.canRemember">
+                <input class="custom-control-input" type="checkbox" id="remember" [(ngModel)]="request.remember">
 
-                <label class="form-check-label" for="remember">
+                <label class="custom-control-label" for="remember">
                     {{ 'common.remember' | sqxTranslate}}
                 </label>
             </div>
         </ng-container>
     
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="cancel()">{{ 'common.no' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="cancel()">
+                {{ 'common.no' | sqxTranslate }}
+            </button>
 
-            <button type="button" class="btn btn-danger" (click)="confirm()" sqxFocusOnInit>{{ 'common.yes' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-danger" (click)="confirm()" sqxFocusOnInit>
+                {{ 'common.yes' | sqxTranslate }}
+            </button>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>

frontend/app/framework/angular/pager.component.html

@@ -1,6 +1,6 @@
 <div class="clearfix" *ngIf="pager && (!autoHide || pager.canGoPrev || pager.canGoNext)">
     <div class="float-right pagination">
-        <select class="form-control form-control-sm" [ngModel]="pager.pageSize" (ngModelChange)="setPageSize($event)">
+        <select class="custom-select custom-select-sm" [ngModel]="pager.pageSize" (ngModelChange)="setPageSize($event)">
             <option *ngFor="let pageSize of pageSizes" [ngValue]="pageSize">{{pageSize}}</option>
         </select>
 

frontend/app/framework/angular/pager.component.scss

@@ -1,4 +1,4 @@
-.form-control {
+.custom-select {
     display: inline-block;
     margin-right: 2rem;
     margin-top: .25rem;

frontend/app/shared/components/app-form.component.html

@@ -33,9 +33,13 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
 
-            <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+            <button type="submit" class="btn btn-success">
+                {{ 'common.create' | sqxTranslate }}
+            2</button>
         </ng-container>
     </sqx-modal-dialog>
 </form>

frontend/app/shared/components/assets/asset-dialog.component.html

@@ -9,13 +9,19 @@
             
             <ng-container [ngSwitch]="selectedTab">
                 <ng-container *ngSwitchCase="'i18n:assets.tabImage'">
-                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="cropImage()" [class.invisible]="!isUploadable" [disabled]="progress > 0">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="cropImage()" [class.invisible]="!isUploadable" [disabled]="progress > 0">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
                 <ng-container *ngSwitchCase="'i18n:assets.tabFocusPoint'">
-                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
                 <ng-container *ngSwitchCase="'i18n:assets.tabMetadata'">
-                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">{{ 'common.save' | sqxTranslate }}</button>
+                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">
+                        {{ 'common.save' | sqxTranslate }}
+                    </button>
                 </ng-container>
             </ng-container>
         </ng-container>
@@ -108,10 +114,10 @@
                             </div>
                         </div>
                     
-                        <div class="form-group form-check">
-                            <input type="checkbox" class="form-check-input" id="isProtected" formControlName="isProtected">
+                        <div class="form-group custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="isProtected" formControlName="isProtected">
             
-                            <label class="form-check-label" for="isProtected">{{ 'assets.protected' | sqxTranslate }}</label>
+                            <label class="custom-control-label" for="isProtected">{{ 'assets.protected' | sqxTranslate }}</label>
                         </div>
                     </div>
                 </ng-container>

frontend/app/shared/components/assets/asset-folder-dialog.component.html

@@ -28,7 +28,9 @@
         </ng-container>
 
         <ng-container footer>
-            <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+            <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+                {{ 'common.cancel' | sqxTranslate }}
+            </button>
             
             <button type="submit" class="btn btn-success">
                 <ng-container *ngIf="assetFolder; else noAssetFolderButton">

frontend/app/shared/components/assets/assets-selector.component.html

@@ -41,8 +41,12 @@
     </ng-container>
 
     <ng-container footer>
-        <button type="button" class="btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
+        <button type="button" class="btn btn-text-secondary2" (click)="emitComplete()">
+            {{ 'common.cancel' | sqxTranslate }}
+        </button>
 
-        <button type="submit" class="btn btn-success" (click)="emitSelect()" [disabled]="snapshot.selectionCount === 0">{{ 'assets.linkSelected' | sqxTranslate: { count: snapshot.selectionCount } }})</button>
+        <button type="submit" class="btn btn-success" (click)="emitSelect()" [disabled]="snapshot.selectionCount === 0">
+            {{ 'assets.linkSelected' | sqxTranslate: { count: snapshot.selectionCount } }})
+        </button>
     </ng-container>
 </sqx-modal-dialog>

frontend/app/shared/components/comments/comment.component.html

@@ -29,9 +29,10 @@
                 <textarea class="form-control mb-1" name="{{comment.id}}" sqxFocusOnInit [(ngModel)]="editingText" [mention]="mentionUsers" [mentionConfig]="mentionConfig" (keydown)="updateWhenEnter($event)"></textarea>
     
                 <div>
-                    <button type="button" class="btn btn-sm btn-secondary mr-1" (click)="cancelEdit()">
+                    <button type="button" class="btn btn-sm btn-text-secondary2 mr-1" (click)="cancelEdit()">
                         {{ 'common.cancel' | sqxTranslate }}
                     </button>
+
                     <button type="submit" class="btn btn-sm btn-primary">
                         <i class="icon-enter"></i> {{ 'common.save' | sqxTranslate }}
                     </button>

frontend/app/shared/components/forms/geolocation-editor.component.html

@@ -27,7 +27,9 @@
             </div>
 
             <div class="form-group col-auto" *ngIf="!snapshot.isCompact">
-                <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">{{ 'common.clear' | sqxTranslate }}</button>
+                <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">
+                    {{ 'common.clear' | sqxTranslate }}
+                </button>
             </div>
         </form>
         <div class="col-auto">

frontend/app/shared/components/search/queries/filter-comparison.component.html

@@ -7,14 +7,14 @@
         </sqx-query-path>
     </div>
     <div class="col-auto operator pl-1">
-        <select class="form-control" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
+        <select class="custom-select" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
             <option *ngFor="let operator of fieldModel.operators" [ngValue]="operator.value">{{operator.name | sqxTranslate}}</option>
         </select>
     </div>
     <div class="col pl-1" *ngIf="!noValue" [ngSwitch]="fieldModel.type">
         <ng-container *ngSwitchCase="'boolean'">
-            <div class="form-check form-check-inline pl-2">
-                <input type="checkbox" class="form-check-input"
+            <div class="custom-control custom-checkbox custom-control custom-checkbox-inline pl-2">
+                <input type="checkbox" class="custom-control-input"
                     [ngModel]="filter.value"
                     (ngModelChange)="changeValue($event)"
                 />

frontend/app/shared/components/search/queries/sorting.component.html

@@ -7,7 +7,7 @@
                 [model]="model">
             </sqx-query-path>
 
-            <select class="form-control ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
+            <select class="custom-select ml-1" [ngModel]="sorting.order" (ngModelChange)="changeOrder($event)">
                 <option *ngFor="let mode of modes" [ngValue]="mode">{{mode}}</option>
             </select>
         </div>

frontend/app/shared/components/search/search-form.component.html

@@ -75,18 +75,22 @@
                     <input type="text" class="form-control" id="appName" formControlName="name" autocomplete="off" sqxFocusOnInit>
                 </div>
 
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" formControlName="user" id="user">
-                    <label class="form-check-label" for="user">
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" formControlName="user" id="user">
+                    <label class="custom-control-label" for="user">
                         {{ 'search.saveQueryMyself' | sqxTranslate }}
                     </label>
                 </div>
             </ng-container>
         
             <ng-container footer>
-                <button type="button" class="btn btn-secondary" (click)="saveQueryDialog.hide()">{{ 'common.cancel' | sqxTranslate }}</button>
+                <button type="button" class="btn btn-text-secondary2" (click)="saveQueryDialog.hide()">
+                    {{ 'common.cancel' | sqxTranslate }}
+                </button>
                
-                <button type="submit" class="btn btn-success">{{ 'common.create' | sqxTranslate }}</button>
+                <button type="submit" class="btn btn-success">
+                    {{ 'common.create' | sqxTranslate }}
+                </button>
             </ng-container>
         </sqx-modal-dialog>
     </form>

frontend/app/theme/_forms.scss

@@ -223,6 +223,11 @@ label {
         font-weight: normal;
     }
 
+    &.custom-control-label {
+        font-size: 100%;
+        font-weight: normal;
+    }
+
     .hint {
         color: $color-text-decent;
     }