bins page now has the add bin button

src/bin/AddBinFab.tsx

@@ -0,0 +1,59 @@
+import { Fab, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import AddBinIcon from "assets/products/bindapt/addBin.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useMobile } from "hooks";
+
+interface Props {
+  onClick: () => void;
+  pulse: boolean;
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const yellow = "#ffea00";
+  return ({
+    "@keyframes pulsate": {
+      to: {
+        boxShadow: "0 0 0 16px" + yellow + "00"
+      }
+    },
+    fab: {
+      background: yellow,
+      "&:hover": {
+        background: yellow
+      },
+      "&:focus": {
+        background: yellow
+      },
+      position: "fixed",
+      bottom: theme.spacing(8), //for mobile navigator
+      right: theme.spacing(2),
+      [theme.breakpoints.up("sm")]: {
+        bottom: theme.spacing(2)
+      }
+    },
+    pulse: {
+      boxShadow: "0 0 0 0 " + yellow + "75",
+      animation: "$pulsate 1.75s infinite cubic-bezier(0.66, 0.33, 0, 1)"
+    }
+  });
+});
+
+export default function AddBinFab(props: Props) {
+  const { onClick, pulse } = props;
+  const classes = useStyles();
+  const isMobile = useMobile();
+
+  const pulseString = pulse ? classes.pulse : "";
+  const classString = classes.fab + " " + pulseString;
+
+  return (
+    <Fab
+      onClick={onClick}
+      aria-label="Create Bin"
+      className={classString}
+      size={isMobile ? "medium" : "large"}>
+      <ImgIcon alt="Create Bin" src={AddBinIcon} />
+    </Fab>
+  );
+}