From f49c9bf220db0c2aec03ca5a12177c0e092ce647 Mon Sep 17 00:00:00 2001 From: Adam Jackson Date: Mon, 29 Jun 2026 07:41:41 -0700 Subject: [PATCH] Major button refactoring --- frontend/components/AcceptError.tsx | 4 +- frontend/components/AuthForm.tsx | 13 +- frontend/components/Button.tsx | 84 ------------- frontend/components/DirectionsButton.tsx | 6 +- frontend/components/EmailChangeForm.tsx | 25 +++- frontend/components/EmptyState.tsx | 24 ++++ frontend/components/GoogleIcon.tsx | 26 ---- frontend/components/Header.tsx | 4 +- frontend/components/HomeHeader.tsx | 8 +- frontend/components/HotspotTargets.tsx | 4 +- frontend/components/InputNotesSimple.tsx | 8 +- frontend/components/ItineraryDay.tsx | 6 +- frontend/components/LifelistCard.tsx | 4 +- frontend/components/MerlinLink.tsx | 20 --- frontend/components/ObsList.tsx | 4 +- frontend/components/ParticipantRow.tsx | 4 +- frontend/components/RecentChecklistList.tsx | 4 +- frontend/components/RecentSpeciesList.tsx | 4 +- frontend/components/RegionFields.tsx | 4 +- frontend/components/Search.tsx | 37 ------ frontend/components/Submit.tsx | 15 --- frontend/components/ui/button.tsx | 133 ++++++++++++++------ frontend/components/ui/tabs.tsx | 81 ++++++++++++ frontend/hooks/useConfirmNavigation.ts | 23 ---- frontend/hooks/useWindowActive.ts | 23 ---- frontend/modals/AddParticipant.tsx | 8 +- frontend/modals/AddPlace.tsx | 4 +- frontend/modals/DeleteAccount.tsx | 6 +- frontend/modals/GenerateMagicLink.tsx | 16 ++- frontend/modals/Hotspot.tsx | 99 +++++++-------- frontend/modals/InviteAsEditor.tsx | 6 +- frontend/modals/ManageLifelist.tsx | 4 +- frontend/modals/Marker.tsx | 6 +- frontend/modals/OpenBirding.tsx | 8 +- frontend/pages/[tripId]/itinerary.tsx | 8 +- frontend/pages/[tripId]/lifelist.tsx | 4 +- frontend/pages/[tripId]/participants.tsx | 6 +- frontend/pages/[tripId]/settings.tsx | 6 +- frontend/pages/[tripId]/targets.tsx | 43 +++---- frontend/pages/accept/[inviteId].tsx | 10 +- frontend/pages/account.tsx | 89 ++++++------- frontend/pages/admin.tsx | 4 +- frontend/pages/contact.tsx | 20 ++- frontend/pages/create.tsx | 24 ++-- frontend/pages/import-lifelist.tsx | 7 +- frontend/pages/index.tsx | 6 +- frontend/pages/magic/[token].tsx | 10 +- frontend/pages/onboarding.tsx | 13 +- frontend/pages/trips.tsx | 6 +- 49 files changed, 456 insertions(+), 525 deletions(-) delete mode 100644 frontend/components/Button.tsx create mode 100644 frontend/components/EmptyState.tsx delete mode 100644 frontend/components/GoogleIcon.tsx delete mode 100644 frontend/components/MerlinLink.tsx delete mode 100644 frontend/components/Search.tsx delete mode 100644 frontend/components/Submit.tsx create mode 100644 frontend/components/ui/tabs.tsx delete mode 100644 frontend/hooks/useConfirmNavigation.ts delete mode 100644 frontend/hooks/useWindowActive.ts diff --git a/frontend/components/AcceptError.tsx b/frontend/components/AcceptError.tsx index 864373d9..86272bbe 100644 --- a/frontend/components/AcceptError.tsx +++ b/frontend/components/AcceptError.tsx @@ -1,6 +1,6 @@ import React from "react"; import Alert from "components/Alert"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; type Props = { title: string; @@ -19,7 +19,7 @@ export default function AcceptError({ title, message, onRetry, retrying, childre
{onRetry && ( - )} diff --git a/frontend/components/AuthForm.tsx b/frontend/components/AuthForm.tsx index 5f75a70e..b4c321a8 100644 --- a/frontend/components/AuthForm.tsx +++ b/frontend/components/AuthForm.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Link, useNavigate } from "react-router-dom"; import Input from "components/Input"; import Field from "components/Field"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Alert from "components/Alert"; import useRequestCode from "hooks/useRequestCode"; import useVerifyCode from "hooks/useVerifyCode"; @@ -126,8 +126,15 @@ export default function AuthForm({ heading, message, email: initialEmail, lockEm )} - {step === "code" && ( diff --git a/frontend/components/Button.tsx b/frontend/components/Button.tsx deleted file mode 100644 index 4bba9138..00000000 --- a/frontend/components/Button.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "lib/utils"; - -const buttonVariants = cva("font-semibold rounded", { - variants: { - color: { - default: "bg-gray-300 text-gray-700", - gray: "text-secondary-foreground bg-secondary", - red: "bg-red-600 hover:bg-red-700 text-white", - grayOutline: "border border-input hover:bg-secondary transition-colors text-secondary-foreground", - primary: "bg-primary text-primary-foreground hover:bg-primary-hover transition-colors", - pillPrimary: - "bg-primary text-primary-foreground hover:bg-primary-hover transition-colors rounded-full shadow-lg shadow-primary/30", - pillOutlineGray: - "bg-transparent text-secondary-foreground border border-input hover:bg-gray-50 transition-colors rounded-full", - pillWhite: "bg-white text-secondary-foreground hover:bg-gray-50 transition-colors rounded-full shadow-md", - link: "text-link font-medium", - linkBold: "text-link font-bold", - linkDanger: "text-red-700 hover:text-red-800", - pillOutlineAmber: - "bg-transparent text-amber-600 border border-amber-600 hover:bg-amber-500/5 transition-colors rounded-full", - }, - size: { - lg: "text-lg py-2.5 px-4.5", - md: "text-md py-2 px-5", - pill: "text-sm py-3 px-6", - smPill: "text-[14px] py-1.5 px-4", - sm: "text-[14px] py-1.5 px-2.5", - xs: "text-[12px] py-0.5 px-1.5", - xsPill: "text-[12px] py-1.5 px-3", - none: "", - }, - }, - defaultVariants: { - color: "default", - size: "md", - }, -}); - -type Props = VariantProps & { - className?: string; - type?: "submit" | "reset" | "button" | undefined; - disabled?: boolean; - href?: string; - children: React.ReactNode; - [x: string]: any; -}; - -export default function Button({ - className, - disabled, - type = "button", - color, - size, - href, - children, - ...props -}: Props) { - const classes = cn( - buttonVariants({ color, size: color === "link" || color === "linkBold" ? "none" : size }), - disabled && "opacity-60", - className - ); - - if (href) { - return /^(https?:|mailto:|tel:|om:)/.test(href) ? ( - - {children} - - ) : ( - - {children} - - ); - } - - return ( - - ); -} diff --git a/frontend/components/DirectionsButton.tsx b/frontend/components/DirectionsButton.tsx index fce9921f..e7ae144a 100644 --- a/frontend/components/DirectionsButton.tsx +++ b/frontend/components/DirectionsButton.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import SlideOver from "components/SlideOver"; import { useTrip } from "hooks/useTrip"; import MarkerWithIcon from "components/MarkerWithIcon"; @@ -29,9 +29,9 @@ export default function DirectionsButton({ lat, lng, hotspotId, markerId, google return ( <> ) : ( @@ -100,8 +107,16 @@ export default function EmailChangeForm({ currentEmail }: Props) { />
- ) : ( <> - - diff --git a/frontend/components/HotspotTargets.tsx b/frontend/components/HotspotTargets.tsx index 57181426..7a62f3c4 100644 --- a/frontend/components/HotspotTargets.tsx +++ b/frontend/components/HotspotTargets.tsx @@ -1,7 +1,7 @@ import React from "react"; import { useTrip } from "hooks/useTrip"; import Icon from "components/Icon"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import HotspotTargetRow from "components/HotspotTargetRow"; import SelectDropdown from "components/SelectDropdown"; import useTargetView from "hooks/useTargetView"; @@ -57,7 +57,7 @@ export default function HotspotTargets({ hotspotId, onSpeciesClick }: Props) { Failed to load targets - diff --git a/frontend/components/InputNotesSimple.tsx b/frontend/components/InputNotesSimple.tsx index 3dee89fd..a9084cf4 100644 --- a/frontend/components/InputNotesSimple.tsx +++ b/frontend/components/InputNotesSimple.tsx @@ -1,6 +1,6 @@ import React from "react"; import TextareaAutosize from "react-textarea-autosize"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; type Props = { value?: string; @@ -42,20 +42,20 @@ export default function InputNotesSimple({ value, onBlur, className, canEdit, sh {!inEditMode && canEdit && ( )} {showDone && inEditMode && ( - )} diff --git a/frontend/components/ItineraryDay.tsx b/frontend/components/ItineraryDay.tsx index 644a5285..1a085538 100644 --- a/frontend/components/ItineraryDay.tsx +++ b/frontend/components/ItineraryDay.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import { useTrip } from "hooks/useTrip"; import dayjs from "dayjs"; import { useModal } from "stores/modals"; @@ -192,10 +192,10 @@ export default function ItineraryDay({ day, dayIndex, isEditing }: PropsT) { )} {isEditing && (
- -
diff --git a/frontend/components/LifelistCard.tsx b/frontend/components/LifelistCard.tsx index 304a610c..76638606 100644 --- a/frontend/components/LifelistCard.tsx +++ b/frontend/components/LifelistCard.tsx @@ -1,6 +1,6 @@ import React from "react"; import toast from "react-hot-toast"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Icon from "components/Icon"; import { parseLifelistCsv } from "lib/lifelistCsv"; @@ -48,7 +48,7 @@ export default function LifelistCard({ label, count, onImport, onRemove, disable
diff --git a/frontend/components/ParticipantRow.tsx b/frontend/components/ParticipantRow.tsx index 1157e1cc..9dc4deb8 100644 --- a/frontend/components/ParticipantRow.tsx +++ b/frontend/components/ParticipantRow.tsx @@ -8,7 +8,7 @@ import { useModal } from "stores/modals"; import useMutation from "hooks/useMutation"; import ParticipantOptionsDropdown, { ParticipantMenuItem } from "components/ParticipantOptionsDropdown"; import Badge from "components/Badge"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Avatar from "components/Avatar"; import { avatarFromParticipant } from "lib/avatar"; import { Feather, Pencil, Mail, Trash2 } from "lucide-react"; @@ -105,7 +105,7 @@ export default function ParticipantRow({ participant: p }: Props) { {canChangeList && ( <> – - diff --git a/frontend/components/RecentChecklistList.tsx b/frontend/components/RecentChecklistList.tsx index 326d2782..5941fb5b 100644 --- a/frontend/components/RecentChecklistList.tsx +++ b/frontend/components/RecentChecklistList.tsx @@ -2,7 +2,7 @@ import React from "react"; import dayjs from "dayjs"; import { dateTimeToRelative } from "lib/helpers"; import { useTrip } from "hooks/useTrip"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import useFetchRecentChecklists from "hooks/useFetchRecentChecklists"; import useFetchRecentSpecies from "hooks/useFetchRecentSpecies"; import useFetchHotspotObs from "hooks/useFetchHotspotObs"; @@ -177,7 +177,7 @@ export default function RecentChecklistList({ hotspotId, speciesCode, speciesNam Failed to load recent checklists - diff --git a/frontend/components/RecentSpeciesList.tsx b/frontend/components/RecentSpeciesList.tsx index a8a2cd3a..5f670804 100644 --- a/frontend/components/RecentSpeciesList.tsx +++ b/frontend/components/RecentSpeciesList.tsx @@ -4,7 +4,7 @@ import useFetchRecentSpecies from "hooks/useFetchRecentSpecies"; import { dateTimeToRelative } from "lib/helpers"; import { useTrip } from "hooks/useTrip"; import Icon from "components/Icon"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Alert from "components/Alert"; type Props = { @@ -90,7 +90,7 @@ export default function RecentSpeciesList({ locId, onSpeciesClick }: Props) { Failed to load recent species - diff --git a/frontend/components/RegionFields.tsx b/frontend/components/RegionFields.tsx index c947718d..64e4efc3 100644 --- a/frontend/components/RegionFields.tsx +++ b/frontend/components/RegionFields.tsx @@ -1,7 +1,7 @@ import React from "react"; import RegionSelect from "components/RegionSelect"; import Field from "components/Field"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import { Input } from "components/ui/input"; import { RegionFieldsValue, requiresSubregion } from "lib/region"; @@ -17,7 +17,7 @@ export default function RegionFields({ value, onChange }: Props) { const toggleButton = ( - )} -
- ); -} diff --git a/frontend/components/Submit.tsx b/frontend/components/Submit.tsx deleted file mode 100644 index 6becba2f..00000000 --- a/frontend/components/Submit.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Button from "components/Button"; - -type Props = { - loading: boolean; - children: React.ReactNode; - [key: string]: any; -}; - -export default function Submit({ loading, children, ...props }: Props) { - return ( - - ); -} diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx index 16da174d..58a22cba 100644 --- a/frontend/components/ui/button.tsx +++ b/frontend/components/ui/button.tsx @@ -1,57 +1,114 @@ +import * as React from "react" +import { Link } from "react-router-dom" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "lib/utils" +import Icon from "components/Icon" -const buttonVariants = cva( - "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/80", - outline: - "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", - secondary: - "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", - ghost: - "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", - destructive: - "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: - "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", - xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", - sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", - lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", - icon: "size-8", - "icon-xs": - "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3", - "icon-sm": - "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg", - "icon-lg": "size-9", - }, +const buttonVariants = cva("font-semibold rounded", { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary-hover transition-colors", + secondary: "bg-secondary text-secondary-foreground", + outline: "border border-input text-secondary-foreground hover:bg-secondary transition-colors", + "outline-amber": + "border border-amber-600 bg-transparent text-amber-600 hover:bg-amber-500/5 transition-colors", + ghost: "hover:bg-muted hover:text-foreground transition-colors", + danger: "bg-red-600 text-white hover:bg-red-700", + link: "text-link font-medium", + "link-danger": "text-red-700 hover:text-red-800", }, - defaultVariants: { - variant: "default", - size: "default", + size: { + lg: "text-lg py-2.5 px-4.5", + md: "text-md py-2 px-5", + pill: "text-sm py-3 px-6", + smPill: "text-[14px] py-1.5 px-4", + sm: "text-[14px] py-1.5 px-2.5", + xs: "text-[12px] py-0.5 px-1.5", + none: "", + icon: "inline-flex size-8 items-center justify-center", + "icon-lg": "inline-flex size-9 items-center justify-center", }, + shape: { + default: "", + pill: "rounded-full", + }, + }, + compoundVariants: [ + { variant: "default", shape: "pill", class: "shadow-lg shadow-primary/30" }, + { variant: "outline", shape: "pill", class: "bg-transparent hover:bg-gray-50" }, + ], + defaultVariants: { + variant: "default", + size: "md", + shape: "default", + }, +}) + +type ButtonProps = ButtonPrimitive.Props & + VariantProps & { + href?: string + target?: React.HTMLAttributeAnchorTarget + rel?: string + loading?: boolean + loadingText?: React.ReactNode } -) function Button({ className, - variant = "default", - size = "default", + variant, + size, + shape, + href, + target, + rel, + loading, + loadingText, + disabled, + type = "button", + children, ...props -}: ButtonPrimitive.Props & VariantProps) { +}: ButtonProps) { + const effectiveSize = variant === "link" ? "none" : size + const isDisabled = disabled || loading + const classes = cn( + buttonVariants({ variant, size: effectiveSize, shape }), + isDisabled && "opacity-60", + className + ) + + const content = loading ? ( + + + {loadingText} + + ) : ( + children + ) + + if (href) { + return /^(https?:|mailto:|tel:|om:)/.test(href) ? ( + )}> + {content} + + ) : ( + )}> + {content} + + ) + } + return ( + > + {content} + ) } diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx new file mode 100644 index 00000000..9cd045e7 --- /dev/null +++ b/frontend/components/ui/tabs.tsx @@ -0,0 +1,81 @@ +import * as React from "react" +import { Tabs as TabsPrimitive } from "@base-ui/react/tabs" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "lib/utils" + +type TabsVariant = "underline" | "pills" + +const TabsVariantContext = React.createContext("underline") + +function Tabs({ className, ...props }: TabsPrimitive.Root.Props) { + return +} + +const tabsListVariants = cva("flex", { + variants: { + variant: { + underline: "gap-4", + pills: "gap-1", + }, + }, + defaultVariants: { + variant: "underline", + }, +}) + +function TabsList({ + className, + variant = "underline", + ...props +}: TabsPrimitive.List.Props & VariantProps) { + return ( + + + + ) +} + +const tabsTriggerVariants = cva( + "inline-flex items-center whitespace-nowrap text-sm font-medium outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + underline: + "gap-2 border-b-2 border-transparent py-3 text-gray-900 hover:border-gray-500 data-[active]:border-gray-500", + pills: + "gap-3 rounded px-4 py-2 text-left hover:bg-gray-100 data-[active]:bg-blue-50 data-[active]:text-blue-600", + }, + }, + defaultVariants: { + variant: "underline", + }, + } +) + +function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { + const variant = React.useContext(TabsVariantContext) + return ( + + ) +} + +function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { + return ( + + ) +} + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/frontend/hooks/useConfirmNavigation.ts b/frontend/hooks/useConfirmNavigation.ts deleted file mode 100644 index 91f3d5ad..00000000 --- a/frontend/hooks/useConfirmNavigation.ts +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { useBlocker } from "react-router-dom"; - -export default function useConfirmNavigation(isDirty: boolean) { - useBlocker(({ currentLocation, nextLocation }) => { - if (!isDirty || currentLocation.pathname === nextLocation.pathname) return false; - return !window.confirm("Are you sure? Changes you made will not be saved."); - }); - - React.useEffect(() => { - const handleWindowClose = (e: BeforeUnloadEvent) => { - if (!isDirty) return; - e.preventDefault(); - e.returnValue = ""; - }; - - window.addEventListener("beforeunload", handleWindowClose); - - return () => { - window.removeEventListener("beforeunload", handleWindowClose); - }; - }, [isDirty]); -} diff --git a/frontend/hooks/useWindowActive.ts b/frontend/hooks/useWindowActive.ts deleted file mode 100644 index 6010c2b5..00000000 --- a/frontend/hooks/useWindowActive.ts +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; - -type PropsT = { - onFocus?: () => void; - onBlur?: () => void; -}; - -export const useWindowActive = ({ onFocus, onBlur }: PropsT = {}) => { - const [windowIsFocused, setWindowIsFocused] = React.useState(() => document?.visibilityState === "visible"); - - React.useEffect(() => { - const handleVisibilityChange = () => { - setWindowIsFocused(document.visibilityState === "visible"); - if (document.visibilityState === "visible" && onFocus) onFocus(); - else if (document.visibilityState !== "visible" && onBlur) onBlur(); - }; - - document?.addEventListener("visibilitychange", handleVisibilityChange); - return () => document?.removeEventListener("visibilitychange", handleVisibilityChange); - }, []); - - return windowIsFocused; -}; diff --git a/frontend/modals/AddParticipant.tsx b/frontend/modals/AddParticipant.tsx index 8b5f3676..0b40fba8 100644 --- a/frontend/modals/AddParticipant.tsx +++ b/frontend/modals/AddParticipant.tsx @@ -6,7 +6,7 @@ import { Header, Body, Footer } from "components/Modal"; import { useModal } from "stores/modals"; import { useTrip } from "hooks/useTrip"; import useMutation from "hooks/useMutation"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Input from "components/Input"; import LifelistField from "components/LifelistField"; @@ -116,17 +116,17 @@ export default function AddParticipant() { footer={tab === "invite" ? "They can change this once they accept the invite." : undefined} /> ) : ( - )}
- -
diff --git a/frontend/modals/AddPlace.tsx b/frontend/modals/AddPlace.tsx index 862fdd08..cc761f5d 100644 --- a/frontend/modals/AddPlace.tsx +++ b/frontend/modals/AddPlace.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Header, Body } from "components/Modal"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import Field from "components/Field"; import { useModal } from "stores/modals"; import { useTrip } from "hooks/useTrip"; @@ -101,7 +101,7 @@ export default function AddPlace() {
- diff --git a/frontend/modals/DeleteAccount.tsx b/frontend/modals/DeleteAccount.tsx index 845033dd..3c9eb715 100644 --- a/frontend/modals/DeleteAccount.tsx +++ b/frontend/modals/DeleteAccount.tsx @@ -5,7 +5,7 @@ import { Header, Body, Footer } from "components/Modal"; import { useModal } from "stores/modals"; import useMutation from "hooks/useMutation"; import toast from "react-hot-toast"; -import Button from "components/Button"; +import { Button } from "components/ui/button"; import { teardownSession } from "lib/logout"; export default function DeleteAccount() { @@ -66,12 +66,12 @@ export default function DeleteAccount() {