Merge pull request #7164 from luixxiul/sync-styling-aphrodite

Use <SettingTextbox> for the textbox on the dialog of enabling Sync

app/renderer/components/preferences/syncTab.js

@@ -12,6 +12,7 @@ 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
@@ -135,7 +136,9 @@ class SyncTab extends ImmutableComponent {
   get deviceNameInputContent () {
     return <SettingItem>
       <span data-l10n-id='syncDeviceNameInput' />
-      <input className='deviceNameInput formControl' spellCheck='false'
+      <SettingTextbox
+        data-test-id='deviceNameInput'
+        spellCheck='false'
         ref={(node) => { this.deviceNameInput = node }}
         placeholder={this.defaultDeviceName} />
     </SettingItem>

less/about/preferences.less

@@ -1417,9 +1417,7 @@ table.sortableTable {
   .setupContent {
     margin: 1em 0;
   }
-  .deviceNameInput {
-    width: 50%;
-  }
+
   .device {
     background-color: @lightGray;
     border-radius: @borderRadiusUIbox;

less/forms.less

@@ -773,19 +773,3 @@ 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%;
-}