Major changes to UI

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# Sentry
+.sentryclirc

components/Button.tsx

@@ -2,7 +2,7 @@ import React, { MouseEventHandler } from "react";
 
 export interface ButtonProps {
   type: "button" | "submit" | "reset";
-  onClick: MouseEventHandler<HTMLButtonElement>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 

components/Category.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from "react";
+
+export interface CategoryProps {
+  id: string;
+  name: string;
+  icon: string | React.ReactElement;
+}
+
+const Category: React.FC<CategoryProps> = (props) => {
+  return (
+    <div className="flex flex-col justify-center items-center w-24 h-24 bg-blue-100 rounded-lg">
+      <span className="text-3xl">{props.icon}</span>
+      <h1>{props.name}</h1>
+    </div>
+  );
+};
+
+export default memo(Category);

components/EmojiPicker.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useField } from "formik";
+import Picker, { IEmojiData } from "emoji-picker-react";
+
+export interface EmojiPickerProps {
+  name: string;
+}
+
+const EmojiPicker: React.FC<EmojiPickerProps> = (props) => {
+  const [field, meta, helpers] = useField(props.name);
+
+  const onSelect = (
+    event: React.MouseEvent<Element, MouseEvent>,
+    data: IEmojiData
+  ) => {
+    console.log(data);
+    helpers.setValue(data.emoji);
+  };
+
+  return (
+    <div className="w-full flex flex-row justify-center mb-2">
+      <Picker onEmojiClick={onSelect} disableSkinTonePicker />
+    </div>
+  );
+};
+
+export default EmojiPicker;

components/Input.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { FieldInputProps } from "formik";
 import { classNames, fieldHasError } from "utils";
 
@@ -17,15 +18,17 @@ export interface InputProps {
 
 const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
   return (
-    <div className="form-group">
+    <Fragment>
       {props.label && (
-        <label className="form-label" htmlFor={`input-${props.name}`}>
+        <label className="" htmlFor={`input-${props.name}`}>
           {props.label}
         </label>
       )}
       <input
         className={classNames(
-          `form-control ${props.className || ""}`,
+          `mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${
+            props.className || ""
+          }`,
           fieldHasError(props) ? "is-invalid" : ""
         )}
         id={`input-${props.name}`}
@@ -43,7 +46,7 @@ const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
       {fieldHasError(props) && (
         <div className="invalid-feedback">{props.errors[props.name]}</div>
       )}
-    </div>
+    </Fragment>
   );
 };
 

components/MobileNavbar.tsx

@@ -1,39 +1,92 @@
-import React from "react";
+import React, { Fragment, useState } from "react";
 import Link from "next/link";
-import { House, Add } from "@mui/icons-material";
+import { useRouter } from "next/router";
+import classNames from "classnames";
+import { gql, useMutation } from "@apollo/client";
+import { Dialog } from "@headlessui/react";
+import {
+  House,
+  TableRows,
+  Insights,
+  AccountCircle,
+  Add,
+} from "@mui/icons-material";
+import TransactionForm, { TransactionFormValues } from "forms/TransactionForm";
+
+const ADD_TRANSACTION = gql`
+  mutation AddTransaction($input: TransactionInput!) {
+    addTransaction(input: $input) {
+      id
+    }
+  }
+`;
 
 const MobileNavbar: React.FC = () => {
+  const { pathname } = useRouter();
+  const [addTransaction] = useMutation(ADD_TRANSACTION, {});
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const onNewTransaction = async (values: TransactionFormValues) => {
+    console.log(values);
+  };
+
   return (
-    <div className="w-full h-12 absolute bottom-0 shadow-reversed bg-white">
-      <div className="h-full flex flex-row items-center justify-between px-4">
-        <Link href="/">
-          <a className="">
-            <House />
-          </a>
-        </Link>
-        <Link href="/">
-          <a className="">
-            <House />
-          </a>
-        </Link>
-        <button
-          type="button"
-          className="w-12 h-12 rounded-full drop-shadow-xl mb-12 bg-gradient-to-br from-ikura-light to-ikura-dark text-white"
-        >
-          <Add />
-        </button>
-        <Link href="/">
-          <a className="">
-            <House />
-          </a>
-        </Link>
-        <Link href="/">
-          <a className="">
-            <House />
-          </a>
-        </Link>
+    <Fragment>
+      <div className="w-full h-12 absolute bottom-0 shadow-reversed bg-white">
+        <div className="h-full flex flex-row items-center justify-between px-6">
+          <Link href="/">
+            <a
+              className={classNames("", {
+                "text-ikura-dark": pathname === "/",
+              })}
+            >
+              <House />
+            </a>
+          </Link>
+          <Link href="/transactions">
+            <a
+              className={classNames("", {
+                "text-ikura-dark": pathname.startsWith("/transaction"),
+              })}
+            >
+              <TableRows />
+            </a>
+          </Link>
+          <button
+            type="button"
+            className="w-12 h-12 rounded-full drop-shadow-xl mb-12 bg-gradient-to-br from-ikura-light to-ikura-dark text-white"
+            onClick={() => setOpen(true)}
+          >
+            <Add />
+          </button>
+          <Link href="/analytics">
+            <a
+              className={classNames("", {
+                "text-ikura-dark": pathname.startsWith("/analytics"),
+              })}
+            >
+              <Insights />
+            </a>
+          </Link>
+          <Link href="/account">
+            <a
+              className={classNames("", {
+                "text-ikura-dark": pathname.startsWith("/account"),
+              })}
+            >
+              <AccountCircle />
+            </a>
+          </Link>
+        </div>
       </div>
-    </div>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <Dialog.Overlay className="z-40 fixed inset-0 bg-black opacity-30" />
+        <div className="flex flex-col items-start z-50 w-11/12 absolute top-0 m-4 p-4 bg-white rounded-md shadow-xl">
+          <TransactionForm onSubmit={onNewTransaction} initialValues={{}} />
+        </div>
+      </Dialog>
+    </Fragment>
   );
 };