From febe029ed4dd879ec1d5adf37e6217b4135a479f Mon Sep 17 00:00:00 2001
From: Jeremy Letto <jletto87@gmail.com>
Date: Sun, 30 Jan 2022 19:47:10 -0600
Subject: [PATCH] use CompanyDropdown component in registration form (#4548)

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
---
 .../src/components/CountryDropdown/CountryDropdown.tsx     | 4 +++-
 webclient/src/forms/RegisterForm/RegisterForm.tsx          | 4 ++--
 webclient/src/material-theme.ts                            | 7 +++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/webclient/src/components/CountryDropdown/CountryDropdown.tsx b/webclient/src/components/CountryDropdown/CountryDropdown.tsx
index 0d34318c..8e322b9c 100644
--- a/webclient/src/components/CountryDropdown/CountryDropdown.tsx
+++ b/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>
diff --git a/webclient/src/forms/RegisterForm/RegisterForm.tsx b/webclient/src/forms/RegisterForm/RegisterForm.tsx
index 342e6024..ac2f7f4a 100644
--- a/webclient/src/forms/RegisterForm/RegisterForm.tsx
+++ b/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
diff --git a/webclient/src/material-theme.ts b/webclient/src/material-theme.ts
index 37055f7a..9faec010 100644
--- a/webclient/src/material-theme.ts
+++ b/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)',
       },
     },