From 3ac913a28eead88a25262be86dfbc089a8faa4d6 Mon Sep 17 00:00:00 2001
From: Liam Cardenas <liamcardenas@gmail.com>
Date: Sun, 21 Jan 2018 11:29:48 -0800
Subject: [PATCH] Add new phone select style

---
 src/renderer/component/userFieldNew/view.jsx | 37 +++++++++-----------
 src/renderer/scss/_vars.scss                 |  1 +
 src/renderer/scss/component/_form-field.scss | 10 +++++-
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/renderer/component/userFieldNew/view.jsx b/src/renderer/component/userFieldNew/view.jsx
index 8fd8e4838..c9b7ceb34 100644
--- a/src/renderer/component/userFieldNew/view.jsx
+++ b/src/renderer/component/userFieldNew/view.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Form, FormRow, Submit } from 'component/form.js';
+import FormField from 'component/formField';
 
 class UserFieldNew extends React.PureComponent {
   constructor(props) {
@@ -71,27 +72,21 @@ class UserFieldNew extends React.PureComponent {
           )}
         </p>
         <Form onSubmit={this.handleSubmit.bind(this)}>
-          <FormRow
-            type="text"
-            label="Country Code"
-            name="country_code"
-            value={this.state.country_code}
-            errorMessage={phoneErrorMessage}
-            onChange={event => {
-              this.handleChanged(event, 'country_code');
-            }}
-          />
-          <FormRow
-            type="text"
-            label="Phone"
-            placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
-            name="phone"
-            value={this.state.phone}
-            errorMessage={phoneErrorMessage}
-            onChange={event => {
-              this.handleChanged(event, 'phone');
-            }}
-          />
+          <div className="form-row-phone">
+            <FormField type="select">
+              <option>(US) +1</option>
+            </FormField>
+            <FormRow
+              type="text"
+              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
+              name="phone"
+              value={this.state.phone}
+              errorMessage={phoneErrorMessage}
+              onChange={event => {
+                this.handleChanged(event, 'phone');
+              }}
+            />
+          </div>
           <div className="form-row-submit">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 15436a5b1..f05049912 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -79,6 +79,7 @@ $text-color: #000;
   /* Select */
   --select-bg: var(--color-bg-alt);
   --select-color: var(--text-color);
+  --select-height: 30px;
 
   /* Button */
   --button-bg: var(--color-bg-alt);
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 042565611..944aa9730 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -5,6 +5,14 @@
   margin-bottom: $spacing-vertical;
 }
 
+.form-row-phone {
+  display: flex;
+
+  select {
+    margin-right: 5px;
+  }
+}
+
 .form-row__label-row {
   margin-top: $spacing-vertical * 5/6;
   margin-bottom: 0px;
@@ -32,7 +40,7 @@
     box-sizing: border-box;
     padding-left: 5px;
     padding-right: 5px;
-    height: $spacing-vertical;
+    height: var(--select-height);
     background: var(--select-bg);
     color: var(--select-color);
     &:focus {