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 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') }}
/> />

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 { 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}>
{intl.formatMessage(messages.submit)} <FormActions>
</button> <Button theme='primary' onClick={this.handleClick}>
</div> {intl.formatMessage(messages.submit)}
</SimpleForm> </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 { 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,91 +131,87 @@ 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 required
label={intl.formatMessage(messages.keyword)} type='text'
required name='phrase'
type='text' onChange={this.handleInputChange}
name='phrase' />
onChange={this.handleInputChange} </FormGroup>
/> {/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
<div className='input with_label required'> <SelectDropdown
<SelectDropdown items={expirations}
label={intl.formatMessage(messages.expires)} defaultValue={expirations.never}
hint={intl.formatMessage(messages.expires_hint)} onChange={this.handleSelectChange}
items={expirations} />
defaultValue={expirations.never} </FormGroup> */}
onChange={this.handleSelectChange}
/>
</div>
</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)}
name='home_timeline' name='home_timeline'
checked={this.state.home_timeline} checked={this.state.home_timeline}
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
<Checkbox <Checkbox
label={intl.formatMessage(messages.public_timeline)} label={intl.formatMessage(messages.public_timeline)}
name='public_timeline' name='public_timeline'
checked={this.state.public_timeline} checked={this.state.public_timeline}
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
<Checkbox <Checkbox
label={intl.formatMessage(messages.notifications)} label={intl.formatMessage(messages.notifications)}
name='notifications' name='notifications'
checked={this.state.notifications} checked={this.state.notifications}
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
<Checkbox <Checkbox
label={intl.formatMessage(messages.conversations)} label={intl.formatMessage(messages.conversations)}
name='conversations' name='conversations'
checked={this.state.conversations} checked={this.state.conversations}
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
</div> </div>
</FieldsGroup> </FieldsGroup>
<FieldsGroup> <FieldsGroup>
<Checkbox <Checkbox
label={intl.formatMessage(messages.drop_header)} label={intl.formatMessage(messages.drop_header)}
hint={intl.formatMessage(messages.drop_hint)} hint={intl.formatMessage(messages.drop_hint)}
name='irreversible' name='irreversible'
checked={this.state.irreversible} checked={this.state.irreversible}
onChange={this.handleCheckboxChange} onChange={this.handleCheckboxChange}
/> />
<Checkbox <Checkbox
label={intl.formatMessage(messages.whole_word_header)} label={intl.formatMessage(messages.whole_word_header)}
hint={intl.formatMessage(messages.whole_word_hint)} hint={intl.formatMessage(messages.whole_word_hint)}
name='whole_word' name='whole_word'
checked={this.state.whole_word} checked={this.state.whole_word}
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'

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 { 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']} onChange={this.handleFileChange}
label={intl.formatMessage(messages.input_label)} required
hint={intl.formatMessage(messages.input_hint)} />
onChange={this.handleFileChange} <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
required
/>
</div>
</div>
</FieldsGroup>
</fieldset>
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>
{intl.formatMessage(messages.submit)}
</button>
</div> </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, 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 {