Change classNames "empty-column-indicator" and "slist__append" to use only Tailwind

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>
       )}

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}"'

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>

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>
     );

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>
     );

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>
         )}