diff --git a/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css b/components/Dialog/dialog.module.css
similarity index 52%
rename from components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css
rename to components/Dialog/dialog.module.css
index ed6c3170d..ab3abd26e 100644
--- a/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css
+++ b/components/Dialog/dialog.module.css
@@ -1,13 +1,23 @@
+@keyframes modal-fade {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
.overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: var(--visual-viewport-height);
+ align-items: center;
background: rgba(0, 0, 0, 0.5);
display: flex;
- align-items: center;
+ height: var(--visual-viewport-height);
justify-content: center;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100vw;
z-index: 100;
&[data-entering] {
@@ -19,52 +29,37 @@
}
}
-.modal section {
- background: var(--Main-Grey-White);
+.modal {
+ background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
- padding: var(--Spacing-x4);
- padding-bottom: var(--Spacing-x6);
-}
-
-.container {
+ box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
- font-family: var(--typography-Body-Regular-fontFamily);
+ max-width: 560px;
+ padding: var(--Spacing-x5) var(--Spacing-x4);
}
-.title {
- font-family: var(--typography-Subtitle-1-fontFamily);
- text-align: center;
- margin: 0;
- padding-bottom: var(--Spacing-x1);
-}
-
-.bodyText {
- text-align: center;
- max-width: 425px;
- margin: 0;
- padding: 0;
-}
-
-.buttonContainer {
+.header {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
gap: var(--Spacing-x2);
- flex-wrap: wrap;
}
-.buttonContainer button {
- flex-grow: 1;
- justify-content: center;
+.footer {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: var(--Spacing-x1);
}
-@keyframes modal-fade {
- from {
- opacity: 0;
- }
+@media screen and (min-width: 768px) {
+ .footer {
+ align-items: center;
+ flex-direction: row;
+ gap: var(--Spacing-x2);
- to {
- opacity: 1;
+ & > button {
+ flex: 1;
+ }
}
}
diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx
new file mode 100644
index 000000000..3e299e751
--- /dev/null
+++ b/components/Dialog/index.tsx
@@ -0,0 +1,87 @@
+"use client"
+import {
+ Dialog as AriaDialog,
+ DialogTrigger,
+ Modal,
+ ModalOverlay,
+} from "react-aria-components"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./dialog.module.css"
+
+import type { DialogProps } from "@/types/components/dialog"
+
+export default function Dialog({
+ bodyText,
+ cancelButtonText,
+ proceedHref,
+ proceedIsPending = false,
+ proceedOnClick = () => {},
+ proceedText,
+ titleText,
+ triggerButtonText,
+}: DialogProps) {
+ return (
+
+
+
+
+
+ {({ close }) => (
+
+
+ {titleText}
+ {bodyText}
+
+ {proceedIsPending ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+ )
+}
diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 6a4593d74..33f93e0fd 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -13,8 +13,8 @@ import { profile } from "@/constants/routes/myPages"
import { trpc } from "@/lib/trpc/client"
import { editProfile } from "@/actions/editProfile"
+import Dialog from "@/components/Dialog"
import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -118,11 +118,16 @@ export default function Form({ user }: EditFormProps) {
-
+