minor aesthetic tweaks

components/Button.js

@@ -8,7 +8,8 @@ export default props => (
       ...props.style,
       background: COLORS.BLACK,
       color: props.color,
-      border: `${props.selected ? 2 : 1}px solid ${props.color}`
+      boxShadow: `inset 0px 0px 0px ${props.selected ? 2 : 1}px ${props.color}`,
+      border: 'none'
     }}
     disabled={props.disabled}
   >

components/Dropdown.js

@@ -156,14 +156,13 @@ const DropdownIcon = ({ children, isOpen }) => {
           {`
             .dropdown-icon {
               position: absolute;
-              left: -40px;
+              left: -${isOpen ? 38 : 39}px;
               display: flex;
               align-items: center;
               justify-content: center;
               width: 40px;
               height: 40px;
-              border: ${isOpen ? 2 : 1}px solid white;
-              border-right: none;
+              box-shadow: inset 0px 0px 0px ${isOpen ? 2 : 1}px white;
               border-radius: 3px 0 0 3px;
               cursor: initial;
             }
@@ -205,7 +204,8 @@ const SelectedItem = ({
             display: flex;
             align-items: center;
             height: 40px;
-            border: 1px solid ${itemColor};
+            padding: 0 16px;
+            box-shadow: inset 0px 0px 0px 1px ${itemColor};
             border-radius: ${hasIcon ? '0 3px 3px 0' : '3px'};
             outline: none;
           }
@@ -215,12 +215,11 @@ const SelectedItem = ({
 
           .dropdown-display.is-open {
             border-radius: ${hasIcon ? '0 3px 0 0' : '3px 3px 0 0'};
-            border-width: 2px;
+            box-shadow: inset 0px 0px 0px 2px ${itemColor};
           }
 
           .dropdown-display-text {
             flex-grow: 1;
-            padding: 0 16px;
             color: ${itemColor};
             background: transparent;
             border: none;
@@ -230,7 +229,7 @@ const SelectedItem = ({
           }
 
           .dropdown-arrow {
-            padding: 0 16px;
+            display: flex;
           }
 
           .is-open > .dropdown-arrow {

components/ExportMenu.js

@@ -46,11 +46,12 @@ class ExportMenu extends React.PureComponent {
           color={COLORS.PURPLE}
         />
         <div className="export-menu" hidden={!isVisible}>
-          <WindowPointer fromRight="12px" color={COLORS.PURPLE} />
-          <div className="export-option">
+          <WindowPointer fromRight="28px" color={COLORS.PURPLE} />
+          <div className="export-option filename-option">
+            <span>File name</span>
             <input
               title="filename"
-              placeholder="File name..."
+              placeholder="carbon"
               value={filename}
               name="filename"
               onChange={this.handleInputChange}
@@ -143,6 +144,18 @@ class ExportMenu extends React.PureComponent {
               background-color: ${COLORS.BLACK};
             }
 
+            .filename-option {
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 16px;
+            }
+
+            .filename-option input {
+              padding: 8px 0;
+              width: 60%;
+              text-align: right;
+            }
+
             .export-option {
               display: flex;
               border-bottom: 1px solid ${COLORS.PURPLE};
@@ -162,6 +175,7 @@ class ExportMenu extends React.PureComponent {
             }
 
             .size-button {
+              line-height: 0;
               opacity: 0.4;
               margin-right: 10px;
             }

components/Settings.js

@@ -176,8 +176,9 @@ const MenuButton = React.memo(({ name, select, selected }) => {
             display: flex;
             padding: 8px;
             height: 33px;
+            line-height: 0;
             cursor: pointer;
-            font-size: 12px;
+            font-size: 14px;
             border-bottom: 1px solid ${COLORS.SECONDARY};
             position: relative;
           }
@@ -192,7 +193,8 @@ const MenuButton = React.memo(({ name, select, selected }) => {
 
           .arrow-icon {
             position: absolute;
-            right: 16px;
+            right: 14px;
+            top: 11px;
           }
         `}
       </style>
@@ -434,8 +436,6 @@ class Settings extends React.PureComponent {
           {`
             .settings-content {
               width: 100%;
-              max-height: 232px;
-              overflow-y: scroll;
               border-left: 1px solid ${COLORS.SECONDARY};
             }
 

components/Toggle.js

@@ -23,7 +23,7 @@ class Toggle extends React.PureComponent {
               justify-content: ${this.props.center ? 'center' : 'space-between'};
               cursor: pointer;
               user-select: none;
-              padding: 8px;
+              padding: 8px 12px 8px 8px;
             }
 
             .checkmark-disabled {

components/WindowPointer.js

@@ -9,10 +9,10 @@ export default ({ fromLeft, fromRight, color = '#fff' }) => (
           width: 0px;
           height: 0px;
           border-style: solid;
-          border-width: 0 5px 10px 5px;
+          border-width: 0 5px 6px 5px;
           border-color: transparent transparent ${color} transparent;
           position: absolute;
-          top: -10px;
+          top: -8px;
           left: ${fromLeft || 'initial'};
           right: ${fromRight || 'initial'};
         }

components/svg/WindowThemes.js

@@ -3,8 +3,8 @@ import React from 'react'
 export const Sharp = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="50"
-    height="50"
+    width="60"
+    height="60"
     viewBox="0 0 81 81"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
@@ -52,8 +52,8 @@ export const Sharp = () => (
 export const BW = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="50"
-    height="50"
+    width="60"
+    height="60"
     viewBox="0 0 81 81"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
@@ -84,8 +84,8 @@ export const BW = () => (
 export const None = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="50"
-    height="50"
+    width="60"
+    height="60"
     viewBox="0 0 81 81"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >