diff options
author | 2018-06-22 11:34:38 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 95a88c4bb3733200912a877821c0a919d42022b6 (patch) | |
tree | 0390524480fc7fde7402dffe7963ea5fd4a9293a /vnext | |
parent | aede1e2d174d459d278e91c2546719b1ba1151b6 (diff) |
styling social buttons
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/components/Icon.js | 5 | ||||
-rw-r--r-- | vnext/src/components/LoginButton.js | 29 |
2 files changed, 30 insertions, 4 deletions
diff --git a/vnext/src/components/Icon.js b/vnext/src/components/Icon.js index b4e8804c..743a007c 100644 --- a/vnext/src/components/Icon.js +++ b/vnext/src/components/Icon.js @@ -9,7 +9,7 @@ export default class Icon extends React.Component { render() { var size = this.props.size ? ' icon--' + this.props.size : ''; var className = this.props.className ? ' ' + this.props.className : ''; - var klass = 'icon icon--' + this.props.name + size + className; + var klass = 'icon' + (!this.props.noFill ? ' icon--' + this.props.name : '') + size + className; var name = '#' + this.props.name + '-icon'; var useTag = '<use xlink:href=' + name + ' />'; @@ -37,5 +37,6 @@ export default class Icon extends React.Component { Icon.propTypes = { size: PropTypes.string.isRequired, name: PropTypes.string.isRequired, - className: PropTypes.string + className: PropTypes.string, + noFill: PropTypes.bool } diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index 2f73a4ee..22ae2198 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -57,8 +57,15 @@ export default class LoginButton extends React.Component { onClose={this.toggleModal}> <div className="dialoglogin"> <p>Please, introduce yourself:</p> - <a href={`https://api.juick.com/_fblogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a> - <a href={`https://api.juick.com/_vklogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a> + <div style={socialButtonsStyle}> + <a href={`https://api.juick.com/_fblogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={facebookButtonStyle}> + <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in + </a> + <a href={`https://api.juick.com/_vklogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={vkButtonStyle}> + <Icon name="ei-sc-vk" size="s" noFill={true} /> + Log in + </a> + </div> <p>Already registered?</p> <form onSubmit={this.login.bind(this)}> <input className="signinput" @@ -83,3 +90,21 @@ LoginButton.propTypes = { title: PropTypes.string.isRequired, onAuth: PropTypes.func.isRequired }; + +const socialButtonsStyle = { + display: 'flex', + justifyContent: 'space-evenly', + padding: '4px' +} + +const facebookButtonStyle = { + color: '#fff', + padding: '2px 14px', + background: '#3b5998' +} + +const vkButtonStyle = { + color: '#fff', + padding: '2px 14px', + background: '#4c75a3' +} |