@ -8,8 +8,6 @@ import { uploadMedia } from 'soapbox/actions/media';
import snackbar from 'soapbox/actions/snackbar' ;
import snackbar from 'soapbox/actions/snackbar' ;
import List , { ListItem } from 'soapbox/components/list' ;
import List , { ListItem } from 'soapbox/components/list' ;
import { Column , Form , FormActions , FormGroup , Input , Textarea , Button } from 'soapbox/components/ui' ;
import { Column , Form , FormActions , FormGroup , Input , Textarea , 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 Streamfield from 'soapbox/components/ui/streamfield/streamfield' ;
import ThemeSelector from 'soapbox/features/ui/components/theme-selector' ;
import ThemeSelector from 'soapbox/features/ui/components/theme-selector' ;
import { useAppSelector , useAppDispatch } from 'soapbox/hooks' ;
import { useAppSelector , useAppDispatch } from 'soapbox/hooks' ;
@ -187,47 +185,42 @@ const SoapboxConfig: React.FC = () => {
< fieldset className = 'space-y-6' disabled = { isLoading } >
< fieldset className = 'space-y-6' disabled = { isLoading } >
< SitePreview soapbox = { soapbox } / >
< SitePreview soapbox = { soapbox } / >
< HStack space = { 2 } >
< FormGroup
< Stack space = { 2 } className = 'w-1/2' >
labelText = { < FormattedMessage id = 'soapbox_config.fields.logo_label' defaultMessage = 'Logo' / > }
hintText = { < FormattedMessage id = 'soapbox_config.hints.logo' defaultMessage = 'SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' / > }
>
< input
type = 'file'
onChange = { handleFileChange ( [ 'logo' ] ) }
className = 'text-sm'
accept = 'image/svg,image/png'
/ >
< / FormGroup >
< List >
< ListItem label = { < FormattedMessage id = 'soapbox_config.fields.theme_label' defaultMessage = 'Default theme' / > } >
< ThemeSelector
value = { soapbox . defaultSettings . get ( 'themeMode' ) }
onChange = { handleThemeChange ( [ 'defaultSettings' , 'themeMode' ] ) }
/ >
< / ListItem >
< ListItem label = { < FormattedMessage id = 'soapbox_config.fields.brand_color_label' defaultMessage = 'Brand color' / > } >
< ColorWithPicker
< ColorWithPicker
buttonId = 'brand_color'
buttonId = 'brandColor'
label = { < FormattedMessage id = 'soapbox_config.fields.brand_color_label' defaultMessage = 'Brand color' / > }
value = { soapbox . brandColor }
value = { soapbox . brandColor }
onChange = { handleColorChange ( [ 'brandColor' ] , ( color ) = > color . hex ) }
onChange = { handleColorChange ( [ 'brandColor' ] , ( color ) = > color . hex ) }
/ >
/ >
< / ListItem >
< ListItem label = { < FormattedMessage id = 'soapbox_config.fields.accent_color_label' defaultMessage = 'Accent color' / > } >
< ColorWithPicker
< ColorWithPicker
buttonId = 'accent_color'
buttonId = 'accentColor'
label = { < FormattedMessage id = 'soapbox_config.fields.accent_color_label' defaultMessage = 'Accent color' / > }
value = { soapbox . accentColor }
value = { soapbox . accentColor }
onChange = { handleColorChange ( [ 'accentColor' ] , ( color ) = > color . hex ) }
onChange = { handleColorChange ( [ 'accentColor' ] , ( color ) = > color . hex ) }
/ >
/ >
< / ListItem >
< div className = 'input with_label toggle' >
< / List >
< div className = 'label_input' >
< label > < FormattedMessage id = 'soapbox_config.fields.theme_label' defaultMessage = 'Default theme' / > < / label >
< ThemeSelector
value = { soapbox . defaultSettings . get ( 'themeMode' ) }
onChange = { handleThemeChange ( [ 'defaultSettings' , 'themeMode' ] ) }
/ >
< / div >
< / div >
< / Stack >
< Stack className = 'w-1/2' >
< FormGroup
labelText = { < FormattedMessage id = 'soapbox_config.fields.logo_label' defaultMessage = 'Logo' / > }
hintText = { < FormattedMessage id = 'soapbox_config.hints.logo' defaultMessage = 'SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' / > }
>
< input
type = 'file'
onChange = { handleFileChange ( [ 'logo' ] ) }
className = 'text-sm'
accept = 'image/svg,image/png'
/ >
< / FormGroup >
< / Stack >
< / HStack >
< FormGroup labelText = { intl . formatMessage ( messages . copyrightFooterLabel ) } >
< FormGroup labelText = { intl . formatMessage ( messages . copyrightFooterLabel ) } >
< Input
< Input