moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'next_' into 'next' 

next

See merge request soapbox-pub/soapbox-fe!1175
This commit is contained in:
Alex Gleason 2022-04-03 18:09:01 +00:00
parent 2926b96c6f 1f697dd8f2
commit dc28e61d17
14 changed files with 343 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/soapbox/components/ui/column/column.tsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -10,10 +11,11 @@ interface IColumn {
label?: string, label?: string,
transparent?: boolean, transparent?: boolean,
withHeader?: boolean, withHeader?: boolean,
className?: string,
} }
const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => { const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
const { backHref, children, label, transparent = false, withHeader = true } = props; const { backHref, children, label, transparent = false, withHeader = true, className } = props;
const history = useHistory(); const history = useHistory();
@ -32,11 +34,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
const renderChildren = () => { const renderChildren = () => {
if (transparent) { if (transparent) {
return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>; return <div className={classNames('bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
} }
return ( return (
<Card variant='rounded'> <Card variant='rounded' className={className}>
{withHeader ? ( {withHeader ? (
<CardHeader onBackClick={handleBackClick}> <CardHeader onBackClick={handleBackClick}>
<CardTitle title={label} /> <CardTitle title={label} />

2
app/soapbox/features/directory/components/account_card.js
View File

@ -67,7 +67,7 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>
<div <Text
className={classNames('account__header__content', (account.get('note').length === 0 || account.get('note') === '<p></p>') && 'empty')} className={classNames('account__header__content', (account.get('note').length === 0 || account.get('note') === '<p></p>') && 'empty')}
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
/> />

21
app/soapbox/features/export_data/components/csv_exporter.js
View File

@ -4,7 +4,7 @@ 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 { SimpleForm } from 'soapbox/features/forms'; import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
export default @connect() export default @connect()
@injectIntl @injectIntl
@ -36,15 +36,18 @@ class CSVExporter extends ImmutablePureComponent {
const { intl, messages } = this.props; const { intl, messages } = this.props;
return ( return (
<SimpleForm> <>
<h2 className='export-title'>{intl.formatMessage(messages.input_label)}</h2> <Form>
<div> <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
<p className='export-hint hint'>{intl.formatMessage(messages.input_hint)}</p> <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
<button name='button' type='button' className='button button-primary' onClick={this.handleClick}>
<FormActions>
<Button theme='primary' onClick={this.handleClick}>
{intl.formatMessage(messages.submit)} {intl.formatMessage(messages.submit)}
</button> </Button>
</div> </FormActions>
</SimpleForm> </Form>
</>
); );
} }

71
app/soapbox/features/filters/index.js
View File

@ -4,22 +4,17 @@ 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 { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Button } from 'soapbox/components/ui'; import { Button } from 'soapbox/components/ui';
import { CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import { import {
SimpleForm,
SimpleInput,
FieldsGroup, FieldsGroup,
SelectDropdown,
Checkbox, Checkbox,
} from 'soapbox/features/forms'; } from 'soapbox/features/forms';
import { fetchFilters, createFilter, deleteFilter } from '../../actions/filters';
import ScrollableList from '../../components/scrollable_list';
import Column from '../ui/components/column';
import ColumnSubheading from '../ui/components/column_subheading';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.filters', defaultMessage: 'Muted words' }, heading: { id: 'column.filters', defaultMessage: 'Muted words' },
subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' }, subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
@ -41,14 +36,14 @@ const messages = defineMessages({
delete: { id: 'column.filters.delete', defaultMessage: 'Delete' }, delete: { id: 'column.filters.delete', defaultMessage: 'Delete' },
}); });
const expirations = { // const expirations = {
null: 'Never', // null: 'Never',
// 3600: '30 minutes', // // 3600: '30 minutes',
// 21600: '1 hour', // // 21600: '1 hour',
// 43200: '12 hours', // // 43200: '12 hours',
// 86400 : '1 day', // // 86400 : '1 day',
// 604800: '1 week', // // 604800: '1 week',
}; // };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
filters: state.get('filters'), filters: state.get('filters'),
@ -136,38 +131,33 @@ class Filters extends ImmutablePureComponent {
return ( return (
<Column className='filter-settings-panel' icon='filter' label={intl.formatMessage(messages.heading)}> <Column className='filter-settings-panel' icon='filter' label={intl.formatMessage(messages.heading)}>
<ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} /> <CardHeader>
<SimpleForm> <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
<div className='filter-settings-panel'> </CardHeader>
<fieldset disabled={false}> <Form onSubmit={this.handleAddNew}>
<FieldsGroup> <FormGroup labelText={intl.formatMessage(messages.keyword)}>
<div className='two-col'> <Input
<SimpleInput
label={intl.formatMessage(messages.keyword)}
required required
type='text' type='text'
name='phrase' name='phrase'
onChange={this.handleInputChange} onChange={this.handleInputChange}
/> />
<div className='input with_label required'> </FormGroup>
{/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
<SelectDropdown <SelectDropdown
label={intl.formatMessage(messages.expires)}
hint={intl.formatMessage(messages.expires_hint)}
items={expirations} items={expirations}
defaultValue={expirations.never} defaultValue={expirations.never}
onChange={this.handleSelectChange} onChange={this.handleSelectChange}
/> />
</div> </FormGroup> */}
</div>
</FieldsGroup>
<FieldsGroup> <FieldsGroup>
<label className='checkboxes required'> <Text tag='label'>
<FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' /> <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
</label> </Text>
<span className='hint'> <Text theme='muted' size='xs'>
<FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' /> <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
</span> </Text>
<div className='two-col'> <div className='two-col'>
<Checkbox <Checkbox
label={intl.formatMessage(messages.home_timeline)} label={intl.formatMessage(messages.home_timeline)}
@ -213,14 +203,15 @@ class Filters extends ImmutablePureComponent {
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
</FieldsGroup> </FieldsGroup>
</fieldset>
<Button className='button button-primary setup' text={intl.formatMessage(messages.add_new)} onClick={this.handleAddNew} /> <FormActions>
<Button type='submit' theme='primary'>{intl.formatMessage(messages.add_new)}</Button>
</FormActions>
</Form>
</div> <CardHeader>
</SimpleForm> <CardTitle title={intl.formatMessage(messages.subheading_filters)} />
</CardHeader>
<ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
<ScrollableList <ScrollableList
scrollKey='filters' scrollKey='filters'

33
app/soapbox/features/import_data/components/csv_importer.js
View File

@ -4,11 +4,7 @@ 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 { import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
SimpleInput,
SimpleForm,
FieldsGroup,
} from 'soapbox/features/forms';
export default @connect() export default @connect()
@injectIntl @injectIntl
@ -51,29 +47,24 @@ class CSVImporter extends ImmutablePureComponent {
const { intl, messages } = this.props; const { intl, messages } = this.props;
return ( return (
<SimpleForm onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit} disabled={this.state.isLoading}>
<fieldset disabled={this.state.isLoading}> <Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
<FieldsGroup> <div>
<div className='fields-row file-picker'> <input
<div className='fields-row__column fields-group fields-row__column-6'> className='text-black dark:text-white'
<SimpleInput
type='file' type='file'
accept={['.csv', 'text/csv']} accept={['.csv', 'text/csv']}
label={intl.formatMessage(messages.input_label)}
hint={intl.formatMessage(messages.input_hint)}
onChange={this.handleFileChange} onChange={this.handleFileChange}
required required
/> />
<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
</div> </div>
</div> <FormActions>
</FieldsGroup> <Button type='submit' theme='primary' disabled={this.state.isLoading}>
</fieldset>
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>
{intl.formatMessage(messages.submit)} {intl.formatMessage(messages.submit)}
</button> </Button>
</div> </FormActions>
</SimpleForm> </Form>
); );
} }

161
app/soapbox/features/ui/components/hotkeys_modal.js
View File

@ -1,161 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Modal } from 'soapbox/components/ui';
export default @injectIntl
class HotkeysModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
};
render() {
const { onClose } = this.props;
return (
<Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
onClose={onClose}
>
<div className='compose-modal__content'>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
</tr>
<tr>
<td><kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
</tr>
<tr>
<td><kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td>
</tr>
<tr>
<td><kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></td>
</tr>
<tr>
<td><kbd>e</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></td>
</tr>
<tr>
<td><kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>
</tr>
<tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td>
</tr>
<tr>
<td><kbd>a</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
</tr>
<tr>
<td><kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
</tr>
<tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
</tr>
<tr>
<td><kbd>down</kbd>, <kbd>j</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
</tr>
<tr>
<td><kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
</tr>
<tr>
<td><kbd>alt</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td>
</tr>
<tr>
<td><kbd>backspace</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>g</kbd> + <kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>u</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
</tr>
<tr>
<td><kbd>?</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
</tr>
</tbody>
</table>
</div>
</Modal>
);
}
}

163
app/soapbox/features/ui/components/hotkeys_modal.tsx Normal file
View File

@ -0,0 +1,163 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Modal } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { getFeatures } from 'soapbox/utils/features';
interface IHotkeysModal {
onClose: () => void,
}
const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
const features = useAppSelector((state) => getFeatures(state.instance));
return (
<Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
onClose={onClose}
>
<div className='compose-modal__content'>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
</tr>
<tr>
<td><kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
</tr>
<tr>
<td><kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td>
</tr>
<tr>
<td><kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></td>
</tr>
{features.emojiReacts && (
<tr>
<td><kbd>e</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></td>
</tr>
)}
<tr>
<td><kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>
</tr>
<tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td>
</tr>
<tr>
<td><kbd>a</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
{features.spoilers && (
<tr>
<td><kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
</tr>
)}
{features.spoilers && (
<tr>
<td><kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
</tr>
)}
<tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
</tr>
<tr>
<td><kbd>down</kbd>, <kbd>j</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
</tr>
<tr>
<td><kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
</tr>
<tr>
<td><kbd>alt</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td>
</tr>
<tr>
<td><kbd>backspace</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>g</kbd> + <kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>u</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
</tr>
<tr>
<td><kbd>?</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
</tr>
</tbody>
</table>
</div>
</Modal>
);
};
export default HotkeysModal;

8
app/soapbox/features/ui/index.js
View File

@ -89,8 +89,8 @@ import {
EmailConfirmation, EmailConfirmation,
DeleteAccount, DeleteAccount,
SoapboxConfig, SoapboxConfig,
// ExportData, ExportData,
// ImportData, ImportData,
// Backups, // Backups,
MfaForm, MfaForm,
ChatIndex, ChatIndex,
@ -318,8 +318,8 @@ class SwitchingColumnsArea extends React.PureComponent {
<Redirect from='/auth/password/new' to='/reset-password' /> <Redirect from='/auth/password/new' to='/reset-password' />
<Redirect from='/auth/password/edit' to='/edit-password' /> <Redirect from='/auth/password/edit' to='/edit-password' />
<WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} /> <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
{/* <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} /> */} <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
{/* <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} /> */} <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />
{features.accountAliasesAPI && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />} {features.accountAliasesAPI && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
{features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />} {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
<WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} /> <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />

2
app/styles/about.scss
View File

@ -1105,9 +1105,9 @@ $fluid-breakpoint: $maximum-width + 20px;
} }
.brand__tagline { .brand__tagline {
@apply text-black dark:text-white;
display: block; display: block;
width: 470px; width: 470px;
color: var(--primary-text-color);
font-size: 24px; font-size: 24px;
line-height: 1.4; line-height: 1.4;
margin-top: 25px; margin-top: 25px;

9
app/styles/components/directory.scss
View File

@ -1,10 +1,11 @@
.directory { .directory {
&__filter-form { &__filter-form {
display: flex; display: flex;
gap: 30px;
background: var(--foreground-color); background: var(--foreground-color);
&__column { &__column {
padding: 10px 15px; padding-bottom: 10px;
} }
.radio-button { .radio-button {
@ -17,7 +18,6 @@
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%); grid-template-columns: minmax(0, 50%) minmax(0, 50%);
width: 100%; width: 100%;
padding: 10px;
transition: opacity 100ms ease-in; transition: opacity 100ms ease-in;
box-sizing: border-box; box-sizing: border-box;
@ -118,6 +118,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.verified-icon div,
.verified-icon svg {
@apply inline;
}
} }
} }

69
app/styles/components/filters.scss
View File

@ -1,12 +1,4 @@
.filter-settings-panel { .filter-settings-panel {
h1 {
font-size: 18px;
line-height: 1.25;
color: var(--primary-text-color);
font-weight: 400;
margin: 20px auto;
}
.item-list article { .item-list article {
border-bottom: 1px solid var(--primary-text-color--faint); border-bottom: 1px solid var(--primary-text-color--faint);
@ -43,62 +35,67 @@
} }
} }
.input.boolean {
.label_input {
@apply relative pl-7 text-black dark:text-white;
label {
@apply text-sm;
}
&__wrapper {
@apply static;
}
input[type="checkbox"] {
position: absolute;
top: 3px;
left: 0;
}
}
.hint {
@apply block pl-7 text-xs text-gray-500 dark:text-gray-400;
}
}
.filter__container { .filter__container {
padding: 20px; @apply flex justify-between py-5 px-2 text-sm text-black dark:text-white;
display: flex;
justify-content: space-between;
font-size: 14px;
.filter__phrase, .filter__phrase,
.filter__contexts, .filter__contexts,
.filter__details { .filter__details {
padding: 5px 0; @apply py-1;
} }
span.filter__list-label { span.filter__list-label {
padding-right: 5px; @apply pr-1 text-gray-500 dark:text-gray-400;
color: var(--primary-text-color--faint);
} }
span.filter__list-value span { span.filter__list-value span {
padding-right: 5px; @apply pr-1 capitalize;
text-transform: capitalize;
&::after { &::after {
content: ','; content: ",";
} }
&:last-of-type { &:last-of-type {
&::after { &::after {
content: ''; content: "";
} }
} }
} }
.filter__delete { .filter__delete {
display: flex; @apply flex items-baseline h-5 m-2.5 cursor-pointer;
margin: 10px;
align-items: baseline;
cursor: pointer;
height: 20px;
span.filter__delete-label { span.filter__delete-label {
color: var(--primary-text-color--faint); @apply text-gray-500 dark:text-gray-400 font-semibold;
font-size: 14px;
font-weight: 800;
} }
.filter__delete-icon { .filter__delete-icon {
background: none; @apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
color: var(--primary-text-color--faint);
padding: 0 5px;
margin: 0 auto;
font-size: 16px;
} }
} }
} }
// .simple_form select {
// margin-top: 0;
// }
} }

15
app/styles/components/radio-button.scss
View File

@ -1,4 +1,5 @@
.radio-button { .radio-button {
@apply text-black dark:text-white;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -15,10 +16,7 @@
} }
&__input { &__input {
display: inline-block; @apply inline-block relative box-border border border-solid border-primary-600;
position: relative;
border: 1px solid var(--primary-text-color--faint);
box-sizing: border-box;
width: 18px; width: 18px;
height: 18px; height: 18px;
flex: 0 0 auto; flex: 0 0 auto;
@ -28,8 +26,13 @@
vertical-align: middle; vertical-align: middle;
&.checked { &.checked {
border-color: var(--brand-color); @apply bg-primary-600;
background: var(--brand-color); }
&:active,
&:focus,
&:hover {
@apply border-4;
} }
} }
} }

3
app/styles/components/server-info.scss
View File

@ -10,8 +10,7 @@
.info__brand { .info__brand {
.brand h1 { .brand h1 {
color: var(--primary-text-color); @apply text-2xl text-black dark:text-white;
font-size: 26px;
} }
.brand__tagline { .brand__tagline {

8
app/styles/components/status.scss
View File

@ -406,15 +406,9 @@
} }
.status__content__spoiler-link { .status__content__spoiler-link {
background: var(--brand-color--med); @apply bg-primary-100 dark:bg-primary-900 hover:bg-primary-300 dark:hover:bg-primary-600 focus:bg-primary-200 dark:focus:bg-primary-600 text-black dark:text-white hover:no-underline;
transition: 0.2s; transition: 0.2s;
&:hover,
&:focus {
background: hsla(var(--brand-color_hsl), 0.5);
text-decoration: none;
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
} }