pl-fe: styles migration fixes

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/media-gallery.tsx

@@ -38,8 +38,6 @@ interface Dimensions {
 interface SizeData {
   style: CSSProperties;
   itemsDimensions: Dimensions[];
-  size: number;
-  width: number;
 }
 
 const getAspectRatio = (attachment: MediaAttachment) =>
@@ -59,9 +57,7 @@ interface IItem {
   attachment: MediaAttachment;
   standalone?: boolean;
   index: number;
-  size: number;
   onClick: (index: number) => void;
-  displayWidth?: number;
   dimensions: Dimensions;
   last?: boolean;
   total: number;
@@ -378,8 +374,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     return {
       style: { height: getHeight() },
       itemsDimensions: [],
-      size: 1,
-      width,
     };
   };
 
@@ -567,14 +561,35 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     return {
       style,
       itemsDimensions,
-      size,
-      width: w,
     };
   };
 
   const getSizeData = (size: number): Readonly<SizeData> => {
     const w = width || defaultWidth;
 
+    if (compact) {
+      return {
+        style: {},
+        itemsDimensions: [...new Array(size)].map(() => ({
+          w: 'auto',
+          h: 'auto',
+          top: 'auto',
+          right: 'auto',
+          bottom: 'auto',
+          left: 'auto',
+          float: 'left',
+          position: 'relative',
+          // height = dimensions.h;
+          // top = dimensions.t || 'auto';
+          // right = dimensions.r || 'auto';
+          // bottom = dimensions.b || 'auto';
+          // left = dimensions.l || 'auto';
+          // float = dimensions.float || 'left';
+          // position = dimensions.pos || 'relative';
+        })),
+      };
+    }
+
     if (w) {
       if (size === 1) return getSizeDataSingle();
       if (size > 1) return getSizeDataMultiple(size);
@@ -583,8 +598,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     return {
       style: { height },
       itemsDimensions: [],
-      size,
-      width: w,
     };
   };
 
@@ -596,8 +609,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
       onClick={handleClick}
       attachment={attachment}
       index={i}
-      size={sizeData.size}
-      displayWidth={sizeData.width}
       dimensions={sizeData.itemsDimensions[i]}
       last={i === ATTACHMENT_LIMIT - 1}
       total={media.length}

packages/pl-fe/src/modals/alt-text-modal.tsx

@@ -131,7 +131,7 @@ const Preview: React.FC<PreviewProps> = ({ media, position: [x, y], onPositionCh
 
   return (
     <div className='relative overflow-hidden rounded-md'>
-      <Blurhash hash={media.blurhash} className='media-gallery__preview' />
+      <Blurhash hash={media.blurhash} className='⁂-media-gallery__preview' />
       <div
         className={clsx(
           'relative h-64 max-h-96 w-full overflow-hidden bg-contain bg-center bg-no-repeat',

packages/pl-fe/src/pages/accounts/account-gallery.tsx

@@ -87,9 +87,9 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) =>
       conditionalAttributes.autoPlay = true;
     }
     thumbnail = (
-      <div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
+      <div className={clsx('⁂-media-gallery__gifv', { autoplay: autoPlayGif })}>
         <video
-          className={clsx('media-gallery__item-gifv-thumbnail overflow-hidden', { 'rounded-br-md': isLast })}
+          className={clsx('⁂-media-gallery__item-gifv-thumbnail overflow-hidden', { 'rounded-br-md': isLast })}
           aria-label={attachment.description}
           title={attachment.description}
           role='application'
@@ -101,7 +101,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) =>
           {...conditionalAttributes}
         />
 
-        <span className='media-gallery__gifv__label'>GIF</span>
+        <span className='⁂-media-gallery__gifv__label'>GIF</span>
       </div>
     );
   } else if (attachment.type === 'audio') {
@@ -109,16 +109,16 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) =>
     const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
-      <div className={clsx('media-gallery__item-thumbnail', { 'rounded-br-md': isLast })}>
-        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
-        <span className='media-gallery__file-extension__label'>{fileExtension}</span>
+      <div className={clsx('⁂-media-gallery__item-thumbnail', { 'rounded-br-md': isLast })}>
+        <span className='⁂-media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='⁂-media-gallery__file-extension__label'>{fileExtension}</span>
       </div>
     );
   }
 
   if (!visible) {
     icon = (
-      <span className='media-gallery__item__icons'>
+      <span className='⁂-media-gallery__item__icons'>
         <Icon src={require('@tabler/icons/outline/eye-off.svg')} />
       </span>
     );
@@ -126,10 +126,10 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) =>
 
   return (
     <div className='col-span-1'>
-      <Link className='media-gallery__item-thumbnail aspect-1' to={`/@${account?.acct}/posts/${attachment.status_id}`} onClick={handleClick} title={title}>
+      <Link className='⁂-media-gallery__item-thumbnail aspect-1' to={`/@${account?.acct}/posts/${attachment.status_id}`} onClick={handleClick} title={title}>
         <Blurhash
           hash={attachment.blurhash}
-          className={clsx('media-gallery__preview', {
+          className={clsx('⁂-media-gallery__preview', {
             'hidden': visible,
             'rounded-br-md': isLast,
           })}

packages/pl-fe/src/styles/application.scss

@@ -10,7 +10,6 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/detailed-status';
-@use 'components/media-gallery';
 @use 'components/notification';
 @use 'components/columns';
 @use 'components/video-player';

packages/pl-fe/src/styles/components/media-gallery.scss

@@ -1 +0,0 @@
-

packages/pl-fe/src/styles/new/components.scss

@@ -149,9 +149,11 @@ a.⁂-list-item,
     @apply rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100;
 
     >.⁂-icon {
-      size: 1.5rem;
+      height: 1.5rem;
+      width: 1.5rem;
       @apply rtl:rotate-180;
     }
+
     &__label {
       @apply sr-only;
     }

packages/pl-fe/src/styles/new/index.scss

@@ -1,2 +1,3 @@
 @use 'components';
 @use 'layout';
+@use 'statuses';

packages/pl-fe/src/styles/new/mixins.scss

@@ -2,7 +2,7 @@
   @if $family == sans {
     @apply font-sans;
   } @else if $family == mono {
-    font-family: Roboto Mono, ui-monospace, monospace;
+    font-family: 'Roboto Mono', ui-monospace, monospace;
   } @else {
     @warn "Unknown font family `#{$family}`.";
   }
@@ -50,7 +50,7 @@
   }
 
   @if $tracking == normal {
-    letter-spacing: 0em;
+    letter-spacing: 0;
   } @else if $tracking == wide {
     letter-spacing: 0.025em;
   } @else {
@@ -90,18 +90,18 @@
 
     @if $size == md {
       padding: 1rem;
-      @media (min-width: 581px) {
+      @media (width >= 581px) {
         border-radius: 0.75rem;
       }
     } @else if $size == lg {
       padding: 1rem;
-      @media (min-width: 581px) {
+      @media (width >= 581px) {
         padding: 1.5rem;
         border-radius: 0.75rem;
       }
     } @else if $size == xl {
       padding: 1rem;
-      @media (min-width: 581px) {
+      @media (width >= 581px) {
         padding: 2.5rem;
         border-radius: 1.5rem;
       }

packages/pl-fe/src/styles/new/statuses.scss

@@ -74,7 +74,8 @@
     background: transparent;
 
     .⁂-media-gallery__item {
-      size: 3rem;
+      height: 3rem;
+      width: 3rem;
       inset: auto;
       float: left;
 
@@ -84,7 +85,8 @@
       }
 
       &__icons svg {
-        size: 2rem;
+        height: 2rem;
+        width: 2rem;
       }
     }