styling social buttons

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'
+}