[CL-614] More spacing fixes (#13955)

* Fix all dialogs to use ng-container for bitDialogFooter

* Fix button spacing

* Fix send icon spacing

apps/browser/src/auth/popup/components/set-pin.component.html

@@ -25,13 +25,13 @@
         <span>{{ "lockWithMasterPassOnRestart1" | i18n }}</span>
       </label>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
         <span>{{ "setYourPinButton" | i18n }}</span>
       </button>
       <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html

@@ -39,7 +39,7 @@
       </vault-carousel-slide>
     </vault-carousel>
   </div>
-  <div bitDialogFooter class="tw-w-full">
+  <ng-container bitDialogFooter>
     <button
       type="button"
       bitButton
@@ -50,5 +50,5 @@
     >
       {{ "reviewAtRiskPasswords" | i18n }}
     </button>
-  </div>
+  </ng-container>
 </bit-simple-dialog>

apps/desktop/src/auth/components/set-pin.component.html

@@ -25,13 +25,13 @@
         <span>{{ "lockWithMasterPassOnRestart1" | i18n }}</span>
       </label>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
         <span>{{ "ok" | i18n }}</span>
       </button>
       <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/desktop/src/auth/delete-account.component.html

@@ -18,13 +18,13 @@
         <p>{{ "confirmIdentity" | i18n }}</p>
       </div>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button bitButton bitFormButton type="submit" buttonType="danger" [disabled]="!secret">
         {{ "deleteAccount" | i18n }}
       </button>
       <button bitButton type="button" buttonType="secondary" bitFormButton bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -42,12 +42,14 @@
         {{ "learnMoreAboutApi" | i18n }}
       </a>
     </p>
+    <div class="tw-flex tw-gap-2">
       <button type="button" bitButton buttonType="secondary" (click)="viewApiKey()">
         {{ "viewApiKey" | i18n }}
       </button>
       <button type="button" bitButton buttonType="secondary" (click)="rotateApiKey()">
         {{ "rotateApiKey" | i18n }}
       </button>
+    </div>
   </ng-container>
   <form
     *ngIf="org && !loading"

apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html

@@ -28,13 +28,13 @@
       </p>
       <app-user-verification formControlName="secret"> </app-user-verification>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="danger" [disabled]="!loaded">
         {{ "deleteOrganization" | i18n }}
       </button>
       <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/web/src/app/auth/settings/account/change-email.component.html

@@ -39,10 +39,12 @@
     </div>
   </ng-container>
 
+  <div class="tw-flex tw-gap-2">
     <button type="submit" bitButton buttonType="primary" bitFormButton>
       {{ (tokenSent ? "changeEmail" : "continue") | i18n }}
     </button>
     <button type="button" bitButton *ngIf="tokenSent" (click)="reset()">
       {{ "cancel" | i18n }}
     </button>
+  </div>
 </form>

apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html

@@ -25,13 +25,13 @@
         <bit-label> {{ "dontAskFingerprintAgain" | i18n }}</bit-label>
       </bit-form-control>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" buttonType="primary" bitButton bitFormButton>
         <span>{{ "confirm" | i18n }}</span>
       </button>
       <button bitButton bitFormButton buttonType="secondary" type="button" bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html

@@ -42,13 +42,13 @@
         </div>
       </div>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
         {{ "save" | i18n }}
       </button>
       <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/web/src/app/auth/settings/security/api-key.component.html

@@ -30,13 +30,13 @@
         </p>
       </bit-callout>
     </div>
-    <div bitDialogFooter>
+    <ng-container bitDialogFooter>
       <button type="submit" buttonType="primary" *ngIf="!clientSecret" bitButton bitFormButton>
         <span>{{ (data.isRotation ? "rotateApiKey" : "viewApiKey") | i18n }}</span>
       </button>
       <button type="button" bitButton bitFormButton bitDialogClose>
         {{ "close" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

apps/web/src/app/auth/settings/security/security-keys.component.html

@@ -8,11 +8,11 @@
 <p bitTypography="body1">
   {{ "userApiKeyDesc" | i18n }}
 </p>
+<div class="tw-flex tw-gap-2">
   <button type="button" bitButton buttonType="secondary" (click)="viewUserApiKey()">
     {{ "viewApiKey" | i18n }}
   </button>
   <button type="button" bitButton buttonType="secondary" (click)="rotateUserApiKey()">
     {{ "rotateApiKey" | i18n }}
   </button>
-<ng-template #viewUserApiKeyTemplate></ng-template>
+</div>
-<ng-template #rotateUserApiKeyTemplate></ng-template>

apps/web/src/app/auth/settings/security/security-keys.component.ts

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { firstValueFrom, map } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -15,11 +15,6 @@ import { ApiKeyComponent } from "./api-key.component";
   templateUrl: "security-keys.component.html",
 })
 export class SecurityKeysComponent implements OnInit {
-  @ViewChild("viewUserApiKeyTemplate", { read: ViewContainerRef, static: true })
-  viewUserApiKeyModalRef: ViewContainerRef;
-  @ViewChild("rotateUserApiKeyTemplate", { read: ViewContainerRef, static: true })
-  rotateUserApiKeyModalRef: ViewContainerRef;
-
   showChangeKdf = true;
 
   constructor(

apps/web/src/app/tools/send/send.component.html

@@ -93,7 +93,8 @@
       <ng-template body let-rows$>
         <tr bitRow *ngFor="let s of rows$ | async">
           <td bitCell (click)="editSend(s)" class="tw-cursor-pointer">
-            <span class="tw-mr-2" aria-hidden="true">
+            <div class="tw-flex tw-gap-2 tw-items-center">
+              <span aria-hidden="true">
                 <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type == sendType.File"></i>
                 <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type == sendType.Text"></i>
               </span>
@@ -145,6 +146,7 @@
                 ></i>
                 <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
               </ng-container>
+            </div>
           </td>
           <td bitCell class="tw-text-muted" (click)="editSend(s)" class="tw-cursor-pointer">
             <small bitTypography="body2" appStopProp>{{ s.deletionDate | date: "medium" }}</small>

bitwarden_license/bit-web/src/app/secrets-manager/shared/dialogs/bulk-confirmation-dialog.component.html

@@ -21,7 +21,7 @@
     </bit-table>
   </div>
 
-  <div bitDialogFooter class="tw-flex tw-gap-2">
+  <ng-container bitDialogFooter>
     <button
       type="button"
       bitButton
@@ -34,5 +34,5 @@
     <button bitButton buttonType="secondary" bitDialogClose type="button">
       {{ "cancel" | i18n }}
     </button>
-  </div>
+  </ng-container>
 </bit-dialog>

libs/importer/src/components/dialog/import-error-dialog.component.html

@@ -21,9 +21,9 @@
     </bit-table>
   </span>
 
-  <div bitDialogFooter>
+  <ng-container bitDialogFooter>
     <button bitButton bitDialogClose buttonType="primary" type="button">
       {{ "ok" | i18n }}
     </button>
-  </div>
+  </ng-container>
 </bit-dialog>

libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.html

@@ -26,7 +26,7 @@
         </bit-hint>
       </bit-form-field>
     </div>
-    <div bitDialogFooter class="tw-flex tw-gap-2 tw-w-full">
+    <ng-container bitDialogFooter>
       <button bitButton buttonType="primary" type="submit" [disabled]="customFieldForm.invalid">
         {{ (variant === "add" ? "add" : "save") | i18n }}
       </button>
@@ -43,6 +43,6 @@
         [appA11yTitle]="'deleteCustomField' | i18n: customFieldForm.value.label"
         (click)="removeField()"
       ></button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>

libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html

@@ -12,7 +12,7 @@
         </bit-hint>
       </bit-form-field>
     </div>
-    <div bitDialogFooter class="tw-flex tw-gap-2 tw-w-full">
+    <ng-container bitDialogFooter>
       <button
         #submitBtn
         bitButton
@@ -36,6 +36,6 @@
         [appA11yTitle]="'deleteFolder' | i18n"
         [bitAction]="deleteFolder"
       ></button>
-    </div>
+    </ng-container>
   </bit-dialog>
 </form>