Merge pull request #8291 from overleaf/ta-email-emails-ui-tweaks

[SettingsPage] Emails UI Tweaks

GitOrigin-RevId: 352d52badb234ed27ae48c39c4367c633ac83424

services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx

@@ -40,12 +40,7 @@ const getDescription = (
 
 function PrimaryButton({ children, disabled, onClick }: Button.ButtonProps) {
   return (
-    <Button
-      bsSize="small"
-      bsStyle="success"
-      disabled={disabled}
-      onClick={onClick}
-    >
+    <Button bsSize="small" bsStyle="info" disabled={disabled} onClick={onClick}>
       {children}
     </Button>
   )

services/web/frontend/js/features/settings/components/emails/email.tsx

@@ -17,7 +17,11 @@ function Email({ userEmailData }: EmailProps) {
   return (
     <>
       {userEmailData.email}
-      {userEmailData.default ? ' (primary)' : ''}
+      {userEmailData.default ? (
+        <span className="small ms-1">
+          <span className="label label-info">Primary</span>
+        </span>
+      ) : null}
       {!userEmailData.confirmedAt && (
         <div className="small">
           <strong>

services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx

@@ -50,7 +50,8 @@ describe('<EmailsRow/>', function () {
   describe('with affiliated email data', function () {
     it('renders email info', function () {
       renderEmailsRow(professionalUserData)
-      screen.getByText('foo@overleaf.com (primary)')
+      screen.getByText('foo@overleaf.com')
+      screen.getByText('Primary')
     })
 
     it('renders actions', function () {

services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx

@@ -73,7 +73,8 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [professionalUserData])
     render(<EmailsSection />)
 
-    await screen.findByText(`${professionalUserData.email} (primary)`)
+    await screen.findByText(`${professionalUserData.email}`)
+    screen.getByText('Primary')
   })
 
   it('shows confirmation status for unconfirmed users', async function () {