From 2426117233dadedcd1800fe0071452e784d906ad Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Tue, 10 Jan 2017 19:41:39 +0100
Subject: [PATCH] Tweaked colors #64

---
 src/components/layers/LayerListItem.jsx |  4 +-
 src/config/colors.js                    |  2 +-
 src/index.css                           | 52 ++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 5721de8..ca2f0b1 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -122,7 +122,7 @@ class LayerListItem extends React.Component {
   render() {
     const itemStyle = {
       fontWeight: 400,
-      color: colors.lowgray,
+      color: this.props.isSelected ? colors.white : colors.lowgray,
       fontSize: fontSizes[5],
       borderLeft: 0,
       borderTop: 0,
@@ -135,6 +135,8 @@ class LayerListItem extends React.Component {
       cursor: 'pointer',
       position: 'relative',
       padding: margins[1],
+      paddingLeft: margins[2],
+      paddingRight: margins[2],
       borderColor: Color(colors.black).lighten(0.10).string(),
       backgroundColor: colors.black,
       lineHeight: 1.3,
diff --git a/src/config/colors.js b/src/config/colors.js
index 71e0d01..face865 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -4,7 +4,7 @@ const baseColors = {
   midgray: '#36383e',
   lowgray: '#8e8e8e',
 
-  white: '#fff',
+  white: '#f0f0f0',
   blue: '#00d9f7',
   green: '#B4C7AD',
   orange: '#fb3',
diff --git a/src/index.css b/src/index.css
index 3f9025c..5f64e61 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,51 @@ html {
   background-color: rgb(28, 31, 36);
 }
 
+/* CSS Reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
 .chrome-picker {
   background-color: #1c1f24 !important;
   font-family: inherit !important;
@@ -35,7 +80,12 @@ html {
 ::-webkit-scrollbar-thumb {
     border-radius: 6px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #40444e;
+    background-color: #666;
     padding-left: 2px;
     padding-right: 2px;
 }
+
+input:focus {
+  color: white !important;
+  outline: #8e8e8e auto 1px !important;
+}