From d43b0834b4a939e0c7cf43d83e2770d857bd3883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Madeleine=20B=C3=A4ckstr=C3=B6m?= <madba061@student.liu.se>
Date: Mon, 18 May 2020 14:01:23 +0200
Subject: [PATCH] add socials buttons for sign up view (fixes issue #1402)

---
 client/modules/User/pages/SignupView.jsx      | 5 +++++
 client/styles/components/_form-container.scss | 2 +-
 client/styles/components/_forms.scss          | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index eb18f0dc78..5955fdf03f 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -8,6 +8,8 @@ import { reduxForm } from 'redux-form';
 import * as UserActions from '../actions';
 import SignupForm from '../components/SignupForm';
 import { validateSignup } from '../../../utils/reduxFormUtils';
+import GithubButton from '../components/GithubButton';
+import GoogleButton from '../components/GoogleButton';
 import Nav from '../../../components/Nav';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
@@ -33,6 +35,9 @@ class SignupView extends React.Component {
           <div className="form-container__content">
             <h2 className="form-container__title">Sign Up</h2>
             <SignupForm {...this.props} />
+            <h2 className="form-container__divider">Or</h2>
+            <GithubButton buttonText="Login with Github" />
+            <GoogleButton buttonText="Login with Google" />
             <p className="form__navigation-options">
               Already have an account?&nbsp;
               <Link className="form__login-button" to="/login">Log In</Link>
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index a2e6726d9b..9c46387848 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -47,7 +47,7 @@
 }
 
 .form-container__divider {
-  padding: #{20 / $base-font-size}rem 0;
+  padding: #{10 / $base-font-size}rem 0;
 }
 
 .form-container__logo-button {
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index a3f28be9d9..a57a68a040 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -81,7 +81,7 @@
 .form [type="submit"] {
   @extend %button;
   padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
-  margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
+  margin: #{10 / $base-font-size}rem 0 #{12 / $base-font-size}rem 0;
 }
 
 .form [type="submit"][disabled] {