Gray buttons improved.

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

@@ -74,8 +74,8 @@
                 </ul>
 
                 <div class="float-right">
-                    <button [disabled]="editFormSubmitted || field.isLocked" type="reset" class="btn btn-link" (click)="cancel()">Cancel</button>
-                    <button [disabled]="editFormSubmitted || field.isLocked" type="submit" class="btn btn-primary">Save</button>
+                    <button [disabled]="editFormSubmitted || field.isLocked" type="reset" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+                    <button [disabled]="editFormSubmitted || field.isLocked" type="submit" class="btn btn-primary ml-1">Save</button>
                 </div>
             </div>
 

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

@@ -54,35 +54,40 @@
             
             <div class="table-items-footer">
                 <form [formGroup]="addFieldForm" (ngSubmit)="addField()">
-                    <div class="form-inline">
-                        <div class="form-group types-group mr-1">
+                    <div class="row no-gutters">
+                        <div class="col-4">
                             <sqx-dropdown formControlName="type" [items]="fieldTypes">
                                 <ng-template let-type="$implicit">
                                     <i class="field-icon icon-type-{{type}}"></i> <span>{{type}}</span>
                                 </ng-template>
                             </sqx-dropdown>
                         </div>
-
-                        <div class="form-group mr-1">
+                        
+                        <div class="col-8 pl-1">
                             <sqx-control-errors for="name" [submitted]="addFieldFormSubmitted"></sqx-control-errors>
 
                             <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" />
                         </div>
-
-                        <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Field</button>
-                        <button type="button" class="btn btn-link" (click)="cancelAddField()">Cancel</button>
                     </div>
 
-                    <div>
-                        <div class="form-check">
-                            <label class="form-check-label pull-left">
-                                <input class="form-check-input" type="checkbox" formControlName="isLocalizable"> Localizable
-                            </label>
+                    <div class="row no-gutters mt-3">
+                        <div class="col">
+                            <div class="form-check">
+                                <label class="form-check-label pull-left">
+                                    <input class="form-check-input" type="checkbox" formControlName="isLocalizable"> Localizable
+                                </label>
+                            </div>
+    
+                            <small class="form-text text-muted">
+                                You can the field as localizable. It means that is dependent on the language, for example a city name.
+                            </small>
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="button" class="btn btn-secondary" (click)="cancelAddField()">Cancel</button>
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Field</button>
                         </div>
-
-                        <small class="form-text text-muted">
-                            You can the field as localizable. It means that is dependent on the language, e.g. a city name.
-                        </small>
                     </div>
                 </form>
             </div>

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

@@ -20,10 +20,6 @@
     margin-right: 1rem;
 }
 
