Merge pull request #7152 from brave/feature/syncing-styling

Syncing styling
brave · Feb 10, 2017 · 04af333 · 04af333
2 parents 2d43d47 + 7dad719
commit 04af333
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 88 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -31,6 +31,7 @@ syncTitleMessage=Sync encrypted browser data between your devices securely and p
 syncEnable=Sync this device
 syncData=Sync Data
 syncDataMessage=Sync the following data from this device:
+syncDeviceName=Device name
 syncBookmarks=Bookmarks
 syncHistory=Browsing history
 syncSiteSettings=Saved site settings
@@ -44,7 +45,7 @@ syncHideQR=Hide QR code
 syncNewDevice3=If asks you to enter code words, type in the words below.
 syncShowPassphrase=Show secret code words. (Do not share!)
 syncHidePassphrase=Hide code words
-syncDeviceName=Enter an optional name for this device:
+syncDeviceNameInput=Enter an optional name for this device:
 syncCreate=Set up sync
 syncEnterPassphrase=Enter your sync code words:
 accountBalance=account balance

diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
@@ -11,7 +11,7 @@ const niceware = require('niceware')
 // Components
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const Button = require('../../../../js/components/button')
-const {DeviceNameTextbox} = require('../textbox')
+const {SettingsList, SettingItem} = require('../settings')
 
 const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
@@ -35,19 +35,28 @@ class SyncTab extends ImmutableComponent {
 
   get setupContent () {
     // displayed before a sync userId has been created
-    return <div>
+    return <div className='setupContent'>
       <Button l10nId='syncStart' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncStart')} />
       <Button l10nId='syncAdd' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncAdd')} />
     </div>
   }
 
   get postSetupContent () {
     const {SettingCheckbox} = require('../../../../js/about/preferences')
-    return <div><div className='settingsList' id='syncEnableSwitch'>
-      <SettingCheckbox dataL10nId='syncEnable' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
-    </div>
-      <Button l10nId='syncNewDevice' className='whiteButton syncNewDeviceButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
-    </div>
+    return <SettingsList>
+      <div className='device'>
+        <SettingCheckbox dataL10nId='syncEnable' id='syncEnableSwitch' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
+        <div>
+          <span className='syncDeviceLabel' data-l10n-id='syncDeviceName' />
+          <div className='deviceName'>
+            {getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)}
+          </div>
+        </div>
+      </div>
+      <SettingItem>
+        <Button l10nId='syncNewDevice' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
+      </SettingItem>
+    </SettingsList>
   }
 
   get qrcodeContent () {
@@ -56,7 +65,7 @@ class SyncTab extends ImmutableComponent {
     }
     return this.props.syncQRVisible
       ? <div>
-        <div><Button l10nId='syncHideQR' className='whiteButton syncToggleButton' onClick={this.props.hideQR} /></div>
+        <div><Button l10nId='syncHideQR' className='whiteButton wideButton syncToggleButton' onClick={this.props.hideQR} /></div>
         <img id='syncQR' title='Brave sync QR code' src={this.props.syncData.get('seedQr')} />
       </div>
     : <Button l10nId='syncShowQR' className='whiteButton syncToggleButton' onClick={this.props.showQR} />
@@ -76,7 +85,7 @@ class SyncTab extends ImmutableComponent {
     ]
     return this.props.syncPassphraseVisible
       ? <div>
-        <Button l10nId='syncHidePassphrase' className='whiteButton syncToggleButton' onClick={this.props.hidePassphrase} />
+        <Button l10nId='syncHidePassphrase' className='whiteButton wideButton syncToggleButton' onClick={this.props.hidePassphrase} />
         <pre id='syncPassphrase'>{words.join('\n')}</pre>
       </div>
       : <Button l10nId='syncShowPassphrase' className='whiteButton syncToggleButton' onClick={this.props.showPassphrase} />
@@ -106,34 +115,45 @@ class SyncTab extends ImmutableComponent {
     const placeholder = process.platform
       ? [(osName[process.platform] || process.platform), 'Laptop'].join(' ')
       : getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)
-    return <div>
-      <span data-l10n-id='syncDeviceName' />
-      <DeviceNameTextbox spellCheck='false'
+    return <SettingItem>
+      <span data-l10n-id='syncDeviceNameInput' />
+      <input className='deviceNameInput formControl' spellCheck='false'
         ref={(node) => { this.deviceNameInput = node }}
-        data-isDeviceName
         placeholder={placeholder} />
-    </div>
+    </SettingItem>
   }
 
   get addOverlayContent () {
     return <div className='syncOverlay'>
-      <p data-l10n-id='syncEnterPassphrase' />
-      <textarea spellCheck='false'
-        ref={(node) => { this.passphraseInput = node }}
-        className='form-control' />
-      <div>{this.deviceNameInputContent}</div>
-      <Button l10nId='syncCreate' className='primaryButton'
-        onClick={this.onRestore}
-        disabled={!!this.passphraseInput} />
+      <SettingsList>
+        <SettingItem>
+          <span data-l10n-id='syncEnterPassphrase' />
+          <textarea spellCheck='false'
+            ref={(node) => { this.passphraseInput = node }}
+            className='form-control' />
+        </SettingItem>
+        {this.deviceNameInputContent}
+      </SettingsList>
     </div>
   }
 
