menu tweaks

src/components/molecules/Menu.module.css

@@ -59,13 +59,19 @@
 .navigation li {
   display: inline-block;
   vertical-align: middle;
+  margin-left: var(--spacer);
+}
+
+@media screen and (min-width: 60rem) {
+  .navigation li {
+    margin-left: calc(var(--spacer) * 2);
+  }
 }
 
 .navigation button,
 .link {
   display: block;
   padding: calc(var(--spacer) / 2);
-  margin-left: var(--spacer);
   text-transform: uppercase;
   color: var(--brand-grey-light);
   font-weight: var(--font-weight-bold);

src/components/molecules/Menu.tsx

@@ -45,14 +45,14 @@ export default function Menu(): ReactElement {
         </Link>
 
         <ul className={styles.navigation}>
-          <li>
-            <Wallet />
-          </li>
           {menu.map((item: MenuItem) => (
             <li key={item.name}>
               <MenuLink item={item} />
             </li>
           ))}
+          <li>
+            <Wallet />
+          </li>
           <li>
             <UserPreferences />
           </li>

src/components/molecules/UserPreferences/index.module.css

@@ -1,12 +1,31 @@
 .preferences {
-  padding: calc(var(--spacer) / 2);
-  margin-left: var(--spacer);
+  padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4)
+    calc(var(--spacer) / 5) 0;
   cursor: pointer;
 }
 
+.preferences svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.preferences[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+.preferences svg:last-child {
+  width: 1em;
+  height: 1em;
+  fill: var(--brand-grey-lighter);
+  margin-left: calc(var(--spacer) / 4);
+  transition: transform 0.2s ease-out;
+}
+
 .icon {
   fill: var(--brand-grey-light);
   transition: 0.2s ease-out;
+  width: 1.2em;
+  height: 1.2em;
 }
 
 .preferences:hover .icon,
@@ -16,10 +35,6 @@
   fill: var(--brand-grey);
 }
 
-.preferences[aria-expanded='true'] .icon {
-  transform: rotate(180deg);
-}
-
 .preferencesDetails {
   padding: calc(var(--spacer) / 2);
 }

src/components/molecules/UserPreferences/index.tsx

@@ -4,6 +4,7 @@ import { ReactComponent as Cog } from '../../../images/cog.svg'
 import styles from './index.module.css'
 import Currency from './Currency'
 import Debug from './Debug'
+import { ReactComponent as Caret } from '../../../images/caret.svg'
 
 export default function UserPreferences(): ReactElement {
   return (
@@ -18,6 +19,7 @@ export default function UserPreferences(): ReactElement {
       className={styles.preferences}
     >
       <Cog aria-label="Preferences" className={styles.icon} />
+      <Caret aria-hidden="true" />
     </Tooltip>
   )
 }