From 1fe424631fc1db68779235ef076efd293691aa12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= <timothee.alby@gmail.com>
Date: Tue, 7 Jun 2022 09:45:14 +0200
Subject: [PATCH] Merge pull request #8291 from
 overleaf/ta-email-emails-ui-tweaks

[SettingsPage] Emails UI Tweaks

GitOrigin-RevId: 352d52badb234ed27ae48c39c4367c633ac83424
---
 .../settings/components/emails/actions/make-primary.tsx    | 7 +------
 .../js/features/settings/components/emails/email.tsx       | 6 +++++-
 .../settings/components/emails/emails-row.test.tsx         | 3 ++-
 .../settings/components/emails/emails-section.test.tsx     | 3 ++-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx b/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx
index c45c9cabcb..3dde39f000 100644
--- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx
+++ b/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>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails/email.tsx b/services/web/frontend/js/features/settings/components/emails/email.tsx
index a05850513a..a8d1761a8a 100644
--- a/services/web/frontend/js/features/settings/components/emails/email.tsx
+++ b/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>
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
index 3d4dc3bd3a..cf10324abe 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
+++ b/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 () {
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx
index e0862f03ec..3460b3afd6 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx
+++ b/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 () {