Small design tweaks for create group modal

app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -37,17 +37,17 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
         className={clsx('absolute top-0 h-full w-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
         })}
-        space={3}
+        space={1.5}
         alignItems='center'
         justifyContent='center'
       >
         <Icon
           src={require('@tabler/icons/photo-plus.svg')}
-          className='h-7 w-7'
+          className='h-4.5 w-4.5'
         />
 
-        <Text size='sm' theme='primary' weight='semibold' transform='uppercase'>
-          <FormattedMessage id='compose_event.upload_banner' defaultMessage='Upload photo' />
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
         </Text>
 
         <input
@@ -65,8 +65,8 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
-      {src && <Avatar src={src} size={72} />}
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+      {src && <Avatar src={src} size={80} />}
       <HStack
         alignItems='center'
         justifyContent='center'
@@ -77,7 +77,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
       >
         <Icon
           src={require('@tabler/icons/camera-plus.svg')}
-          className='h-7 w-7 text-white'
+          className='h-5 w-5 text-white'
         />
       </HStack>
       <span className='sr-only'>Upload avatar</span>

app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx

@@ -19,7 +19,7 @@ const PrivacyStep = () => {
     <>
       <Stack className='mx-auto max-w-sm' space={2}>
         <Text size='3xl' weight='bold' align='center'>
-          <FormattedMessage id='manage_group.get_started' defaultMessage="Let's get started!" />
+          <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
         </Text>
         <Text size='lg' theme='muted' align='center'>
           <FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />

app/soapbox/locales/en.json

@@ -892,7 +892,7 @@
   "manage_group.fields.description_placeholder": "Description",
   "manage_group.fields.name_label": "Group name (required)",
   "manage_group.fields.name_placeholder": "Group Name",
-  "manage_group.get_started": "Let's get started!",
+  "manage_group.get_started": "Let’s get started!",
   "manage_group.next": "Next",
   "manage_group.pending_requests": "Pending requests",
   "manage_group.privacy.hint": "These settings cannot be changed later.",