From 85191292118e48e7acd7399b5390d54d4219c973 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Wed, 16 May 2018 23:36:38 -0400
Subject: [PATCH] dropdown styling

---
 src/renderer/scss/_gui.scss                  | 14 ++++++++++++++
 src/renderer/scss/_vars.scss                 |  3 +++
 src/renderer/scss/component/_form-field.scss |  2 +-
 static/themes/dark.css                       |  6 ++++--
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index e7266b68b..d49071623 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -121,6 +121,20 @@ input::placeholder {
   opacity: 0.5;
 }
 
+select {
+  min-width: 100px;
+  height: 30px;
+  border-radius: 8px;
+  background-color: var(--input-select-bg-color);
+  font: normal 12px/30px 'metropolis-medium';
+  text-indent: 12px;
+  color: var(--input-select-color);
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
 button + input {
   margin-left: $spacing-vertical * 2/3;
 }
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index cdfe3ddcf..ea591571e 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -35,6 +35,7 @@ $large-breakpoint: 1760px;
   --color-green-light: #effbe4;
   --color-green-blue: #2ec1a8;
   --color-purple: #8165b0;
+  --color-blue-grey: #203049;
 
   /* Colors */
   --color-divider: #e3e3e3;
@@ -73,6 +74,8 @@ $large-breakpoint: 1760px;
   --input-copyable-bg: #f6f6f6;
   --input-copyable-color: var(--color-grey-dark);
   --input-copyable-border: var(--color-grey);
+  --input-select-bg-color: var(--color-grey);
+  --input-select-color: var(--text-color);
 
   /* input:disabled */
   --input-disabled-border-color: rgba(0, 0, 0, 0.42);
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 2be99b8ab..406318e8e 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -103,7 +103,7 @@
 // Not sure if I like these
 // Maybe this should be in gui.scss?
 .input--price-amount {
-  width: 60px;
+  width: 80px;
 }
 
 .input--address {
diff --git a/static/themes/dark.css b/static/themes/dark.css
index 7796724ef..dc4d666b7 100644
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -7,7 +7,7 @@
   --color-help: #8696AF;
   --color-download: rgba(255, 255, 255, 0.75);
   --color-download-overlay: var(--color-black);
-  --color-bg: #203049;
+  --color-bg: var(--color-blue-grey);
   --color-bg-alt: #2D3D56;
   --color-placeholder: var(--color-bg-alt);
 
@@ -26,9 +26,11 @@
   --input-border-size: 1px;
   --input-border-color: rgba(255,255,255, 0.5);
   --input-hover-border-color: rgba(255, 255, 255, 1);
-  --input-copyable-bg: #203049;
+  --input-copyable-bg: var(--color-blue-grey);
   --input-copyable-color: #8696AF;
   --input-copyable-border: #53637C;
+  --input-select-bg-color: var(--color-blue-grey);
+  --input-select-color: var(--color-white);
 
   /* input:disabled */
   --input-disabled-border-color: rgba(255, 255, 255, 0.42);