From a62e3857b4a4de16a75556291d1f1f77c928ac45 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Wed, 3 Jun 2020 13:17:46 +0200
Subject: [PATCH] Improve sign in button (#123)

* Improve sign in button

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Add missing size attribute

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* reformat code

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 .../navigation/header-bar/header-bar.tsx      |  2 +-
 .../layout/navigation/sign-in-button.tsx      | 11 ++++++---
 .../intro/cover-buttons/cover-buttons.tsx     | 15 +++++-------
 src/components/landing/pages/login/login.tsx  | 24 +++++++++----------
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/landing/layout/navigation/header-bar/header-bar.tsx b/src/components/landing/layout/navigation/header-bar/header-bar.tsx
index ba262c82b..77b60605e 100644
--- a/src/components/landing/layout/navigation/header-bar/header-bar.tsx
+++ b/src/components/landing/layout/navigation/header-bar/header-bar.tsx
@@ -30,7 +30,7 @@ const HeaderBar: React.FC = () => {
             <span className={'mr-1 d-flex'}>
               <NewGuestNoteButton/>
             </span>
-            <SignInButton/>
+            <SignInButton size="sm"/>
           </Fragment>
           : <Fragment>
             <span className={'mr-1 d-flex'}>
diff --git a/src/components/landing/layout/navigation/sign-in-button.tsx b/src/components/landing/layout/navigation/sign-in-button.tsx
index c2ef6cd1a..d808142ed 100644
--- a/src/components/landing/layout/navigation/sign-in-button.tsx
+++ b/src/components/landing/layout/navigation/sign-in-button.tsx
@@ -1,16 +1,21 @@
 import React from 'react'
 import { Button } from 'react-bootstrap'
+import { ButtonProps } from 'react-bootstrap/Button'
 import { Trans, useTranslation } from 'react-i18next'
 import { LinkContainer } from 'react-router-bootstrap'
 
-export const SignInButton: React.FC = () => {
+type SignInButtonProps = {
+  className?: string
+} & Omit<ButtonProps, 'href'>
+
+export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
   const { t } = useTranslation()
 
   return (
     <LinkContainer to="/login" title={t('login.signIn')}>
       <Button
-        variant="success"
-        size="sm"
+        variant={variant || 'success'}
+        {...props}
       >
         <Trans i18nKey="login.signIn"/>
       </Button>
diff --git a/src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx b/src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx
index 7d64e580a..483f89ef8 100644
--- a/src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx
+++ b/src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx
@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../../../redux'
+import { SignInButton } from '../../../layout/navigation/sign-in-button'
 import './cover-buttons.scss'
 
 export const CoverButtons: React.FC = () => {
@@ -16,15 +17,11 @@ export const CoverButtons: React.FC = () => {
 
   return (
     <div className="mb-5">
-      <Link to="/login">
-        <Button
-          className="cover-button"
-          variant="success"
-          size="lg"
-        >
-          <Trans i18nKey="login.signIn"/>
-        </Button>
-      </Link>
+      <SignInButton
+        className="cover-button"
+        variant="success"
+        size="lg"
+      />
 
       <span className="m-2">
         <Trans i18nKey="common.or"/>
diff --git a/src/components/landing/pages/login/login.tsx b/src/components/landing/pages/login/login.tsx
index 846b95fad..fbe2ccad8 100644
--- a/src/components/landing/pages/login/login.tsx
+++ b/src/components/landing/pages/login/login.tsx
@@ -57,19 +57,17 @@ export const Login: React.FC = () => {
               {
                 Object.values(OneClickType)
                   .filter((value) => authProviders[value])
-                  .map((value) => {
-                    return (
-                      <div
-                        className="p-2 d-flex flex-column social-button-container"
-                        key={value}
-                      >
-                        <ViaOneClick
-                          oneClickType={value}
-                          optionalName={oneClickCustomName(value)}
-                        />
-                      </div>
-                    )
-                  })
+                  .map((value) => (
+                    <div
+                      className="p-2 d-flex flex-column social-button-container"
+                      key={value}
+                    >
+                      <ViaOneClick
+                        oneClickType={value}
+                        optionalName={oneClickCustomName(value)}
+                      />
+                    </div>
+                  ))
               }
             </Card.Body>
           </Card>