From b06037a7c562ef57ef342b54d1acb6036e72eb30 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Thu, 7 Mar 2024 16:51:22 -0500
Subject: [PATCH 01/13] feat: custom inputs

---
 src/components/CustomInput.astro    | 14 ++++++++++++++
 src/components/CustomTextarea.astro | 14 ++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/components/CustomInput.astro
 create mode 100644 src/components/CustomTextarea.astro

diff --git a/src/components/CustomInput.astro b/src/components/CustomInput.astro
new file mode 100644
index 0000000..3ea7c97
--- /dev/null
+++ b/src/components/CustomInput.astro
@@ -0,0 +1,14 @@
+---
+interface Props {
+  label: String
+  placeholder: String
+}
+
+const { label, placeholder } = Astro.props
+---
+
+<custom-input>
+  <input name={label} id={label}
+         class="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+         placeholder={placeholder} required>
+</custom-input>
diff --git a/src/components/CustomTextarea.astro b/src/components/CustomTextarea.astro
new file mode 100644
index 0000000..9d103cf
--- /dev/null
+++ b/src/components/CustomTextarea.astro
@@ -0,0 +1,14 @@
+---
+interface Props {
+  label: String
+  placeholder: String
+}
+
+const { label, placeholder } = Astro.props
+---
+
+<custom-input>
+  <textarea id={label} rows="4"
+            class="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+            placeholder={placeholder}></textarea>
+</custom-input>
\ No newline at end of file

From 205a3a463446977be5f6eb0d8a142fd404355387 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:08:45 -0400
Subject: [PATCH 02/13] chore: add react compatibility, radix modal

---
 astro.config.mjs  |  13 ++---
 package-lock.json | 133 ++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |   6 +++
 tsconfig.json     |   4 +-
 4 files changed, 146 insertions(+), 10 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index b6ed592..2a862b3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,12 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import sitemap from '@astrojs/sitemap';
-
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://example.com',
-  integrations: [mdx(), sitemap(), tailwind()]
+  site: "https://example.com",
+  integrations: [mdx(), sitemap(), tailwind(), react()]
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f5249e0..9e4655c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,19 @@
       "dependencies": {
         "@astrojs/check": "^0.5.3",
         "@astrojs/mdx": "^2.1.1",
+        "@astrojs/react": "^3.1.0",
         "@astrojs/rss": "^4.0.5",
         "@astrojs/sitemap": "^3.0.5",
         "@astrojs/tailwind": "^5.1.0",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@staticcms/core": "^4.1.2",
         "@staticcms/proxy-server": "^4.0.4",
+        "@types/react": "^18.2.64",
+        "@types/react-dom": "^18.2.21",
         "astro": "^4.3.6",
         "i": "^0.3.7",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3"
       },
@@ -185,6 +191,24 @@
         "node": ">=18.14.1"
       }
     },
+    "node_modules/@astrojs/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-KZhZyV+sUDZEjlrmPWNiPGeYowG9uq6/aMbCgVaeKEBlWT4Kg32TNwBOhZk6AcE4LY1l3mIwt3orUGE2JV96/g==",
+      "dependencies": {
+        "@vitejs/plugin-react": "^4.2.0",
+        "ultrahtml": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.50 || ^18.0.21",
+        "@types/react-dom": "^17.0.17 || ^18.0.6",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/@astrojs/rss": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-4.0.5.tgz",
@@ -561,6 +585,34 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.23.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
@@ -2740,6 +2792,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -3978,15 +4066,23 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "version": "18.2.64",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
+      "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.21",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.21.tgz",
+      "integrity": "sha512-gnvBA/21SA4xxqNXEwNiVcP0xSGHh/gi1VhWv9Bl46a0ItbTT5nFY+G9VSQpaG/8N/qdJpJ+vftQ4zflTtnjLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -5396,6 +5492,24 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+      "dependencies": {
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
     "node_modules/@volar/kit": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.0.3.tgz",
@@ -13220,6 +13334,14 @@
         }
       }
     },
