Improve compose form UI on homepage

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

src/components/ui/input/input.tsx

@@ -15,7 +15,7 @@ const messages = defineMessages({
 });
 
 /** Possible theme names for an Input. */
-type InputThemes = 'normal' | 'search'
+type InputThemes = 'normal' | 'search' | 'transparent'
 
 interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
   /** Put the cursor into the input on mount. */
@@ -87,9 +87,9 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           {...filteredProps}
           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 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),
+          className={clsx('block w-full text-base placeholder:text-gray-600 focus:border-primary-500 sm:text-sm dark:placeholder:text-gray-600 dark:focus:border-primary-500', {
+            'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': ['search', 'normal'].includes(theme),
+            'px-0 border-none !ring-0': theme === 'transparent',
             'text-gray-900 dark:text-gray-100': !props.disabled,
             'text-gray-600': props.disabled,
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800 black:bg-black': theme === 'normal',

src/features/compose/components/compose-form.tsx

@@ -62,9 +62,10 @@ interface IComposeForm<ID extends string> {
   event?: string;
   group?: string;
   withAvatar?: boolean;
+  transparent?: boolean;
 }
 
-const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar }: IComposeForm<ID>) => {
+const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent }: IComposeForm<ID>) => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -258,6 +259,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
         onSuggestionsClearRequested={onSuggestionsClearRequested}
         onSuggestionSelected={onSpoilerSuggestionSelected}
+        theme={transparent ? 'transparent' : 'normal'}
       />
 
       <div>
@@ -265,7 +267,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
           <ComposeEditor
             key={modifiedLanguage}
             ref={editorRef}
-            className='rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'
+            className={transparent
+              ? ''
+              : 'rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'}
+            placeholderClassName={transparent ? '' : 'pt-2'}
             composeId={id}
             condensed={condensed}
             eventDiscussion={!!event}

src/features/compose/components/spoiler-input.tsx

@@ -9,7 +9,7 @@ const messages = defineMessages({
   placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Subject (optional)' },
 });
 
-interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'onSuggestionSelected'> {
+interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'onSuggestionSelected' | 'theme'> {
   composeId: string extends 'default' ? never : string;
 }
 
@@ -19,6 +19,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
   onSuggestionsFetchRequested,
   onSuggestionsClearRequested,
   onSuggestionSelected,
+  theme,
 }, ref) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -39,6 +40,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
       onSuggestionsFetchRequested={onSuggestionsFetchRequested}
       onSuggestionsClearRequested={onSuggestionsClearRequested}
       onSuggestionSelected={onSuggestionSelected}
+      theme={theme}
       searchTokens={[':']}
       id='cw-spoiler-input'
       className='rounded-md !bg-transparent dark:!bg-transparent'

src/features/compose/editor/index.tsx

@@ -198,7 +198,7 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
           placeholder={(
             <div
               className={clsx(
-                'pointer-events-none absolute top-2 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600',
+                'pointer-events-none absolute top-0 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600',
                 placeholderClassName,
               )}
             >

src/features/event/event-discussion.tsx

@@ -160,7 +160,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   return (
     <Stack space={2}>
       {me && <div className='border-b border-solid border-gray-200 p-2 pt-0 dark:border-gray-800'>
-        <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
+        <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} transparent />
       </div>}
       <div ref={node} className='thread p-0 shadow-none sm:p-2'>
         <ScrollableList

src/features/group/group-timeline.tsx

@@ -78,6 +78,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
               autoFocus={false}
               group={groupId}
               withAvatar
+              transparent
             />
           </HStack>
         </div>

src/layouts/home-layout.tsx

@@ -74,6 +74,7 @@ const HomeLayout: React.FC<IHomeLayout> = ({ children }) => {
                     autoFocus={false}
                     clickableAreaRef={composeBlock}
                     withAvatar
+                    transparent
                   />
                 </div>
               </HStack>