From 665895f8fee2e9ac2ba6433da1f511dd6587befb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 29 Apr 2024 18:29:02 +0200
Subject: [PATCH] More cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/media-gallery.tsx              |   2 +-
 src/components/upload.tsx                     |  20 ++-
 .../compose/components/compose-form.tsx       |   6 +-
 .../compose/components/privacy-dropdown.tsx   |  62 +++++--
 src/features/compose/components/warning.tsx   |   2 +-
 .../compose/containers/warning-container.tsx  |   2 +-
 .../report/components/status-check-box.tsx    |  12 +-
 src/features/video/index.tsx                  |   2 +-
 src/styles/components/compose-form.scss       | 162 +-----------------
 src/styles/components/media-gallery.scss      |   2 -
 src/styles/components/status.scss             |  41 ++---
 11 files changed, 98 insertions(+), 215 deletions(-)

diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 507c7ce3fc..fca1addd15 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -577,7 +577,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
   return (
     <div
-      className={clsx(className, 'media-gallery', { 'media-gallery--compact': compact })}
+      className={clsx(className, 'media-gallery', { 'media-gallery--compact !h-12 bg-transparent': compact })}
       style={sizeData.style}
       ref={node}
     >
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index b5f29b38f8..cd1d978275 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -141,7 +141,7 @@ const Upload: React.FC<IUpload> = ({
   const description = dirtyDescription || (dirtyDescription !== '' && media.description) || '';
   const focusX = media.meta.getIn(['focus', 'x']) as number | undefined;
   const focusY = media.meta.getIn(['focus', 'y']) as number | undefined;
-  const x = focusX ? ((focusX /  2) + .5) * 100 : undefined;
+  const x = focusX ? ((focusX / 2) + .5) * 100 : undefined;
   const y = focusY ? ((focusY / -2) + .5) * 100 : undefined;
   const mediaType = media.type;
   const mimeType = media.pleroma.get('mime_type') as string | undefined;
@@ -155,7 +155,7 @@ const Upload: React.FC<IUpload> = ({
 
   return (
     <div
-      className='compose-form__upload'
+      className='relative m-[5px] min-w-[40%] flex-1 overflow-hidden rounded'
       tabIndex={0}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -170,11 +170,12 @@ const Upload: React.FC<IUpload> = ({
       <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
         {({ scale }) => (
           <div
-            className={clsx('compose-form__upload-thumbnail', mediaType)}
+            className={clsx('compose-form__upload-thumbnail relative h-40 w-full overflow-hidden bg-contain bg-center bg-no-repeat', mediaType)}
             style={{
               transform: `scale(${scale})`,
               backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
-              backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
+              backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined,
+            }}
           >
             <HStack className='absolute right-2 top-2 z-10' space={2}>
               {(withPreview && mediaType !== 'unknown' && Boolean(media.url)) && (
@@ -200,11 +201,16 @@ const Upload: React.FC<IUpload> = ({
             </HStack>
 
             {onDescriptionChange && (
-              <div className={clsx('compose-form__upload-description', { active })}>
+              <div
+                className={clsx('absolute inset-x-0 bottom-0 z-[2px] bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 p-2.5 opacity-0 transition-opacity duration-100 ease-linear', {
+                  'opacity-100': active,
+                })}
+              >
                 <label>
                   <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
 
                   <textarea
+                    className='m-0 w-full rounded-md border border-solid border-white/25 bg-transparent p-2.5 text-sm text-white placeholder:text-white/60'
                     placeholder={intl.formatMessage(messages.description)}
                     value={description}
                     maxLength={descriptionLimit}
@@ -230,9 +236,9 @@ const Upload: React.FC<IUpload> = ({
               </span>
             )}
 
-            <div className='compose-form__upload-preview'>
+            <div className='absolute inset-0 -z-[1] h-full w-full'>
               {mediaType === 'video' && (
-                <video autoPlay playsInline muted loop>
+                <video className='h-full w-full object-cover' autoPlay playsInline muted loop>
                   <source src={media.preview_url} />
                 </video>
               )}
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 7939449e5d..a948bfd680 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/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'
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 2571589b75..787b68bdf4 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/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,
diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 28f7edf646..8b89114661 100644
--- a/src/features/compose/components/warning.tsx
+++ b/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>
     )}
diff --git a/src/features/compose/containers/warning-container.tsx b/src/features/compose/containers/warning-container.tsx
index 858404c279..22a8b15718 100644
--- a/src/features/compose/containers/warning-container.tsx
+++ b/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>
               ),
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 96df936a20..39f812713c 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -3,7 +3,7 @@ import React, { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports';
 import StatusContent from 'soapbox/components/status-content';
-import { Toggle } from 'soapbox/components/ui';
+import { Stack, Toggle } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
@@ -64,19 +64,21 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
           sensitive={status.sensitive}
           height={110}
           onOpenMedia={noop}
+          visible
         />
       );
     }
   }
 
   return (
-    <div className='status-check-box'>
-      <div className='status-check-box__status'>
+    <div className='flex items-center justify-between'>
+      <Stack className='status-check-box__status py-2' space={1}>
         <StatusContent status={status} />
         <Suspense>{media}</Suspense>
-      </div>
 
-      <div className='status-check-box-toggle'>
+      </Stack>
+
+      <div className='flex items-center justify-center p-2.5'>
         <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
       </div>
     </div>
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index 42f5f07f46..734dda49ad 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -463,7 +463,7 @@ const Video: React.FC<IVideo> = ({
   return (
     <div
       role='menuitem'
-      className={clsx('video-player relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white [direction:ltr] focus:outline-0', { 'h-full w-full m-0': fullscreen })}
+      className={clsx('video-player relative box-border max-h-screen max-w-full overflow-hidden rounded-[10px] bg-black text-white [direction:ltr] focus:outline-0', { 'h-full w-full m-0': fullscreen })}
       style={playerStyle}
       ref={player}
       onMouseEnter={handleMouseEnter}
diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss
index 4c0bb6c2eb..84317e2c70 100644
--- a/src/styles/components/compose-form.scss
+++ b/src/styles/components/compose-form.scss
@@ -1,159 +1,11 @@
-// Language codes that uses CJK fonts
-/* stylelint-disable-next-line value-keyword-case -- locale filenames */
-$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
-
-.compose-form {
-  &__warning {
-    @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
-
-    strong {
-      @apply font-medium;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          @apply font-bold;
-        }
-      }
-    }
-
-    a {
-      font-weight: 500;
-      text-decoration: underline;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: none;
-      }
-    }
+.compose-form__upload-thumbnail {
+  &.video {
+    @apply bg-cover;
+    background-image: url('../assets/images/video-placeholder.png');
   }
 
-  &__modifiers {
-    @apply text-gray-900 text-sm;
-    font-family: inherit;
-  }
-
-  &__upload {
-    flex: 1 1 0;
-    min-width: 40%;
-    margin: 5px;
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-
-    &-description {
-      @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
-
-      &.active {
-        @apply opacity-100;
-      }
-
-      textarea {
-        @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
-
-        &::placeholder {
-          @apply text-white/60;
-        }
-      }
-    }
-
-    &-preview {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-
-      video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  
-    &-thumbnail {
-      background-position: center;
-      background-size: contain;
-      background-repeat: no-repeat;
-      height: 160px;
-      width: 100%;
-      overflow: hidden;
-      position: relative;
-  
-      &.video {
-        background-image: url('../assets/images/video-placeholder.png');
-        background-size: cover;
-      }
-  
-      &.audio {
-        background-image: url('../assets/images/audio-placeholder.png');
-        background-size: cover;
-      }
-    }
-  }
-}
-
-.privacy-dropdown {
-  &.active {
-    &.top .privacy-dropdown__value {
-      @apply rounded-t-md;
-    }
-
-    .privacy-dropdown__dropdown {
-      @apply block shadow-md;
-    }
-  }
-
-  &__dropdown {
-    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden black:bg-black black:border black:border-gray-800;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
-  }
-
-  &__option {
-    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer black:hover:bg-gray-900;
-
-    &.active {
-      @apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900;
-    }
-
-    &:hover,
-    &.active {
-      .privacy-dropdown__option__content,
-      .privacy-dropdown__option__content strong {
-        @apply text-black dark:text-white;
-      }
-    }
-
-    &.active {
-      @apply hover:bg-gray-200 dark:hover:bg-gray-700;
-    }
-
-    &__icon {
-      @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
-    }
-
-    &__content {
-      @apply flex-auto text-primary-600 dark:text-primary-400;
-
-      strong {
-        @apply block font-medium text-black dark:text-white;
-
-        @each $lang in $cjk-langs {
-          &:lang(#{$lang}) {
-            @apply font-bold;
-          }
-        }
-      }
-    }
+  &.audio {
+    @apply bg-cover;
+    background-image: url('../assets/images/audio-placeholder.png');
   }
 }
diff --git a/src/styles/components/media-gallery.scss b/src/styles/components/media-gallery.scss
index 0eea348a92..2d9c2fcae8 100644
--- a/src/styles/components/media-gallery.scss
+++ b/src/styles/components/media-gallery.scss
@@ -60,8 +60,6 @@
   }
 
   &--compact {
-    @apply bg-transparent h-12;
-
     .media-gallery__item {
       @apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};
 
diff --git a/src/styles/components/status.scss b/src/styles/components/status.scss
index aa743d9356..a0305bb969 100644
--- a/src/styles/components/status.scss
+++ b/src/styles/components/status.scss
@@ -13,34 +13,23 @@
   @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
 }
 
-.status-check-box {
-  @apply flex items-center justify-between;
-
-  .status-check-box__status {
-    @apply py-2;
-
-    .media-gallery {
-      @apply max-w-[250px];
-    }
-
-    .status__content {
-      @apply p-0 text-gray-700 dark:text-gray-500 text-sm whitespace-normal;
-    }
-
-    .video-player,
-    .audio-player {
-      @apply mt-2 max-w-[250px];
-    }
-
-    .media-gallery__item-thumbnail {
-      @apply cursor-default;
-    }
+.status-check-box__status {
+  .media-gallery {
+    @apply max-w-[250px];
   }
-}
 
-.status-check-box-toggle {
-  @apply items-center flex justify-center p-2.5;
-  flex: 0 0 auto;
+  .status__content {
+    @apply p-0 text-gray-700 dark:text-gray-500 text-sm whitespace-normal;
+  }
+
+  .video-player,
+  .audio-player {
+    @apply mt-2 max-w-[250px];
+  }
+
+  .media-gallery__item-thumbnail {
+    @apply cursor-default;
+  }
 }
 
 .focusable:focus,