bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: make avatars squared

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-11-25 19:01:20 +01:00
parent d8baf58308
commit 4935b0820a
11 changed files with 16 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/pl-fe/src/components/account.tsx
View file

@ -203,7 +203,7 @@ const Account = ({
<div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}> <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
<HStack alignItems={actionAlignment} space={3} justifyContent='between'> <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
<HStack alignItems='center' space={3} className='overflow-hidden'> <HStack alignItems='center' space={3} className='overflow-hidden'>
<div className='rounded-full'> <div className='rounded-lg'>
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} /> <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
{emoji && ( {emoji && (
<Emoji <Emoji
@ -259,7 +259,7 @@ const Account = ({
condition={showAccountHoverCard} condition={showAccountHoverCard}
wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>} wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
> >
<LinkEl className='rounded-full' {...linkProps}> <LinkEl className='rounded-lg' {...linkProps}>
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} /> <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
{emoji && ( {emoji && (
<Emoji <Emoji

2
packages/pl-fe/src/components/groups/group-avatar.tsx
View file

@ -18,7 +18,7 @@ const GroupAvatar = (props: IGroupAvatar) => {
return ( return (
<Avatar <Avatar
className={ className={
clsx('relative rounded-full', { clsx('relative rounded-lg', {
'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing, 'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing, 'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing, 'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,

4
packages/pl-fe/src/components/ui/avatar.tsx
View file

@ -39,7 +39,7 @@ const Avatar = (props: IAvatar) => {
width: size, width: size,
height: size, height: size,
}} }}
className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)} className={clsx('flex items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-900', className)}
> >
<Icon <Icon
src={require('@tabler/icons/outline/photo-off.svg')} src={require('@tabler/icons/outline/photo-off.svg')}
@ -51,7 +51,7 @@ const Avatar = (props: IAvatar) => {
return ( return (
<StillImage <StillImage
className={clsx('rounded-full', className)} className={clsx('rounded-lg', className)}
style={style} style={style}
src={src} src={src}
alt={alt || intl.formatMessage(messages.avatar)} alt={alt || intl.formatMessage(messages.avatar)}

8
packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
View file

@ -55,10 +55,8 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
<label <label
ref={picker} ref={picker}
className={clsx( className={clsx(
'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer bg-primary-300 ring-2', 'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-lg bg-primary-300 ring-2',
{ {
'rounded-lg': onChangeDescription,
'rounded-full': !onChangeDescription,
'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging, 'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
'ring-white dark:ring-primary-900': !isDraggedOver, 'ring-white dark:ring-primary-900': !isDraggedOver,
'ring-offset-2 ring-primary-600': isDraggedOver, 'ring-offset-2 ring-primary-600': isDraggedOver,
@ -71,9 +69,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
<HStack <HStack
alignItems='center' alignItems='center'
justifyContent='center' justifyContent='center'
className={clsx('absolute left-0 top-0 size-full transition-opacity', { className={clsx('absolute left-0 top-0 size-full rounded-lg transition-opacity', {
'rounded-lg': onChangeDescription,
'rounded-full': !onChangeDescription,
'opacity-0 hover:opacity-90 bg-primary-500': src, 'opacity-0 hover:opacity-90 bg-primary-500': src,
})} })}
> >

2
packages/pl-fe/src/features/group/components/group-header.tsx
View file

@ -47,7 +47,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
<HStack alignItems='bottom' space={5} className='-mt-12'> <HStack alignItems='bottom' space={5} className='-mt-12'>
<div className='relative flex'> <div className='relative flex'>
<div <div
className='size-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800' className='size-24 rounded-lg bg-gray-400 ring-4 ring-white dark:ring-gray-800'
/> />
</div> </div>
</HStack> </HStack>

6
packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
View file

@ -73,13 +73,13 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />} subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
> >
<Stack space={10}> <Stack space={10}>
<div className='relative mx-auto rounded-full bg-gray-200'> <div className='relative mx-auto rounded-lg bg-gray-200'>
{account && ( {account && (
<Avatar src={selectedFile || account.avatar} alt={account.avatar_description} size={175} /> <Avatar src={selectedFile || account.avatar} alt={account.avatar_description} size={175} />
)} )}
{isSubmitting && ( {isSubmitting && (
<div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'> <div className='absolute inset-0 flex items-center justify-center rounded-lg bg-white/80 dark:bg-primary-900/80'>
<Spinner withText={false} /> <Spinner withText={false} />
</div> </div>
)} )}
@ -88,7 +88,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
onClick={openFilePicker} onClick={openFilePicker}
type='button' type='button'
className={clsx({ className={clsx({
'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true, 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-lg ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting, 'opacity-50 pointer-events-none': isSubmitting,
})} })}
disabled={isSubmitting} disabled={isSubmitting}

2
packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
View file

@ -28,7 +28,7 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
className={clsx('animate-pulse text-center', className)} className={clsx('animate-pulse text-center', className)}
> >
<div <div
className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800' className='mx-auto block rounded-lg bg-primary-50 dark:bg-primary-800'
style={style} style={style}
/> />

2
packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
View file

@ -17,7 +17,7 @@ const PlaceholderGroupCard = () => {
{/* Group Avatar */} {/* Group Avatar */}
<div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'> <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<div className='size-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' /> <div className='size-16 rounded-lg bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' />
</div> </div>
{/* Group Info */} {/* Group Info */}

2
packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
View file

@ -17,7 +17,7 @@ const PlaceholderGroupSearch = ({ withJoinAction = true }: { withJoinAction?: bo
> >
<HStack alignItems='center' space={2} className='overflow-hidden'> <HStack alignItems='center' space={2} className='overflow-hidden'>
{/* Group Avatar */} {/* Group Avatar */}
<div className='size-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' /> <div className='size-11 rounded-lg bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
<Stack className='text-gray-500 dark:text-gray-700'> <Stack className='text-gray-500 dark:text-gray-700'>
<Text theme='inherit' weight='bold'> <Text theme='inherit' weight='bold'>

2
packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
View file

@ -53,7 +53,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
{group.header && <img className='size-full object-cover' src={group.header} alt={group.header_description} />} {group.header && <img className='size-full object-cover' src={group.header} alt={group.header_description} />}
</label> </label>
<label className='z-[1] mx-auto -mt-10 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'> <label className='z-[1] mx-auto -mt-10 cursor-pointer rounded-lg bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{group.avatar && <Avatar src={group.avatar} alt={group.avatar_description} size={80} />} {group.avatar && <Avatar src={group.avatar} alt={group.avatar_description} size={80} />}
</label> </label>
</Stack> </Stack>

2
packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
View file

@ -114,7 +114,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
component={ProfileDropdownMenu} component={ProfileDropdownMenu}
> >
<button <button
className='w-full rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500' className='w-full rounded-lg focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
type='button' type='button'
> >
{children} {children}