chore: tweak menu styling

README.md

@@ -101,6 +101,7 @@ $(npm bin)/jest --runInBand test/unit/components/button.test.jsx
 ```
 
 #### Running integration tests
+
 Integration tests use a headless browser to manipulate the actual HTML and javascript that the repo
 produces. You will not see this activity (though you can hear it when sounds are played!).
 

src/components/menu-bar/check.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.1715 11.403C4.74533 11.403 4.31916 11.2398 3.99453 10.9152L0.798242 7.71892C0.147331 7.06801 0.147331 6.01589 0.798242 5.36498C1.44915 4.71407 2.50127 4.71407 3.15218 5.36498L5.1715 7.38431L11.4692 1.08828C12.1184 0.43737 13.1722 0.43737 13.8231 1.08828C14.4724 1.73753 14.4724 2.7913 13.8231 3.44222L6.34847 10.9152C6.02384 11.2398 5.59767 11.403 5.1715 11.403Z" fill="white"/>
+</svg>

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

@@ -115,6 +115,7 @@
 }
 
 .file-group .menu-bar-item {
+    margin: 0 .25rem;
     padding: 0 0.75rem;
 }
 
@@ -166,6 +167,7 @@
 }
 
 .account-info-group .menu-bar-item {
+    margin: 0 .25rem;
     padding: 0 0.75rem;
 }
 
@@ -175,7 +177,11 @@
 }
 
 .help-icon {
-    margin-right: 0.35rem;
+    margin: 0 .25rem 0 0;
+}
+
+[dir="rtl"] .help-icon {
+    margin: 0 0 0 .25rem;
 }
 
 .account-nav-menu, .mystuff-button {

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

@@ -434,6 +434,7 @@ class MenuBar extends React.Component {
                             theme={this.props.theme}
                             themeMenuOpen={this.props.themeMenuOpen}
                         />)}
+                        <Divider className={classNames(styles.divider)} />
                         {(this.props.canManageFiles) && (
                             <div
                                 className={classNames(styles.menuBarItem, styles.hoverable, {
@@ -623,20 +624,21 @@ class MenuBar extends React.Component {
                         ) : [])}
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <div
-                        aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
-                        className={classNames(styles.menuBarItem, styles.hoverable)}
-                        onClick={this.props.onOpenTipLibrary}
-                    >
-                        <img
-                            className={styles.helpIcon}
-                            src={helpIcon}
-                        />
-                        <span className={styles.tutorialsLabel}>
-                            <FormattedMessage {...ariaMessages.tutorials} />
-                        </span>
+                    <div className={styles.fileGroup}>
+                        <div
+                            aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
+                            className={classNames(styles.menuBarItem, styles.hoverable)}
+                            onClick={this.props.onOpenTipLibrary}
+                        >
+                            <img
+                                className={styles.helpIcon}
+                                src={helpIcon}
+                            />
+                            <span className={styles.tutorialsLabel}>
+                                <FormattedMessage {...ariaMessages.tutorials} />
+                            </span>
+                        </div>
                     </div>
-                    <Divider className={classNames(styles.divider)} />
                 </div>
 
                 {/* show the proper UI in the account menu, given whether the user is

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

@@ -32,6 +32,19 @@
     background-color: $ui-black-transparent;
 }
 
+.check {
+    margin: 0 .25rem 0 0;
+    visibility: hidden;
+}
+
+[dir="rtl"] .check {
+    margin: 0 0 0 .25rem;
+}
+
+.selected {
+    visibility: visible;
+}
+
 @media only screen and (max-width: 1024px) {
     .theme-label {
         display: none;

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

@@ -8,6 +8,7 @@ import {DEFAULT_THEME, HIGH_CONTRAST_THEME, themeMap} from '../../lib/themes';
 import {MenuItem, MenuSection} from '../menu/menu.jsx';
 
 import dropdownCaret from './dropdown-caret.svg';
+import check from './check.svg';
 
 import styles from './theme-menu.css';
 import menuBarStyles from './menu-bar.css';
@@ -27,9 +28,12 @@ const ThemeMenuItem = props => {
         <MenuItem
             isRtl={props.isRtl}
             onClick={props.onClick}
-            className={classNames({[styles.themeActive]: props.isSelected})}
         >
             <div className={styles.themeOption}>
+                <img
+                    src={check}
+                    className={classNames(styles.check, {[styles.selected]: props.isSelected})}
+                />
                 <img src={themeInfo.icon} />
                 <FormattedMessage {...themeInfo.label} />
             </div>