[PM-29214] - update at-risk launch link (#18093)

* update at-risk launch link

* use bit-hint

* remove getter

apps/browser/src/_locales/en/messages.json

@@ -5664,6 +5664,12 @@
   "changeAtRiskPasswordAndAddWebsite": {
     "message": "This login is at-risk and missing a website. Add a website and change the password for stronger security."
   },
+  "vulnerablePassword": {
+    "message": "Vulnerable password."
+  },
+  "changeNow": {
+    "message": "Change now"
+  },
   "missingWebsite": {
     "message": "Missing website"
   },
@@ -6018,7 +6024,7 @@
     "placeholders": {
       "organization": {
         "content": "$1",
-        "example": "My Org Name"  
+        "example": "My Org Name"
       }
     }
   },
@@ -6027,7 +6033,7 @@
     "placeholders": {
       "organization": {
         "content": "$1",
-        "example": "My Org Name"  
+        "example": "My Org Name"
       }
     }
   },

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -90,12 +90,15 @@
         data-testid="copy-password"
         (click)="logCopyEvent()"
       ></button>
-      <bit-hint *ngIf="showChangePasswordLink">
-        <a bitLink href="#" appStopClick (click)="launchChangePasswordEvent()">
-          {{ "changeAtRiskPassword" | i18n }}
-          <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
-        </a>
-      </bit-hint>
+      @if (showChangePasswordLink) {
+        <bit-hint class="tw-flex tw-mb-3 tw-items-center">
+          <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
+          <span class="tw-ml-2 tw-mr-1">{{ "vulnerablePassword" | i18n }}</span>
+          <a bitLink href="#" appStopClick (click)="launchChangePasswordEvent()">
+            {{ "changeNow" | i18n }}
+          </a>
+        </bit-hint>
+      }
     </bit-form-field>
     <div
       *ngIf="showPasswordCount && passwordRevealed"