feat(admin-ui): Restyle form inputs

The single line for input is poor UX in my opinion - it makes inputs look unclear in certain cases. I've restyled form inputs to better match usual styling. Closes #60

admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html

@@ -32,37 +32,35 @@
 <form class="form" [formGroup]="detailForm" *ngIf="(entity$ | async) as category">
     <div class="clr-row">
         <div class="clr-col">
-            <section class="form-block">
-                <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
-                    <clr-toggle-wrapper>
-                        <input type="checkbox" clrToggle formControlName="visible" id="visibility" />
-                        <label class="visible-toggle">
-                            {{
-                                detailForm.value.visible
-                                    ? ('catalog.public' | translate)
-                                    : ('catalog.private' | translate)
-                            }}
-                        </label>
-                    </clr-toggle-wrapper>
-                </vdr-form-field>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input id="name" type="text" formControlName="name" />
-                </vdr-form-field>
-                <vdr-rich-text-editor
-                    formControlName="description"
-                    [label]="'common.description' | translate"
-                ></vdr-rich-text-editor>
+            <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
+                <clr-toggle-wrapper>
+                    <input type="checkbox" clrToggle formControlName="visible" id="visibility" />
+                    <label class="visible-toggle">
+                        {{
+                            detailForm.value.visible
+                                ? ('catalog.public' | translate)
+                                : ('catalog.private' | translate)
+                        }}
+                    </label>
+                </clr-toggle-wrapper>
+            </vdr-form-field>
+            <vdr-form-field [label]="'common.name' | translate" for="name">
+                <input id="name" type="text" formControlName="name" />
+            </vdr-form-field>
+            <vdr-rich-text-editor
+                formControlName="description"
+                [label]="'common.description' | translate"
+            ></vdr-rich-text-editor>
 
-                <section formGroupName="customFields" *ngIf="customFields.length">
-                    <label>{{ 'catalog.custom-fields' }}</label>
-                    <ng-container *ngFor="let customField of customFields">
-                        <vdr-custom-field-control
-                            *ngIf="customFieldIsSet(customField.name)"
-                            [customFieldsFormGroup]="detailForm.get(['customFields'])"
-                            [customField]="customField"
-                        ></vdr-custom-field-control>
-                    </ng-container>
-                </section>
+            <section formGroupName="customFields" *ngIf="customFields.length">
+                <label>{{ 'catalog.custom-fields' }}</label>
+                <ng-container *ngFor="let customField of customFields">
+                    <vdr-custom-field-control
+                        *ngIf="customFieldIsSet(customField.name)"
+                        [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                        [customField]="customField"
+                    ></vdr-custom-field-control>
+                </ng-container>
             </section>
         </div>
         <div class="clr-col-md-auto">

admin-ui/src/app/catalog/components/create-option-group-form/create-option-group-form.component.html

@@ -1,19 +1,15 @@
 <form class="form" [formGroup]="optionGroupForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'catalog.option-group-name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'catalog.option-group-code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-        <vdr-form-field
-            [label]="'catalog.option-group-options-label' | translate"
-            [tooltip]="
-                'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }
-            "
-            for="options"
-        >
-            <textarea id="options" type="text" formControlName="options" rows="10"></textarea>
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'catalog.option-group-name' | translate" for="name">
+        <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'catalog.option-group-code' | translate" for="code" [readOnlyToggle]="true">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <vdr-form-field
+        [label]="'catalog.option-group-options-label' | translate"
+        [tooltip]="'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }"
+        for="options"
+    >
+        <textarea id="options" type="text" formControlName="options" rows="10"></textarea>
+    </vdr-form-field>
 </form>

admin-ui/src/app/catalog/components/product-list/product-list.component.scss

@@ -11,6 +11,10 @@
 }
 .search-form {
     display: flex;
+    align-items: center;
+    .search-input {
+        margin-right: 6px;
+    }
 }
 .search-input {
     min-width: 300px;

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss

@@ -30,6 +30,7 @@
 
     .details {
         display: flex;
+        height: 36px;
         // margin-left: 12px;
         > div {
             margin-right: 12px;
@@ -40,7 +41,7 @@
         }
 
         ::ng-deep .name input {
-            width: 300px;
+           min-width: 300px;
         }
     }
 

admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html

@@ -6,7 +6,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))"
         >