+    "node_modules/react-refresh": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -15619,6 +15741,11 @@
         "semver": "^7.3.8"
       }
     },
+    "node_modules/ultrahtml": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.3.tgz",
+      "integrity": "sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index b703422..0d3de8d 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,19 @@
   "dependencies": {
     "@astrojs/check": "^0.5.3",
     "@astrojs/mdx": "^2.1.1",
+    "@astrojs/react": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "astro": "^4.3.6",
     "i": "^0.3.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },
diff --git a/tsconfig.json b/tsconfig.json
index 7a36ca0..6bed1f7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }
\ No newline at end of file

From 634026c4a57c4eae777a5e5749c6555a830be721 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 11 Mar 2024 12:34:33 -0400
Subject: [PATCH 03/13] chore: use react instead of astro for components

---
 package-lock.json                   |  9 ++++
 package.json                        |  1 +
 src/components/CustomInput.astro    | 14 -----
 src/components/CustomInput.tsx      | 20 ++++++++
 src/components/CustomTextarea.astro | 14 -----
 src/components/CustomTextarea.tsx   | 18 +++++++
 src/components/DownloadModal.tsx    | 79 +++++++++++++++++++++++++++++
 7 files changed, 127 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/CustomInput.astro
 create mode 100644 src/components/CustomInput.tsx
 delete mode 100644 src/components/CustomTextarea.astro
 create mode 100644 src/components/CustomTextarea.tsx
 create mode 100644 src/components/DownloadModal.tsx

diff --git a/package-lock.json b/package-lock.json
index 9e4655c..a4fd68c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@astrojs/sitemap": "^3.0.5",
         "@astrojs/tailwind": "^5.1.0",
         "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
         "@staticcms/core": "^4.1.2",
         "@staticcms/proxy-server": "^4.0.4",
         "@types/react": "^18.2.64",
@@ -2943,6 +2944,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
diff --git a/package.json b/package.json
index 0d3de8d..bb82dd7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",
     "@types/react": "^18.2.64",
diff --git a/src/components/CustomInput.astro b/src/components/CustomInput.astro
deleted file mode 100644
index 3ea7c97..0000000
--- a/src/components/CustomInput.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-interface Props {
-  label: String
-  placeholder: String
-}
-
-const { label, placeholder } = Astro.props
----
-
-<custom-input>
-  <input name={label} id={label}
-         class="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
-         placeholder={placeholder} required>
-</custom-input>
diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
new file mode 100644
index 0000000..7a31e08
--- /dev/null
+++ b/src/components/CustomInput.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+
+interface CustomInputProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomInput: React.FC<CustomInputProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <input
+        name={label}
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+        required
+      />
+    </>
+  )
+}
diff --git a/src/components/CustomTextarea.astro b/src/components/CustomTextarea.astro
deleted file mode 100644
index 9d103cf..0000000
--- a/src/components/CustomTextarea.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-interface Props {
-  label: String
-  placeholder: String
-}
-
-const { label, placeholder } = Astro.props
----
-
-<custom-input>
-  <textarea id={label} rows="4"
-            class="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
-            placeholder={placeholder}></textarea>
-</custom-input>
\ No newline at end of file
diff --git a/src/components/CustomTextarea.tsx b/src/components/CustomTextarea.tsx
new file mode 100644
index 0000000..dc150fa
--- /dev/null
+++ b/src/components/CustomTextarea.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+interface CustomTextareaProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomTextarea: React.FC<CustomTextareaProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <textarea
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+      />
+    </>
+  )
+}
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
new file mode 100644
index 0000000..e1112a2
--- /dev/null
+++ b/src/components/DownloadModal.tsx
@@ -0,0 +1,79 @@
+import React from "react"
+import * as Dialog from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { CustomInput } from "./CustomInput.tsx"
+import { CustomTextarea } from "./CustomTextarea.tsx"
+
+const DownloadModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Trigger asChild>
+        <button className="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
+          <svg
+            className="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 16 18"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M8 1v11m0 0 4-4m-4 4L4 8m11 4v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
+            ></path>
+          </svg>
+          <span className="sr-only">Download data</span>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          onClick={() => setIsOpen(false)}
+        />
+        <Dialog.Content className="fixed inset-0 top-0 z-20 transform overflow-hidden rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+          <Dialog.Close asChild>
+            <button
+              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
+              aria-label="Close"
+              onClick={() => setIsOpen(false)}
+            >
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+          <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
+          <form className="p-4 md:p-5">
+            <div className="flex flex-col justify-center mb-4">
+              <CustomInput label={"name"} placeholder={"Your name"} />
+              <CustomInput label={"institution"} placeholder={"Your institution"} />
+              <CustomInput label={"email"} placeholder={"Your email"} />
+              <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
+            </div>
+            <button
+              type="submit"
+              className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+            >
+              <svg
+                className="me-1 -ms-1 w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+              Validate Email
+            </button>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+export default DownloadModal

