dropdown styling

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;
 }

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);

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 {

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);