More cleanup

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

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

@@ -119,7 +119,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       // List of elements that shouldn't collapse the composer when clicked
       // FIXME: Make this less brittle
       getClickableArea(),
-      document.querySelector('.privacy-dropdown__dropdown'),
+      document.getElementById('privacy-dropdown'),
       document.querySelector('em-emoji-picker'),
       document.getElementById('modal-overlay'),
     ].some(element => element?.contains(e.target as any));
@@ -209,7 +209,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   ), [features, id]);
 
   const composeModifiers = !condensed && (
-    <Stack space={4} className='compose-form__modifiers'>
+    <Stack space={4} className='font-[inherit] text-sm text-gray-900'>
       <UploadForm composeId={id} onSubmit={handleSubmit} />
       <PollForm composeId={id} />
 
@@ -253,7 +253,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
               id='compose_form.scheduled_statuses.message'
               defaultMessage='You have scheduled posts. {click_here} to see them.'
               values={{ click_here: (
-                <Link to='/scheduled_statuses'>
+                <Link className='underline' to='/scheduled_statuses'>
                   <FormattedMessage
                     id='compose_form.scheduled_statuses.click_here'
                     defaultMessage='Click here'

src/features/compose/components/privacy-dropdown.tsx

@@ -114,25 +114,56 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
     };
   }, []);
 
+
   return (
     <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
       {({ opacity, scaleX, scaleY }) => (
         // It should not be transformed when mounting because the resulting
         // size will be used to determine the coordinate of the menu by
         // react-overlays
-        <div className={clsx('privacy-dropdown__dropdown', placement)} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
-          {items.map(item => (
-            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
-              <div className='privacy-dropdown__option__icon'>
-                <Icon src={item.icon} />
-              </div>
+        <div
+          id='privacy-dropdown'
+          className={clsx('absolute z-[1000] ml-10 overflow-hidden rounded-md bg-white text-sm shadow-lg black:border black:border-gray-800 black:bg-black dark:bg-gray-900', {
+            'block shadow-md': open,
+            'origin-[50%_100%]': placement === 'top',
+            'origin-[50%_0]': placement === 'bottom',
+          })}
+          style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }}
+          role='listbox'
+          ref={node}
+        >
+          {items.map(item => {
+            const active = item.value === value;
+            return (
+              <div
+                role='option'
+                tabIndex={0}
+                key={item.value}
+                data-index={item.value}
+                onKeyDown={handleKeyDown}
+                onClick={handleClick}
+                className={clsx(
+                  'flex cursor-pointer p-2.5 text-sm text-gray-700 hover:bg-gray-100 black:hover:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800',
+                  { 'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700': active },
+                )}
+                aria-selected={active}
+                ref={active ? focusedItem : null}
+              >
+                <div className='mr-2.5 flex items-center justify-center rtl:ml-2.5 rtl:mr-0'>
+                  <Icon src={item.icon} />
+                </div>
 
-              <div className='privacy-dropdown__option__content'>
-                <strong>{item.text}</strong>
-                {item.meta}
+                <div
+                  className={clsx('flex-auto text-primary-600 dark:text-primary-400', {
+                    'text-black dark:text-white': active,
+                  })}
+                >
+                  <strong className='block font-medium text-black dark:text-white'>{item.text}</strong>
+                  {item.meta}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </Motion>
@@ -239,8 +270,13 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const valueOption = options.find(item => item.value === value);
 
   return (
-    <div className={clsx('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
-      <div className={clsx('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
+    <div onKeyDown={handleKeyDown} ref={node}>
+      <div
+        className={clsx({
+          'rounded-t-md': open && placement === 'top',
+          active: valueOption && options.indexOf(valueOption) === 0,
+        })}
+      >
         <IconButton
           className={clsx({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,

src/features/compose/components/warning.tsx

@@ -11,7 +11,7 @@ interface IWarning {
 const Warning: React.FC<IWarning> = ({ message }) => (
   <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
     {({ opacity, scaleX, scaleY }) => (
-      <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+      <div className='mb-2.5 rounded bg-accent-300 px-2.5 py-2 text-xs text-white shadow-md' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
         {message}
       </div>
     )}

src/features/compose/containers/warning-container.tsx

@@ -29,7 +29,7 @@ const WarningWrapper: React.FC<IWarningWrapper> = ({ composeId }) => {
             defaultMessage='Your account is not {locked}. Anyone can follow you to view your follower-only posts.'
             values={{
               locked: (
-                <Link to='/settings/profile'>
+                <Link className='underline' to='/settings/profile'>
                   <FormattedMessage id='compose_form.lock_disclaimer.lock' defaultMessage='locked' />
                 </Link>
               ),