Merge pull request #7359 from brave/revert-7164-sync-styling-aphrodite

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

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>

less/about/preferences.less

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

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