From e9d4d14c3b7fe0377737f01f316b2d93b644fa3d Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 10:37:53 -0400
Subject: [PATCH 04/13] style: scrollable, centered modal

---
 src/components/DownloadModal.tsx | 82 +++++++++++++++++---------------
 1 file changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
index e1112a2..bb044c2 100644
--- a/src/components/DownloadModal.tsx
+++ b/src/components/DownloadModal.tsx
@@ -10,7 +10,7 @@ const DownloadModal = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
+        <button className="sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
           <svg
             className="w-3.5 h-3.5"
             aria-hidden="true"
@@ -31,47 +31,51 @@ const DownloadModal = () => {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
           onClick={() => setIsOpen(false)}
         />
-        <Dialog.Content className="fixed inset-0 top-0 z-20 transform overflow-hidden rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-          <Dialog.Close asChild>
-            <button
-              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
-              aria-label="Close"
-              onClick={() => setIsOpen(false)}
-            >
-              <Cross2Icon />
-            </button>
-          </Dialog.Close>
-          <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
-          <form className="p-4 md:p-5">
-            <div className="flex flex-col justify-center mb-4">
-              <CustomInput label={"name"} placeholder={"Your name"} />
-              <CustomInput label={"institution"} placeholder={"Your institution"} />
-              <CustomInput label={"email"} placeholder={"Your email"} />
-              <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
-            </div>
-            <button
-              type="submit"
-              className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
-            >
-              <svg
-                className="me-1 -ms-1 w-5 h-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
+          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <Dialog.Close asChild>
+              <div className="flex">
+                <button
+                  className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
+                  aria-label="Close"
+                  onClick={() => setIsOpen(false)}
+                >
+                  <Cross2Icon />
+                </button>
+              </div>
+            </Dialog.Close>
+            <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
+            <form className="p-4 md:p-5">
+              <div className="flex flex-col justify-center mb-4">
+                <CustomInput label={"name"} placeholder={"Your name"} />
+                <CustomInput label={"institution"} placeholder={"Your institution"} />
+                <CustomInput label={"email"} placeholder={"Your email"} />
+                <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
+              </div>
+              <button
+                type="submit"
+                className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              Validate Email
-            </button>
-          </form>
-        </Dialog.Content>
+                <svg
+                  className="me-1 -ms-1 w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                Validate Email
+              </button>
+            </form>
+          </Dialog.Content>
+        </Dialog.Overlay>
       </Dialog.Portal>
     </Dialog.Root>
   )

From c58fb53c0f58204bdf04d17ad2976aecebbef015 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 10:42:25 -0400
Subject: [PATCH 05/13] style: textarea increase size

---
 src/components/CustomTextarea.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CustomTextarea.tsx b/src/components/CustomTextarea.tsx
