public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added floating action button props to <Button> and using it in event types on mobile

pull/515/head
Peer Richelsen 2021-08-23 22:42:24 +02:00
parent 21b3134e1f
commit 5fe4a37908
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/ui/Button.tsx
View File

@ -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

10
pages/event-types/index.tsx
View File

@ -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">