updated styling

src/components/Fields/Date.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import DateFnsUtils from "@date-io/date-fns";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 
 import { FieldType } from ".";
 import {
   MuiPickersUtilsProvider,
-  // KeyboardTimePicker,
-  // KeyboardDatePicker,
   DatePicker,
   DateTimePicker,
 } from "@material-ui/pickers";
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    field: {
+      width: "100%",
+    },
+  })
+);
 // TODO: Create an interface for props
 interface Props {
   value: firebase.firestore.Timestamp | null;
@@ -20,6 +26,8 @@ interface Props {
 }
 
 const Date = (props: Props) => {
+  const classes = useStyles();
+
   const { value, row, onSubmit, fieldType, isScrolling } = props;
   //if (isScrolling) return <div />;
   function handleDateChange(date: Date | null) {
@@ -32,6 +40,7 @@ const Date = (props: Props) => {
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
       {fieldType === FieldType.date ? (
         <DatePicker
+          className={classes.field}
           value={value ? value.toDate() : null}
           onChange={handleDateChange}
           format="dd/MM/yy"

src/components/Fields/DocSelect.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import SearchIcon from "@material-ui/icons/Search";
+import AddIcon from "@material-ui/icons/AddCircle";
 import IconButton from "@material-ui/core/IconButton";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Chip from "@material-ui/core/Chip";
@@ -70,7 +70,7 @@ const DocSelect = (props: Props) => {
   return (
     <div className={classes.root}>
       <IconButton onClick={handleClick}>
-        <SearchIcon />
+        <AddIcon />
       </IconButton>
       {value &&
         value.map((doc: any, index: number) => (

src/components/Fields/MultiSelect.tsx

@@ -1,13 +1,7 @@
 import React from "react";
-import EditIcon from "@material-ui/icons/Edit";
-import WarningIcon from "@material-ui/icons/Warning";
+
 import { Select } from "@material-ui/core";
-import {
-  createStyles,
-  makeStyles,
-  useTheme,
-  Theme,
-} from "@material-ui/core/styles";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 
 import Input from "@material-ui/core/Input";
 import Grid from "@material-ui/core/Grid";
@@ -21,10 +15,8 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       flexWrap: "wrap",
     },
-    formControl: {
-      margin: theme.spacing(1),
-      minWidth: 120,
-      maxWidth: 300,
+    select: {
+      width: "100%",
     },
     chips: {
       display: "flex",
@@ -82,6 +74,7 @@ const MultiSelect = (props: Props) => {
   if (options && options.length !== 0)
     return (
       <Select
+        className={classes.select}
         multiple
         value={value ? value : []}
         defaultValue={[]}