Fix invited user registration form styles (#565)

Author: daveearley

frontend/src/components/layouts/AuthLayout/index.tsx

@@ -50,7 +50,7 @@ const GenericFeatures = () => {
     const allFeatures = [
         {
             icon: IconChartBar,
-            title: t`Smart Dashboard`,
+            title: t`In-depth Analytics`,
             description: t`Track revenue, page views, and sales with detailed analytics and exportable reports`
         },
         {
@@ -65,7 +65,7 @@ const GenericFeatures = () => {
         },
         {
             icon: IconBuildingStore,
-            title: t`Complete Store`,
+            title: t`Sell Anything`,
             description: t`Sell merchandise alongside tickets with integrated tax and promo code support`
         },
         {
@@ -80,12 +80,12 @@ const GenericFeatures = () => {
         },
         {
             icon: IconPalette,
-            title: t`Brand Control`,
+            title: t`Match Your Brand`,
             description: t`Customize your event page and widget design to match your brand perfectly`
         },
         {
             icon: IconWebhook,
-            title: t`Auto Workflow`,
+            title: t`Fully Integrated`,
             description: t`Connect with CRM and automate tasks using webhooks and integrations`
         }
     ];

frontend/src/components/routes/auth/AcceptInvitation/index.tsx

@@ -10,6 +10,7 @@ import {useAcceptInvitation} from "../../../../mutations/useAcceptInvitation.ts"
 import {showError, showSuccess} from "../../../../utilites/notifications.tsx";
 import {AcceptInvitationRequest} from "../../../../types.ts";
 import {Card} from "../../../common/Card";
+import {InputGroup} from "../../../common/InputGroup";
 
 const AcceptInvitation = () => {
     const navigate = useNavigate();
@@ -86,29 +87,38 @@ const AcceptInvitation = () => {
             </Alert>
             <form onSubmit={form.onSubmit(handleSubmit)}>
                 <fieldset disabled={!isFetched}>
-                    <TextInput required {...form.getInputProps('first_name')}
-                               label={t`First Name`}/>
-                    <TextInput required {...form.getInputProps('last_name')}
-                               label={t`Last Name`}/>
-                    <TextInput disabled required {...form.getInputProps('email')} label={t`Email`}/>
+                    <InputGroup>
+                        <TextInput required {...form.getInputProps('first_name')}
+                                   label={t`First Name`}/>
+                        <TextInput required {...form.getInputProps('last_name')}
+                                   label={t`Last Name`}/>
+                    </InputGroup>
 
-                    <Select
-                        required
-                        searchable
-                        data={timezones}
-                        {...form.getInputProps('timezone')}
-                        label={t`Timezone`}
-                        placeholder={t`UTC`}
-                    />
+                    <InputGroup>
+                        <TextInput disabled required {...form.getInputProps('email')} label={t`Email`}/>
 
-                    <PasswordInput {...form.getInputProps('password')} label={t`New Password`} required/>
-                    <PasswordInput {...form.getInputProps('password_confirmation')} label={t`Confirm Password`}
-                                   required/>
+                        <Select
+                            required
+                            searchable
+                            data={timezones}
+                            {...form.getInputProps('timezone')}
+                            label={t`Timezone`}
+                            placeholder={t`UTC`}
+                        />
+                    </InputGroup>
+
+                    <InputGroup>
+                        <PasswordInput {...form.getInputProps('password')} label={t`New Password`} required/>
+                        <PasswordInput {...form.getInputProps('password_confirmation')} label={t`Confirm Password`}
+                                       required/>
+                    </InputGroup>
 
                     <Switch {...form.getInputProps('terms', {type: 'checkbox'})}
                             label={(
                                 <Trans>
-                                    I agree to the <Anchor target={'_blank'} href={'https://hi.events/terms-of-service'}>terms and conditions</Anchor>
+                                    I agree to the <Anchor target={'_blank'}
+                                                           href={'https://hi.events/terms-of-service'}>terms and
+                                    conditions</Anchor>
                                 </Trans>
                             )}/>