From 6d2a0465aa0156b11d80da992d168ab2a6700db9 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 28 Mar 2018 16:39:31 -0400
Subject: [PATCH] Final tweaks with @carljbowman
---
src/components/button/button.css | 2 -
src/components/menu-bar/menu-bar.css | 22 ++++++--
src/components/menu-bar/menu-bar.jsx | 77 +++++++++++++++-------------
3 files changed, 59 insertions(+), 42 deletions(-)
diff --git a/src/components/button/button.css b/src/components/button/button.css
index a771be6f4..5e69aabd4 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -2,7 +2,6 @@
cursor: pointer;
border-radius: .25rem;
font-weight: bold;
- border: 1px solid rgba(0,0,0,.1);
display: flex;
flex-direction: row;
align-items: center;
@@ -12,7 +11,6 @@
.icon {
margin-right: .5rem;
- width: 1.5rem;
height: 1.5rem;
}
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 9913e80c0..7e59dd4ef 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -52,7 +52,7 @@
.menu-item {
display: block;
- padding: 0 0.5rem;
+ padding: 0 0.25rem;
cursor: pointer;
text-decoration: none;
color: #fff;
@@ -60,6 +60,16 @@
align-self: center;
}
+.file-group {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.file-group .menu-item {
+ padding: 0 0.75rem;
+}
+
.feedback-button {
background-color: #FFF;
color: $motion-primary;
@@ -90,11 +100,17 @@
.share-button {
background: #FFAB19;
- height: 34px;
+ height: 32px;
+ box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.community-button {
- height: 34px;
+ height: 32px;
+ box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.community-button-icon {
+ height: 1.25rem;
}
.coming-soon >:not(.coming-soon-tooltip) {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index fd6d136f8..587b51fc4 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -27,43 +27,45 @@ const MenuBar = props => (
})}
>
<div className={styles.mainMenu}>
- <div className={classNames(styles.logoWrapper, styles.menuItem)}>
- <img
- alt="Scratch"
- className={styles.scratchLogo}
- draggable={false}
- src={scratchLogo}
- />
- </div>
- <div className={classNames(styles.menuItem)}>
- <ComingSoonTooltip
- className={styles.comingSoon}
- place="bottom"
- tooltipClassName={styles.comingSoonTooltip}
- tooltipId="menubar-selector"
- >
- <LanguageSelector />
- </ComingSoonTooltip>
- </div>
- <div className={classNames(styles.menuItem)}>
- <ComingSoonTooltip
- className={styles.comingSoon}
- place="bottom"
- tooltipClassName={styles.comingSoonTooltip}
- tooltipId="file-menu"
- >
- <div className={classNames(styles.fileMenu)}>File</div>
- </ComingSoonTooltip>
- </div>
- <div className={classNames(styles.menuItem)}>
- <ComingSoonTooltip
- className={styles.comingSoon}
- place="bottom"
- tooltipClassName={styles.comingSoonTooltip}
- tooltipId="edit-menu"
- >
- <div className={classNames(styles.editMenu)}>Edit</div>
- </ComingSoonTooltip>
+ <div className={styles.fileGroup}>
+ <div className={classNames(styles.logoWrapper, styles.menuItem)}>
+ <img
+ alt="Scratch"
+ className={styles.scratchLogo}
+ draggable={false}
+ src={scratchLogo}
+ />
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="menubar-selector"
+ >
+ <LanguageSelector />
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="file-menu"
+ >
+ <div className={classNames(styles.fileMenu)}>File</div>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="edit-menu"
+ >
+ <div className={classNames(styles.editMenu)}>Edit</div>
+ </ComingSoonTooltip>
+ </div>
</div>
<div className={classNames(styles.divider)} />
<div className={classNames(styles.menuItem)}>
@@ -105,6 +107,7 @@ const MenuBar = props => (
>
<Button
className={classNames(styles.communityButton)}
+ iconClassName={styles.communityButtonIcon}
iconSrc={communityIcon}
>
<FormattedMessage
--
GitLab