@@ -25,49 +25,43 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm.get('customer')">
-    <section class="form-block">
-        <vdr-form-field
-            [label]="'customer.title' | translate"
-            for="title"
-            [readOnlyToggle]="!(isNew$ | async)"
-        >
-            <input id="title" type="text" formControlName="title" />
-        </vdr-form-field>
-        <vdr-form-field
-            [label]="'customer.first-name' | translate"
-            for="firstName"
-            [readOnlyToggle]="!(isNew$ | async)"
-        >
-            <input id="firstName" type="text" formControlName="firstName" />
-        </vdr-form-field>
-        <vdr-form-field
-            [label]="'customer.last-name' | translate"
-            for="lastName"
-            [readOnlyToggle]="!(isNew$ | async)"
-        >
-            <input id="lastName" type="text" formControlName="lastName" />
-        </vdr-form-field>
-        <vdr-form-field
-            [label]="'customer.email-address' | translate"
-            for="emailAddress"
-            [readOnlyToggle]="!(isNew$ | async)"
-        >
-            <input id="emailAddress" type="text" formControlName="emailAddress" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="(isNew$ | async)">
-            <input id="password" type="password" formControlName="password" />
-        </vdr-form-field>
+    <vdr-form-field [label]="'customer.title' | translate" for="title" [readOnlyToggle]="!(isNew$ | async)">
+        <input id="title" type="text" formControlName="title" />
+    </vdr-form-field>
+    <vdr-form-field
+        [label]="'customer.first-name' | translate"
+        for="firstName"
+        [readOnlyToggle]="!(isNew$ | async)"
+    >
+        <input id="firstName" type="text" formControlName="firstName" />
+    </vdr-form-field>
+    <vdr-form-field
+        [label]="'customer.last-name' | translate"
+        for="lastName"
+        [readOnlyToggle]="!(isNew$ | async)"
+    >
+        <input id="lastName" type="text" formControlName="lastName" />
+    </vdr-form-field>
+    <vdr-form-field
+        [label]="'customer.email-address' | translate"
+        for="emailAddress"
+        [readOnlyToggle]="!(isNew$ | async)"
+    >
+        <input id="emailAddress" type="text" formControlName="emailAddress" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="(isNew$ | async)">
+        <input id="password" type="password" formControlName="password" />
+    </vdr-form-field>
 
-        <section formGroupName="customFields" *ngIf="customFields.length">
-            <label>{{ 'common.custom-fields' | translate }}</label>
-            <ng-container *ngFor="let customField of customFields">
-                <vdr-custom-field-control
-                    *ngIf="customFieldIsSet(customField.name)"
-                    [customFieldsFormGroup]="detailForm.get('customFields')"
-                    [customField]="customField"
-                ></vdr-custom-field-control>
-            </ng-container>
-        </section>
+    <section formGroupName="customFields" *ngIf="customFields.length">
+        <label>{{ 'common.custom-fields' | translate }}</label>
+        <ng-container *ngFor="let customField of customFields">
+            <vdr-custom-field-control
+                *ngIf="customFieldIsSet(customField.name)"
+                [customFieldsFormGroup]="detailForm.get('customFields')"
+                [customField]="customField"
+            ></vdr-custom-field-control>
+        </ng-container>
     </section>
 </form>
 

admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -19,15 +19,13 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" />
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.name' | translate" for="name">
+        <input id="name" type="text" formControlName="name" />
+    </vdr-form-field>
 
     <div class="clr-row">
         <div class="clr-col" formArrayName="conditions">
-            <label>{{ 'marketing.conditions' | translate }}</label>
+            <label class="clr-control-label">{{ 'marketing.conditions' | translate }}</label>
             <ng-container *ngFor="let condition of conditions; index as i">
                 <vdr-configurable-input
                     (remove)="removeCondition($event)"
@@ -59,7 +57,7 @@
             </div>
         </div>
         <div class="clr-col" formArrayName="actions">
-            <label>{{ 'marketing.actions' | translate }}</label>
+            <label class="clr-control-label">{{ 'marketing.actions' | translate }}</label>
             <vdr-configurable-input
                 *ngFor="let action of actions; index as i"
                 (remove)="removeAction($event)"

admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html

