aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-22 11:34:38 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commit95a88c4bb3733200912a877821c0a919d42022b6 (patch)
tree0390524480fc7fde7402dffe7963ea5fd4a9293a
parentaede1e2d174d459d278e91c2546719b1ba1151b6 (diff)
styling social buttons
-rw-r--r--vnext/src/components/Icon.js5
-rw-r--r--vnext/src/components/LoginButton.js29
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'
+}