because icons are pretty

src-ui/src/app/app.module.ts

@@ -175,6 +175,7 @@ import {
   download,
   envelope,
   envelopeAt,
+  envelopeAtFill,
   exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,
@@ -281,6 +282,7 @@ const icons = {
   download,
   envelope,
   envelopeAt,
+  envelopeAtFill,
   exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,

src-ui/src/app/components/manage/mail/mail.component.html

@@ -40,10 +40,10 @@
           <div class="col d-flex align-items-center">
             <button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">
               {{account.name}}
-              @if (account.account_type === MailAccountType.Gmail) {
-                <i-bs name="google" class="ms-2"></i-bs>
-              } @else if (account.account_type === MailAccountType.Outlook) {
-                <i-bs name="microsoft" class="ms-2"></i-bs>
+              @switch (account.account_type) {
+                @case (MailAccountType.IMAP) { <i-bs name="envelope-at-fill" class="ms-2"></i-bs> }
+                @case (MailAccountType.Gmail) { <i-bs name="google" class="ms-2"></i-bs> }
+                @case (MailAccountType.Outlook) { <i-bs name="microsoft" class="ms-2"></i-bs> }
               }
             </button>
           </div>

src-ui/src/styles.scss

@@ -694,3 +694,8 @@ canvas.hiddenCanvasElement {
   height: 0;
   width: 0;
 }
+
+// bs icons
+i-bs svg {
+  vertical-align: text-bottom;
+}