Slight tweaks to group creation form (#1223)

* change capitalisation and put group name and institution on their own lines

* reorder form and change size

* tweak email label

* put country after the address as part of the address

* title casing

website/src/components/User/GroupCreationForm.tsx

@@ -56,29 +56,29 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
     };
 
     return (
-        <div className='p-4'>
-            <h2 className='title'>Create a new Group</h2>
+        <div className='p-4 max-w-6xl mx-auto'>
+            <h2 className='title'>Create a new group</h2>
 
             {errorMessage !== undefined && (
                 <ErrorFeedback message={errorMessage} onClose={() => setErrorMessage(undefined)} />
             )}
 
             <form onSubmit={handleCreateGroup}>
-                <div className='border-b border-gray-900/10 pb-12 max-w-6xl'>
+                <div className='border-b border-gray-900/10 pb-12 '>
                     <p className='mt-1 text-sm leading-6 text-gray-600'>
                         Fill out following form to create a new group.
                     </p>
 
                     <div className='mt-5 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6'>
                         <GroupNameInput />
-                        <InstitutionNameInput />
                         <EmailContactInput />
-                        <CountryInput />
+                        <InstitutionNameInput />
                         <AddressLineOneInput />
                         <AddressLineTwoInput />
                         <CityInput />
                         <StateInput />
                         <PostalCodeInput />
+                        <CountryInput />
                     </div>
 
                     <div className='flex justify-end py-8 gap-4 '>
@@ -134,7 +134,7 @@ const fieldMapping = {
 } as const;
 
 const groupCreationCssClass =
-    'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6';
+    'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6';
 
 type LabelledInputContainerProps = PropsWithChildren<{
     label: string;
@@ -180,14 +180,14 @@ const TextInput: FC<TextInputProps> = ({ className, label, name, fieldMappingKey
 );
 
 const GroupNameInput = () => (
-    <TextInput className='sm:col-span-3' type='text' label='Group Name' name='group-name' fieldMappingKey='groupName' />
+    <TextInput className='sm:col-span-4' type='text' label='Group name' name='group-name' fieldMappingKey='groupName' />
 );
 
 const InstitutionNameInput = () => (
     <TextInput
-        className='sm:col-span-3'
+        className='sm:col-span-4'
         type='text'
-        label='Institution name'
+        label='Institution'
         name='institution-name'
         fieldMappingKey='institution'
     />
@@ -197,7 +197,7 @@ const EmailContactInput = () => (
     <TextInput
         className='sm:col-span-4'
         type='email'
-        label='Email address of the group'
+        label='Contact email address'
         name='email'
         fieldMappingKey='contactEmail'
     />
@@ -210,7 +210,7 @@ const CountryInput = () => (
             name='country'
             required={fieldMapping.country.required}
             autoComplete='country-name'
-            className='block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6'
+            className='block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6'
         >
             <option>Choose a country...</option>
             {listOfCountries.map((country) => (