mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Remote interaction modal styles 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
next-virtuoso
marcin mikołajczak 2022-04-14 15:51:23 +02:00
rodzic 211a1fc88b
commit 23943ccdee
2 zmienionych plików z 20 dodań i 30 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

39
app/soapbox/features/ui/components/unauthorized_modal.js
Wyświetl plik

@ -3,16 +3,14 @@ import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { remoteInteraction } from 'soapbox/actions/interactions'; import { remoteInteraction } from 'soapbox/actions/interactions';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import IconButton from 'soapbox/components/icon_button'; import { Button, Modal, Stack, Text } from 'soapbox/components/ui';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import { Modal, Stack, Text } from '../../../components/ui';
const messages = defineMessages({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' }, accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' },
@ -133,11 +131,14 @@ class UnauthorizedModal extends ImmutablePureComponent {
} }
return ( return (
<div className='modal-root__modal compose-modal unauthorized-modal remote-interaction-modal'> <Modal
<div className='compose-modal__header'> title={header}
<h3 className='compose-modal__header__title'>{header}</h3> onClose={this.onClickClose}
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} /> confirmationAction={!singleUserMode && this.onLogin}
</div> confirmationText={<FormattedMessage id='account.login' defaultMessage='Log in' />}
secondaryAction={this.onRegister}
secondaryText={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
>
<div className='remote-interaction-modal__content'> <div className='remote-interaction-modal__content'>
<form className='simple_form remote-interaction-modal__fields'> <form className='simple_form remote-interaction-modal__fields'>
<input <input
@ -150,26 +151,20 @@ class UnauthorizedModal extends ImmutablePureComponent {
onChange={this.onAccountChange} onChange={this.onAccountChange}
required required
/> />
<button className='button' onClick={this.onClickProceed}>{button}</button> <Button theme='primary' onClick={this.onClickProceed}>{button}</Button>
</form> </form>
<div className='remote-interaction-modal__divider'> <div className='remote-interaction-modal__divider'>
<span> <Text align='center'>
<FormattedMessage id='remote_interaction.divider' defaultMessage='or' /> <FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
</span> </Text>
</div> </div>
{!singleUserMode && ( {!singleUserMode && (
<> <Text size='lg' weight='medium'>
<h3 className='compose-modal__header__title'><FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} /></h3> <FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />
<Link to='/' className='unauthorized-modal-content__button button' onClick={this.onClickClose}> </Text>
<FormattedMessage id='account.register' defaultMessage='Sign up' />
</Link>
</>
)} )}
<Link to='/login' className='unauthorized-modal-content__button button button-secondary' onClick={this.onClickClose}>
<FormattedMessage id='account.login' defaultMessage='Log in' />
</Link>
</div>
</div> </div>
</Modal>
); );
} }

11
app/styles/components/modal.scss
Wyświetl plik

@ -817,9 +817,7 @@
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// align-items: center;
row-gap: 10px; row-gap: 10px;
padding: 10px;
.unauthorized-modal-content__button { .unauthorized-modal-content__button {
margin: 0 auto; margin: 0 auto;
@ -832,11 +830,8 @@
gap: 10px; gap: 10px;
width: 100%; width: 100%;
.button { button {
width: auto; align-self: flex-end;
margin: 0;
text-transform: none;
overflow: unset;
} }
} }
@ -848,9 +843,9 @@
&::before, &::before,
&::after { &::after {
@apply border-b border-gray-300 dark:border-gray-600;
content: ""; content: "";
flex: 1; flex: 1;
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
} }
} }