From 6e3b264128641afb803c123440e12bbda74177b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EF=BD=81=EF=BD=99=EF=BD=95=EF=BD=8D=EF=BD=89=C2=A0=20?=
 =?UTF-8?q?=EF=BD=99=EF=BD=95?= <ayumi@ayumiyu.com>
Date: Thu, 23 Feb 2017 11:21:02 -0800
Subject: [PATCH] Revert "Use <SettingTextbox> for the textbox on the dialog of
 enabling Sync"

---
 app/renderer/components/preferences/syncTab.js |  5 +----
 less/about/preferences.less                    |  4 +++-
 less/forms.less                                | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index b076c5158bb..1cc42b14997 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -12,7 +12,6 @@ const niceware = require('niceware')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const Button = require('../../../../js/components/button')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
-const {SettingTextbox} = require('../../../../app/renderer/components/textbox')
 
 const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
@@ -136,9 +135,7 @@ class SyncTab extends ImmutableComponent {
   get deviceNameInputContent () {
     return <SettingItem>
       <span data-l10n-id='syncDeviceNameInput' />
-      <SettingTextbox
-        data-test-id='deviceNameInput'
-        spellCheck='false'
+      <input className='deviceNameInput formControl' spellCheck='false'
         ref={(node) => { this.deviceNameInput = node }}
         placeholder={this.defaultDeviceName} />
     </SettingItem>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index e9eb3b96bec..a2957e05002 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -1417,7 +1417,9 @@ table.sortableTable {
   .setupContent {
     margin: 1em 0;
   }
-
+  .deviceNameInput {
+    width: 50%;
+  }
   .device {
     background-color: @lightGray;
     border-radius: @borderRadiusUIbox;
diff --git a/less/forms.less b/less/forms.less
index fedf4d3d57b..d2f978e89ce 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -773,3 +773,19 @@ select {
     }
   }
 }
+
+// From commonStyles.js
+.formControl {
+  background: white;
+  border: solid 1px @black10;
+  border-radius: @borderRadius;
+  box-shadow: inset 0 1px 1px @black10;
+  box-sizing: border-box;
+  display: block;
+  color: @darkGray;
+  font-size: 14.5px;
+  height: 2.25em;
+  outline: none;
+  padding: 0.4em;
+  width: 100%;
+}