update FilterBar

client/src/components/FilterBar.tsx

@@ -1,5 +1,9 @@
 import React, { FC, ChangeEvent, MouseEvent } from "react";
 import { useRouteMatch } from "react-router-dom";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import { Grid } from "@material-ui/core";
+// import { AccountCircle, FilterList, FilterListSharp } from "@material-ui/icons";
 
 type IProps = {
   filterText: string;
@@ -7,35 +11,42 @@ type IProps = {
   clearFilterText: (e: MouseEvent<HTMLInputElement>) => void;
 };
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      "& > *": {
+        margin: theme.spacing(1),
+        width: "25ch"
+      }
+    },
+    margin: {
+      margin: theme.spacing(1)
+    }
+  })
+);
+
 export const FilterBar: FC<IProps> = ({
   filterText,
-  handleChange,
-  clearFilterText
+  handleChange
+  // clearFilterText
 }) => {
   const { url } = useRouteMatch();
   const placeholder: string = url.split("/")[3] || "users";
+  const classes = useStyles();
   return (
-    <>
-      <div className="nav-wrapper">
-        <div className="input-field">
-          <input
-            //   className="validate"
-            id="filter"
-            type="search"
-            required
-            name="filter"
+    <div className={classes.margin}>
+      <Grid container spacing={1} alignItems="flex-end">
+        <Grid item>
+          <TextField
+            id="input-with-icon-grid"
+            variant="outlined"
+            label={`Filter ${placeholder}`}
+            size="small"
             value={filterText}
-            placeholder={`Filter ${placeholder}`}
             onChange={handleChange}
           />
-          <label className="label-icon" htmlFor="search">
-            <i className="material-icons">filter_list</i>
-          </label>
-          <i className="material-icons" onClick={clearFilterText}>
-            close
-          </i>
-        </div>
-      </div>
-    </>
+        </Grid>
+      </Grid>
+    </div>
   );
 };

client/src/components/ProjectList.tsx

@@ -6,6 +6,7 @@ import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { HttpResponse } from "../types/HttpResponse";
 import { Project } from "../types/Project";
+import { Container, Typography, Grid } from "@material-ui/core";
 
 type IProps = {
   projects: Project[];
@@ -28,14 +29,20 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
   );
   return (
     <>
-      <div className="row valign-wrapper">
-        <h3>Projects</h3>
-        <FilterBar
-          filterText={filterText}
-          handleChange={handleChange}
-          clearFilterText={clearFilterText}
-        />
-      </div>
+      <Grid container>
+        <Grid item xs>
+          <Typography variant="h4" component="h4">
+            Projects
+          </Typography>
+        </Grid>
+        <Grid item xs={4}>
+          <FilterBar
+            filterText={filterText}
+            handleChange={handleChange}
+            clearFilterText={clearFilterText}
+          />
+        </Grid>
+      </Grid>
       <div className="col s12 grey lighten-1">
         <ul>
           {filteredTickets.length === 0 ? (