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}>
<HStack alignItems={actionAlignment} space={3} justifyContent='between'>
<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} />
{emoji && (
<Emoji
@ -259,7 +259,7 @@ const Account = ({
condition={showAccountHoverCard}
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} />
{emoji && (
<Emoji

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

@ -18,7 +18,7 @@ const GroupAvatar = (props: IGroupAvatar) => {
return (
<Avatar
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,
'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,

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

@ -39,7 +39,7 @@ const Avatar = (props: IAvatar) => {
width: 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
src={require('@tabler/icons/outline/photo-off.svg')}
@ -51,7 +51,7 @@ const Avatar = (props: IAvatar) => {
return (
<StillImage
className={clsx('rounded-full', className)}
className={clsx('rounded-lg', className)}
style={style}
src={src}
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
ref={picker}
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,
'ring-white dark:ring-primary-900': !isDraggedOver,
'ring-offset-2 ring-primary-600': isDraggedOver,
@ -71,9 +69,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
<HStack
alignItems='center'
justifyContent='center'
className={clsx('absolute left-0 top-0 size-full transition-opacity', {
'rounded-lg': onChangeDescription,
'rounded-full': !onChangeDescription,
className={clsx('absolute left-0 top-0 size-full rounded-lg transition-opacity', {
'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'>
<div className='relative flex'>
<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>
</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.' />}
>
<Stack space={10}>
<div className='relative mx-auto rounded-full bg-gray-200'>
<div className='relative mx-auto rounded-lg bg-gray-200'>
{account && (
<Avatar src={selectedFile || account.avatar} alt={account.avatar_description} size={175} />
)}
{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} />
</div>
)}
@ -88,7 +88,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
onClick={openFilePicker}
type='button'
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,
})}
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)}
>
<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}
/>

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

@ -17,7 +17,7 @@ const PlaceholderGroupCard = () => {
{/* Group Avatar */}
<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>
{/* 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'>
{/* 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'>
<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} />}
</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} />}
</label>
</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}
>
<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'
>
{children}