mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-18 00:54:43 -04:00
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:
parent
39b1175850
commit
a62e3857b4
4 changed files with 26 additions and 26 deletions
|
@ -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'}>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue