Update UI per Options page redesign

src/_locales/en/messages.json

@@ -908,7 +908,10 @@
     "message": "This is currently an experimental feature. Use at your own risk."
   },
   "defaultAutoFillOnPageLoad": {
-    "message": "Default login setting"
+    "message": "Default autofill setting for login items"
+  },
+  "defaultAutoFillOnPageLoadDesc": {
+    "message": "After enabling Auto-fill On Page Load, you can enable or disable the feature for individual login items. This is the default setting for login items that are not separately configured."
   },
   "itemAutoFillOnPageLoad": {
     "message": "Auto-fill On Page Load (if enabled in Options)"
@@ -917,10 +920,10 @@
     "message": "Use default setting"
   },
   "autoFillOnPageLoadYes": {
-    "message": "Auto-fill"
+    "message": "Auto-fill on page load"
   },
   "autoFillOnPageLoadNo": {
-    "message": "Do not auto-fill"
+    "message": "Do not auto-fill on page load"
   },
   "commandOpenPopup": {
     "message": "Open vault popup"

src/popup/scss/box.scss

@@ -77,21 +77,6 @@
         @include themify($themes) {
             color: themed('mutedColor');
         }
-
-        .sub-option {
-            margin-right: 5px;
-            margin-top: 10px;
-            display: flex;
-            justify-content: space-between;
-
-            select {
-                border: 1px solid #000000;
-                border-radius: $border-radius;
-                @include themify($themes) {
-                    border-color: themed('boxBackgroundColor');
-                }
-            }
-        }
     }
 
     &.list {

src/popup/settings/options.component.html

@@ -173,5 +173,17 @@
                 {{'enableAutoTotpCopyOnAutoFillDesc' | i18n}}
             </div>
         </div>
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row" appBoxRow>
+                    <label for="defaultAutofill">{{'defaultAutoFillOnPageLoad' | i18n}}</label>
+                    <select id="defaultAutofill" name="DefaultAutofill" [(ngModel)]="autoFillOnPageLoadDefault"
+                        (change)="updateAutoFillOnPageLoadDefault()" [disabled]="!enableAutoFillOnPageLoad">
+                        <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">{{o.name}}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="box-footer">{{'defaultAutoFillOnPageLoadDesc' | i18n}}</div>
+        </div>
     </ng-container>
 </content>