From a4fcbb9872318d7b24c719c6661942d0cd7ae3e6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 9 Jan 2023 14:46:59 -0600
Subject: [PATCH] Delete accounts.scss

---
 app/soapbox/components/display-name.tsx       | 15 +---
 .../account-gallery/components/media-item.tsx |  4 +-
 .../features/account-gallery/index.tsx        |  2 +-
 .../components/moved-note.tsx                 |  2 +-
 .../ui/components/profile-media-panel.tsx     |  2 +-
 app/styles/accounts.scss                      | 82 -------------------
 app/styles/application.scss                   |  1 -
 7 files changed, 7 insertions(+), 101 deletions(-)
 delete mode 100644 app/styles/accounts.scss

diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
index 12a28b382..3f9d0c5de 100644
--- a/app/soapbox/components/display-name.tsx
+++ b/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,19 +13,11 @@ import type { Account } from 'soapbox/types/entities';
 interface IDisplayName {
   account: Account
   withSuffix?: boolean
-  withDate?: boolean
 }
 
-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 joinedAt = createdAt ? (
-    <div className='account__joined-at'>
-      <Icon src={require('@tabler/icons/clock.svg')} />
-      <RelativeTimestamp timestamp={createdAt} />
-    </div>
-  ) : null;
+  const { verified } = account;
 
   const displayName = (
     <HStack space={1} alignItems='center' grow>
@@ -39,7 +29,6 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
       />
 
       {verified && <VerificationBadge />}
-      {withDate && joinedAt}
     </HStack>
   );
 
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index 6752bcdab..5a363aff8 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -117,14 +117,14 @@ 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 style={{ width, height }}>
       <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
         <Blurhash
           hash={attachment.get('blurhash')}
diff --git a/app/soapbox/features/account-gallery/index.tsx b/app/soapbox/features/account-gallery/index.tsx
index b27d1b117..82d356386 100644
--- a/app/soapbox/features/account-gallery/index.tsx
+++ b/app/soapbox/features/account-gallery/index.tsx
@@ -140,7 +140,7 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${accountUsername}`} transparent withHeader={false}>
-      <div role='feed' className='account-gallery__container' ref={handleRef}>
+      <div role='feed' className='flex flex-wrap gap-2' ref={handleRef}>
         {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} />
         ) : (
diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx
index cfd752fc1..7cc64f5ca 100644
--- a/app/soapbox/features/account-timeline/components/moved-note.tsx
+++ b/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')}
diff --git a/app/soapbox/features/ui/components/profile-media-panel.tsx b/app/soapbox/features/ui/components/profile-media-panel.tsx
index cb71d777c..fc33dd022 100644
--- a/app/soapbox/features/ui/components/profile-media-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-media-panel.tsx
@@ -52,7 +52,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='flex flex-wrap'>
+        <div className='flex flex-wrap gap-1'>
           {nineAttachments.map((attachment, _index) => (
             <MediaItem
               key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
deleted file mode 100644
index e8fd001bb..000000000
--- a/app/styles/accounts.scss
+++ /dev/null
@@ -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 {
-  padding-left: 3px;
-  font-size: 14px;
-  display: flex;
-  white-space: nowrap;
-  flex-shrink: 0;
-  color: var(--primary-text-color--faint);
-
-  .svg-icon {
-    padding-right: 3px;
-  }
-}
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 53a7a8c39..702e7a437 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -14,7 +14,6 @@
 @import 'variables';
 @import 'fonts';
 @import 'basics';
-@import 'accounts';
 @import 'loading';
 @import 'ui';
 @import 'emoji-picker';