@@ -3,7 +3,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -22,40 +22,35 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <label>{{ 'settings.administrator' | translate }}</label>
-        <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
-            <input id="emailAddress" type="text" formControlName="emailAddress" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
-            <input id="firstName" type="text" formControlName="firstName" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
-            <input id="lastName" type="text" formControlName="lastName" />
-        </vdr-form-field>
-        <vdr-form-field *ngIf="(isNew$ | async)" [label]="'settings.password' | translate" for="password">
-            <input id="password" type="password" formControlName="password" />
-        </vdr-form-field>
-        <vdr-form-field
-            *ngIf="!(isNew$ | async)"
-            [label]="'settings.password' | translate"
-            for="password"
-            [readOnlyToggle]="true"
-        >
-            <input id="password" type="password" formControlName="password" />
-        </vdr-form-field>
-    </section>
-    <section class="form-block">
-        <label>{{ 'settings.roles' | translate }}</label>
-        <ng-select
-            [items]="allRoles$ | async"
-            [multiple]="true"
-            [hideSelected]="true"
-            formControlName="roles"
-            (change)="rolesChanged($event)"
-            bindLabel="description"
-        ></ng-select>
-    </section>
+    <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
+        <input id="emailAddress" type="text" formControlName="emailAddress" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
+        <input id="firstName" type="text" formControlName="firstName" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
+        <input id="lastName" type="text" formControlName="lastName" />
+    </vdr-form-field>
+    <vdr-form-field *ngIf="(isNew$ | async)" [label]="'settings.password' | translate" for="password">
+        <input id="password" type="password" formControlName="password" />
+    </vdr-form-field>
+    <vdr-form-field
+        *ngIf="!(isNew$ | async)"
+        [label]="'settings.password' | translate"
+        for="password"
+        [readOnlyToggle]="true"
+    >
+        <input id="password" type="password" formControlName="password" />
+    </vdr-form-field>
+    <label class="clr-control-label">{{ 'settings.roles' | translate }}</label>
+    <ng-select
+        [items]="allRoles$ | async"
+        [multiple]="true"
+        [hideSelected]="true"
+        formControlName="roles"
+        (change)="rolesChanged($event)"
+        bindLabel="description"
+    ></ng-select>
 
     <vdr-permission-grid [permissions]="selectedRolePermissions" [readonly]="true"></vdr-permission-grid>
 </form>

admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -19,33 +19,31 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
-            <input id="token" type="text" formControlName="token" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
-            <select clrSelect name="currencyCode" formControlName="currencyCode">
-                <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
-            </select>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
-            <div class="toggle-switch">
-                <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax" />
-                <label for="pricesIncludeTax"></label>
-            </div>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
-            <select clrSelect name="defaultTaxZoneId" formControlName="defaultTaxZoneId">
-                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
-            </select>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
-            <select clrSelect name="defaultShippingZoneId" formControlName="defaultShippingZoneId">
-                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
-            </select>
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.code' | translate" for="code">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
+        <input id="token" type="text" formControlName="token" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
+        <select clrSelect name="currencyCode" formControlName="currencyCode">
+            <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
+        </select>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
+        <div class="toggle-switch">
+            <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax" />
+            <label for="pricesIncludeTax"></label>
+        </div>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
+        <select clrSelect name="defaultTaxZoneId" formControlName="defaultTaxZoneId">
+            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+        </select>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
+        <select clrSelect name="defaultShippingZoneId" formControlName="defaultShippingZoneId">
+            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+        </select>
+    </vdr-form-field>
 </form>

admin-ui/src/app/settings/components/country-detail/country-detail.component.html

@@ -10,7 +10,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -29,18 +29,16 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
-            <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled" />
-                <label for="enabled"></label>
-            </div>
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.code' | translate" for="code">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.name' | translate" for="name">
+        <input id="name" type="text" formControlName="name" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
+        <div class="toggle-switch">
+            <input type="checkbox" id="enabled" formControlName="enabled" />
+            <label for="enabled"></label>
+        </div>
+    </vdr-form-field>
 </form>

admin-ui/src/app/settings/components/global-settings/global-settings.component.html

