Fix account details css (#3917)

Co-authored-by: Dylan Jeffers <dylan@audius.co>
AudiusProject · Aug 21, 2023 · 5971265 · 5971265
1 parent 3014e31
commit 5971265
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/AccountDetails.module.css b/apps/audius-client/packages/web/src/components/nav/desktop/AccountDetails.module.css
@@ -0,0 +1,46 @@
+.userHeader {
+  margin-left: 24px;
+  margin-bottom: 24px;
+}
+
+.accountWrapper {
+  display: block;
+  margin-bottom: 4px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  transition: all ease-in-out 0.18s;
+
+  color: var(--neutral);
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit-1);
+  margin-left: 16px;
+  margin-right: 16px;
+  text-align: left;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow: hidden;
+}
+
+.name {
+  display: inline-flex;
+  align-items: center;
+}
+
+.nameLink {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  flex-shrink: 0;
+  margin-left: 4px;
+}
diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/AccountDetails.tsx b/apps/audius-client/packages/web/src/components/nav/desktop/AccountDetails.tsx
@@ -7,7 +7,7 @@ import UserBadges from 'components/user-badges/UserBadges'
 import { useSelector } from 'utils/reducer'
 import { SIGN_IN_PAGE, profilePage } from 'utils/route'
 
-import styles from './LeftNav.module.css'
+import styles from './AccountDetails.module.css'
 import NavAudio from './NavAudio'
 
 const { getAccountUser } = accountSelectors
@@ -29,12 +29,13 @@ export const AccountDetails = () => {
         <div className={styles.userInfo}>
           {account ? (
             <>
-              <div>
+              <div className={styles.name}>
                 <Link
                   to={profileLink}
                   variant='title'
                   size='small'
                   strength='weak'
+                  className={styles.nameLink}
                 >
                   {account.name}
                 </Link>
@@ -52,12 +53,7 @@ export const AccountDetails = () => {
             </>
           ) : (
             <>
-              <Text
-                variant='body'
-                size='small'
-                strength='strong'
-                className={styles.haveAccount}
-              >
+              <Text variant='body' size='small' strength='strong'>
                 {messages.haveAccount}
               </Text>
               <Link

diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/LeftNav.module.css b/apps/audius-client/packages/web/src/components/nav/desktop/LeftNav.module.css
@@ -54,24 +54,6 @@ svg.logo path {
   padding-top: 24px;
 }
 
-.userHeader {
-  margin-left: 24px;
-  margin-bottom: 24px;
-}
-
-.accountWrapper {
-  display: block;
-  margin-bottom: 4px;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-shrink: 0;
-  transition: all ease-in-out 0.18s;
-
-  color: var(--neutral);
-}
-
 .photo {
   position: relative;
   cursor: pointer;
@@ -90,23 +72,6 @@ svg.logo path {
   background-color: var(--default-profile-picture-background);
 }
 
-.userInfo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--unit-1);
-  margin-left: 16px;
-  margin-right: 16px;
-  text-align: left;
-  white-space: nowrap;
-  word-break: keep-all;
-  overflow: hidden;
-}
-
-.badge {
-  flex-shrink: 0;
-  margin-left: 4px;
-}
-
 .links {
   flex: 1 1 auto;
   overflow: hidden;