Lexical: Compose event modal textarea styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/ui/input/input.tsx

@@ -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,

app/soapbox/features/compose/editor/index.tsx

@@ -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>

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

@@ -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}

app/soapbox/locales/en.json

@@ -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",