Final tweaks with @carljbowman

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;
 }
 

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) {

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