Merge branch 'accounts-scss' into 'develop'

Delete accounts.scss

See merge request soapbox-pub/soapbox!2136

app/soapbox/components/display-name.tsx

@@ -5,8 +5,6 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { getAcct } from '../utils/accounts';
 
-import Icon from './icon';
-import RelativeTimestamp from './relative-timestamp';
 import { HStack, Text } from './ui';
 import VerificationBadge from './verification-badge';
 
@@ -15,20 +13,12 @@ import type { Account } from 'soapbox/types/entities';
 interface IDisplayName {
   account: Account
   withSuffix?: boolean
-  withDate?: boolean
   children?: React.ReactNode
 }
 
-const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true, withDate = false }) => {
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true }) => {
   const { displayFqn = false } = useSoapboxConfig();
-  const { created_at: createdAt, verified } = account;
+  const { verified } = account;
-
-  const joinedAt = createdAt ? (
-    <div className='account__joined-at'>
-      <Icon src={require('@tabler/icons/clock.svg')} />
-      <RelativeTimestamp timestamp={createdAt} />
-    </div>
-  ) : null;
 
   const displayName = (
     <HStack space={1} alignItems='center' grow>
@@ -40,7 +30,6 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
       />
 
       {verified && <VerificationBadge />}
-      {withDate && joinedAt}
     </HStack>
   );
 

app/soapbox/features/account-gallery/components/media-item.tsx

@@ -11,11 +11,10 @@ import type { Attachment } from 'soapbox/types/entities';
 
 interface IMediaItem {
   attachment: Attachment,
-  displayWidth: number,
   onOpenMedia: (attachment: Attachment) => void,
 }
 
-const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia }) => {
+const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
   const displayMedia = settings.get('displayMedia');
@@ -53,8 +52,6 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
     }
   };
 
-  const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
-  const height = width;
   const status = attachment.get('status');
   const title  = status.get('spoiler_text') || attachment.get('description');
 
@@ -117,15 +114,15 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
 
   if (!visible) {
     icon = (
-      <span className='account-gallery__item__icons'>
+      <span className='media-gallery__item__icons'>
         <Icon src={require('@tabler/icons/eye-off.svg')} />
       </span>
     );
   }
 
   return (
-    <div className='account-gallery__item' style={{ width, height }}>
+    <div className='col-span-1'>
-      <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
+      <a className='media-gallery__item-thumbnail aspect-square' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
         <Blurhash
           hash={attachment.get('blurhash')}
           className={classNames('media-gallery__preview', {

app/soapbox/features/account-gallery/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -65,7 +65,6 @@ const AccountGallery = () => {
   const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading);
   const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore);
 
-  const [width, setWidth] = useState(323);
   const node = useRef<HTMLDivElement>(null);
 
   const handleScrollToBottom = () => {
@@ -96,12 +95,6 @@ const AccountGallery = () => {
     }
   };
 
-  useLayoutEffect(() => {
-    if (node.current) {
-      setWidth(node.current.offsetWidth);
-    }
-  }, [node.current]);
-
   useEffect(() => {
     if (accountId && accountId !== -1) {
       dispatch(fetchAccount(accountId));
@@ -143,14 +136,13 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${accountUsername}`} transparent withHeader={false}>
-      <div role='feed' className='account-gallery__container' ref={node}>
+      <div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3' ref={node}>
         {attachments.map((attachment, index) => attachment === null ? (
           <LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} />
         ) : (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
             attachment={attachment}
-            displayWidth={width}
             onOpenMedia={handleOpenMedia}
           />
         ))}

app/soapbox/features/account-timeline/components/moved-note.tsx

@@ -13,7 +13,7 @@ interface IMovedNote {
 }
 
 const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
-  <div className='account__moved-note'>
+  <div className='p-4'>
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
         src={require('@tabler/icons/briefcase.svg')}

app/soapbox/features/ui/components/group-media-panel.tsx

@@ -50,12 +50,11 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='flex flex-wrap -m-1'>
+        <div className='grid grid-cols-3 gap-1'>
           {nineAttachments.map((attachment, _index) => (
             <MediaItem
               key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
               attachment={attachment}
-              displayWidth={255}
               onOpenMedia={handleOpenMedia}
             />
           ))}

app/soapbox/features/ui/components/profile-media-panel.tsx

@@ -51,12 +51,11 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='flex flex-wrap -m-1'>
+        <div className='grid grid-cols-3 gap-1'>
           {nineAttachments.map((attachment, _index) => (
             <MediaItem
               key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
               attachment={attachment}
-              displayWidth={255}
               onOpenMedia={handleOpenMedia}
             />
           ))}

app/styles/accounts.scss

@@ -1,82 +0,0 @@
-.card {
-  & > a {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    overflow: hidden;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      box-shadow: none;
-    }
-  }
-}
-
-.account {
-  padding: 10px;
-  position: relative;
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid var(--brand-color--med);
-  }
-}
-
-.account-gallery__container {
-  display: flex;
-  flex-wrap: wrap;
-
-  .empty-column-indicator {
-    margin: -4px -2px;
-  }
-}
-
-.account-gallery__item {
-  @apply rounded-lg p-1;
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  overflow: hidden;
-
-  a {
-    background: var(--brand-color--faint);
-  }
-
-  video,
-  img {
-    @apply rounded-lg;
-  }
-
-  &__icons {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .svg-icon {
-      @apply h-6 w-6;
-    }
-  }
-}
-
-.account__moved-note {
-  padding: 14px 10px;
-  padding-bottom: 16px;
-  background: var(--brand-color--faint);
-  border-top: 1px solid var(--brand-color--med);
-  border-bottom: 1px solid var(--brand-color--med);
-}
-
-.account__joined-at {
-  @apply text-gray-400;
-  padding-left: 3px;
-  font-size: 14px;
-  display: flex;
-  white-space: nowrap;
-  flex-shrink: 0;
-
-  .svg-icon {
-    padding-right: 3px;
-  }
-}

app/styles/application.scss

@@ -3,7 +3,6 @@
 @import 'variables';
 @import 'fonts';
 @import 'basics';
-@import 'accounts';
 @import 'loading';
 @import 'ui';
 @import 'emoji-picker';