Login component update

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .eslintcache
+debug.log

src/App.css

@@ -2,17 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -23,16 +12,3 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/features/login/components/LoginComponent.js

@@ -1,7 +1,45 @@
 import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { TextField, InputAdornment } from "@material-ui/core";
+import { AccountCircleOutlined, LockOutlined } from "@material-ui/icons";
+
+const useStyles = makeStyles((theme) => ({
+  margin: {
+    margin: theme.spacing(1),
+  },
+}));
 
 const LoginComponent = () => {
-  return <div>TEST</div>;
+  const classes = useStyles();
+  return (
+    <div>
+      <TextField
+        className={classes.margin}
+        id="username"
+        label="Username"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <AccountCircleOutlined />
+            </InputAdornment>
+          ),
+        }}
+      />
+      <br />
+      <TextField
+        className={classes.margin}
+        id="password"
+        label="Password"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <LockOutlined />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </div>
+  );
 };
 
 export default LoginComponent;