@@ -11,34 +11,30 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.available-languages' | translate" for="availableLanguages">
-            <ng-select
-                [items]="languageCodes"
-                [addTag]="false"
-                [hideSelected]="true"
-                multiple="true"
-                appendTo="body"
-                formControlName="availableLanguages"
-            >
-                <ng-template ng-label-tmp let-item="item" let-clear="clear">
-                    <span class="ng-value-icon left" (click)="clear.call(null, item)" aria-hidden="true">
-                        ×
-                    </span>
-                    <span class="ng-value-label">
-                        {{ 'lang.' + item | translate }} ({{ item | uppercase }})
-                    </span>
-                </ng-template>
-                <ng-template ng-option-tmp let-item="item">
-                    {{ 'lang.' + item | translate }} ({{ item | uppercase }})
-                </ng-template>
-            </ng-select>
-        </vdr-form-field>
-        <clr-toggle-wrapper>
-            <input type="checkbox" clrToggle name="enabled" formControlName="trackInventory" />
-            <label>{{ 'settings.track-inventory-default' | translate }}</label>
-        </clr-toggle-wrapper>
-    </section>
+    <vdr-form-field [label]="'common.available-languages' | translate" for="availableLanguages">
+        <ng-select
+            [items]="languageCodes"
+            [addTag]="false"
+            [hideSelected]="true"
+            multiple="true"
+            appendTo="body"
+            formControlName="availableLanguages"
+        >
+            <ng-template ng-label-tmp let-item="item" let-clear="clear">
+                <span class="ng-value-icon left" (click)="clear.call(null, item)" aria-hidden="true">
+                    ×
+                </span>
+                <span class="ng-value-label">{{ 'lang.' + item | translate }} ({{ item | uppercase }})</span>
+            </ng-template>
+            <ng-template ng-option-tmp let-item="item">
+                {{ 'lang.' + item | translate }} ({{ item | uppercase }})
+            </ng-template>
+        </ng-select>
+    </vdr-form-field>
+    <clr-toggle-wrapper>
+        <input type="checkbox" clrToggle name="enabled" formControlName="trackInventory" />
+        <label>{{ 'settings.track-inventory-default' | translate }}</label>
+    </clr-toggle-wrapper>
     <section formGroupName="customFields" *ngIf="customFields.length">
         <label>{{ 'common.custom-fields' | translate }}</label>
         <ng-container *ngFor="let customField of customFields">

admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             [disabled]="detailForm.pristine || detailForm.invalid"
         >
             {{ 'common.create' | translate }}
@@ -22,31 +22,31 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-    </section>
-    <section class="form-block">
-        <vdr-form-field [label]="'common.enabled' | translate" for="description">
-            <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled" />
-                <label for="enabled"></label>
-            </div>
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.code' | translate" for="code">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.enabled' | translate" for="description">
+        <div class="toggle-switch">
+            <input type="checkbox" id="enabled" formControlName="enabled" />
+            <label for="enabled"></label>
+        </div>
+    </vdr-form-field>
 
     <div class="clr-row" formGroupName="configArgs" *ngIf="(entity$ | async).configArgs?.length">
         <div class="clr-col">
             <label>{{ 'settings.payment-method-config-options' | translate }}</label>
             <section class="form-block" *ngFor="let arg of (entity$ | async).configArgs">
-                <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'string'">
+                <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === ConfigArgType.STRING">
                     <input [id]="arg.name" type="text" [formControlName]="arg.name" />
                 </vdr-form-field>
-                <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'int'">
+                <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === ConfigArgType.INT">
                     <input [id]="arg.name" type="number" [formControlName]="arg.name" />
                 </vdr-form-field>
-                <vdr-form-field [label]="arg.name" [for]="arg.name" *ngIf="arg.type === 'boolean'">
+                <vdr-form-field
+                    [label]="arg.name"
+                    [for]="arg.name"
+                    *ngIf="arg.type === ConfigArgType.BOOLEAN"
+                >
                     <div class="toggle-switch" *ngIf="arg.type === 'boolean'">
                         <input type="checkbox" [id]="arg.name" [formControlName]="arg.name" />
                         <label [for]="arg.name"></label>

admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.ts

