Edit Workflow UI

frontend/angular/src/app/components/admin-portal/edit-workflow-template/edit-workflow-template.component.html

@@ -359,7 +359,6 @@
                                        [filter]="false"
                                        [options]="applicantSources"
                                        [panelStyle]="{minWidth:'12em'}"
-                                       class="form-control"
                                        name="applicantSources{{message.ObjectID}}"
                                        optionLabel="Description">
                         </p-multiSelect>
@@ -378,8 +377,9 @@
                                      name="Delay{{message.ObjectID}}">
                         </p-inputMask>
                         <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
-                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
-                            <label>{{message.DelayString}}</label>
+                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay"
+                             class="align-form-control-row">
+                            <label class="fancy-label">{{message.DelayString}}</label>
                         </div>
                     </div>
                     <div class="ui-g-{{stage.StageType.IsPreStage ? '1' : '2'}}">
@@ -394,8 +394,9 @@
                                name="Variance{{message.ObjectID}}" type="text">
                         <div
                             (click)="toggleInput($event, 'Variance'+message.ObjectID, true)"
-                            *ngIf="showLabel('Variance'+message.ObjectID) && message.Variance">
-                            <label>{{message.VarianceString}}</label>
+                            *ngIf="showLabel('Variance'+message.ObjectID) && message.Variance"
+                            class="align-form-control-row">
+                            <label class="fancy-label">{{message.VarianceString}}</label>
                         </div>
                     </div>
                     <div class="ui-g-{{stage.StageType.IsPreStage ? '2' : '3'}} business-hours">
@@ -403,7 +404,7 @@
                                     binary="true"
                                     name="BusinessHoursOnly{{message.ObjectID}}">
                         </p-checkbox>
-                        <label title="Business Hours only" class="mb-0">Business Hours
+                        <label title="Business Hours only" class="mb-0 fancy-label">Business Hours
                             only</label>
                     </div>
                     <div class="ui-g-{{stage.StageType.IsPreStage ? '3' : '4'}}">
@@ -432,7 +433,7 @@
                             </ng-template>
                         </p-dropdown>
                     </div>
-                    <div class="ui-g-1 text-right">
+                    <div class="ui-g-1 text-right action-btn-wrapper">
                         <button (click)="configureMessageTemplate(message)"
                                 [disabled]="showLoader" icon="ui-icon-settings"
                                 pButton
@@ -470,8 +471,9 @@
                                      name="Delay{{message.ObjectID}}">
                         </p-inputMask>
                         <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
-                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
-                            <label>{{message.DelayString}}</label>
+                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay"
+                             class="align-form-control-row">
+                            <label class="fancy-label">{{message.DelayString}}</label>
                         </div>
                     </div>
                     <div class="ui-g-2">
@@ -484,10 +486,10 @@
                                class="form-control" id="Variance{{message.ObjectID}}Id"
                                *ngIf="!showLabel('Variance'+message.ObjectID) || !message.Variance"
                                name="Variance{{message.ObjectID}}" type="text">
-                        <div
+                        <div class="align-form-control-row"
                              (click)="toggleInput($event, 'Variance'+message.ObjectID, true)"
                              *ngIf="showLabel('Variance'+message.ObjectID) && message.Variance">
-                            <label>{{message.VarianceString}}</label>
+                            <label class="fancy-label">{{message.VarianceString}}</label>
                         </div>
                     </div>
                     <div class="ui-g-3 business-hours">
@@ -495,7 +497,7 @@
                                     binary="true"
                                     name="BusinessHoursOnly{{message.ObjectID}}">
                         </p-checkbox>
-                        <label title="Business Hours only" class="mb-0">Business Hours
+                        <label title="Business Hours only" class="mb-0 fancy-label">Business Hours
                             only</label>
                     </div>
                     <div class="ui-g-4">
@@ -524,7 +526,7 @@
                             </ng-template>
                         </p-dropdown>
                     </div>
-                    <div class="ui-g-1 text-right">
+                    <div class="ui-g-1 text-right action-btn-wrapper">
                         <button (click)="configureMessageTemplate(message)"
                                 [disabled]="showLoader" icon="ui-icon-settings"
                                 pButton

frontend/angular/src/app/components/admin-portal/edit-workflow-template/edit-workflow-template.component.scss

@@ -7,6 +7,40 @@
     }
 }
 
+.action-btn-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 35px;
+}
+
+.fancy-label {
+    font-size: 14px;
+    font-family: "Usual-Medium";
+    font-weight: 500;
+}
+
+.align-form-control-row {
+    height: 50px;
+    padding: 14px 0;
+}
+
+p-multiSelect {
+    padding: 10px 12px;
+    display: block;
+    height: 40px;
+    border-bottom: 1px solid #bdbdbd;
+
+    ::ng-deep {
+        .ui-multiselect-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}
+
 p-dropdown {
     ::ng-deep {
 
@@ -23,7 +57,8 @@ p-dropdown {
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
-            width: 180px;
+            font-family: "Usual-Medium";
+            font-weight: 500;
         }
     }
 }