diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index fc523469a28..1fad56440e3 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -157,14 +157,16 @@ const globalStyles = { tabTitle: '12px' }, appIcons: { - loading: 'fa fa-spinner fa-spin', - defaultIcon: 'fa fa-file-o', + clipboard: 'fa fa-clipboard', closeTab: 'fa fa-times-circle', - private: 'fa fa-eye', + defaultIcon: 'fa fa-file-o', + loading: 'fa fa-spinner fa-spin', newSession: 'fa fa-user', - volumeOn: 'fa fa-volume-up', + private: 'fa fa-eye', + refresh: 'fa fa-refresh', + remove: 'fa fa-times', volumeOff: 'fa fa-volume-off', - refresh: 'fa fa-refresh' + volumeOn: 'fa fa-volume-up' } } diff --git a/js/about/passwords.js b/js/about/passwords.js index 8d740ec2145..d1816d1c438 100644 --- a/js/about/passwords.js +++ b/js/about/passwords.js @@ -9,9 +9,52 @@ const aboutActions = require('./aboutActions') const ipc = window.chrome.ipcRenderer -require('../../less/about/passwords.less') +const {StyleSheet, css} = require('aphrodite/no-important') +const globalStyles = require('../../app/renderer/components/styles/global') + +require('../../less/about/common.less') require('../../node_modules/font-awesome/css/font-awesome.css') +class PasswordsTh extends React.Component { + render () { + return + } +} + +class PasswordsTr extends React.Component { + render () { + const className = css( + styles.passwordsTr, + this.props['data-isHead'] && styles.isHead + ) + + return + } +} + +class HeadTr extends React.Component { + render () { + return + } +} + +class PasswordsTd extends React.Component { + render () { + const className = css( + styles.passwordsTd, + this.props['data-isAction'] && styles.isAction + ) + + return + } +} + +class ActionsTd extends React.Component { + render () { + return + } +} + class SiteItem extends React.Component { constructor () { super() @@ -23,13 +66,18 @@ class SiteItem extends React.Component { } render () { - return - - - - {this.props.site} - + return + + + + + + {this.props.site} + } } @@ -84,21 +132,31 @@ class PasswordItem extends React.Component { render () { const password = this.props.password - return - - - - {password.get('origin')} - {password.get('username')} - + return + + + + + + {password.get('origin')} + {password.get('username')} + {'*'.repeat(password.get('encryptedPassword').length)} - - - - - + + + + + + + } } @@ -154,15 +212,15 @@ class AboutPasswords extends React.Component { ? null :

-
- +
+
- - + + + + + + { @@ -173,8 +231,10 @@ class AboutPasswords extends React.Component { }
- - - -
-
- +
@@ -184,8 +244,8 @@ class AboutPasswords extends React.Component { ? null :

-
- +
+
{ this.state.disabledSiteDetails.map((item, site) => @@ -196,9 +256,9 @@ class AboutPasswords extends React.Component { - return
+ return

-
+
{ this.isPasswordsEmpty && this.isSitesEmpty ?
@@ -208,4 +268,72 @@ class AboutPasswords extends React.Component { } } +const itemPadding = '8px' + +const styles = StyleSheet.create({ + passwordAction: { + cursor: 'pointer', + padding: itemPadding, + + // lighten(@highlightBlue, 20%); + ':hover': { + backgroundColor: '#9cd4fe' + } + }, + passwordsPage: { + margin: '20px' + }, + passwordsPageContent: { + borderTop: `1px solid ${globalStyles.color.chromeBorderColor}` + }, + passwordsList: { + paddingTop: '10px', + overflow: 'hidden' + }, + passwordInstructions: { + borderTop: `1px solid ${globalStyles.color.chromeBorderColor}`, + paddingTop: '10px', + paddingBottom: '20px', + fontSize: '18px', + color: 'grey' + }, + passwordsPageFooter: { + padding: '10px', + marginBottom: '20px' + }, + passwordsPageFooterClear: { + color: 'grey', + cursor: 'pointer', + textDecoration: 'underline' + }, + + passwordsTh: { + padding: itemPadding, + textAlign: 'left' + }, + passwordsTr: { + cursor: 'default', + overflow: 'hidden', + whiteSpace: 'nowrap', + padding: '12px', + WebkitUserSelect: 'none', + + // lighten(@highlightBlue, 30%); + ':hover': { + backgroundColor: '#ceeaff' + } + }, + isHead: { + ':hover': { + backgroundColor: 'inherit' + } + }, + passwordsTd: { + padding: itemPadding + }, + isAction: { + padding: 0 + } +}) + module.exports = diff --git a/less/about/passwords.less b/less/about/passwords.less deleted file mode 100644 index 8f9e6f6e1e6..00000000000 --- a/less/about/passwords.less +++ /dev/null @@ -1,72 +0,0 @@ -@import "./common.less"; - -.passwordsPage { - margin: 20px; - - .passwordsPageContent { - border-top: 1px solid @chromeBorderColor; - - .passwordsList { - padding-top: 10px; - overflow: hidden; - } - } -} - -.passwordInstructions { - border-top: 1px solid @chromeBorderColor; - padding-top: 10px; - padding-bottom: 20px; - font-size: 18px; - color: grey; -} - -th { - padding: 8px; - text-align: left; -} - -tr { - cursor: default; - overflow: hidden; - white-space: nowrap; - - padding: 12px; - -webkit-user-select: none; - - .passwordItem { - display: flex; - } - - &:hover :not(th) { - background-color: lighten(@highlightBlue, 30%); - } -} - -td:not(.passwordActions) { - padding-right: 8px; - padding-left: 8px; -} - -.passwordNotifications { - color: @braveOrange; - font-weight: bold; -} - -.passwordAction { - cursor: pointer; - padding: 8px; - &:hover { - background-color: lighten(@highlightBlue, 20%); - } -} - -.passwordsPageFooter { - padding: 10px; - margin-bottom: 20px; - span { - color: grey; - cursor: pointer; - text-decoration: underline; - } -} diff --git a/test/components/notificationBarTest.js b/test/components/notificationBarTest.js index 665ad26089c..da217957e6a 100644 --- a/test/components/notificationBarTest.js +++ b/test/components/notificationBarTest.js @@ -116,7 +116,7 @@ describe('notificationBar', function () { }).click('button=Yes') .tabByIndex(0) .loadUrl('about:passwords') - .waitForExist('tr.passwordItem') + .waitForExist('[data-test-id="passwordItem"]') .windowByUrl(Brave.browserWindowUrl) .tabByIndex(0) .loadUrl(this.loginUrl4)