diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index 05609a2e6dc..08f48543199 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/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 {
-
{this.deviceNameInputContent}
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index 0e88a86ae99..62118edd134 100644
--- a/app/renderer/components/textbox.js
+++ b/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
@@ -59,6 +60,12 @@ class AboutAdblockTextArea extends ImmutableComponent {
}
}
+class SyncTextArea extends ImmutableComponent {
+ render () {
+ return
+ }
+}
+
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
}
diff --git a/js/about/styles.js b/js/about/styles.js
index 89e47810480..ab5ece62bfc 100644
--- a/js/about/styles.js
+++ b/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 {
+
+
Textarea used on Brave Sync code input form
+
+
+ const { '{SyncTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+ <SyncTextArea />
+
+
+
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 9969992fb88..d4b566a9ab8 100644
--- a/less/about/preferences.less
+++ b/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;
}
diff --git a/less/forms.less b/less/forms.less
index 9279ca325c6..a0b881e3f1f 100644
--- a/less/forms.less
+++ b/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%;
-}