SONAR-21482 - User profile menu adopts new UI

diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx
index d679397c5315e5b2088a9b3731e153eea54f2827..0cbb0cfade625a1a21295c01d50b81af7ce928de 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/Account.tsx
+++ b/server/sonar-web/src/main/js/apps/account/Account.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { LargeCenteredLayout, PageContentFontWrapper, TopBar } from 'design-system';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Outlet } from 'react-router-dom';
@@ -34,26 +35,30 @@ export default function Account() {
   const title = translate('my_account.page');
   return (
     <div id="account-page">
-      <Suggestions suggestions="account" />
-      <Helmet
-        defaultTitle={title}
-        defer={false}
-        titleTemplate={translateWithParameters(
-          'page_title.template.with_category',
-          translate('my_account.page'),
-        )}
-      />
-      <A11ySkipTarget anchor="account_main" />
-      <header className="account-header">
-        <div className="account-container clearfix">
-          <UserCard user={currentUser} />
+      <header>
+        <TopBar>
+          <div className="sw-flex sw-items-center sw-gap-2 sw-pb-4">
+            <UserCard user={currentUser} />
+          </div>
           <Nav />
-        </div>
+        </TopBar>
       </header>
 
-      <main>
-        <Outlet />
-      </main>
+      <LargeCenteredLayout as="main">
+        <PageContentFontWrapper className="sw-body-sm sw-py-8">
+          <Suggestions suggestions="account" />
+          <Helmet
+            defaultTitle={title}
+            defer={false}
+            titleTemplate={translateWithParameters(
+              'page_title.template.with_category',
+              translate('my_account.page'),
+            )}
+          />
+          <A11ySkipTarget anchor="account_main" />
+          <Outlet />
+        </PageContentFontWrapper>
+      </LargeCenteredLayout>
     </div>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/account/components/Nav.tsx b/server/sonar-web/src/main/js/apps/account/components/Nav.tsx
index 1c62a570809d95349aea9a850dab92e4a3e5bb6e..68625aca7bce422ba835b8d0be4f0dee8018dd60 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/components/Nav.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/Nav.tsx
@@ -17,30 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NavBarTabLink, NavBarTabs } from 'design-system';
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import NavBarTabs from '../../../components/ui/NavBarTabs';
 import { translate } from '../../../helpers/l10n';
 
 export default function Nav() {
   return (
-    <nav className="account-nav">
-      <NavBarTabs>
-        <li>
-          <NavLink end to="/account">
-            {translate('my_account.profile')}
-          </NavLink>
-        </li>
-        <li>
-          <NavLink to="/account/security">{translate('my_account.security')}</NavLink>
-        </li>
-        <li>
-          <NavLink to="/account/notifications">{translate('my_account.notifications')}</NavLink>
-        </li>
-        <li>
-          <NavLink to="/account/projects">{translate('my_account.projects')}</NavLink>
-        </li>
-      </NavBarTabs>
-    </nav>
+    <NavBarTabs className="it__account-nav">
+      <NavBarTabLink end to="/account" text={translate('my_account.profile')} />
+      <NavBarTabLink to="/account/security" text={translate('my_account.security')} />
+      <NavBarTabLink to="/account/notifications" text={translate('my_account.notifications')} />
+      <NavBarTabLink to="/account/projects" text={translate('my_account.projects')} />
+    </NavBarTabs>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
index 177e3e58368ac3534b1a09127459a2ad0fb6018e..e9ae7d5fa6f22488aa9090229cf93936d0dfeb1d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
@@ -17,8 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Avatar } from 'design-system';
 import * as React from 'react';
-import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { LoggedInUser } from '../../../types/users';
 
 interface Props {
@@ -27,13 +27,9 @@ interface Props {
 
 export default function UserCard({ user }: Props) {
   return (
-    <div className="account-user">
-      <div className="pull-left account-user-avatar" id="avatar">
-        <LegacyAvatar hash={user.avatar} name={user.name} size={60} />
-      </div>
-      <h1 className="pull-left" id="name">
-        {user.name}
-      </h1>
-    </div>
+    <>
+      <Avatar hash={user.avatar} name={user.name} size="md" />
+      <span className="sw-heading-md fs-mask">{user.name}</span>
+    </>
   );
 }