From e76c3cc23170a0c1f04b697ff2710d800207fcb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 17 May 2023 00:00:42 +0200
Subject: [PATCH] Lexical: Compose event modal textarea styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/input/input.tsx                  | 2 +-
 app/soapbox/features/compose/editor/index.tsx              | 7 ++++++-
 .../modals/compose-event-modal/compose-event-modal.tsx     | 4 ++--
 app/soapbox/locales/en.json                                | 1 -
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index bb3f9957d..8d40aba91 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/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,
diff --git a/app/soapbox/features/compose/editor/index.tsx b/app/soapbox/features/compose/editor/index.tsx
index a1c5ade18..fb6b5d63a 100644
--- a/app/soapbox/features/compose/editor/index.tsx
+++ b/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>
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 253921f48..544f0e63c 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/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}
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 2a32f6d84..e13eb2f66 100644
--- a/app/soapbox/locales/en.json
+++ b/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",