-.types-group {
-    width: 10rem;
-}
-
 .schema {
     &-edit {
         color: $color-border-dark;
@@ -41,7 +37,7 @@
 }
 
 .form-check {
-    margin-top: 1rem;
+    margin-top: .4rem;
     margin-bottom: -.2rem;
 }
 

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -25,15 +25,20 @@
             </div>
 
             <div class="table-items-footer">
-                <form class="form-inline" [formGroup]="addClientForm" (ngSubmit)="attachClient()">
-                    <div class="form-group mr-1">
-                        <sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
-
-                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
+                <form [formGroup]="addClientForm" (ngSubmit)="attachClient()">
+                    <div class="row no-gutters">
+                        <div class="col">
+                            <sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
+                                
+                            <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="reset" class="btn btn-secondary" (click)="cancelAttachClient()">Cancel</button>
+                        </div>
                     </div>
-
-                    <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>
-                    <button type="reset" class="btn btn-link" (click)="cancelAttachClient()">Cancel</button>
                 </form>
             </div>
         </div>

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -55,19 +55,22 @@
             </table>
             
             <div class="table-items-footer">
-                <form class="form-inline" [formGroup]="addContributorForm" (ngSubmit)="assignContributor()">
-                    <div class="form-group mr-1">
-                        <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="email">
-                            <ng-template let-user="$implicit">
-                                <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
+                <form [formGroup]="addContributorForm" (ngSubmit)="assignContributor()">
+                    <div class="row no-gutters">
+                        <div class="col">
+                            <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="email">
+                                <ng-template let-user="$implicit">
+                                    <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
 
-                                <span class="user-name autocomplete-user-name">{{user.displayName}}</span>
-                                <span class="user-email autocomplete-user-email">{{user.email}}</span>
-                            </ng-template>
-                        </sqx-autocomplete>
+                                    <span class="user-name autocomplete-user-name">{{user.displayName}}</span>
+                                    <span class="user-email autocomplete-user-email">{{user.email}}</span>
+                                </ng-template>
+                            </sqx-autocomplete>
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="submit" class="btn btn-success" [disabled]="!canAddContributor">Add Contributor</button>
+                        </div>
                     </div>
-
-                    <button type="submit" class="btn btn-success" [disabled]="!canAddContributor">Add Contributor</button>
                 </form>
             </div>
         </div>

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -20,14 +20,17 @@
             </div>
 
             <div class="table-items-footer">
-                <form class="form-inline" [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()">
-                    <div class="form-group mr-1">
-                        <select class="form-control language-select" formControlName="language">
-                            <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
-                        </select>
+                <form [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()">
+                    <div class="row no-gutters">
+                        <div class="col">
+                            <select class="form-control language-select" formControlName="language">
+                                <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
+                            </select>
+                        </div>
+                        <div class="col col-auto pl-1">
+                            <button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
+                        </div>
                     </div>
-
-                    <button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
                 </form>
             </div>
         </div>

src/Squidex/app/features/settings/pages/languages/languages-page.component.scss

@@ -1,6 +1,2 @@
 @import '_vars';
-@import '_mixins';
-
-.language-select {
-    width: 16rem;
-}
+@import '_mixins';

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

@@ -31,15 +31,20 @@
                     (deleting)="deleteWebhook(webhook)"></sqx-webhook>
 
                 <div class="table-items-footer">
-                    <form class="form-inline" [formGroup]="addWebhookForm" (ngSubmit)="addWebhook()">
-                        <div class="form-group mr-1">
-                            <sqx-control-errors for="url" [submitted]="addWebhookFormSubmitted"></sqx-control-errors>
-
-                            <input type="text" class="form-control url-control" formControlName="url" placeholder="Enter webhook url" autocomplete="off" />
+                    <form [formGroup]="addWebhookForm" (ngSubmit)="addWebhook()">
+                        <div class="row no-gutters">
+                            <div class="col">
+                                <sqx-control-errors for="url" [submitted]="addWebhookFormSubmitted"></sqx-control-errors>
+    
+                                <input type="text" class="form-control url-control" formControlName="url" placeholder="Enter webhook url" autocomplete="off" />
+                            </div>
+                            <div class="col col-auto pl-1">
+                                <button type="submit" class="btn btn-success" [disabled]="!hasUrl">Add Webhook</button>
+                            </div>
+                            <div class="col col-auto pl-1">
+                                <button type="reset" class="btn btn-secondary" (click)="cancelAddWebhook()" [disabled]="addWebhookFormSubmitted">Cancel</button>
+                            </div>
                         </div>
-                        
-                        <button type="submit" class="btn btn-success" [disabled]="!hasUrl">Add Webhook</button>
-                        <button type="reset" class="btn btn-link" (click)="cancelAddWebhook()" [disabled]="addWebhookFormSubmitted">Cancel</button>
                     </form>
                 </div>
             </div>

src/Squidex/app/features/webhooks/pages/webhooks-page.component.scss

@@ -1,10 +1,6 @@
 @import '_vars';
 @import '_mixins';
 
-.url-control {
-    width: 24rem;
-}
-
 .failed {
     color: $color-theme-error;
 }