+  get addOverlayFooter () {
+    return <Button l10nId='syncCreate' className='primaryButton'
+      onClick={this.onRestore}
+      disabled={!!this.passphraseInput} />
+  }
+
   get startOverlayContent () {
     return <div className='syncOverlay'>
-      {this.deviceNameInputContent}
-      <div>
-        <Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
-      </div>
+      <SettingsList>
+        {this.deviceNameInputContent}
+      </SettingsList>
+    </div>
+  }
+
+  get startOverlayFooter () {
+    return <div className='panel'>
+      <Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
     </div>
   }
 
@@ -173,20 +193,20 @@ class SyncTab extends ImmutableComponent {
 
   render () {
     const {SettingsList, SettingCheckbox} = require('../../../../js/about/preferences')
-    return <div id='syncContainer'>
+    return <div className='syncContainer'>
       {
       this.isSetup && this.props.syncNewDeviceOverlayVisible
         ? <ModalOverlay title={'syncNewDevice'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
         : null
       }
       {
       !this.isSetup && this.props.syncStartOverlayVisible
-        ? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
+        ? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} footer={this.startOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
         : null
       }
       {
       !this.isSetup && this.props.syncAddOverlayVisible
-        ? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
+        ? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} footer={this.addOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
         : null
       }
       <div className='sectionTitle' data-l10n-id='syncTitle' />

diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
@@ -15,8 +15,7 @@ class Textbox extends ImmutableComponent {
       styles.textbox,
       this.props['data-isSettings'] && styles.isSettings,
       (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable,
-      this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys,
-      this.props['data-isDeviceName'] && styles.deviceName
+      this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
     )
 
     return <input type='text' className={className} {...this.props} />
@@ -41,12 +40,6 @@ class RecoveryKeyTextbox extends ImmutableComponent {
   }
 }
 
-class DeviceNameTextbox extends ImmutableComponent {
-  render () {
-    return <FormTextbox data-isDeviceName='true' {...this.props} />
-  }
-}
-
 const styles = StyleSheet.create({
   'textbox': {
     boxSizing: 'border-box',
@@ -70,17 +63,12 @@ const styles = StyleSheet.create({
   },
   'recoveryKeys': {
     marginBottom: '20px'
-  },
-  'deviceName': {
-    marginLeft: '0px',
-    marginBottom: '40px'
   }
 })
 
 module.exports = {
   Textbox,
   FormTextbox,
   SettingTextbox,
-  DeviceNameTextbox,
   RecoveryKeyTextbox
 }
diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -276,10 +276,6 @@ a {
   margin: 1.2em 2px 7px;
 }
 
-.syncTitleMessage {
-  display: inline-block;
-}
-
 .settingsList .subtext {
   &.flashText {
     margin-top: 0;
@@ -1561,56 +1557,74 @@ table.sortableTable {
   }
 }
 
-.syncOverlay {
-  input {
-    margin-left: 20px;
-    display: inline;
+.syncContainer {
+  .modal {
+    textarea {
+      width: 80%;
+      height: 100px;
+      font-size: 18px;
+      font-family: monospace;
+    }
+    li {
+      margin: 1em;
+    }
+    .settingsListContainer {
+      margin-bottom: 1.5em;
+    }
+    .dialog-body, .dialog-footer {
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+    .dialog-footer {
+      margin-top: 1.5em;
+      padding-bottom: 2em;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
   }
-  textarea {
-    width: 80%;
-    height: 100px;
-    font-size: 18px;
-    font-family: monospace;
+  .browserButton + .browserButton {
+    margin-left: 0.75em;
   }
-  padding-left: 50px;
-  padding-bottom: 50px;
-  div, input, textarea, span {
-    margin-top: 20px;
+  .setupContent {
+    margin: 1em 0;
   }
-  li {
-    margin: 10px;
+  .deviceNameInput {
+    width: 50%;
+  }
+  .device {
+    background-color: @lightGray;
+    border-radius: @borderRadiusUIbox;
+    color: @mediumGray;
+    display: table;
+    line-height: 1.8em;
+    margin: 1em 0;
+    padding: 0.5em 1em;
+    width: 500px;
+    & > div, .settingItem {
+      display: table-cell;
+      vertical-align: middle;
+    }
+    #syncEnableSwitch {
+      width: 40%;
+    }
+    .syncDeviceLabel {
+      font-size: 0.9em;
+      margin: 0;
+    }
+    .deviceName {
+      margin-bottom: 0.5em;
+    }
   }
-}
-
-#syncEnableSwitch {
-  display: inline-block;
-  margin-right: 20px;
-  margin-top: 20px;
-}
-
-.syncNewDeviceButton {
-  margin-right: 20px;
-}
-
-.syncWarning {
-  color: #ff0400;
-  margin-top: 20px;
-  font-weight: 500;
-}
-
-.syncToggleButton {
-  margin-bottom: 10px;
 }
 
 #syncPassphrase {
-  margin-top: 20px;
-  margin-left: 20px;
+  margin: 1em;
   color: #ff0400;
   font-size: 15px;
   font-family: monospace;
 }
 
 #syncQR {
-  margin-top: 20px;
-  margin-left: 20px;
+  margin: 1em;
 }
diff --git a/less/button.less b/less/button.less
@@ -144,9 +144,15 @@ span.buttonSeparator {
 .prefBody {
   .settingsList > .settingItem + button,
   .settingItem > span + button,
-  .paymentsContainer button:not(.close) {
+  .paymentsContainer button:not(.close),
+  .syncContainer button {
     font-size: 0.9rem;
     padding: 8px 20px;
+  }
+
+  .settingsList > .settingItem + button,
+  .settingItem > span + button,
+  .paymentsContainer button:not(.close) {
     margin: 0;
   }
 

diff --git a/less/forms.less b/less/forms.less
@@ -764,3 +764,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%;
+}
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
@@ -62,7 +62,7 @@ module.exports = {
   syncTab: '[data-l10n-id="sync"]',
   doneButton: '[data-l10n-id="done"]',
   homepageInput: '[data-l10n-id="homepageInput"]',
-  syncSwitch: '#syncContainer .switchBackground',
+  syncSwitch: '.syncContainer .switchBackground',
   walletSwitch: '.enablePaymentsSwitch .switchBackground',
   addFundsButton: '.addFunds',
   advancedSettings: '.advancedSettings',