@@ -19,6 +19,7 @@ import { ServerConfigService } from '../../../data/server-config';
 export class PaymentMethodDetailComponent extends BaseDetailComponent<PaymentMethod.Fragment>
     implements OnInit, OnDestroy {
     detailForm: FormGroup;
+    readonly ConfigArgType = ConfigArgType;
 
     constructor(
         router: Router,

admin-ui/src/app/settings/components/role-detail/role-detail.component.html

@@ -3,7 +3,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -22,25 +22,20 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <label>{{ 'settings.role' | translate }}</label>
-        <vdr-form-field [label]="'common.description' | translate" for="description">
-            <input
-                id="description"
-                type="text"
-                formControlName="description"
-                (input)="updateCode($event.target.value)"
-            />
-        </vdr-form-field>
-        <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-    </section>
-    <section class="form-block">
-        <label>{{ 'settings.permissions' | translate }}</label>
-        <vdr-permission-grid
-            [permissions]="permissions"
-            (permissionChange)="setPermission($event)"
-        ></vdr-permission-grid>
-    </section>
+    <vdr-form-field [label]="'common.description' | translate" for="description">
+        <input
+            id="description"
+            type="text"
+            formControlName="description"
+            (input)="updateCode($event.target.value)"
+        />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <label>{{ 'settings.permissions' | translate }}</label>
+    <vdr-permission-grid
+        [permissions]="permissions"
+        (permissionChange)="setPermission($event)"
+    ></vdr-permission-grid>
 </form>

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.pristine || detailForm.invalid"
         >
@@ -23,20 +23,16 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.code' | translate" for="code">
-            <input id="code" type="text" formControlName="code" />
-        </vdr-form-field>
-    </section>
-    <section class="form-block">
-        <vdr-form-field [label]="'common.description' | translate" for="description">
-            <input id="description" type="text" formControlName="description" />
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.code' | translate" for="code">
+        <input id="code" type="text" formControlName="code" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.description' | translate" for="description">
+        <input id="description" type="text" formControlName="description" />
+    </vdr-form-field>
 
     <div class="clr-row">
         <div class="clr-col">
-            <label>{{ 'settings.shipping-eligibility-checker' | translate }}</label>
+            <label class="clr-control-label">{{ 'settings.shipping-eligibility-checker' | translate }}</label>
             <vdr-configurable-input
                 *ngIf="selectedChecker"
                 [operation]="selectedChecker"
@@ -65,7 +61,7 @@
             </div>
         </div>
         <div class="clr-col">
-            <label>{{ 'settings.shipping-calculator' | translate }}</label>
+            <label class="clr-control-label">{{ 'settings.shipping-calculator' | translate }}</label>
             <vdr-configurable-input
                 *ngIf="selectedCalculator"
                 [operation]="selectedCalculator"

admin-ui/src/app/settings/components/tax-category-detail/tax-category-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -19,9 +19,7 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" />
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.name' | translate" for="name">
+        <input id="name" type="text" formControlName="name" />
+    </vdr-form-field>
 </form>

admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -19,32 +19,30 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm">
-    <section class="form-block">
-        <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" />
-        </vdr-form-field>
-        <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
-            <div class="toggle-switch">
-                <input type="checkbox" id="enabled" formControlName="enabled" />
-                <label for="enabled"></label>
-            </div>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.rate' | translate" for="value">
-            <vdr-affixed-input suffix="%">
-                <input id="value" type="number" step="0.1" formControlName="value" />
-            </vdr-affixed-input>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
-            <select clrSelect name="taxCategoryId" formControlName="taxCategoryId">
-                <option *ngFor="let taxCategory of (taxCategories$ | async)" [value]="taxCategory.id">
-                    {{ taxCategory.name }}
-                </option>
-            </select>
-        </vdr-form-field>
-        <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
-            <select clrSelect name="zoneId" formControlName="zoneId">
-                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
-            </select>
-        </vdr-form-field>
-    </section>
+    <vdr-form-field [label]="'common.name' | translate" for="name">
+        <input id="name" type="text" formControlName="name" />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
+        <div class="toggle-switch">
+            <input type="checkbox" id="enabled" formControlName="enabled" />
+            <label for="enabled"></label>
+        </div>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.rate' | translate" for="value">
+        <vdr-affixed-input suffix="%">
+            <input id="value" type="number" step="0.1" formControlName="value" />
+        </vdr-affixed-input>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
+        <select clrSelect name="taxCategoryId" formControlName="taxCategoryId">
+            <option *ngFor="let taxCategory of (taxCategories$ | async)" [value]="taxCategory.id">
+                {{ taxCategory.name }}
+            </option>
+        </select>
+    </vdr-form-field>
+    <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
+        <select clrSelect name="zoneId" formControlName="zoneId">
+            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+        </select>
+    </vdr-form-field>
 </form>

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.html

@@ -1,3 +1,5 @@
-<ng-content></ng-content>
+<div [class.has-prefix]="!!prefix" [class.has-suffix]="!!suffix">
+    <ng-content></ng-content>
+</div>
 <div class="affix prefix" *ngIf="prefix">{{ prefix }}</div>
 <div class="affix suffix" *ngIf="suffix">{{ suffix }}</div>

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.scss

@@ -3,21 +3,35 @@
 :host {
     display: inline-flex;
 }
+
 .affix {
     display: flex;
     align-items: center;
     background-color: $color-grey-200;
+    border: 1px solid $color-grey-300;
     top: 1px;
     padding: 3px;
     line-height: .58333rem;
-    border-bottom: 1px solid $color-grey-400;
     transition: border 0.2s;
 }
 
+::ng-deep .has-prefix input {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
 .prefix {
     order: -1;
+    border-radius: 3px 0 0 3px;
+    border-right: none;
+}
+
+::ng-deep .has-suffix input {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
 }
 
-::ng-deep input:focus ~ .affix {
-    border-bottom: 2px solid #0094d2;
+.suffix {
+    border-radius: 0 3px 3px 0;
+    border-left: none;
 }

admin-ui/src/app/shared/components/configurable-input/configurable-input.component.scss

@@ -1,6 +1,10 @@
 :host {
     display: block;
     margin-bottom: 12px;
+
+    >.card {
+        margin-top: 6px;
+    }
 }
 
 .operation-inputs {
@@ -11,6 +15,12 @@
         margin-bottom: 24px;
     }
 
+    .arg-row {
+        label {
+            margin-right: 6px;
+        }
+    }
+
     .hidden {
         display: none;
     }

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -15,14 +15,14 @@
         [class.invalid]="formFieldControl?.touched && !formFieldControl?.valid"
         class="tooltip tooltip-validation tooltip-sm tooltip-top-left"
     >
-        <div class="input-row">
+        <div class="input-row" [class.has-toggle]="readOnlyToggle">
             <ng-content></ng-content>
             <button
                 *ngIf="readOnlyToggle"
                 type="button"
                 [disabled]="!isReadOnly"
                 [title]="'common.edit-field' | translate"
-                class="btn btn-icon btn-sm edit-button"
+                class="btn btn-icon edit-button"
                 (click)="setReadOnly(false)"
             >
                 <clr-icon shape="edit"></clr-icon>

admin-ui/src/app/shared/components/form-field/form-field.component.scss

@@ -2,6 +2,9 @@
 
 :host {
     display: block;
+    .form-group > label:first-child {
+        top: 16px;
+    }
     .form-group > label:nth-of-type(2) {
         flex: 1;
         max-width: 20rem;
@@ -35,6 +38,18 @@
         }
         button.edit-button {
             margin: 0;
+            border-radius: 0 3px 3px 0;
+        }
+
+        &.has-toggle {
+            ::ng-deep input {
+                border-top-right-radius: 0 !important;
+                border-bottom-right-radius: 0 !important;
+                border-right: none;
+            }
+        }
+        ::ng-deep clr-toggle-wrapper {
+            margin-top: 8px;
         }
     }
 }

admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -9,11 +9,12 @@
 trix-editor {
     background-color: white;
     min-height: 128px;
-    border: 2px solid $color-grey-300;
+    border: 1px solid $color-grey-300;
     transition: border-color 0.2s;
 
     &:focus {
-        border-color: $color-focused;
+        border-color: $color-primary-500 !important;
+        box-shadow: 0 0 1px 1px $color-primary-100;
     }
 }
 

admin-ui/src/styles/_variables.scss

@@ -57,7 +57,7 @@ $color-warning-700: #674002;
 $color-warning-800: #492c02;
 $color-warning-900: #231401;
 
-$color-grey-100: #fefefe;
+$color-grey-100: #fafafa;
 $color-grey-200: #f2f3f5;
 $color-grey-300: #bfc3cc;
 $color-grey-400: #97979a;
@@ -68,7 +68,5 @@ $color-grey-800: #202223;
 $color-grey-900: #0f1011;
 
 
-$color-focused: #0094d2;
-
 // breakpoints
 $breakpoint-small: 768px;

admin-ui/src/styles/styles.scss

@@ -1,49 +1,9 @@
-/* You can add global styles to this file, and also import other style files */
-@import "variables";
-@import "~@ng-select/ng-select/themes/default.theme.css";
-
-a:link, a:visited {
-    color: darken($color-brand, 20%);
-}
-
-.btn-link.btn-warning {
-    color: $color-warning;
-
-    &:hover {
-        color: darken($color-warning, 20%);
-    }
-}
+// Clarity Dependency SCSS
+@import "~@clr/ui/src/utils/dependencies.clarity"; // Includes light theme
 
-.clr-form-control {
-    margin-top: 0;
-}
+// Clarity Component SCSS
+@import "~@clr/ui/src/utils/components.clarity";
 
-.table {
-    border-color: $color-grey-2;
-}
+@import "theme/theme";
 
-.full-label, .compact-label {
-    margin-left: 6px;
-}
-.full-label {
-    display: none;
-}
-.compact-label {
-    display: initial;
-}
-@media screen and (min-width: $breakpoint-small) {
-    .full-label {
-        display: initial;
-    }
-    .compact-label {
-        display: none;
-    }
-}
-
-table tr .dropdown-menu button.dropdown-item {
-    line-height: 24px;
-
-    &.delete-button {
-        color: #e12200;
-    }
-}
+@import "~@ng-select/ng-select/themes/default.theme.css";

admin-ui/src/styles/theme/_forms.scss

@@ -0,0 +1,59 @@
+@import "variables";
+
+.clr-form-control {
+    margin-top: 0;
+}
+
+input, select {
+    border-radius: 3px !important;
+    border: 1px solid $color-grey-300 !important;
+    padding: 5px !important;
+    height: initial !important;
+    transition: background-color 0.2s, box-shadow 0.2s !important;
+    &:not([readonly]) {
+        background: white !important;
+    }
+    &:focus {
+        border-color: $color-primary-500 !important;
+        box-shadow: 0 0 1px 1px $color-primary-100;
+    }
+}
+
+.clr-input {
+    max-height: none !important;
+}
+
+.tooltip.tooltip-validation::before {
+    top: 10px !important;
+}
+
+select {
+    padding-right: 24px !important;
+}
+
+.select::after, .clr-select-wrapper::after {
+    z-index: 10;
+    top: 13px;
+}
+
+.ng-select .ng-select-container .ng-value-container {
+    padding-top: 0;
+    .ng-value {
+        margin: 0 6px 0 0;
+    }
+    .ng-input {
+        margin: 0;
+    }
+    input {
+        border: none !important;
+        padding: 0;
+        background: none !important;
+    }
+}
+.ng-select.ng-select-single>.ng-select-container{
+       padding-top: 9px;
+}
+.ng-select.ng-select-focused>.ng-select-container {
+    border-color: $color-primary-500 !important;
+    box-shadow: 0 0 1px 1px $color-primary-100;
+}

admin-ui/src/styles/theme/_theme.scss

@@ -0,0 +1,52 @@
+@import "variables";
+@import "forms";
+
+.main-container {
+    background-color: $color-grey-100;
+}
+
+a:link, a:visited {
+    color: $color-primary-600;
+}
+
+a:focus, button:focus {
+    outline-color: $color-primary-400;
+}
+
+.btn-link.btn-warning {
+    color: $color-warning-500;
+
+    &:hover {
+        color: $color-warning-600;
+    }
+}
+
+.table {
+    border-color: $color-grey-200;
+}
+
+.full-label, .compact-label {
+    margin-left: 6px;
+}
+.full-label {
+    display: none;
+}
+.compact-label {
+    display: initial;
+}
+@media screen and (min-width: $breakpoint-small) {
+    .full-label {
+        display: initial;
+    }
+    .compact-label {
+        display: none;
+    }
+}
+
+table tr .dropdown-menu button.dropdown-item {
+    line-height: 24px;
+
+    &.delete-button {
+        color: #e12200;
+    }
+}