index dc150fa..9045043 100644
--- a/src/components/CustomTextarea.tsx
+++ b/src/components/CustomTextarea.tsx
@@ -9,6 +9,7 @@ export const CustomTextarea: React.FC<CustomTextareaProps> = ({ label, placehold
   return (
     <>
       <textarea
+        rows={4}
         id={label}
         className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
         placeholder={placeholder}

From 8bad74ecf4b6bc21b111b85a7b9a08476df4899f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:33:39 -0400
Subject: [PATCH 06/13] fix: specify source for astro files

---
 firebase.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/firebase.json b/firebase.json
index 93fb369..259ac05 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "public",
+    "source": ".",
     "ignore": [
       "firebase.json",
       "**/.*",

From 3005df81a7e53b5de31c38d147483638a65f82e3 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:38:48 -0400
Subject: [PATCH 07/13] fix: provide web framework env

---
 .github/workflows/firebase-hosting-merge.yml        | 2 ++
 .github/workflows/firebase-hosting-pull-request.yml | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
index 97b19e9..c4463b1 100644
--- a/.github/workflows/firebase-hosting-merge.yml
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -18,3 +18,5 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           channelId: live
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
index f4f04eb..437c676 100644
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -19,3 +19,5 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

From 056bdb86357281d204e3a55305b34ac65c743e95 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:56:40 -0400
Subject: [PATCH 08/13] feat: add data page with modal

---
 src/pages/data.astro | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/pages/data.astro

diff --git a/src/pages/data.astro b/src/pages/data.astro
new file mode 100644
index 0000000..6f0ea60
--- /dev/null
+++ b/src/pages/data.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "../layouts/BlogPost.astro"
+import DownloadModal from "../components/DownloadModal"
+---
+
+<Layout
+  title="Data"
+  description="Data files and information"
+  pubDate={new Date("August 08 2021")}
+  heroImage="/blog-placeholder-about.jpg"
+>
+  <div class="flex">
+    <p>Download a File</p>
+    <DownloadModal />
+  </div>
+</Layout>

From fa4bf469f68431e1475c1c9d4c0d0a7272806aba Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 15:40:00 -0400
Subject: [PATCH 09/13] fix: add client: load to modal so it will use react
 state

---
 src/pages/data.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/data.astro b/src/pages/data.astro
index 6f0ea60..acd1c5b 100644
--- a/src/pages/data.astro
+++ b/src/pages/data.astro
@@ -11,6 +11,6 @@ import DownloadModal from "../components/DownloadModal"
 >
   <div class="flex">
     <p>Download a File</p>
-    <DownloadModal />
+    <DownloadModal client:load />
   </div>
 </Layout>

From 348086eb884607aa59f3db552eef77b61f3e5fdd Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 15:59:04 -0400
Subject: [PATCH 10/13] fix: client only

---
 .gitignore           | 3 ++-
 src/pages/data.astro | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index ebf5351..6cfb12e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,4 +20,5 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .idea
-*.log
\ No newline at end of file
+*.log
+*.cache
diff --git a/src/pages/data.astro b/src/pages/data.astro
index acd1c5b..41622b8 100644
--- a/src/pages/data.astro
+++ b/src/pages/data.astro
@@ -11,6 +11,6 @@ import DownloadModal from "../components/DownloadModal"
 >
   <div class="flex">
     <p>Download a File</p>
-    <DownloadModal client:load />
+    <DownloadModal client:only />
   </div>
 </Layout>

From 5f41130aa448e0d77b16322fb6c0669983d66d0d Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 16:21:28 -0400
Subject: [PATCH 11/13] fix: address pr comments, style

Co-Authored-By: Galen Winsor <57297033+galenwinsor@users.noreply.github.com>
---
 src/components/DownloadModal.tsx | 54 +++++++-------------------------
 1 file changed, 12 insertions(+), 42 deletions(-)

diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
index bb044c2..376fc94 100644
--- a/src/components/DownloadModal.tsx
+++ b/src/components/DownloadModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import * as Dialog from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
 import { CustomInput } from "./CustomInput.tsx"
 import { CustomTextarea } from "./CustomTextarea.tsx"
 
@@ -11,21 +11,7 @@ const DownloadModal = () => {
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
         <button className="sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
-          <svg
-            className="w-3.5 h-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 16 18"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M8 1v11m0 0 4-4m-4 4L4 8m11 4v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
-            ></path>
-          </svg>
+          <DownloadIcon />
           <span className="sr-only">Download data</span>
         </button>
       </Dialog.Trigger>
@@ -36,18 +22,13 @@ const DownloadModal = () => {
         />
         <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
           <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-            <Dialog.Close asChild>
-              <div className="flex">
-                <button
-                  className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
-                  aria-label="Close"
-                  onClick={() => setIsOpen(false)}
-                >
-                  <Cross2Icon />
-                </button>
-              </div>
-            </Dialog.Close>
-            <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
+            <div className="flex justify-end">
+              <Dialog.Close className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center">
+                <Cross2Icon />
+                <span className="sr-only">Close</span>
+              </Dialog.Close>
+            </div>
+            <Dialog.Title>Download Data</Dialog.Title>
             <form className="p-4 md:p-5">
               <div className="flex flex-col justify-center mb-4">
                 <CustomInput label={"name"} placeholder={"Your name"} />
@@ -57,21 +38,10 @@ const DownloadModal = () => {
               </div>
               <button
                 type="submit"
-                className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="flex items-center gap-2 bg-black text-white  hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
               >
-                <svg
-                  className="me-1 -ms-1 w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-                Validate Email
+                <PlusIcon />
+                <span className="pt-1">Validate Email</span>
               </button>
             </form>
           </Dialog.Content>

From d91b37edc3c4d71039c1d5d3f48ea9201f984fb4 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 16:29:43 -0400
Subject: [PATCH 12/13] refactor: group tw styles

---
 src/components/DownloadModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
index 376fc94..8be02f0 100644
--- a/src/components/DownloadModal.tsx
+++ b/src/components/DownloadModal.tsx
@@ -10,7 +10,7 @@ const DownloadModal = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
+        <button className="sm:inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
           <DownloadIcon />
           <span className="sr-only">Download data</span>
         </button>
@@ -21,9 +21,9 @@ const DownloadModal = () => {
           onClick={() => setIsOpen(false)}
         />
         <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
-          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
             <div className="flex justify-end">
-              <Dialog.Close className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center">
+              <Dialog.Close className="text-gray-400 bg-transparent  rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
                 <Cross2Icon />
                 <span className="sr-only">Close</span>
               </Dialog.Close>
@@ -38,7 +38,7 @@ const DownloadModal = () => {
               </div>
               <button
                 type="submit"
-                className="flex items-center gap-2 bg-black text-white  hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500"
               >
                 <PlusIcon />
                 <span className="pt-1">Validate Email</span>

From c8ec35eb4f6d5bac2908e30bf00cc698be1e3bdb Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Tue, 12 Mar 2024 16:36:18 -0400
Subject: [PATCH 13/13] feat: disabled download button

---
 src/components/DownloadModal.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
index 8be02f0..66d30e5 100644
--- a/src/components/DownloadModal.tsx
+++ b/src/components/DownloadModal.tsx
@@ -36,13 +36,19 @@ const DownloadModal = () => {
                 <CustomInput label={"email"} placeholder={"Your email"} />
                 <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
               </div>
-              <button
-                type="submit"
-                className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500"
-              >
-                <PlusIcon />
-                <span className="pt-1">Validate Email</span>
-              </button>
+              <div className="flex flex-row gap-2">
+                <button className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500">
+                  <PlusIcon />
+                  <span className="pt-1">Validate Email</span>
+                </button>
+                <button
+                  type="submit"
+                  disabled
+                  className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 disabled:bg-gray-400"
+                >
+                  Download File
+                </button>
+              </div>
             </form>
           </Dialog.Content>
         </Dialog.Overlay>