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

Merge remote-tracking branch 'origin/next' into next-emoji-reacts

Browse source
This commit is contained in:
Alex Gleason 2022-04-02 10:48:45 -05:00
commit c74d154874
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
25 changed files with 165 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/list.js
View file

@ -51,7 +51,7 @@ const ListItem = ({ label, hint, children, onClick }) => {
</div> </div>
{onClick ? ( {onClick ? (
<div className='flex flex-row items-center text-gray-500'> <div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
{children} {children}
<Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' /> <Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />

2
app/soapbox/components/ui/input/input.tsx
View file

@ -50,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
type={revealed ? 'text' : type} type={revealed ? 'text' : type}
ref={ref} ref={ref}
className={classNames({ className={classNames({
'block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500': 'dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
true, true,
'pr-7': isPassword, 'pr-7': isPassword,
'pl-8': typeof icon !== 'undefined', 'pl-8': typeof icon !== 'undefined',

28
app/soapbox/features/aliases/index.js
View file

@ -7,11 +7,10 @@ import { connect } from 'react-redux';
import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases'; import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list'; import ScrollableList from 'soapbox/components/scrollable_list';
import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
import { makeGetAccount } from 'soapbox/selectors'; import { makeGetAccount } from 'soapbox/selectors';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import Column from '../ui/components/column';
import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account'; import Account from './components/account';
import Search from './components/search'; import Search from './components/search';
@ -71,7 +70,9 @@ class Aliases extends ImmutablePureComponent {
return ( return (
<Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}> <Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}>
<ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
</CardHeader>
<Search /> <Search />
{ {
loaded && searchAccountIds.size === 0 ? ( loaded && searchAccountIds.size === 0 ? (
@ -84,23 +85,26 @@ class Aliases extends ImmutablePureComponent {
</div> </div>
) )
} }
<ColumnSubheading text={intl.formatMessage(messages.subheading_aliases)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
</CardHeader>
<div className='aliases-settings-panel'> <div className='aliases-settings-panel'>
<ScrollableList <ScrollableList
scrollKey='aliases' scrollKey='aliases'
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
> >
{aliases.map((alias, i) => ( {aliases.map((alias, i) => (
<div key={i} className='alias__container'> <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
<div className='alias__details'> <div>
<span className='alias__list-label'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></span> <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
<span className='alias__list-value'>{alias}</span> {' '}
<Text tag='span'>{alias}</Text>
</div> </div>
<div className='alias__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}> <div className='flex items-center' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='alias__delete-icon' id='times' size={40} /> <Icon className='pr-1.5 text-lg' id='times' size={40} />
<span className='alias__delete-label'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></span> <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div> </div>
</div> </HStack>
))} ))}
</ScrollableList> </ScrollableList>
</div> </div>

8
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
View file

@ -36,7 +36,7 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
id="field-1" id="field-1"
name="username" name="username"
placeholder="Email address" placeholder="Email address"
@ -64,7 +64,7 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
id="field-1" id="field-1"
name="password" name="password"
placeholder="Password" placeholder="Password"
@ -169,7 +169,7 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
id="field-1" id="field-1"
name="username" name="username"
placeholder="Email address" placeholder="Email address"
@ -197,7 +197,7 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
id="field-1" id="field-1"
name="password" name="password"
placeholder="Password" placeholder="Password"

4
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
View file

@ -37,7 +37,7 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
id="field-1" id="field-1"
name="username" name="username"
placeholder="Email address" placeholder="Email address"
@ -65,7 +65,7 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
autoCapitalize="off" autoCapitalize="off"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7" className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
id="field-1" id="field-1"
name="password" name="password"
placeholder="Password" placeholder="Password"

1
app/soapbox/features/bookmarks/index.js
View file

@ -74,6 +74,7 @@ class Bookmarks extends ImmutablePureComponent {
shouldUpdateScroll={shouldUpdateScroll} shouldUpdateScroll={shouldUpdateScroll}
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
bindToDocument={!multiColumn} bindToDocument={!multiColumn}
divideType='space'
/> />
</Column> </Column>
); );

9
app/soapbox/features/chats/chat_room.js
View file

@ -5,11 +5,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchChat, markChatRead } from 'soapbox/actions/chats'; import { fetchChat, markChatRead } from 'soapbox/actions/chats';
import Avatar from 'soapbox/components/avatar';
import ColumnBackButton from 'soapbox/components/column_back_button';
import { Column } from 'soapbox/components/ui'; import { Column } from 'soapbox/components/ui';
import { makeGetChat } from 'soapbox/selectors'; import { makeGetChat } from 'soapbox/selectors';
import { getAcct } from 'soapbox/utils/accounts'; import { getAcct } from 'soapbox/utils/accounts';
@ -78,8 +75,8 @@ class ChatRoom extends ImmutablePureComponent {
const account = chat.get('account'); const account = chat.get('account');
return ( return (
<Column> <Column label={`@${getAcct(account, displayFqn)}`}>
<div className='chatroom__back'> {/* <div className='chatroom__back'>
<ColumnBackButton /> <ColumnBackButton />
<Link to={`/@${account.get('acct')}`} className='chatroom__header'> <Link to={`/@${account.get('acct')}`} className='chatroom__header'>
<Avatar account={account} size={18} /> <Avatar account={account} size={18} />
@ -87,7 +84,7 @@ class ChatRoom extends ImmutablePureComponent {
@{getAcct(account, displayFqn)} @{getAcct(account, displayFqn)}
</div> </div>
</Link> </Link>
</div> </div> */}
<ChatBox <ChatBox
chatId={chat.get('id')} chatId={chat.get('id')}
onSetInputRef={this.handleInputRef} onSetInputRef={this.handleInputRef}

16
app/soapbox/features/chats/components/chat_box.js
View file

@ -174,13 +174,11 @@ class ChatBox extends ImmutablePureComponent {
const { resetFileKey } = this.state; const { resetFileKey } = this.state;
return this.canSubmit() ? ( return this.canSubmit() ? (
<div className='chat-box__send'> <IconButton
<IconButton src={require('@tabler/icons/icons/send.svg')}
src={require('@tabler/icons/icons/send.svg')} title={intl.formatMessage(messages.send)}
title={intl.formatMessage(messages.send)} onClick={this.sendMessage}
onClick={this.sendMessage} />
/>
</div>
) : ( ) : (
<UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} /> <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
); );
@ -197,7 +195,9 @@ class ChatBox extends ImmutablePureComponent {
{this.renderAttachment()} {this.renderAttachment()}
<UploadProgress active={isUploading} progress={uploadProgress*100} /> <UploadProgress active={isUploading} progress={uploadProgress*100} />
<div className='chat-box__actions simple_form'> <div className='chat-box__actions simple_form'>
{this.renderActionButton()} <div className='chat-box__send'>
{this.renderActionButton()}
</div>
<textarea <textarea
rows={1} rows={1}
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}

6
app/soapbox/features/chats/components/chat_message_list.js
View file

@ -12,6 +12,7 @@ import { createSelector } from 'reselect';
import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats'; import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { initReportById } from 'soapbox/actions/reports'; import { initReportById } from 'soapbox/actions/reports';
import { Text } from 'soapbox/components/ui';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import emojify from 'soapbox/features/emoji/emoji'; import emojify from 'soapbox/features/emoji/emoji';
import Bundle from 'soapbox/features/ui/components/bundle'; import Bundle from 'soapbox/features/ui/components/bundle';
@ -293,10 +294,7 @@ class ChatMessageList extends ImmutablePureComponent {
tabIndex={0} tabIndex={0}
> >
{this.maybeRenderMedia(chatMessage)} {this.maybeRenderMedia(chatMessage)}
<span <Text size='sm' dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }} />
className='chat-message__content'
dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
/>
<div className='chat-message__menu'> <div className='chat-message__menu'>
<DropdownMenuContainer <DropdownMenuContainer
items={menu} items={menu}

1
app/soapbox/features/community_timeline/index.js
View file

@ -87,6 +87,7 @@ class CommunityTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh} onRefresh={this.handleRefresh}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType='space'
/> />
</Column> </Column>
); );

2
app/soapbox/features/compose/components/search.tsx
View file

@ -120,7 +120,7 @@ const Search = (props: ISearch) => {
<div className='relative'> <div className='relative'>
<Component <Component
className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 placeholder-gray-500 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 dark:text-white placeholder-gray-500 dark:placeholder-gray-300 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
type='text' type='text'
id='search' id='search'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}

19
app/soapbox/features/list_editor/index.js
View file

@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import IconButton from 'soapbox/components/icon_button'; import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists';
import { Modal } from 'soapbox/components/ui';
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
import ColumnSubheading from '../ui/components/column_subheading'; import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account'; import Account from './components/account';
@ -66,13 +66,10 @@ class ListEditor extends ImmutablePureComponent {
const { accountIds, searchAccountIds, intl } = this.props; const { accountIds, searchAccountIds, intl } = this.props;
return ( return (
<div className='modal-root__modal compose-modal'> <Modal
<div className='compose-modal__header'> title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
<h3 className='compose-modal__header__title'> onClose={this.onClickClose}
{intl.formatMessage(messages.editList)} >
</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<div className='compose-modal__content list-editor__content'> <div className='compose-modal__content list-editor__content'>
<div className='list-editor'> <div className='list-editor'>
<ColumnSubheading text={intl.formatMessage(messages.changeTitle)} /> <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
@ -97,7 +94,7 @@ class ListEditor extends ImmutablePureComponent {
</div> </div>
</div> </div>
</div> </div>
</div> </Modal>
); );
} }

1
app/soapbox/features/list_timeline/index.js
View file

@ -149,6 +149,7 @@ class ListTimeline extends React.PureComponent {
timelineId={`list:${id}`} timelineId={`list:${id}`}
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
divideType='space'
/> />
</Column> </Column>
); );

15
app/soapbox/features/lists/index.js
View file

@ -6,13 +6,14 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { fetchLists } from 'soapbox/actions/lists';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui'; import { Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import { fetchLists } from '../../actions/lists';
import ScrollableList from '../../components/scrollable_list';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link'; import ColumnLink from '../ui/components/column_link';
import ColumnSubheading from '../ui/components/column_subheading';
import NewListForm from './components/new_list_form'; import NewListForm from './components/new_list_form';
@ -65,10 +66,14 @@ class Lists extends ImmutablePureComponent {
return ( return (
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}> <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
<br /> <br />
<ColumnSubheading text={intl.formatMessage(messages.add)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.add)} />
</CardHeader>
<NewListForm /> <NewListForm />
<br /> <br />
<ColumnSubheading text={intl.formatMessage(messages.subheading)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading)} />
</CardHeader>
<ScrollableList <ScrollableList
scrollKey='lists' scrollKey='lists'
emptyMessage={emptyMessage} emptyMessage={emptyMessage}

100
app/soapbox/features/migration/index.js
View file

@ -7,9 +7,8 @@ import { Link } from 'react-router-dom';
import { moveAccount } from 'soapbox/actions/security'; import { moveAccount } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import ShowablePassword from 'soapbox/components/showable_password'; // import Column from 'soapbox/features/ui/components/column';
import { FieldsGroup, SimpleForm, TextInput } from 'soapbox/features/forms'; import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import Column from 'soapbox/features/ui/components/column';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.migration', defaultMessage: 'Account migration' }, heading: { id: 'column.migration', defaultMessage: 'Account migration' },
@ -63,51 +62,56 @@ class Migration extends ImmutablePureComponent {
return ( return (
<Column label={intl.formatMessage(messages.heading)}> <Column label={intl.formatMessage(messages.heading)}>
<SimpleForm onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<fieldset disabled={this.state.isLoading}> <Text theme='muted'>
<FieldsGroup> <FormattedMessage
<p className='hint'> id='migration.hint'
<FormattedMessage defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
id='migration.hint' values={{
defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.' link: (
values={{ <Link
link: ( className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
<Link to='/settings/aliases'> to='/settings/aliases'
<FormattedMessage >
id='migration.hint.link' <FormattedMessage
defaultMessage='create an account alias' id='migration.hint.link'
/> defaultMessage='create an account alias'
</Link> />
), </Link>
}} ),
/> }}
</p> />
<TextInput </Text>
label={intl.formatMessage(messages.acctFieldLabel)} <FormGroup
placeholder={intl.formatMessage(messages.acctFieldPlaceholder)} labelText={intl.formatMessage(messages.acctFieldLabel)}
name='targetAccount' >
value={this.state.targetAccount} <Input
onChange={this.handleInputChange} name='targetAccount'
/> placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
<ShowablePassword onChange={this.handleInputChange}
label={intl.formatMessage(messages.currentPasswordFieldLabel)} value={this.state.targetAccount}
name='password' required
value={this.state.password} />
onChange={this.handleInputChange} </FormGroup>
/> <FormGroup
<div className='actions'> labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
<button >
name='button' <Input
type='submit' type='password'
className='btn button button-primary' name='password'
disabled={!this.state.password || !this.state.targetAccount} onChange={this.handleInputChange}
> value={this.state.password}
{intl.formatMessage(messages.submit)} required
</button> />
</div> </FormGroup>
</FieldsGroup> <FormActions>
</fieldset> <Button
</SimpleForm> theme='primary'
text={intl.formatMessage(messages.submit)}
onClick={this.handleSubmit}
/>
</FormActions>
</Form>
</Column> </Column>
); );
} }

2
app/soapbox/features/public_layout/components/header.js
View file

@ -83,7 +83,7 @@ const Header = () => {
/> />
</div> </div>
<Link to='/' className='z-10'> <Link to='/' className='z-10'>
<img alt='Logo' src={logo} className='h-6 w-auto min-w-[160px] cursor-pointer' /> <img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />
<span className='hidden'>{intl.formatMessage(messages.home)}</span> <span className='hidden'>{intl.formatMessage(messages.home)}</span>
</Link> </Link>
</div> </div>

1
app/soapbox/features/public_timeline/index.js
View file

@ -136,6 +136,7 @@ class CommunityTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh} onRefresh={this.handleRefresh}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />} emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
divideType='space'
/> />
</Column> </Column>
); );

1
app/soapbox/features/remote_timeline/index.js
View file

@ -107,6 +107,7 @@ class RemoteTimeline extends React.PureComponent {
values={{ instance }} values={{ instance }}
/> />
} }
divideType='space'
/> />
</Column> </Column>
); );

21
app/soapbox/features/ui/components/hotkeys_modal.js
View file

@ -1,13 +1,9 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; 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 { injectIntl, FormattedMessage } from 'react-intl';
import IconButton from 'soapbox/components/icon_button'; import { Modal } from 'soapbox/components/ui';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
export default @injectIntl export default @injectIntl
class HotkeysModal extends ImmutablePureComponent { class HotkeysModal extends ImmutablePureComponent {
@ -18,14 +14,13 @@ class HotkeysModal extends ImmutablePureComponent {
}; };
render() { render() {
const { intl, onClose } = this.props; const { onClose } = this.props;
return ( return (
<div className='modal-root__modal hotkeys-modal'> <Modal
<div className='compose-modal__header'> title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
<h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3> onClose={onClose}
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} /> >
</div>
<div className='compose-modal__content'> <div className='compose-modal__content'>
<table> <table>
<thead> <thead>
@ -159,7 +154,7 @@ class HotkeysModal extends ImmutablePureComponent {
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </Modal>
); );
} }

23
app/soapbox/features/ui/components/reactions_modal.js
View file

@ -7,9 +7,8 @@ import { connect } from 'react-redux';
import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions'; import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
import FilterBar from 'soapbox/components/filter_bar'; import FilterBar from 'soapbox/components/filter_bar';
import IconButton from 'soapbox/components/icon_button';
import ScrollableList from 'soapbox/components/scrollable_list'; import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui'; import { Modal, Spinner } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container'; import AccountContainer from 'soapbox/containers/account_container';
const messages = defineMessages({ const messages = defineMessages({
@ -89,7 +88,7 @@ class ReactionsModal extends React.PureComponent {
} }
render() { render() {
const { intl, reactions } = this.props; const { reactions } = this.props;
const { reaction } = this.state; const { reaction } = this.state;
const accounts = reactions && (reaction const accounts = reactions && (reaction
@ -118,20 +117,12 @@ class ReactionsModal extends React.PureComponent {
return ( return (
<div className='modal-root__modal reactions-modal'> <Modal
<div className='compose-modal__header'> title={<FormattedMessage id='column.reactions' defaultMessage='Reactions' />}
<h3 className='compose-modal__header__title'> onClose={this.onClickClose}
<FormattedMessage id='column.reactions' defaultMessage='Reactions' /> >
</h3>
<IconButton
className='compose-modal__close'
title={intl.formatMessage(messages.close)}
src={require('@tabler/icons/icons/x.svg')}
onClick={this.onClickClose} size={20}
/>
</div>
{body} {body}
</div> </Modal>
); );
} }

24
app/soapbox/features/ui/components/report_modal.js
View file

@ -7,15 +7,15 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { blockAccount } from 'soapbox/actions/accounts';
import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from 'soapbox/actions/reports';
import { expandAccountTimeline } from 'soapbox/actions/timelines';
import { Button, Modal } from 'soapbox/components/ui';
import { makeGetAccount } from 'soapbox/selectors';
import { isRemote, getDomain } from 'soapbox/utils/accounts'; import { isRemote, getDomain } from 'soapbox/utils/accounts';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import { blockAccount } from '../../../actions/accounts';
import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from '../../../actions/reports';
import { expandAccountTimeline } from '../../../actions/timelines';
import IconButton from '../../../components/icon_button';
import { Button } from '../../../components/ui';
import { makeGetAccount } from '../../../selectors';
import StatusCheckBox from '../../report/containers/status_check_box_container'; import StatusCheckBox from '../../report/containers/status_check_box_container';
const messages = defineMessages({ const messages = defineMessages({
@ -107,12 +107,10 @@ class ReportModal extends ImmutablePureComponent {
} }
return ( return (
<div className='modal-root__modal report-modal'> <Modal
<div className='report-modal__target'> title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />}
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} /> onClose={onClose}
<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} /> >
</div>
<div className='report-modal__container'> <div className='report-modal__container'>
<div className='report-modal__comment'> <div className='report-modal__comment'>
<p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p> <p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p>
@ -156,7 +154,7 @@ class ReportModal extends ImmutablePureComponent {
</div> </div>
</div> </div>
</div> </div>
</div> </Modal>
); );
} }

52
app/styles/chats.scss
View file

@ -30,13 +30,7 @@
} }
&__header { &__header {
@apply bg-primary-900 text-white; @apply flex items-center py-0 px-2.5 box-border rounded-t-md font-bold bg-primary-600 text-white;
box-sizing: border-box;
padding: 0 10px;
font-weight: bold;
border-radius: 6px 6px 0 0;
display: flex;
align-items: center;
height: 31px; height: 31px;
.account__avatar { .account__avatar {
@ -151,11 +145,8 @@
display: flex; display: flex;
&__bubble { &__bubble {
font-size: 15px; @apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-slate-700;
padding: 4px 10px;
max-width: 70%; max-width: 70%;
border-radius: 10px;
background-color: var(--background-color);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: break-spaces; white-space: break-spaces;
@ -185,8 +176,8 @@
} }
&--me .chat-message__bubble { &--me .chat-message__bubble {
@apply bg-primary-200 dark:bg-primary-900;
margin-left: auto; margin-left: auto;
background-color: hsla(var(--brand-color_hsl), 0.2);
} }
&--pending .chat-message__bubble { &--pending .chat-message__bubble {
@ -286,25 +277,6 @@
padding: 6px; padding: 6px;
position: relative; position: relative;
.icon-button {
color: var(--primary-text-color);
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: auto;
height: auto;
background: transparent !important;
border: 0;
padding: 0;
margin: 0;
.svg-icon {
width: 18px;
height: 18px;
}
}
textarea { textarea {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -320,6 +292,20 @@
overflow: hidden; overflow: hidden;
} }
} }
&__send {
.icon-button,
button {
@apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
top: 50%;
transform: translateY(-50%);
.svg-icon,
svg {
@apply w-[18px] h-[18px];
}
}
}
} }
.ui--chatroom { .ui--chatroom {
@ -491,9 +477,7 @@
} }
.chat-messages__divider { .chat-messages__divider {
text-align: center; @apply pt-3.5 pb-0.5 text-center uppercase text-black dark:text-white;
text-transform: uppercase;
font-size: 13px; font-size: 13px;
padding: 14px 0 2px;
opacity: 0.8; opacity: 0.8;
} }

47
app/styles/components/aliases.scss
View file

@ -51,53 +51,6 @@
} }
} }
.alias__container {
padding: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
span.alias__list-label {
padding-right: 5px;
color: var(--primary-text-color--faint);
}
span.alias__list-value span {
padding-right: 5px;
text-transform: capitalize;
&::after {
content: ',';
}
&:last-of-type {
&::after {
content: '';
}
}
}
.alias__delete {
display: flex;
align-items: baseline;
cursor: pointer;
span.alias__delete-label {
color: var(--primary-text-color--faint);
font-size: 14px;
font-weight: 800;
}
.alias__delete-icon {
background: none;
color: var(--primary-text-color--faint);
padding: 0 5px;
margin: 0 auto;
font-size: 16px;
}
}
}
.slist--flex { .slist--flex {
height: 100%; height: 100%;
} }

15
app/styles/components/compose-form.scss
View file

@ -28,21 +28,14 @@
} }
&__warning { &__warning {
color: var(--primary-text-color); @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
margin-bottom: 10px;
background: var(--brand-color--faint);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
strong { strong {
color: var(--primary-text-color); @apply font-medium;
font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
font-weight: 700; @apply font-bold;
} }
} }
} }

6
app/styles/components/snackbar.scss
View file

@ -3,7 +3,7 @@
} }
.notification-bar { .notification-bar {
@apply max-w-sm w-full flex flex-row items-center bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden; @apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-slate-900 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
&::before { &::before {
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
@ -44,11 +44,11 @@
} }
.notification-bar-title { .notification-bar-title {
@apply mb-1 text-sm font-medium text-gray-900; @apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-300;
} }
.notification-bar-message { .notification-bar-message {
@apply text-sm text-gray-700; @apply text-sm text-gray-700 dark:text-gray-400;
} }
.notification-bar-action a { .notification-bar-action a {