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

Lexical: Compose event modal textarea styles 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-05-17 00:00:42 +02:00
parent 89cef774c8
commit e76c3cc231
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/ui/input/input.tsx
View File

@ -84,7 +84,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
type={revealed ? 'text' : type}
ref={ref}
className={clsx('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
'block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
'block w-full sm:text-sm ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
['normal', 'search'].includes(theme),
'text-gray-900 dark:text-gray-100': !props.disabled,
'text-gray-600': props.disabled,

7
app/soapbox/features/compose/editor/index.tsx
View File

@ -42,6 +42,7 @@ import { TO_WYSIWYG_TRANSFORMERS } from './transformers';
interface IComposeEditor {
className?: string
placeholderClassName?: string
composeId: string
condensed?: boolean
eventDiscussion?: boolean
@ -55,6 +56,7 @@ interface IComposeEditor {
const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
className,
placeholderClassName,
composeId,
condensed,
eventDiscussion,
@ -159,7 +161,10 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
}
placeholder={(
<div
className='pointer-events-none absolute top-0 select-none text-gray-600 dark:placeholder:text-gray-600'
className={clsx(
'pointer-events-none absolute top-0 select-none text-gray-600 dark:placeholder:text-gray-600',
placeholderClassName,
)}
>
{textareaPlaceholder}
</div>

4
app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
View File

@ -235,11 +235,11 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
</FormGroup>
<FormGroup
labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
hintText={<FormattedMessage id='compose_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
>
<ComposeEditor
ref={editorStateRef}
className='block w-full rounded-md border-gray-400 bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
placeholderClassName='pt-2'
composeId='compose-event-modal'
placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
handleSubmit={handleSubmit}

1
app/soapbox/locales/en.json
View File

@ -392,7 +392,6 @@
"compose_event.edit_success": "Your event was edited",
"compose_event.fields.approval_required": "I want to approve participation requests manually",
"compose_event.fields.banner_label": "Event banner",
"compose_event.fields.description_hint": "Markdown syntax is supported",
"compose_event.fields.description_label": "Event description",
"compose_event.fields.description_placeholder": "Description",
"compose_event.fields.end_time_label": "Event end date",