From 51c30ed73d1c08b2fb28e29ed6a54f2032a7bee3 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Fri, 29 May 2026 06:46:39 -0700
Subject: [PATCH] feat(tracker-web): roadmap submit + email-prompt modals via
 shared Modal (UX-3.2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the bespoke local Modal (and its slate/blue/white chrome) with the
shared @bytelyst/ui Modal (Radix dialog — focus-trap/Esc/scroll-lock) for
both the Submit Idea and vote email-prompt dialogs. The dialog titles
become the accessible heading; form fields move to Input/Select/Textarea
and the submit-result message to AlertBanner. Behaviour preserved.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../tracker-web/src/app/roadmap/page.tsx      | 196 ++++++++----------
 1 file changed, 89 insertions(+), 107 deletions(-)

diff --git a/dashboards/tracker-web/src/app/roadmap/page.tsx b/dashboards/tracker-web/src/app/roadmap/page.tsx
index 5ed5dd87..4abf0206 100644
--- a/dashboards/tracker-web/src/app/roadmap/page.tsx
+++ b/dashboards/tracker-web/src/app/roadmap/page.tsx
@@ -6,6 +6,8 @@ import {
   Button,
   Input,
   Select,
+  Textarea,
+  Modal,
   Badge,
   StatusDot,
   MetricCard,
@@ -352,127 +354,118 @@ export default function RoadmapPage() {
       </main>
 
       {/* Email prompt modal */}
-      {showEmailPrompt && (
-        <Modal
-          onClose={() => {
+      <Modal
+        open={showEmailPrompt}
+        onOpenChange={open => {
+          if (!open) {
             setShowEmailPrompt(false);
             setPendingVoteId(null);
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2">Enter your email to vote</h3>
-          <p className="text-sm text-slate-500 mb-4">
-            We use your email to track your votes. One vote per item.
-          </p>
-          <input
+          }
+        }}
+        title="Enter your email to vote"
+        description="We use your email to track your votes. One vote per item."
+        size="sm"
+      >
+        <div className="space-y-4">
+          <Input
             type="email"
+            aria-label="Email"
             placeholder="you@example.com"
             value={voteEmail}
             onChange={e => setVoteEmail(e.target.value)}
-            className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm mb-4"
             onKeyDown={e => e.key === 'Enter' && handleEmailSubmit()}
             autoFocus
           />
           <div className="flex justify-end gap-2">
-            <button
+            <Button
+              variant="ghost"
               onClick={() => {
                 setShowEmailPrompt(false);
                 setPendingVoteId(null);
               }}
-              className="px-4 py-2 text-sm text-slate-500 hover:text-slate-700"
             >
               Cancel
-            </button>
-            <button
-              onClick={handleEmailSubmit}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"
-            >
-              Vote
-            </button>
+            </Button>
+            <Button onClick={handleEmailSubmit}>Vote</Button>
           </div>
-        </Modal>
-      )}
+        </div>
+      </Modal>
 
       {/* Submit modal */}
-      {showSubmit && (
-        <Modal
-          onClose={() => {
+      <Modal
+        open={showSubmit}
+        onOpenChange={open => {
+          if (!open) {
             setShowSubmit(false);
             setSubmitSuccess('');
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-4">Submit an Idea</h3>
-          {submitSuccess ? (
-            <div
-              className={`p-3 rounded-lg text-sm mb-4 ${submitSuccess.startsWith('Error') ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300' : 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300'}`}
-            >
-              {submitSuccess}
-            </div>
-          ) : null}
-          <form onSubmit={handleSubmit} className="space-y-3">
-            <div className="grid grid-cols-2 gap-3">
-              <input
-                type="text"
-                placeholder="Your name"
-                value={submitForm.name}
-                onChange={e => setSubmitForm({ ...submitForm, name: e.target.value })}
-                required
-                className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
-              />
-              <input
-                type="email"
-                placeholder="Your email"
-                value={submitForm.email}
-                onChange={e => setSubmitForm({ ...submitForm, email: e.target.value })}
-                required
-                className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
-              />
-            </div>
-            <select
-              value={submitForm.type}
-              onChange={e => setSubmitForm({ ...submitForm, type: e.target.value })}
-              aria-label="Request type"
-              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
-            >
-              <option value="feature">Feature Request</option>
-              <option value="bug">Bug Report</option>
-              <option value="task">Task</option>
-            </select>
-            <input
+          }
+        }}
+        title="Submit an Idea"
+      >
+        {submitSuccess ? (
+          <AlertBanner
+            tone={submitSuccess.startsWith('Error') ? 'error' : 'success'}
+            className="mb-4"
+          >
+            {submitSuccess}
+          </AlertBanner>
+        ) : null}
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <Input
               type="text"
-              placeholder="Title — what would you like to see?"
-              value={submitForm.title}
-              onChange={e => setSubmitForm({ ...submitForm, title: e.target.value })}
+              aria-label="Your name"
+              placeholder="Your name"
+              value={submitForm.name}
+              onChange={e => setSubmitForm({ ...submitForm, name: e.target.value })}
               required
-              maxLength={500}
-              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
             />
-            <textarea
-              placeholder="Describe your idea or issue in detail (optional)"
-              value={submitForm.description}
-              onChange={e => setSubmitForm({ ...submitForm, description: e.target.value })}
-              rows={4}
-              maxLength={5000}
-              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm resize-none"
+            <Input
+              type="email"
+              aria-label="Your email"
+              placeholder="Your email"
+              value={submitForm.email}
+              onChange={e => setSubmitForm({ ...submitForm, email: e.target.value })}
+              required
             />
-            <div className="flex justify-end gap-2 pt-2">
-              <button
-                type="button"
-                onClick={() => setShowSubmit(false)}
-                className="px-4 py-2 text-sm text-slate-500 hover:text-slate-700"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={submitting}
-                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
-              >
-                {submitting ? 'Submitting...' : 'Submit'}
-              </button>
-            </div>
-          </form>
-        </Modal>
-      )}
+          </div>
+          <Select
+            value={submitForm.type}
+            onChange={e => setSubmitForm({ ...submitForm, type: e.target.value })}
+            aria-label="Request type"
+            options={[
+              { value: 'feature', label: 'Feature Request' },
+              { value: 'bug', label: 'Bug Report' },
+              { value: 'task', label: 'Task' },
+            ]}
+          />
+          <Input
+            type="text"
+            aria-label="Title"
+            placeholder="Title — what would you like to see?"
+            value={submitForm.title}
+            onChange={e => setSubmitForm({ ...submitForm, title: e.target.value })}
+            required
+            maxLength={500}
+          />
+          <Textarea
+            aria-label="Description"
+            placeholder="Describe your idea or issue in detail (optional)"
+            value={submitForm.description}
+            onChange={e => setSubmitForm({ ...submitForm, description: e.target.value })}
+            rows={4}
+            maxLength={5000}
+          />
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="ghost" onClick={() => setShowSubmit(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" loading={submitting}>
+              {submitting ? 'Submitting...' : 'Submit'}
+            </Button>
+          </div>
+        </form>
+      </Modal>
     </div>
   );
 }
@@ -578,14 +571,3 @@ function ItemRow({
     </div>
   );
 }
-
-function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 p-6 w-full max-w-md">
-        {children}
-      </div>
-    </div>
-  );
-}