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

styles

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-03 19:27:08 +02:00
parent 2926b96c6f
commit 1ba551b88b
11 changed files with 179 additions and 188 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 { useHistory } from 'react-router-dom';
@ -10,10 +11,11 @@ interface IColumn {
label?: string,
transparent?: boolean,
withHeader?: boolean,
className?: string,
}
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();
@ -32,11 +34,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
const renderChildren = () => {
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 (
<Card variant='rounded'>
<Card variant='rounded' className={className}>
{withHeader ? (
<CardHeader onBackClick={handleBackClick}>
<CardTitle title={label} />

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

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

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

183
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 { connect } from 'react-redux';
import { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters';
import snackbar from 'soapbox/actions/snackbar';
import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Button } from 'soapbox/components/ui';
import { CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import {
SimpleForm,
SimpleInput,
FieldsGroup,
SelectDropdown,
Checkbox,
} 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({
heading: { id: 'column.filters', defaultMessage: 'Muted words' },
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' },
});
const expirations = {
null: 'Never',
// 3600: '30 minutes',
// 21600: '1 hour',
// 43200: '12 hours',
// 86400 : '1 day',
// 604800: '1 week',
};
// const expirations = {
// null: 'Never',
// // 3600: '30 minutes',
// // 21600: '1 hour',
// // 43200: '12 hours',
// // 86400 : '1 day',
// // 604800: '1 week',
// };
const mapStateToProps = state => ({
filters: state.get('filters'),
@ -136,91 +131,87 @@ class Filters extends ImmutablePureComponent {
return (
<Column className='filter-settings-panel' icon='filter' label={intl.formatMessage(messages.heading)}>
<ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
<SimpleForm>
<div className='filter-settings-panel'>
<fieldset disabled={false}>
<FieldsGroup>
<div className='two-col'>
<SimpleInput
label={intl.formatMessage(messages.keyword)}
required
type='text'
name='phrase'
onChange={this.handleInputChange}
/>
<div className='input with_label required'>
<SelectDropdown
label={intl.formatMessage(messages.expires)}
hint={intl.formatMessage(messages.expires_hint)}
items={expirations}
defaultValue={expirations.never}
onChange={this.handleSelectChange}
/>
</div>
</div>
</FieldsGroup>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
</CardHeader>
<Form onSubmit={this.handleAddNew}>
<FormGroup labelText={intl.formatMessage(messages.keyword)}>
<Input
required
type='text'
name='phrase'
onChange={this.handleInputChange}
/>
</FormGroup>
{/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
<SelectDropdown
items={expirations}
defaultValue={expirations.never}
onChange={this.handleSelectChange}
/>
</FormGroup> */}
<FieldsGroup>
<label className='checkboxes required'>
<FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
</label>
<span className='hint'>
<FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
</span>
<div className='two-col'>
<Checkbox
label={intl.formatMessage(messages.home_timeline)}
name='home_timeline'
checked={this.state.home_timeline}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.public_timeline)}
name='public_timeline'
checked={this.state.public_timeline}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.notifications)}
name='notifications'
checked={this.state.notifications}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.conversations)}
name='conversations'
checked={this.state.conversations}
onChange={this.handleCheckboxChange}
/>
</div>
<FieldsGroup>
<Text tag='label'>
<FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
</Text>
<Text theme='muted' size='xs'>
<FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
</Text>
<div className='two-col'>
<Checkbox
label={intl.formatMessage(messages.home_timeline)}
name='home_timeline'
checked={this.state.home_timeline}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.public_timeline)}
name='public_timeline'
checked={this.state.public_timeline}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.notifications)}
name='notifications'
checked={this.state.notifications}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.conversations)}
name='conversations'
checked={this.state.conversations}
onChange={this.handleCheckboxChange}
/>
</div>
</FieldsGroup>
</FieldsGroup>
<FieldsGroup>
<Checkbox
label={intl.formatMessage(messages.drop_header)}
hint={intl.formatMessage(messages.drop_hint)}
name='irreversible'
checked={this.state.irreversible}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.whole_word_header)}
hint={intl.formatMessage(messages.whole_word_hint)}
name='whole_word'
checked={this.state.whole_word}
onChange={this.handleCheckboxChange}
/>
</FieldsGroup>
</fieldset>
<FieldsGroup>
<Checkbox
label={intl.formatMessage(messages.drop_header)}
hint={intl.formatMessage(messages.drop_hint)}
name='irreversible'
checked={this.state.irreversible}
onChange={this.handleCheckboxChange}
/>
<Checkbox
label={intl.formatMessage(messages.whole_word_header)}
hint={intl.formatMessage(messages.whole_word_hint)}
name='whole_word'
checked={this.state.whole_word}
onChange={this.handleCheckboxChange}
/>
</FieldsGroup>
<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>
</SimpleForm>
<ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_filters)} />
</CardHeader>
<ScrollableList
scrollKey='filters'

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

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

@ -89,8 +89,8 @@ import {
EmailConfirmation,
DeleteAccount,
SoapboxConfig,
// ExportData,
// ImportData,
ExportData,
ImportData,
// Backups,
MfaForm,
ChatIndex,
@ -318,8 +318,8 @@ class SwitchingColumnsArea extends React.PureComponent {
<Redirect from='/auth/password/new' to='/reset-password' />
<Redirect from='/auth/password/edit' to='/edit-password' />
<WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} 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/export' page={DefaultPage} component={ExportData} 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.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} 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 {
@apply text-black dark:text-white;
display: block;
width: 470px;
color: var(--primary-text-color);
font-size: 24px;
line-height: 1.4;
margin-top: 25px;

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

@ -1,10 +1,11 @@
.directory {
&__filter-form {
display: flex;
gap: 30px;
background: var(--foreground-color);
&__column {
padding: 10px 15px;
padding-bottom: 10px;
}
.radio-button {
@ -17,7 +18,6 @@
grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
width: 100%;
padding: 10px;
transition: opacity 100ms ease-in;
box-sizing: border-box;
@ -118,6 +118,11 @@
overflow: hidden;
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 {
h1 {
font-size: 18px;
line-height: 1.25;
color: var(--primary-text-color);
font-weight: 400;
margin: 20px auto;
}
.item-list article {
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 {
padding: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
@apply flex justify-between py-5 px-2 text-sm text-black dark:text-white;
.filter__phrase,
.filter__contexts,
.filter__details {
padding: 5px 0;
@apply py-1;
}
span.filter__list-label {
padding-right: 5px;
color: var(--primary-text-color--faint);
@apply pr-1 text-gray-500 dark:text-gray-400;
}
span.filter__list-value span {
padding-right: 5px;
text-transform: capitalize;
@apply pr-1 capitalize;
&::after {
content: ',';
content: ",";
}
&:last-of-type {
&::after {
content: '';
content: "";
}
}
}
.filter__delete {
display: flex;
margin: 10px;
align-items: baseline;
cursor: pointer;
height: 20px;
@apply flex items-baseline h-5 m-2.5 cursor-pointer;
span.filter__delete-label {
color: var(--primary-text-color--faint);
font-size: 14px;
font-weight: 800;
@apply text-gray-500 dark:text-gray-400 font-semibold;
}
.filter__delete-icon {
background: none;
color: var(--primary-text-color--faint);
padding: 0 5px;
margin: 0 auto;
font-size: 16px;
@apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
}
}
}
// .simple_form select {
// margin-top: 0;
// }
}

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

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

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

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