From 4935b0820aaaa185980c9a900bce61ea6ae0ae7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 25 Nov 2024 19:01:20 +0100
Subject: [PATCH] pl-fe: make avatars squared
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx                 | 4 ++--
 packages/pl-fe/src/components/groups/group-avatar.tsx     | 2 +-
 packages/pl-fe/src/components/ui/avatar.tsx               | 4 ++--
 .../features/edit-profile/components/avatar-picker.tsx    | 8 ++------
 .../pl-fe/src/features/group/components/group-header.tsx  | 2 +-
 .../features/onboarding/steps/avatar-selection-step.tsx   | 6 +++---
 .../placeholder/components/placeholder-avatar.tsx         | 2 +-
 .../placeholder/components/placeholder-group-card.tsx     | 2 +-
 .../placeholder/components/placeholder-group-search.tsx   | 2 +-
 .../modals/manage-group-modal/steps/confirmation-step.tsx | 2 +-
 .../pl-fe/src/features/ui/components/profile-dropdown.tsx | 2 +-
 11 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index df494d985..ba4434a90 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -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
diff --git a/packages/pl-fe/src/components/groups/group-avatar.tsx b/packages/pl-fe/src/components/groups/group-avatar.tsx
index 4ffeacf86..110d5c8a8 100644
--- a/packages/pl-fe/src/components/groups/group-avatar.tsx
+++ b/packages/pl-fe/src/components/groups/group-avatar.tsx
@@ -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,
diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
index 96bb46867..7374c1f9e 100644
--- a/packages/pl-fe/src/components/ui/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -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)}
diff --git a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
index 890e3f710..59944537f 100644
--- a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
@@ -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,
         })}
       >
diff --git a/packages/pl-fe/src/features/group/components/group-header.tsx b/packages/pl-fe/src/features/group/components/group-header.tsx
index b520c4896..051578008 100644
--- a/packages/pl-fe/src/features/group/components/group-header.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header.tsx
@@ -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>
diff --git a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
index be2008979..0e8591c6a 100644
--- a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -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}
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
index 9c6486b6d..ede9fa296 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
@@ -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}
       />
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
index cd6262d2e..46cad7d0e 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
@@ -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 */}
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
index b4528d597..b674e3462 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
@@ -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'>
diff --git a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index e5b3c8412..edca3dc38 100644
--- a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -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>
diff --git a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
index cc661fb64..e6053fa2a 100644
--- a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
@@ -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}