Add <SyncTextArea> component for Brave Sync

Also .formControl was removed.

Auditor: @ayumi

app/renderer/components/preferences/syncTab.js

@@ -12,7 +12,7 @@ const niceware = require('niceware')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const Button = require('../../../../js/components/button')
 const {SettingsList, SettingItem} = require('../settings')
-const {SettingTextbox} = require('../../../../app/renderer/components/textbox')
+const {SettingTextbox, SyncTextArea} = require('../../../../app/renderer/components/textbox')
 
 const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
@@ -131,9 +131,9 @@ class SyncTab extends ImmutableComponent {
       <SettingsList>
         <SettingItem>
           <span data-l10n-id='syncEnterPassphrase' />
-          <textarea spellCheck='false'
-            ref={(node) => { this.passphraseInput = node }}
-            className='form-control' />
+          <SyncTextArea
+            spellCheck='false'
+            ref={(node) => { this.passphraseInput = node }} />
         </SettingItem>
         {this.deviceNameInputContent}
       </SettingsList>

app/renderer/components/textbox.js

@@ -46,7 +46,8 @@ class TextArea extends ImmutableComponent {
   render () {
     const className = css(
       styles.textArea,
-      this.props['data-isAboutAdblock'] && styles.isAboutAdblock
+      this.props['data-isAboutAdblock'] && styles.isAboutAdblock,
+      this.props['data-isSync'] && styles.isSync
     )
 
     return <textarea className={className} {...this.props} />
@@ -59,6 +60,12 @@ class AboutAdblockTextArea extends ImmutableComponent {
   }
 }
 
+class SyncTextArea extends ImmutableComponent {
+  render () {
+    return <TextArea data-isSync='true' {...this.props} />
+  }
+}
+
 const styles = StyleSheet.create({
   // Textbox
   'textbox': {
@@ -91,6 +98,12 @@ const styles = StyleSheet.create({
   },
   'isAboutAdblock': {
     fontSize: globalStyles.spacing.textAreaFontSize  // Issue #6851
+  },
+  'isSync': {
+    width: '80%',
+    height: '100px',
+    fontSize: '18px',
+    fontFamily: 'monospace'
   }
 })
 
@@ -100,5 +113,6 @@ module.exports = {
   SettingTextbox,
   RecoveryKeyTextbox,
   TextArea,
-  AboutAdblockTextArea
+  AboutAdblockTextArea,
+  SyncTextArea
 }

js/about/styles.js

@@ -11,7 +11,7 @@ require('../../less/button.less')
 require('../../less/forms.less')
 
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox')
-const {TextArea, AboutAdblockTextArea} = require('../../app/renderer/components/textbox')
+const {TextArea, AboutAdblockTextArea, SyncTextArea} = require('../../app/renderer/components/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown')
 
 class AboutStyle extends ImmutableComponent {
@@ -86,6 +86,15 @@ class AboutStyle extends ImmutableComponent {
         </code></pre>
       </div>
 
+      <div className='container'>
+        <h2>Textarea used on Brave Sync code input form</h2>
+        <SyncTextArea placeholder='SyncTextArea' />
+        <pre><code>
+          const { '{SyncTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;SyncTextArea />
+        </code></pre>
+      </div>
+
       <hr />
 
       <h1 data-l10n-id='dropdowns' />

less/about/preferences.less

@@ -1559,12 +1559,6 @@ table.sortableTable {
 
 .syncContainer {
   .modal {
-    textarea {
-      width: 80%;
-      height: 100px;
-      font-size: 18px;
-      font-family: monospace;
-    }
     li {
       margin: 1em;
     }

less/forms.less

@@ -764,20 +764,3 @@ select {
     }
   }
 }
-
-// From commonStyles.js
-// TODO: remove this after input element in addOverlayContent on syncTab.js is replaced with the new textbox control in Aphrodite
-.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%;
-}