From 0f92777007061c4adf9c0f31445020a7096b94d2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 16:12:23 -0300
Subject: [PATCH] Change classNames "empty-column-indicator" and
 "slist__append" to use only Tailwind

---
 src/features/account-gallery/index.tsx             | 6 +++---
 src/features/compose/components/search-results.tsx | 6 +++---
 src/features/favourited-statuses/index.tsx         | 2 +-
 src/features/followers/index.tsx                   | 2 +-
 src/features/following/index.tsx                   | 2 +-
 src/features/group/group-gallery.tsx               | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index a899d8d17..e8707e543 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -105,7 +105,7 @@ const AccountGallery = () => {
   if (isUnavailable) {
     return (
       <Column>
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
         </div>
       </Column>
@@ -126,7 +126,7 @@ const AccountGallery = () => {
         ))}
 
         {!isLoading && attachments.size === 0 && (
-          <div className='empty-column-indicator col-span-2 sm:col-span-3'>
+          <div className='col-span-2 flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300 sm:col-span-3'>
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}
@@ -135,7 +135,7 @@ const AccountGallery = () => {
       </div>
 
       {isLoading && attachments.size === 0 && (
-        <div className='slist__append'>
+        <div className='relative flex flex-1 p-[30px_15px]'>
           <Spinner />
         </div>
       )}
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 87e85fd1f..57f9cc694 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -132,7 +132,7 @@ const SearchResults = () => {
       searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.account} id={suggestion.account} />);
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.accounts'
             defaultMessage='There are no people results for "{term}"'
@@ -174,7 +174,7 @@ const SearchResults = () => {
       resultsIds = trendingStatuses;
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.statuses'
             defaultMessage='There are no posts results for "{term}"'
@@ -198,7 +198,7 @@ const SearchResults = () => {
       searchResults = trends.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.hashtags'
             defaultMessage='There are no hashtags results for "{term}"'
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index a9a2aa0a1..215e52823 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -67,7 +67,7 @@ const Favourites: React.FC<IFavourites> = ({ params }) => {
   if (isUnavailable) {
     return (
       <Column>
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
         </div>
       </Column>
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index 8847beb11..8b2657c63 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -44,7 +44,7 @@ const Followers: React.FC<IFollowers> = ({ params }) => {
 
   if (isUnavailable) {
     return (
-      <div className='empty-column-indicator'>
+      <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
       </div>
     );
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index f5c4c3475..eb7d42a27 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -44,7 +44,7 @@ const Following: React.FC<IFollowing> = ({ params }) => {
 
   if (isUnavailable) {
     return (
-      <div className='empty-column-indicator'>
+      <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
       </div>
     );
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index a2fd17532..ce83d2f86 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -77,7 +77,7 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
         ))}
 
         {(!isLoading && attachments.length === 0) && (
-          <div className='empty-column-indicator col-span-2 sm:col-span-3'>
+          <div className='col-span-2 flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300 sm:col-span-3'>
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}