Consistent borders (#190)

* Use 1px border width

* Fix double border width on collapse element

components/BackgroundSelect.js

@@ -81,9 +81,10 @@ class BackgroundSelect extends React.Component {
 
           .bg-select-display {
             display: flex;
+            overflow: hidden;
             height: 100%;
             width: 72px;
-            border: 0.5px solid ${COLORS.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             border-radius: 3px;
           }
 
@@ -95,20 +96,17 @@ class BackgroundSelect extends React.Component {
             cursor: default;
             height: 100%;
             padding: 0 8px;
-            border-right: 0.5px solid ${COLORS.SECONDARY};
+            border-right: 1px solid ${COLORS.SECONDARY};
           }
 
           .bg-color-container {
             position: relative;
-            width: 34px;
+            width: 100%;
-            margin-bottom: 1px;
             background: #fff;
-            border-radius: 0px 2px 2px 0px;
             cursor: pointer;
           }
 
           .bg-color {
-            border-radius: 0px 2px 2px 0px;
             position: absolute;
             top: 0px;
             right: 0px;
@@ -124,7 +122,6 @@ class BackgroundSelect extends React.Component {
           }
 
           .bg-color-alpha {
-            border-radius: 0px 2px 2px 0px;
             position: absolute;
             top: 0px;
             right: 0px;
@@ -162,7 +159,7 @@ class BackgroundSelect extends React.Component {
             width: 222px;
             margin-left: 36px;
             margin-top: 4px;
-            border: 0.5px solid ${COLORS.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             border-radius: 3px;
             background: #1a1a1a;
           }

components/Button.js

@@ -8,7 +8,7 @@ export default props => (
       ...props.style,
       background: COLORS.BLACK,
       color: props.color,
-      border: `0.5px solid ${props.color}`
+      border: `1px solid ${props.color}`
     }}
   >
     <span>{props.title}</span>

components/Collapse.js

@@ -20,7 +20,15 @@ class Collapse extends React.Component {
     if (this.state.open) {
       return this.props.children
     }
-    return <Toggle enabled={false} center={true} label={this.props.label} onChange={this.toggle} />
+    return (
+      <Toggle
+        enabled={false}
+        center={true}
+        label={this.props.label}
+        className="collapse"
+        onChange={this.toggle}
+      />
+    )
   }
 }
 

components/Dropdown.js

@@ -41,7 +41,7 @@ class Dropdown extends React.Component {
             background: ${COLORS.BLACK};
             user-select: none;
             padding: 8px 16px;
-            border-bottom: 0.5px solid ${COLORS.SECONDARY};
+            border-bottom: 1px solid ${COLORS.SECONDARY};
           }
 
           .dropdown-list-item:hover {
@@ -120,7 +120,7 @@ class Dropdown extends React.Component {
           .dropdown-list {
             display: none;
             margin-top: -1px;
-            border: 0.5px solid ${COLORS.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             border-radius: 0px 0px 3px 3px;
             max-height: 350px;
             overflow-y: scroll;

components/FontSelect.js

@@ -33,11 +33,11 @@ export default class extends React.Component {
             cursor: pointer;
             user-select: none;
             padding: 8px 16px;
-            border-bottom: 0.5px solid ${COLORS.SECONDARY};
+            border-bottom: 1px solid ${COLORS.SECONDARY};
             background: rgba(255, 255, 255, 0.165);
           }
           .list-item:first-of-type {
-            border-top: 0.5px solid ${COLORS.SECONDARY};
+            border-top: 1px solid ${COLORS.SECONDARY};
           }
           .list-item:last-of-type {
             border-bottom: none;

components/Settings.js

@@ -114,7 +114,7 @@ class Settings extends React.Component {
             display: flex;
             justify-content: center;
             align-items: center;
-            border: 0.5px solid ${COLORS.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             border-radius: 3px;
             user-select: none;
             position: relative;
@@ -135,7 +135,7 @@ class Settings extends React.Component {
             position: absolute;
             top: 44px;
             left: 0;
-            border: 0.5px solid ${COLORS.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             width: 184px;
             border-radius: 3px;
             background: ${COLORS.BLACK};
@@ -145,7 +145,8 @@ class Settings extends React.Component {
             border-bottom: solid 1px ${COLORS.SECONDARY};
           }
 
-          .settings-settings > :global(div):first-child {
+          .settings-settings > :global(div):first-child,
+          .settings-settings > :global(.collapse) {
             border-bottom: none;
           }
         `}</style>

components/Toggle.js

@@ -13,14 +13,14 @@ export default class extends React.Component {
 
   render() {
     return (
-      <div className="toggle" onClick={this.toggle}>
+      <div className={'toggle ' + this.props.className} onClick={this.toggle}>
         <span className="label">{this.props.label}</span>
         {this.props.enabled ? <Checkmark /> : null}
         <style jsx>{`
           .toggle {
             display: flex;
             align-items: center;
-            justify-content: ${this.props.center ? 'center' : 'space-between'}
+            justify-content: ${this.props.center ? 'center' : 'space-between'};
             cursor: pointer;
             user-select: none;
             padding: 8px;