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

* Fix all dialogs to use ng-container for bitDialogFooter * Fix button spacing * Fix send icon spacing
2025-12-06 00:13:28 +00:00 · 2025-03-25 16:56:36 +01:00
parent 0fd01ed7ee
commit d0c91db3b3
17 changed files with 103 additions and 102 deletions
--- a/apps/browser/src/auth/popup/components/set-pin.component.html
+++ b/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>
--- a/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html
+++ b/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>
--- a/apps/desktop/src/auth/components/set-pin.component.html
+++ b/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>
--- a/apps/desktop/src/auth/delete-account.component.html
+++ b/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>
--- a/apps/web/src/app/admin-console/organizations/settings/account.component.html
+++ b/apps/web/src/app/admin-console/organizations/settings/account.component.html
@@ -42,12 +42,14 @@
        {{ "learnMoreAboutApi" | i18n }}
      </a>
    </p>
-    <button type="button" bitButton buttonType="secondary" (click)="viewApiKey()">
-      {{ "viewApiKey" | i18n }}
-    </button>
-    <button type="button" bitButton buttonType="secondary" (click)="rotateApiKey()">
-      {{ "rotateApiKey" | i18n }}
-    </button>
+    <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"
--- a/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/account/change-email.component.html
+++ b/apps/web/src/app/auth/settings/account/change-email.component.html
@@ -39,10 +39,12 @@
    </div>
  </ng-container>

-  <button type="submit" bitButton buttonType="primary" bitFormButton>
-    {{ (tokenSent ? "changeEmail" : "continue") | i18n }}
-  </button>
-  <button type="button" bitButton *ngIf="tokenSent" (click)="reset()">
-    {{ "cancel" | i18n }}
-  </button>
+  <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>
--- a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/security/api-key.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/security/security-keys.component.html
+++ b/apps/web/src/app/auth/settings/security/security-keys.component.html
@@ -8,11 +8,11 @@
 <p bitTypography="body1">
  {{ "userApiKeyDesc" | i18n }}
 </p>
-<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>
-<ng-template #rotateUserApiKeyTemplate></ng-template>
+<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>
+</div>
--- a/apps/web/src/app/auth/settings/security/security-keys.component.ts
+++ b/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(
--- a/apps/web/src/app/tools/send/send.component.html
+++ b/apps/web/src/app/tools/send/send.component.html
@@ -93,58 +93,60 @@
      <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">
-              <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>
-            <button type="button" bitLink>
-              {{ s.name }}
-            </button>
-            <ng-container *ngIf="s.disabled">
-              <i
-                class="bwi bwi-exclamation-triangle"
-                appStopProp
-                title="{{ 'disabled' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="s.password">
-              <i
-                class="bwi bwi-key"
-                appStopProp
-                title="{{ 'password' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "password" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="s.maxAccessCountReached">
-              <i
-                class="bwi bwi-ban"
-                appStopProp
-                title="{{ 'maxAccessCountReached' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="s.expired">
-              <i
-                class="bwi bwi-clock"
-                appStopProp
-                title="{{ 'expired' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "expired" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="s.pendingDelete">
-              <i
-                class="bwi bwi-trash"
-                appStopProp
-                title="{{ 'pendingDeletion' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
-            </ng-container>
+            <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>
+              <button type="button" bitLink>
+                {{ s.name }}
+              </button>
+              <ng-container *ngIf="s.disabled">
+                <i
+                  class="bwi bwi-exclamation-triangle"
+                  appStopProp
+                  title="{{ 'disabled' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="s.password">
+                <i
+                  class="bwi bwi-key"
+                  appStopProp
+                  title="{{ 'password' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "password" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="s.maxAccessCountReached">
+                <i
+                  class="bwi bwi-ban"
+                  appStopProp
+                  title="{{ 'maxAccessCountReached' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="s.expired">
+                <i
+                  class="bwi bwi-clock"
+                  appStopProp
+                  title="{{ 'expired' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "expired" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="s.pendingDelete">
+                <i
+                  class="bwi bwi-trash"
+                  appStopProp
+                  title="{{ 'pendingDeletion' | i18n }}"
+                  aria-hidden="true"
+                ></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>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/dialogs/bulk-confirmation-dialog.component.html
+++ b/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>
--- a/libs/importer/src/components/dialog/import-error-dialog.component.html
+++ b/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>
--- a/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.html
+++ b/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>
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
+++ b/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>