nicolium: styles

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/features/frontend-config/components/promo-panel-input.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import HStack from '@/components/ui/hstack';
 import Input from '@/components/ui/input';
 
 import IconPicker from './icon-picker';
@@ -32,7 +31,7 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
     };
 
   return (
-    <HStack space={2} alignItems='center' grow>
+    <div className='flex flex-grow items-center gap-2'>
       <IconPicker value={value.icon} onChange={handleIconChange} />
 
       <Input
@@ -49,7 +48,7 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
         value={value.url}
         onChange={handleChange('url')}
       />
-    </HStack>
+    </div>
   );
 };
 

packages/nicolium/src/features/group/components/group-header.tsx

@@ -6,9 +6,7 @@ import * as v from 'valibot';
 import GroupAvatar from '@/components/groups/group-avatar';
 import { ParsedContent } from '@/components/statuses/parsed-content';
 import StillImage from '@/components/still-image';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import Emojify from '@/features/emoji/emojify';
 import { useModalsActions } from '@/stores/modals';
@@ -43,11 +41,11 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         </div>
 
         <div className='px-4 sm:px-6'>
-          <HStack alignItems='bottom' space={5} className='-mt-12'>
+          <div className='-mt-12 flex items-end gap-5'>
             <div className='relative flex'>
               <div className='size-24 rounded-lg bg-gray-400 ring-4 ring-white dark:ring-gray-800' />
             </div>
-          </HStack>
+          </div>
         </div>
       </div>
     );
@@ -146,17 +144,17 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         </div>
       </div>
 
-      <Stack alignItems='center' space={3} className='mx-auto mt-10 w-5/6 py-4'>
+      <div className='mx-auto mt-10 flex w-5/6 flex-col items-center gap-3 py-4'>
         <Text size='xl' weight='bold' data-testid='group-name'>
           <Emojify text={group.display_name} emojis={group.emojis} />
         </Text>
 
-        <Stack data-testid='group-meta' space={1} alignItems='center'>
-          <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
+        <div className='flex flex-col items-center gap-1' data-testid='group-meta'>
+          <div className='flex flex-wrap gap-2 text-gray-700 dark:text-gray-600'>
             <GroupRelationship group={group} />
             <GroupPrivacy group={group} />
             <GroupMemberCount group={group} />
-          </HStack>
+          </div>
 
           <Text
             theme='muted'
@@ -165,13 +163,13 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
           >
             <ParsedContent html={group.note} emojis={group.emojis} />
           </Text>
-        </Stack>
+        </div>
 
-        <HStack alignItems='center' space={2} data-testid='group-actions'>
+        <div className='flex items-center gap-2' data-testid='group-actions'>
           <GroupOptionsButton group={group} />
           <GroupActionButton group={group} />
-        </HStack>
-      </Stack>
+        </div>
+      </div>
     </div>
   );
 };

packages/nicolium/src/features/group/components/group-member-list-item.tsx

@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import Account from '@/components/accounts/account';
 import DropdownMenu from '@/components/dropdown-menu/dropdown-menu';
-import HStack from '@/components/ui/hstack';
 import PlaceholderAccount from '@/features/placeholder/components/placeholder-account';
 import { useAccount } from '@/queries/accounts/use-account';
 import { useBlockGroupUserMutation } from '@/queries/groups/use-group-blocks';
@@ -203,12 +202,12 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => {
   }
 
   return (
-    <HStack alignItems='center' justifyContent='between' data-testid='group-member-list-item'>
+    <div className='flex items-center justify-between' data-testid='group-member-list-item'>
       <div className='w-full'>
         <Account account={account} withRelationship={false} />
       </div>
 
-      <HStack alignItems='center' space={2}>
+      <div className='flex items-center gap-2'>
         {isMemberOwner || isMemberAdmin ? (
           <span
             data-testid='role-badge'
@@ -226,8 +225,8 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => {
         ) : null}
 
         <DropdownMenu items={menu} />
-      </HStack>
-    </HStack>
+      </div>
+    </div>
   );
 };
 

packages/nicolium/src/features/group/components/group-privacy.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Popover from '@/components/ui/popover';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 
 import type { Group } from 'pl-api';
@@ -17,7 +15,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
   <Popover
     referenceElementClassName='cursor-help'
     content={
-      <Stack space={4} alignItems='center' className='w-72'>
+      <div className='flex w-72 flex-col items-center gap-4'>
         <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
           <Icon
             src={
@@ -29,7 +27,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           />
         </div>
 
-        <Stack space={1} alignItems='center'>
+        <div className='flex flex-col items-center gap-1'>
           <Text size='lg' weight='bold' align='center'>
             {group.locked ? (
               <FormattedMessage id='group.privacy.locked.full' defaultMessage='Private Group' />
@@ -51,11 +49,11 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
               />
             )}
           </Text>
-        </Stack>
-      </Stack>
+        </div>
+      </div>
     }
   >
-    <HStack space={1} alignItems='center' data-testid='group-privacy'>
+    <div className='flex items-center gap-1' data-testid='group-privacy'>
       <Icon
         className='size-4'
         src={
@@ -72,7 +70,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           <FormattedMessage id='group.privacy.public' defaultMessage='Public' />
         )}
       </Text>
-    </HStack>
+    </div>
   </Popover>
 );