Add new phone select style

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
+          <div className="form-row-phone">
-            type="text"
+            <FormField type="select">
-            label="Country Code"
+              <option>(US) +1</option>
-            name="country_code"
+            </FormField>
-            value={this.state.country_code}
+            <FormRow
-            errorMessage={phoneErrorMessage}
+              type="text"
-            onChange={event => {
+              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
-              this.handleChanged(event, 'country_code');
+              name="phone"
-            }}
+              value={this.state.phone}
-          />
+              errorMessage={phoneErrorMessage}
-          <FormRow
+              onChange={event => {
-            type="text"
+                this.handleChanged(event, 'phone');
-            label="Phone"
+              }}
-            placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
+            />
-            name="phone"
+          </div>
-            value={this.state.phone}
-            errorMessage={phoneErrorMessage}
-            onChange={event => {
-              this.handleChanged(event, 'phone');
-            }}
-          />
           <div className="form-row-submit">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}

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

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 {