Lint, cleanup, styles…

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/dropdown-menu.tsx

@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton, Counter } from 'soapbox/components/ui';
+import { Counter, IconButton } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional-motion';
 

app/soapbox/components/emoji-button-wrapper.tsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { EmojiSelector } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';

app/soapbox/components/ui/index.ts

@@ -35,6 +35,7 @@ export { default as RadioButton } from './radio-button/radio-button';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
 export { default as Stack } from './stack/stack';
+export { default as Streamfield } from './streamfield/streamfield';
 export { default as Tabs } from './tabs/tabs';
 export { default as TagInput } from './tag-input/tag-input';
 export { default as Text } from './text/text';

app/soapbox/components/ui/radio-button/radio-button.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+
 import HStack from '../hstack/hstack';
 
 interface IRadioButton {

app/soapbox/components/ui/widget/widget.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Text, IconButton } from 'soapbox/components/ui';
+import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Stack from 'soapbox/components/ui/stack/stack';
 
 interface IWidgetTitle {
   /** Title text for the widget. */

app/soapbox/components/verification-badge.tsx

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Icon from 'soapbox/components/ui/icon/icon';
+import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({

app/soapbox/features/account/components/header.tsx

@@ -17,7 +17,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still-image';
-import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';

app/soapbox/features/ads/components/ad.tsx

@@ -2,8 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
+import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 

app/soapbox/features/edit-profile/index.tsx

@@ -15,16 +15,17 @@ import {
   FormGroup,
   HStack,
   Input,
+  Streamfield,
   Textarea,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import ProfilePreview from './components/profile-preview';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { Account } from 'soapbox/types/entities';
 
 /**

app/soapbox/features/feed-suggestions/feed-suggestions.tsx

@@ -78,7 +78,7 @@ const FeedSuggestions = () => {
       </HStack>
 
       <CardBody>
-        <HStack alignItems='center' className='overflow-x-auto lg:overflow-x-hidden space-x-4 md:space-x-0'>
+        <HStack space={4} alignItems='center' className='overflow-x-auto lg:overflow-x-hidden md:space-x-0'>
           {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
             <SuggestionItem key={suggestedProfile.account} accountId={suggestedProfile.account} />
           ))}

app/soapbox/features/placeholder/components/placeholder-notification.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';

app/soapbox/features/soapbox-config/components/crypto-address-input.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { CryptoAddress } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({

app/soapbox/features/soapbox-config/components/footer-link-input.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { FooterItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({

app/soapbox/features/soapbox-config/components/promo-panel-input.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
 import IconPicker from './icon-picker';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({

app/soapbox/features/soapbox-config/index.tsx

@@ -8,19 +8,19 @@ import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import {
   Accordion,
+  Button,
   Column,
   CardHeader,
   CardTitle,
+  FileInput,
   Form,
   FormActions,
   FormGroup,
   Input,
-  FileInput,
+  Streamfield,
   Textarea,
-  Button,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';

app/soapbox/features/ui/components/modals/actions-modal.tsx

@@ -34,8 +34,8 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     return (
       <li key={`${text}-${i}`}>
         <HStack
-          space={2.5}
           {...compProps}
+          space={2.5}
           data-index={i}
           className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}

app/soapbox/features/ui/components/navbar.tsx

@@ -78,9 +78,10 @@ const Navbar = () => {
             </div>
           )}
 
-          <div
+          <HStack
-            className={classNames({
+            space={4}
-              'flex-1 flex items-center lg:items-stretch space-x-4': true,
+            alignItems='center'
+            className={classNames('flex-1 enter lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
@@ -97,7 +98,7 @@ const Navbar = () => {
                 </div>
               </div>
             )}
-          </div>
+          </HStack>
 
           <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (

app/soapbox/features/ui/components/theme-selector.tsx

@@ -1,9 +1,7 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
+import { Icon, Select } from 'soapbox/components/ui';
-
-import Select from '../../../components/ui/select/select';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },

app/styles/components/detailed-status.scss

@@ -39,7 +39,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
 
     &--bottom {
       @apply block;
@@ -48,17 +48,3 @@
     }
   }
 }
-
-.thread {
-  .ptr,
-  .ptr__children {
-    background: var(--foreground-color) !important;
-    border-radius: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    @media screen and (max-width: 580px) {
-      border-radius: 0;
-    }
-  }
-}