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>
This commit is contained in:
mrdrogdrog 2020-06-03 13:17:46 +02:00 committed by GitHub
parent 39b1175850
commit a62e3857b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 26 deletions

View file

@ -30,7 +30,7 @@ const HeaderBar: React.FC = () => {
<span className={'mr-1 d-flex'}> <span className={'mr-1 d-flex'}>
<NewGuestNoteButton/> <NewGuestNoteButton/>
</span> </span>
<SignInButton/> <SignInButton size="sm"/>
</Fragment> </Fragment>
: <Fragment> : <Fragment>
<span className={'mr-1 d-flex'}> <span className={'mr-1 d-flex'}>

View file

@ -1,16 +1,21 @@
import React from 'react' import React from 'react'
import { Button } from 'react-bootstrap' import { Button } from 'react-bootstrap'
import { ButtonProps } from 'react-bootstrap/Button'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { LinkContainer } from 'react-router-bootstrap' 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() const { t } = useTranslation()
return ( return (
<LinkContainer to="/login" title={t('login.signIn')}> <LinkContainer to="/login" title={t('login.signIn')}>
<Button <Button
variant="success" variant={variant || 'success'}
size="sm" {...props}
> >
<Trans i18nKey="login.signIn"/> <Trans i18nKey="login.signIn"/>
</Button> </Button>

View file

@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ApplicationState } from '../../../../../redux' import { ApplicationState } from '../../../../../redux'
import { SignInButton } from '../../../layout/navigation/sign-in-button'
import './cover-buttons.scss' import './cover-buttons.scss'
export const CoverButtons: React.FC = () => { export const CoverButtons: React.FC = () => {
@ -16,15 +17,11 @@ export const CoverButtons: React.FC = () => {
return ( return (
<div className="mb-5"> <div className="mb-5">
<Link to="/login"> <SignInButton
<Button className="cover-button"
className="cover-button" variant="success"
variant="success" size="lg"
size="lg" />
>
<Trans i18nKey="login.signIn"/>
</Button>
</Link>
<span className="m-2"> <span className="m-2">
<Trans i18nKey="common.or"/> <Trans i18nKey="common.or"/>

View file

@ -57,19 +57,17 @@ export const Login: React.FC = () => {
{ {
Object.values(OneClickType) Object.values(OneClickType)
.filter((value) => authProviders[value]) .filter((value) => authProviders[value])
.map((value) => { .map((value) => (
return ( <div
<div className="p-2 d-flex flex-column social-button-container"
className="p-2 d-flex flex-column social-button-container" key={value}
key={value} >
> <ViaOneClick
<ViaOneClick oneClickType={value}
oneClickType={value} optionalName={oneClickCustomName(value)}
optionalName={oneClickCustomName(value)} />
/> </div>
</div> ))
)
})
} }
</Card.Body> </Card.Body>
</Card> </Card>