use CompanyDropdown component in registration form (#4548)

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/CountryDropdown/CountryDropdown.tsx

@@ -7,9 +7,11 @@ import { Images } from 'images/Images';
 import './CountryDropdown.css';
 import { CountryLabel } from 'types';
 
-const CountryDropdown = ({ onChange }) => {
+const CountryDropdown = ({ input: { onChange } }) => {
   const [state, setState] = useState('');
 
+  useEffect(() => onChange(state), [state]);
+
   return (
     <FormControl variant='outlined' className='CountryDropdown'>
       <InputLabel id='CountryDropdown-select'>Country</InputLabel>

webclient/src/forms/RegisterForm/RegisterForm.tsx

@@ -8,7 +8,7 @@ import setFieldTouched from 'final-form-set-field-touched'
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-import { InputField, KnownHosts } from 'components';
+import { CountryDropdown, InputField, KnownHosts } from 'components';
 import { useReduxEffect } from 'hooks';
 import { ServerTypes } from 'store';
 import { FormKey } from 'types';
@@ -131,7 +131,7 @@ const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
                   <OnChange name="email">{onEmailChange}</OnChange>
                 </div>
                 <div className="RegisterForm-item">
-                  <Field label="Country" name="country" component={InputField} />
+                  <Field label="Country" name="country" component={CountryDropdown} />
                 </div>
                 <Button className="RegisterForm-submit tall" color="primary" variant="contained" type="submit">
                   Register

webclient/src/material-theme.ts

@@ -97,6 +97,13 @@ export const materialTheme = createTheme({
         fontSize: 12,
         fontWeight: 'bold',
         color: palette.primary.main,
+
+      },
+    },
+
+    MuiInputLabel: {
+      outlined: {
+        transform: 'translate(1em, 1em) scale(1)',
       },
     },