From 479e3b7bbffb7bd2dacd07272b682b5790127270 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Tue, 27 Nov 2018 18:29:56 -0500
Subject: [PATCH] minor aesthetic tweaks

---
 components/Button.js           |  3 ++-
 components/Dropdown.js         | 13 ++++++-------
 components/ExportMenu.js       | 20 +++++++++++++++++---
 components/Settings.js         |  8 ++++----
 components/Toggle.js           |  2 +-
 components/WindowPointer.js    |  4 ++--
 components/svg/WindowThemes.js | 12 ++++++------
 7 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/components/Button.js b/components/Button.js
index 52f0ddc..761d789 100644
--- a/components/Button.js
+++ b/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}
   >
diff --git a/components/Dropdown.js b/components/Dropdown.js
index a1dd72c..711fe9a 100644
--- a/components/Dropdown.js
+++ b/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 {
diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 6a08ab3..11ee160 100644
--- a/components/ExportMenu.js
+++ b/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;
             }
diff --git a/components/Settings.js b/components/Settings.js
index 64088cf..f102b01 100644
--- a/components/Settings.js
+++ b/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};
             }
 
diff --git a/components/Toggle.js b/components/Toggle.js
index 5bee2b2..7613c66 100644
--- a/components/Toggle.js
+++ b/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 {
diff --git a/components/WindowPointer.js b/components/WindowPointer.js
index 03c1277..f0003a3 100644
--- a/components/WindowPointer.js
+++ b/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'};
         }
diff --git a/components/svg/WindowThemes.js b/components/svg/WindowThemes.js
index f0c34f6..2d515d6 100644
--- a/components/svg/WindowThemes.js
+++ b/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"
   >