bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remote interaction modal styles

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-14 15:51:23 +02:00
parent 211a1fc88b
commit 23943ccdee
2 changed files with 20 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/soapbox/features/ui/components/unauthorized_modal.js
View file

@ -3,16 +3,14 @@ import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
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 snackbar from 'soapbox/actions/snackbar';
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 { Modal, Stack, Text } from '../../../components/ui';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
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 (
<div className='modal-root__modal compose-modal unauthorized-modal remote-interaction-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'>{header}</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<Modal
title={header}
onClose={this.onClickClose}
confirmationAction={!singleUserMode && this.onLogin}
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'>
<form className='simple_form remote-interaction-modal__fields'>
<input
@ -150,26 +151,20 @@ class UnauthorizedModal extends ImmutablePureComponent {
onChange={this.onAccountChange}
required
/>
<button className='button' onClick={this.onClickProceed}>{button}</button>
<Button theme='primary' onClick={this.onClickProceed}>{button}</Button>
</form>
<div className='remote-interaction-modal__divider'>
<span>
<Text align='center'>
<FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
</span>
</Text>
</div>
{!singleUserMode && (
<>
<h3 className='compose-modal__header__title'><FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} /></h3>
<Link to='/' className='unauthorized-modal-content__button button' onClick={this.onClickClose}>
<FormattedMessage id='account.register' defaultMessage='Sign up' />
</Link>
</>
<Text size='lg' weight='medium'>
<FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} />
</Text>
)}
<Link to='/login' className='unauthorized-modal-content__button button button-secondary' onClick={this.onClickClose}>
<FormattedMessage id='account.login' defaultMessage='Log in' />
</Link>
</div>
</div>
</Modal>
);
}

11
app/styles/components/modal.scss
View file

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