From 6a4d78feefd5a30cb0c4cc957b98644bf165ccdd Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 28 Mar 2018 12:53:34 -0400
Subject: [PATCH] Style menu bar component
---
src/components/menu-bar/menu-bar.css | 33 ++++++++++++++++++++++++++++
src/components/menu-bar/menu-bar.jsx | 13 +++++------
2 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 937908b64..5111092ad 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 6a760672f..19f3c5d3d 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>
--
GitLab