diff options
author | 2018-06-22 11:34:38 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 95a88c4bb3733200912a877821c0a919d42022b6 (patch) | |
tree | 0390524480fc7fde7402dffe7963ea5fd4a9293a /vnext/src/components/LoginButton.js | |
parent | aede1e2d174d459d278e91c2546719b1ba1151b6 (diff) |
styling social buttons
Diffstat (limited to 'vnext/src/components/LoginButton.js')
-rw-r--r-- | vnext/src/components/LoginButton.js | 29 |
1 files changed, 27 insertions, 2 deletions
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' +} |