diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 937908b641430c23e9f035d832a552bf4e9ee294..5111092ad08eec81848d4aeb0fc5ccb31a849f77 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -104,3 +104,36 @@ .coming-soon >:not(.coming-soon-tooltip) { opacity: 0.5; } + +.account-info-wrapper { + display: flex; + flex-direction: row; + padding: 0 .5rem; + align-items: center; +} + +.mystuff-icon { + margin-right: .5rem; + width: 1.25rem; + height: 1.25rem; +} + +.account-nav-menu, .mystuff-button { + padding: 0 .25rem; + display: flex; + flex-direction: row; + align-items: center; +} + +.profile-icon { + margin-right: .5rem; + width: 2rem; + height: 2rem; + border-radius: 0.25rem; +} + +.dropdown-caret-icon { + margin-left: .5rem; + width: 0.5rem; + height: 0.5rem; +} diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 6a760672f5269bfee55d95dcb60d9d9524387a9f..19f3c5d3d2cef6e1ef6b1191f945976bc5db6740 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -131,20 +131,19 @@ const MenuBar = props => ( place="bottom" tooltipId="mystuff" > - <div className={classNames(styles.menuItem, styles.mystuffButton)}> - <img src={mystuffIcon} /> + <div className={styles.mystuffButton}> + <img className={styles.mystuffIcon} src={mystuffIcon} /> </div> </ComingSoonTooltip> <ComingSoonTooltip className={styles.comingSoon} - place="bottom" + place="left" tooltipId="account-nav" > - - <div className={classNames(styles.menuItem, styles.accountNavMenu)}> - <img src={profileIcon} /> + <div className={styles.accountNavMenu}> + <img className={styles.profileIcon} src={profileIcon} /> <span>scratch-cat</span> - <img src={dropdownCaret} /> + <img className={styles.dropdownCaretIcon} src={dropdownCaret} /> </div> </ComingSoonTooltip> </div>