From 5fe4a379084bc21fbfcae0dcd5f8a648d0de9506 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Mon, 23 Aug 2021 22:42:24 +0200
Subject: [PATCH] added floating action button props to <Button> and using it
 in event types on mobile

---
 components/ui/Button.tsx    |  8 ++++++--
 pages/event-types/index.tsx | 10 +++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 6733bc88..889d987d 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -9,7 +9,7 @@ type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
 export type ButtonProps = {
   color?: "primary" | "secondary" | "minimal";
-  size?: "base" | "sm" | "lg";
+  size?: "base" | "sm" | "lg" | "fab";
   loading?: boolean;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -41,11 +41,15 @@ export const Button = function Button(props: ButtonProps) {
       disabled,
       className: classNames(
         // base styles independent what type of button it is
-        "inline-flex items-center relative",
+        "inline-flex items-center",
         // different styles depending on size
         size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
         size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
         size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
+        // turn button into a floating action button (fab)
+        size === "fab" ? "fixed" : "relative",
+        size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
+
         // different styles depending on color
         color === "primary" &&
           (disabled
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 97d33db3..3efd6754 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -83,9 +83,17 @@ export default function Availability({ user, types }) {
           router.push({ pathname: router.pathname, query: newQuery });
         }
       }}>
-      <Button className="mt-2" StartIcon={PlusIcon} href={{ query: { ...router.query, new: "1" } }}>
+      <Button
+        className="mt-2 hidden sm:block"
+        StartIcon={PlusIcon}
+        href={{ query: { ...router.query, new: "1" } }}>
         New event type
       </Button>
+
+      <Button size="fab" className="block sm:hidden" href={{ query: { ...router.query, new: "1" } }}>
+        <PlusIcon className="w-8 h-8 text-white" />
+      </Button>
+
       <DialogContent>
         <div className="mb-8">
           <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">