UI updates to encrypted export

apps/web/src/app/tools/import-export/export.component.html

@@ -84,7 +84,6 @@
         <br />
 
         <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-          <div class="input-group">
           <bit-form-field class="tw-w-full">
             <bit-label>{{ "filePassword" | i18n }}</bit-label>
             <input
@@ -94,31 +93,25 @@
               formControlName="filePassword"
               name="password"
             />
-
-              <div class="input-group-append">
             <button
-                  bitSuffix
+              type="button"
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showFilePassword"
+              bitSuffix
+              bitButton
               (click)="toggleFilePassword()"
-                  type="button"
             >
               <i
-                    class="bwi bwi-lg"
                 aria-hidden="true"
+                class="bwi bwi-lg bwi-eye"
                 [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
               ></i>
             </button>
-              </div>
+            <bit-hint>
-            </bit-form-field>
-            <div class="small text-muted">
               {{ "exportPasswordDescription" | i18n }}
-            </div>
+            </bit-hint>
-          </div>
+          </bit-form-field>
-          <div class="input-group tw-mt-4">
+
           <bit-form-field class="tw-w-full">
             <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
             <input
@@ -128,29 +121,24 @@
               formControlName="confirmFilePassword"
               name="confirmFilePassword"
             />
-              <div class="input-group-append">
             <button
+              type="button"
               bitSuffix
               bitButton
-                  buttonType="secondary"
-                  appStopClick
               appA11yTitle="{{ 'toggleVisibility' | i18n }}"
               [attr.aria-pressed]="showConfirmFilePassword"
               (click)="toggleConfirmFilePassword()"
-                  type="button"
             >
               <i
-                    class="bwi bwi-lg"
                 aria-hidden="true"
+                class="bwi bwi-lg bwi-eye"
                 [ngClass]="{
                   'bwi-eye': !showConfirmFilePassword,
                   'bwi-eye-slash': showConfirmFilePassword
                 }"
               ></i>
             </button>
-              </div>
           </bit-form-field>
-          </div>
         </ng-container>
       </ng-container>
 

apps/web/src/locales/en/messages.json

@@ -912,7 +912,7 @@
     "message": "This file export will be password protected and require the file password to decrypt."
   },
   "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "This password will be used to export and import this file."
   },
   "confirmMasterPassword": {
     "message": "Confirm Master Password"

apps/web/src/locales/en_GB/messages.json

@@ -912,7 +912,7 @@
     "message": "This file export will be password protected and require the file password to decrypt."
   },
   "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "This password will be used to export and import this file."
   },
   "confirmMasterPassword": {
     "message": "Confirm Master Password"