Finish tweaking size/positioning

src/components/button/button.css

 .outlined-button {
     cursor: pointer;
-    border-radius: 4px;
-    padding: .75rem;
+    border-radius: .25rem;
     font-weight: bold;
     border: 1px solid rgba(0,0,0,.1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: .75rem;
+    padding-right: .75rem;
 }
 
 .icon {
     margin-right: .5rem;
     width: 1.5rem;
     height: 1.5rem;
-    vertical-align: middle;
+}
+
+.content {
+    white-space: nowrap;
 }

src/components/button/button.jsx

@@ -37,7 +37,7 @@ const ButtonComponent = ({
             {...props}
         >
             {icon}
-            {children}
+            <div className={styles.content}>{children}</div>
         </span>
     );
 };

src/components/menu-bar/menu-bar.css

@@ -24,7 +24,7 @@
         width: 100%;
     */
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: .85rem;
+    font-size: .75rem;
     font-weight: bold;
     background-color: $motion-primary;
     color: white;
@@ -38,13 +38,6 @@
     align-items: center;
 }
 
-/*
-    Using a wrapper so when logo is hovered, it transforms via its center point
-    @todo: not sure if this is needed
-*/
-.logo-wrapper {
-}
-
 .scratch-logo {
     height:  $menu-bar-height;
     padding: 0.8rem 0;
@@ -57,48 +50,51 @@
     transition: all .075s ease-in;
 }
 
-.title {
-    display: inline-block;
-    margin: 0 2rem;
-}
-
 .menu-item {
     display: block;
-    padding: 0 1.5rem;
-    line-height: $menu-bar-height;
+    padding: 0 0.5rem;
     cursor: pointer;
     text-decoration: none;
     color: #fff;
     user-select: none;
-}
-
-.feedback-button-wrapper {
     align-self: center;
-    padding: 0 .5rem;
-    line-height: $menu-bar-height;
 }
 
 .feedback-button {
     background-color: #FFF;
     color: $motion-primary;
+    height: 34px;
 }
 
 .divider {
     border-right: 1px dashed $menubar-gray;
-    margin: 0 1rem;
-    height: 1.5rem;
+    margin: 0 .5rem;
+    height: 34px;
 }
 
 .title-field {
     border: 1px dashed $menubar-gray;
-    border-radius: 4px;
-    width: 190px;
-    height: 1.5rem;
-    padding: .75rem;
+    border-radius: .25rem;
+    width: 12rem;
+    height: 34px;
+    background-color: transparent;
+    padding: .5rem;
+}
+
+.title-field,
+.title-field::placeholder {
+    color: #fff;
+    font-weight: bold;
+    font-size: .8rem;
 }
 
 .share-button {
     background: #FFAB19;
+    height: 34px;
+}
+
+.community-button {
+    height: 34px;
 }
 
 .coming-soon >:not(.coming-soon-tooltip) {
@@ -114,8 +110,7 @@
 
 .mystuff-icon {
     margin-right: .5rem;
-    width: 1.25rem;
-    height: 1.25rem;
+    height: 1rem;
 }
 
 .account-nav-menu, .mystuff-button {
@@ -128,7 +123,7 @@
 .profile-icon {
     margin-right: .5rem;
     width: 2rem;
-    height: 2rem;
+    height: 34px;
     border-radius: 0.25rem;
 }
 

src/components/menu-bar/menu-bar.jsx

@@ -73,7 +73,11 @@ const MenuBar = props => (
                     tooltipClassName={styles.comingSoonTooltip}
                     tooltipId="title-field"
                 >
-                    <div className={classNames(styles.titleField)} />
+                    <input
+                        disabled
+                        className={classNames(styles.titleField)}
+                        placeholder="Untitled-1"
+                    />
                 </ComingSoonTooltip>
             </div>
             <div className={classNames(styles.menuItem)}>
@@ -132,7 +136,10 @@ const MenuBar = props => (
                 tooltipId="mystuff"
             >
                 <div className={styles.mystuffButton}>
-                    <img className={styles.mystuffIcon} src={mystuffIcon} />
+                    <img
+                        className={styles.mystuffIcon}
+                        src={mystuffIcon}
+                    />
                 </div>
             </ComingSoonTooltip>
             <ComingSoonTooltip