[PM-22119] Update icon for password protected Sends on Desktop (#18659)

* [PM-22119] Update icon for password protected Sends on Desktop

* Mute Send type icons to match web

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

@@ -73,11 +73,14 @@
           class="flex-list-item"
         >
           <span class="item-icon" aria-hidden="true">
-            <i class="bwi bwi-fw bwi-lg" [ngClass]="s.type == 0 ? 'bwi-file-text' : 'bwi-file'"></i>
+            <i
+              class="bwi bwi-fw bwi-lg tw-text-muted"
+              [ngClass]="s.type == 0 ? 'bwi-file-text' : 'bwi-file'"
+            ></i>
           </span>
           <span class="item-content">
             <span class="item-title">
-              {{ s.name }}
+              <span class="title-text">{{ s.name }}</span>
               <span class="title-badges">
                 <ng-container *ngIf="s.disabled">
                   <i
@@ -88,15 +91,17 @@
                   ></i>
                   <span class="sr-only">{{ "disabled" | i18n }}</span>
                 </ng-container>
-                <ng-container *ngIf="s.password">
+                @if (s.authType !== authType.None) {
+                  @let titleKey =
+                    s.authType === authType.Email ? "emailProtected" : "passwordProtected";
                   <i
-                    class="bwi bwi-key"
+                    class="bwi bwi-lock"
                     appStopProp
-                    title="{{ 'password' | i18n }}"
+                    title="{{ titleKey | i18n }}"
                     aria-hidden="true"
                   ></i>
-                  <span class="sr-only">{{ "password" | i18n }}</span>
-                </ng-container>
+                  <span class="tw-sr-only">{{ titleKey | i18n }}</span>
+                }
                 <ng-container *ngIf="s.maxAccessCountReached">
                   <i
                     class="bwi bwi-exclamation-triangle"

apps/desktop/src/app/tools/send/send.component.ts

@@ -16,6 +16,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { AuthType } from "@bitwarden/common/tools/send/types/auth-type";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
@@ -53,6 +54,8 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
   sendId: string;
   action: Action = Action.None;
 
+  authType = AuthType;
+
   constructor(
     sendService: SendService,
     i18nService: I18nService,

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

@@ -4587,5 +4587,32 @@
   "sendPasswordHelperText": {
     "message": "Individuals will need to enter the password to view this Send",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "emailProtected": {
+    "message": "Email protected"
+  },
+  "emails": {
+    "message": "Emails"
+  },
+  "noAuth": {
+    "message": "Anyone with the link"
+  },
+  "anyOneWithPassword": {
+    "message": "Anyone with a password set by you"
+  },
+  "whoCanView": {
+    "message": "Who can view"
+  },
+  "specificPeople": {
+    "message": "Specific people"
+  },
+  "emailVerificationDesc": {
+    "message": "After sharing this Send link, individuals will need to verify their email with a code to view this Send."
+  },
+  "enterMultipleEmailsSeparatedByComma": {
+    "message": "Enter multiple emails by separating with a comma."
+  },
+  "emailPlaceholder": {
+    "message": "user@bitwarden.com , user@acme.com"
   }
 }

apps/desktop/src/scss/list.scss

@@ -122,11 +122,17 @@
     display: block;
     overflow-x: hidden;
     .item-title {
-      display: block;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      display: flex;
+      gap: 5px;
+      .title-text {
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       .title-badges {
+        display: flex;
+        align-items: center;
+        gap: 5px;
         @include themify($themes) {
           color: themed("mutedColor");
         }