From 82d3e3c5f4848ec1871c3a3b88abb9fe07e0e3e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 26 Dec 2022 17:34:55 +0100
Subject: [PATCH] Remove unused styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/account-authorize.tsx          | 43 ++++-----
 app/styles/accounts.scss                      | 40 ---------
 app/styles/application.scss                   |  1 -
 app/styles/components/account-header.scss     | 24 -----
 app/styles/components/modal.scss              |  6 --
 app/styles/components/status.scss             | 88 -------------------
 app/styles/ui.scss                            |  5 --
 7 files changed, 22 insertions(+), 185 deletions(-)
 delete mode 100644 app/styles/components/account-header.scss

diff --git a/app/soapbox/features/follow-requests/components/account-authorize.tsx b/app/soapbox/features/follow-requests/components/account-authorize.tsx
index 430a0d49f..b73d0a719 100644
--- a/app/soapbox/features/follow-requests/components/account-authorize.tsx
+++ b/app/soapbox/features/follow-requests/components/account-authorize.tsx
@@ -1,13 +1,10 @@
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
 
 import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
-import IconButton from 'soapbox/components/icon-button';
-import { Text } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account';
+import { Button, HStack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -38,24 +35,28 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
 
   if (!account) return null;
 
-  const content = { __html: account.note_emojified };
-
   return (
-    <div className='account-authorize__wrapper'>
-      <div className='account-authorize'>
-        <Link to={`/@${account.acct}`}>
-          <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
-          <DisplayName account={account} />
-        </Link>
-
-        <Text className='account__header__content' dangerouslySetInnerHTML={content} />
-      </div>
-
-      <div className='account--panel'>
-        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/check.svg')} onClick={onAuthorize} /></div>
-        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/x.svg')} onClick={onReject} /></div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <Account account={account} withRelationship={false} />
       </div>
-    </div>
+      <HStack space={2}>
+        <Button
+          theme='secondary'
+          size='sm'
+          text={intl.formatMessage(messages.authorize)}
+          icon={require('@tabler/icons/check.svg')}
+          onClick={onAuthorize}
+        />
+        <Button
+          theme='danger'
+          size='sm'
+          text={intl.formatMessage(messages.reject)}
+          icon={require('@tabler/icons/x.svg')}
+          onClick={onReject}
+        />
+      </HStack>
+    </HStack>
   );
 };
 
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index ac50e7fa9..e8fd001bb 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -22,11 +22,6 @@
   }
 }
 
-.account-authorize__avatar {
-  float: left;
-  margin-right: 10px;
-}
-
 .account-gallery__container {
   display: flex;
   flex-wrap: wrap;
@@ -65,47 +60,12 @@
   }
 }
 
-.account--panel {
-  background: var(--brand-color--faint);
-  border-top: 1px solid var(--brand-color--med);
-  border-bottom: 1px solid var(--brand-color--med);
-  display: flex;
-  flex-direction: row;
-  padding: 10px 0;
-
-  &__button .svg-icon {
-    height: 20px;
-    width: 20px;
-  }
-}
-
 .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);
-
-  &__message {
-    position: relative;
-    margin-left: 58px;
-    color: var(--primary-text-color);
-    padding: 8px 0;
-    padding-top: 0;
-    padding-bottom: 4px;
-    font-size: 14px;
-
-    > span {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__icon-wrapper {
-    left: -26px;
-    position: absolute;
-  }
 }
 
 .account__joined-at {
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 882316e95..508c32909 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -30,7 +30,6 @@
 @import 'components/inputs';
 @import 'components/dropdown-menu';
 @import 'components/modal';
-@import 'components/account-header';
 @import 'components/compose-form';
 @import 'components/sidebar-menu';
 @import 'components/emoji-reacts';
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
deleted file mode 100644
index 277f42f18..000000000
--- a/app/styles/components/account-header.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.account__header__content {
-  font-size: 14px;
-  font-weight: 400;
-  overflow: hidden;
-  word-break: normal;
-  word-wrap: break-word;
-
-  p {
-    margin-bottom: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index d7d4b6931..f88958c9c 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -256,12 +256,6 @@
   border: 1px solid var(--background-color);
   color: var(--primary-text-color--faint);
 
-  .status__display-name {
-    display: block;
-    max-width: 100%;
-    padding-right: 25px;
-  }
-
   .dropdown-menu__separator {
     @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
   }
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 1b3a0872b..b0d83f5f6 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -13,41 +13,6 @@
   }
   opacity: 1;
   animation: fade 150ms linear;
-
-  &.light {
-    .display-name {
-      strong {
-        color: var(--primary-text-color);
-      }
-
-      span {
-        color: var(--primary-text-color--faint);
-      }
-    }
-
-    .status__content {
-      color: var(--primary-text-color);
-
-      a {
-        color: var(--highlight-text-color);
-      }
-    }
-  }
-
-  &__meta {
-    font-size: 14px;
-    color: var(--primary-text-color--faint);
-
-    a {
-      color: var(--brand-color);
-      font-weight: bold;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
 }
 
 [column-type=filled] .status__wrapper,
@@ -93,12 +58,6 @@
 .focusable-within:focus-within {
   outline: 0; /* Required b/c HotKeys lib sets this outline */
   @apply ring-2 ring-primary-300;
-
-  .status.status-direct {
-    &.muted {
-      background: transparent;
-    }
-  }
 }
 
 .status-card {
@@ -109,10 +68,6 @@ a.status-card {
   @apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
 }
 
-.status-card-photo {
-  @apply cursor-zoom-in block no-underline w-full h-auto;
-}
-
 .status-card-video,
 .status-card-audio {
   iframe {
@@ -121,23 +76,6 @@ a.status-card {
   }
 }
 
-.status-card__host {
-  @apply text-primary-600 dark:text-accent-blue;
-  display: flex;
-  margin-top: 10px;
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  align-items: center;
-
-  .svg-icon {
-    height: 15px;
-    width: 15px;
-    margin-right: 3px;
-  }
-}
-
 .status-card__image {
   flex: 0 0 40%;
   background: var(--brand-color--med);
@@ -165,10 +103,6 @@ a.status-card {
 
 .status-card.horizontal {
   display: block;
-
-  .status-card__title {
-    white-space: inherit;
-  }
 }
 
 .status-card.compact {
@@ -179,10 +113,6 @@ a.status-card {
   @apply block w-full h-full object-cover bg-cover bg-center;
 }
 
-.status-card--link {
-  @apply flex flex-col md:flex-row;
-}
-
 .material-status {
   padding-bottom: 10px;
 
@@ -194,27 +124,9 @@ a.status-card {
   .status {
     padding: 8px 10px;
 
-    &__avatar {
-      position: relative;
-      margin-right: 10px;
-      top: 0;
-      left: 0;
-    }
-
-    &__profile {
-      display: flex;
-      align-items: center;
-    }
-
     &__content {
       padding-top: 10px;
     }
-
-    &__display-name {
-      .display-name__account {
-        display: block;
-      }
-    }
   }
 }
 
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 3f38fd47c..f1e13f409 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -167,11 +167,6 @@
   cursor: pointer;
 }
 
-.account--panel__button {
-  flex: 1 1 auto;
-  text-align: center;
-}
-
 ::-webkit-scrollbar-thumb {
   border-radius: 0;
 }