Add winow pointer thing

components/Meta.js

@@ -52,6 +52,10 @@ export default () => (
         border-bottom: solid 1px ${PALETTE.SECONDARY};
       }
 
+      .settings-settings > div:first-child {
+        border-bottom: none;
+      }
+
       .selected svg {
         border-radius: 3px;
         border: solid 2px #fff;

components/Settings.js

@@ -4,6 +4,7 @@ import SettingsIcon from './svg/Settings'
 import ThemeSelect from './ThemeSelect'
 import Slider from './Slider'
 import Toggle from './Toggle'
+import WindowPointer from './WindowPointer';
 import { PALETTE } from '../lib/constants'
 
 class Settings extends React.Component {
@@ -30,6 +31,7 @@ class Settings extends React.Component {
           <SettingsIcon />
         </div>
         <div className="settings-settings">
+          <WindowPointer fromLeft="15px" />
           <ThemeSelect onChange={this.props.onChange.bind(null, 'windowTheme')} />
           <Toggle label="Drop shadow"
             enabled={this.props.enabled.dropShadow}
@@ -80,7 +82,7 @@ class Settings extends React.Component {
           .settings-settings {
             display: none;
             position: absolute;
-            top: 48px;
+            top: 44px;
             left: 0;
             border: 0.5px solid ${PALETTE.SECONDARY};
             width: 184px;

components/WindowPointer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export default ({ fromLeft }) => (
+  <div style={{ left: fromLeft }}>
+    <div className="window-pointer" />
+    <style jsx>{`
+      .window-pointer {
+        width: 0px;
+        height: 0px;
+        border-style: solid;
+        border-width: 0 4px 5px 4px;
+        border-color: transparent transparent #fff transparent;
+        position: absolute;
+        top: -5px;
+        left: 15px;
+      }
+    `}</style>
+  </div>
+)

components/svg/Controls.js

@@ -11,7 +11,7 @@ export const Controls = () => (
 )
 
 export const ControlsBW = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
+  <svg xmlns="http://www.w3.org/2000/svg" width="54" height="16" viewBox="0 0 54 14">
     <g fill="none" fillRule="evenodd" stroke="#878787" transform="translate(1 1)">
       <circle cx="6" cy="6" r="6"/>
       <circle cx="26" cy="6" r="6"/>