SoapboxConfig: improve layout
This commit is contained in:
parent
f5039b9877
commit
b0e60bb60d
3 changed files with 45 additions and 46 deletions
|
@ -11,7 +11,9 @@ import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soap
|
|||
import { normalizeAccount } from 'soapbox/normalizers';
|
||||
import resizeImage from 'soapbox/utils/resize_image';
|
||||
|
||||
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
|
||||
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
|
||||
import HStack from '../../components/ui/hstack/hstack';
|
||||
import Stack from '../../components/ui/stack/stack';
|
||||
import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
|
||||
|
||||
import ProfilePreview from './components/profile-preview';
|
||||
|
@ -394,7 +396,7 @@ const EditProfile: React.FC = () => {
|
|||
|
||||
{/* HACK: wrap these checkboxes in a .simple_form container so they get styled (for now) */}
|
||||
{/* Need a either move, replace, or refactor these checkboxes. */}
|
||||
<div className='simple_form'>
|
||||
<Stack space={2} className='simple_form'>
|
||||
{features.followRequests && (
|
||||
<Checkbox
|
||||
label={<FormattedMessage id='edit_profile.fields.locked_label' defaultMessage='Lock account' />}
|
||||
|
@ -448,7 +450,7 @@ const EditProfile: React.FC = () => {
|
|||
onChange={handleCheckboxChange('accepts_email_list')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{features.profileFields && (
|
||||
<Streamfield
|
||||
|
|
|
@ -6,9 +6,10 @@ import { updateConfig } from 'soapbox/actions/admin';
|
|||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
import { Column, Form, FormActions, FormGroup, Input, Button } from 'soapbox/components/ui';
|
||||
import HStack from 'soapbox/components/ui/hstack/hstack';
|
||||
import Stack from 'soapbox/components/ui/stack/stack';
|
||||
import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
|
||||
import {
|
||||
FieldsGroup,
|
||||
SimpleTextarea,
|
||||
FileChooserLogo,
|
||||
Checkbox,
|
||||
|
@ -179,45 +180,45 @@ const SoapboxConfig: React.FC = () => {
|
|||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<Form onSubmit={handleSubmit} className='simple_form space-y-4'>
|
||||
<fieldset className='space-y-4' disabled={isLoading}>
|
||||
<fieldset className='space-y-6' disabled={isLoading}>
|
||||
<SitePreview soapbox={soapbox} />
|
||||
<FieldsGroup>
|
||||
<div className='fields-row file-picker'>
|
||||
<div className='fields-row__column fields-row__column-6'>
|
||||
<ColorWithPicker
|
||||
buttonId='brand_color'
|
||||
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
|
||||
value={soapbox.brandColor}
|
||||
onChange={handleColorChange(['brandColor'], (color) => color.hex)}
|
||||
/>
|
||||
<ColorWithPicker
|
||||
buttonId='accent_color'
|
||||
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
|
||||
value={soapbox.accentColor}
|
||||
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
|
||||
/>
|
||||
<div className='input with_label toggle'>
|
||||
<div className='label_input'>
|
||||
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
|
||||
<ThemeToggle />
|
||||
{/* <ThemeToggle
|
||||
onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
|
||||
themeMode={soapbox.defaultSettings.get('themeMode')}
|
||||
intl={intl}
|
||||
/> */}
|
||||
</div>
|
||||
|
||||
<HStack space={2}>
|
||||
<Stack space={2} className='w-1/2'>
|
||||
<ColorWithPicker
|
||||
buttonId='brand_color'
|
||||
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
|
||||
value={soapbox.brandColor}
|
||||
onChange={handleColorChange(['brandColor'], (color) => color.hex)}
|
||||
/>
|
||||
<ColorWithPicker
|
||||
buttonId='accent_color'
|
||||
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
|
||||
value={soapbox.accentColor}
|
||||
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
|
||||
/>
|
||||
<div className='input with_label toggle'>
|
||||
<div className='label_input'>
|
||||
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
|
||||
<ThemeToggle />
|
||||
{/* <ThemeToggle
|
||||
onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
|
||||
themeMode={soapbox.defaultSettings.get('themeMode')}
|
||||
intl={intl}
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||
<FileChooserLogo
|
||||
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
|
||||
name='logo'
|
||||
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
|
||||
onChange={handleFileChange(['logo'])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
</Stack>
|
||||
|
||||
<Stack className='w-1/2'>
|
||||
<FileChooserLogo
|
||||
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
|
||||
name='logo'
|
||||
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
|
||||
onChange={handleFileChange(['logo'])}
|
||||
/>
|
||||
</Stack>
|
||||
</HStack>
|
||||
|
||||
<FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
|
||||
<Input
|
||||
|
@ -228,7 +229,7 @@ const SoapboxConfig: React.FC = () => {
|
|||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FieldsGroup>
|
||||
<Stack space={2}>
|
||||
<Checkbox
|
||||
name='verifiedCanEditName'
|
||||
label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
|
||||
|
@ -271,7 +272,7 @@ const SoapboxConfig: React.FC = () => {
|
|||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FieldsGroup>
|
||||
</Stack>
|
||||
|
||||
<Streamfield
|
||||
label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}
|
||||
|
|
|
@ -36,10 +36,6 @@ code {
|
|||
|
||||
.simple_form {
|
||||
.input {
|
||||
+ .input {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue