new login design (#4442)

* new login design

* remove effects file (wrong direction)

* add Known Hosts dropdown component

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

webclient/src/components/InputField/InputField.css

@@ -0,0 +1,20 @@
+.inputField {
+  position: relative;
+}
+
+.inputField-validation {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateY(-50%);
+  font-weight: bold;
+}
+
+.inputField-error {
+  display: flex;
+  align-items: center;
+}
+
+.inputField-error svg {
+  margin-left: 4px;
+}

webclient/src/components/InputField/InputField.tsx

@@ -1,17 +1,47 @@
 import React from "react";
+import { styled } from '@material-ui/core/styles';
 import TextField from "@material-ui/core/TextField";
+import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
 
-const InputField = ({ input, label, name, autoComplete, type }) => (
-  <TextField
-    variant="outlined"
-    margin="dense"
-    fullWidth={true}
-    label={label}
-    name={name}
-    type={type}
-    autoComplete={autoComplete}
-    { ...input }
-  />
+import './InputField.css';
+
+const InputField = ({ input, label, name, autoComplete, type, meta: { touched, error, warning } }) => (
+  <div className="inputField">
+    { touched && (
+      <div className="inputField-validation">
+        {
+          ( error &&
+            <ThemedFieldError className="inputField-error">
+              {error}
+              <ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
+            </ThemedFieldError>
+          ) ||
+
+          ( warning && <ThemedFieldWarning className="inputField-warning">{warning}</ThemedFieldWarning> )
+        }
+      </div>
+    ) }
+
+    <TextField
+      className="rounded"
+      variant="outlined"
+      margin="dense"
+      fullWidth={true}
+      label={label}
+      name={name}
+      type={type}
+      autoComplete={autoComplete}
+      { ...input }
+    />
+  </div>
 );
 
+const ThemedFieldError = styled('div')(({ theme }) => ({
+  color: theme.palette.error.main
+}));
+
+const ThemedFieldWarning = styled('div')(({ theme }) => ({
+  color: theme.palette.warning.main
+}));
+
 export default InputField;