From 2153d3f74c5e93a2ed9c55d1eef143f1a82d6156 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 23:17:27 -0400
Subject: [PATCH] Align iframe forms with design tokens

---
 .../iframe_forms/iframe-application-form.html | 170 ++++-------------
 .../iframe_forms/iframe-bug-fix-form.html     | 180 +++++-------------
 .../iframe-content-appeals-form.html          | 143 ++------------
 .../iframe_forms/iframe-feedback-form.html    | 157 +++------------
 components/iframe_forms/iframe-forms.css      | 140 ++++++++++++++
 .../iframe_forms/iframe-request-form.html     | 172 +++++------------
 6 files changed, 314 insertions(+), 648 deletions(-)
 create mode 100644 components/iframe_forms/iframe-forms.css

diff --git a/components/iframe_forms/iframe-application-form.html b/components/iframe_forms/iframe-application-form.html
index b08f2221..20156016 100644
--- a/components/iframe_forms/iframe-application-form.html
+++ b/components/iframe_forms/iframe-application-form.html
@@ -6,129 +6,8 @@
     <!-- Link to your main stylesheet -->
 
     <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
-
-    <style>
-      /* Override for form page to match modal field styling */
-
-      /* Remove width constraints from body so our container can be full width */
-      body {
-        background-color: transparent;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        margin: 20px;
-      }
-
-      /* Override the .container to use the full available width */
-      .container {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      /* Card-like container for the form */
-      .form-container {
-        background-color: #111827; /* Tailwind's bg-gray-900 */
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--shadow-md);
-      }
-
-      h1,
-      h2 {
-        color: #fff;
-      }
-
-      /* Labels in a light gray */
-      label {
-        display: block;
-        margin-top: 1em;
-        font-weight: bold;
-        color: #e5e7eb; /* Tailwind's text-gray-200 */
-      }
-
-      /* Input, textarea, select mimic modal field styles */
-      input,
-      textarea,
-      select {
-        width: 100%;
-        margin-bottom: 0.75em;
-        background-color: #1f2937; /* Tailwind's bg-gray-800 */
-        color: #f3f4f6; /* Tailwind's text-gray-100 */
-        border: 1px solid #374151; /* Tailwind's border-gray-700 */
-        padding: 0.5em;
-        border-radius: 0.375rem; /* rounded-md */
-        box-sizing: border-box;
-      }
-
-      input:focus,
-      textarea:focus,
-      select:focus {
-        border-color: #3b82f6; /* blue-500 */
-        outline: none;
-        box-shadow: 0 0 0 1px #3b82f6;
-      }
-
-      /* Style for checkboxes – display inline with a label */
-      .checkbox-group label {
-        display: inline-block;
-        margin-right: 1rem;
-        font-weight: normal;
-      }
-
-      /* Button styled similarly to modal publish button */
-      button {
-        padding: 0.5em 1em;
-        background: #3b82f6; /* blue-500 */
-        color: #fff;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-      }
-
-      /* Status log area */
-      #status {
-        margin-top: 1em;
-        padding: 0.5em;
-        background: #111827;
-        white-space: pre-wrap;
-        min-height: 80px;
-        border-radius: 0.25rem;
-      }
-      .status-line {
-        margin: 0.25em 0;
-      }
-      .error {
-        color: #f87171; /* a red tint */
-      }
-      .success {
-        color: #3b82f6; /* blue-500 */
-      }
-      .warn {
-        color: #facc15; /* a yellow tone */
-      }
-
-      /* Custom Scrollbar styling for WebKit browsers */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-      /* Custom Scrollbar styling for Firefox */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-    </style>
+    <link rel="stylesheet" href="../../css/tailwind.generated.css" />
+    <link rel="stylesheet" href="./iframe-forms.css" />
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
@@ -146,6 +25,7 @@
           <h2>1. Applicant Information</h2>
           <label for="applicantNpub">Nostr Public Key (npub):</label>
           <input
+            class="form-control"
             type="text"
             id="applicantNpub"
             placeholder="Enter your npub"
@@ -156,6 +36,7 @@
             >Preferred Contact Method (if applicable):</label
           >
           <input
+            class="form-control"
             type="text"
             id="contactMethod"
             placeholder="Nostr DM, email, or other"
@@ -163,6 +44,7 @@
 
           <label for="username">Username or Alias (if applicable):</label>
           <input
+            class="form-control"
             type="text"
             id="username"
             placeholder="Enter your preferred name"
@@ -175,11 +57,17 @@
           </p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="contentType" value="Educational" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="contentType"
+                value="Educational"
+              />
               Educational</label
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="contentType"
                 value="Entertainment"
@@ -188,6 +76,7 @@
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="contentType"
                 value="News & Journalism"
@@ -196,6 +85,7 @@
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="contentType"
                 value="Creative Works"
@@ -204,6 +94,7 @@
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="contentType"
                 value="Discussions & Opinions"
@@ -211,12 +102,18 @@
               Discussions & Opinions</label
             >
             <label
-              ><input type="checkbox" name="contentType" value="Other" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="contentType"
+                value="Other"
+              />
               Other</label
             >
           </div>
           <label for="otherContent">Other (please specify):</label>
           <input
+            class="form-control"
             type="text"
             id="otherContent"
             placeholder="Describe if Other was selected"
@@ -224,6 +121,7 @@
 
           <label for="whyJoin">Why do you want to join bitvid?</label>
           <textarea
+            class="textarea"
             id="whyJoin"
             rows="3"
             placeholder="Explain your motivation"
@@ -232,7 +130,7 @@
           <label for="priorExperience"
             >Have you created content on other platforms before?</label
           >
-          <select id="priorExperience">
+          <select class="select" id="priorExperience">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -242,6 +140,7 @@
             >If yes, provide links or references to your previous work:</label
           >
           <textarea
+            class="textarea"
             id="experienceLinks"
             rows="2"
             placeholder="Paste links or describe your work"
@@ -252,7 +151,7 @@
           <label for="familiarGuidelines"
             >Are you familiar with bitvid’s Community Guidelines?</label
           >
-          <select id="familiarGuidelines">
+          <select class="select" id="familiarGuidelines">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -262,7 +161,7 @@
             >Do you agree to follow the guidelines and respect decentralized
             moderation?</label
           >
-          <select id="agreeGuidelines">
+          <select class="select" id="agreeGuidelines">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -273,6 +172,7 @@
             community?</label
           >
           <textarea
+            class="textarea"
             id="communityContribution"
             rows="3"
             placeholder="Explain your approach"
@@ -285,6 +185,7 @@
             bitvid?</label
           >
           <textarea
+            class="textarea"
             id="specialSkills"
             rows="3"
             placeholder="e.g., software development, moderation, design, advocacy"
@@ -293,7 +194,7 @@
           <label for="testFeatures"
             >Would you be interested in helping test new features?</label
           >
-          <select id="testFeatures">
+          <select class="select" id="testFeatures">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -309,12 +210,17 @@
             revoked if guidelines are violated.
           </p>
           <label for="signature">Signature (Digital or Written):</label>
-          <input type="text" id="signature" placeholder="Your signature" />
+          <input
+            class="form-control"
+            type="text"
+            id="signature"
+            placeholder="Your signature"
+          />
 
           <label for="declarationDate">Date:</label>
-          <input type="date" id="declarationDate" />
+          <input class="form-control" type="date" id="declarationDate" />
 
-          <button type="submit">Submit Application</button>
+          <button class="btn" type="submit">Submit Application</button>
         </form>
         <div id="status"></div>
       </div>
diff --git a/components/iframe_forms/iframe-bug-fix-form.html b/components/iframe_forms/iframe-bug-fix-form.html
index 04ba2552..044180df 100644
--- a/components/iframe_forms/iframe-bug-fix-form.html
+++ b/components/iframe_forms/iframe-bug-fix-form.html
@@ -6,129 +6,8 @@
     <!-- Link to your main stylesheet -->
 
     <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
-
-    <style>
-      /* Override for form page to match modal field styling */
-
-      /* Remove width constraints from body so our container can be full width */
-      body {
-        background-color: transparent;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        margin: 20px;
-      }
-
-      /* Override the .container to use the full available width */
-      .container {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      /* Card-like container for the form, similar to modal-content */
-      .form-container {
-        background-color: #111827; /* Tailwind's bg-gray-900 */
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--shadow-md);
-      }
-
-      h1,
-      h2 {
-        color: #fff;
-      }
-
-      /* Labels in a light gray */
-      label {
-        display: block;
-        margin-top: 1em;
-        font-weight: bold;
-        color: #e5e7eb; /* Tailwind's text-gray-200 */
-      }
-
-      /* Input, textarea, and select mimic modal field styles */
-      input,
-      textarea,
-      select {
-        width: 100%;
-        margin-bottom: 0.75em;
-        background-color: #1f2937; /* Tailwind's bg-gray-800 */
-        color: #f3f4f6; /* Tailwind's text-gray-100 */
-        border: 1px solid #374151; /* Tailwind's border-gray-700 */
-        padding: 0.5em;
-        border-radius: 0.375rem; /* rounded-md */
-        box-sizing: border-box;
-      }
-
-      input:focus,
-      textarea:focus,
-      select:focus {
-        border-color: #3b82f6; /* blue-500 */
-        outline: none;
-        box-shadow: 0 0 0 1px #3b82f6;
-      }
-
-      /* Checkbox group styling */
-      .checkbox-group label {
-        display: inline-block;
-        margin-right: 1rem;
-        font-weight: normal;
-      }
-
-      /* Button styled similarly to modal publish button */
-      button {
-        padding: 0.5em 1em;
-        background: #3b82f6; /* blue-500 */
-        color: #fff;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-      }
-
-      /* Status log area */
-      #status {
-        margin-top: 1em;
-        padding: 0.5em;
-        background: #111827;
-        white-space: pre-wrap;
-        min-height: 80px;
-        border-radius: 0.25rem;
-      }
-      .status-line {
-        margin: 0.25em 0;
-      }
-      .error {
-        color: #f87171; /* a red tint */
-      }
-      .success {
-        color: #3b82f6; /* blue-500 */
-      }
-      .warn {
-        color: #facc15; /* a yellow tone */
-      }
-
-      /* Custom Scrollbar styling for WebKit browsers */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-      /* Custom Scrollbar styling for Firefox */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-    </style>
+    <link rel="stylesheet" href="../../css/tailwind.generated.css" />
+    <link rel="stylesheet" href="./iframe-forms.css" />
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
@@ -146,6 +25,7 @@
           <h2>1. User Information</h2>
           <label for="userNpub">Nostr Public Key (npub) (optional):</label>
           <input
+            class="form-control"
             type="text"
             id="userNpub"
             placeholder="Enter your npub (optional)"
@@ -153,15 +33,26 @@
           <p>Are you a (check all that apply):</p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="userRole" value="Viewer" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Viewer"
+              />
               Viewer</label
             >
             <label
-              ><input type="checkbox" name="userRole" value="Content Creator" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Content Creator"
+              />
               Content Creator</label
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="userRole"
                 value="Developer/Contributor"
@@ -174,24 +65,28 @@
           <h2>2. Bug Details</h2>
           <label for="issueDescription">Describe the issue:</label>
           <textarea
+            class="textarea"
             id="issueDescription"
             rows="3"
             placeholder="Provide a clear and concise description of the problem"
           ></textarea>
           <label for="stepsToReproduce">Steps to reproduce the bug:</label>
           <textarea
+            class="textarea"
             id="stepsToReproduce"
             rows="3"
             placeholder="List the actions taken before encountering the issue"
           ></textarea>
           <label for="expectedBehavior">Expected behavior:</label>
           <textarea
+            class="textarea"
             id="expectedBehavior"
             rows="2"
             placeholder="What should have happened instead?"
           ></textarea>
           <label for="actualBehavior">Actual behavior:</label>
           <textarea
+            class="textarea"
             id="actualBehavior"
             rows="2"
             placeholder="What actually happened?"
@@ -202,26 +97,43 @@
           <p>What device were you using? (check all that apply):</p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="deviceUsed" value="Desktop" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="deviceUsed"
+                value="Desktop"
+              />
               Desktop</label
             >
             <label
-              ><input type="checkbox" name="deviceUsed" value="Mobile" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="deviceUsed"
+                value="Mobile"
+              />
               Mobile</label
             >
             <label
-              ><input type="checkbox" name="deviceUsed" value="Tablet" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="deviceUsed"
+                value="Tablet"
+              />
               Tablet</label
             >
           </div>
           <label for="operatingSystem">Operating System:</label>
           <input
+            class="form-control"
             type="text"
             id="operatingSystem"
             placeholder="e.g., Windows, macOS, Linux, iOS, Android"
           />
           <label for="browserInfo">Browser (if applicable):</label>
           <input
+            class="form-control"
             type="text"
             id="browserInfo"
             placeholder="e.g., Chrome, Firefox, Safari"
@@ -229,7 +141,7 @@
           <label for="usingVPN"
             >Are you using a VPN or privacy-focused browser settings?</label
           >
-          <select id="usingVPN">
+          <select class="select" id="usingVPN">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -241,6 +153,7 @@
             >Can you provide a screenshot or screen recording?</label
           >
           <textarea
+            class="textarea"
             id="screenshotInfo"
             rows="2"
             placeholder="Attach if possible (e.g., URL to screenshot)"
@@ -249,12 +162,14 @@
             >Did the issue generate any error messages?</label
           >
           <textarea
+            class="textarea"
             id="errorMessages"
             rows="2"
             placeholder="Include the exact error messages, if any"
           ></textarea>
           <label for="consoleLogs">Any relevant console logs?</label>
           <textarea
+            class="textarea"
             id="consoleLogs"
             rows="2"
             placeholder="Paste any browser console logs if available"
@@ -263,7 +178,7 @@
           <!-- Section 5: Additional Information -->
           <h2>5. Additional Information</h2>
           <label for="bugFrequency">How frequently does this bug occur?</label>
-          <select id="bugFrequency">
+          <select class="select" id="bugFrequency">
             <option value="">Select an option</option>
             <option value="Every time">Every time</option>
             <option value="Occasionally">Occasionally</option>
@@ -273,7 +188,7 @@
             >Does this bug impact core functionality (e.g., video playback,
             uploads, etc.)?</label
           >
-          <select id="impactCore">
+          <select class="select" id="impactCore">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -282,12 +197,13 @@
             >Any additional notes or suggestions?</label
           >
           <textarea
+            class="textarea"
             id="additionalNotes"
             rows="3"
             placeholder="Describe any other relevant details"
           ></textarea>
 
-          <button type="submit">Submit Bug Report</button>
+          <button class="btn" type="submit">Submit Bug Report</button>
         </form>
         <div id="status"></div>
       </div>
diff --git a/components/iframe_forms/iframe-content-appeals-form.html b/components/iframe_forms/iframe-content-appeals-form.html
index 8ebe7077..87baa67f 100644
--- a/components/iframe_forms/iframe-content-appeals-form.html
+++ b/components/iframe_forms/iframe-content-appeals-form.html
@@ -6,122 +6,8 @@
     <!-- Link to your main stylesheet -->
 
     <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
-
-    <style>
-      /* Override for form page to match modal field styling */
-
-      /* Remove width constraints from body so our container can be full width */
-      body {
-        background-color: transparent;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        margin: 20px;
-      }
-
-      /* Override the .container to use the full available width */
-      .container {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      /* Card-like container for the form, similar to modal-content */
-      .form-container {
-        background-color: #111827; /* Tailwind's bg-gray-900 */
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--shadow-md);
-      }
-
-      h1,
-      h2 {
-        color: #fff;
-      }
-
-      /* Labels in a light gray */
-      label {
-        display: block;
-        margin-top: 1em;
-        font-weight: bold;
-        color: #e5e7eb; /* Tailwind's text-gray-200 */
-      }
-
-      /* Input, textarea, and select mimic modal field styles */
-      input,
-      textarea,
-      select {
-        width: 100%;
-        margin-bottom: 0.75em;
-        background-color: #1f2937; /* Tailwind's bg-gray-800 */
-        color: #f3f4f6; /* Tailwind's text-gray-100 */
-        border: 1px solid #374151; /* Tailwind's border-gray-700 */
-        padding: 0.5em;
-        border-radius: 0.375rem; /* rounded-md */
-        box-sizing: border-box;
-      }
-
-      input:focus,
-      textarea:focus,
-      select:focus {
-        border-color: #3b82f6; /* blue-500 */
-        outline: none;
-        box-shadow: 0 0 0 1px #3b82f6;
-      }
-
-      /* Button styled similarly to modal publish button */
-      button {
-        padding: 0.5em 1em;
-        background: #3b82f6; /* blue-500 */
-        color: #fff;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-      }
-
-      /* Status log area */
-      #status {
-        margin-top: 1em;
-        padding: 0.5em;
-        background: #111827;
-        white-space: pre-wrap;
-        min-height: 80px;
-        border-radius: 0.25rem;
-      }
-      .status-line {
-        margin: 0.25em 0;
-      }
-      .error {
-        color: #f87171; /* a red tint */
-      }
-      .success {
-        color: #3b82f6; /* blue-500 */
-      }
-      .warn {
-        color: #facc15; /* a yellow tone */
-      }
-
-      /* Custom Scrollbar styling for WebKit browsers */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-      /* Custom Scrollbar styling for Firefox */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-    </style>
+    <link rel="stylesheet" href="../../css/tailwind.generated.css" />
+    <link rel="stylesheet" href="./iframe-forms.css" />
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
@@ -138,6 +24,7 @@
           <h2>1. User Information</h2>
           <label for="contactMethod">Contact Method (if applicable):</label>
           <input
+            class="form-control"
             type="text"
             id="contactMethod"
             placeholder="Nostr DM, email, or other"
@@ -146,6 +33,7 @@
           <h2>2. Content Details</h2>
           <label for="videoTitle">Title of the Video:</label>
           <input
+            class="form-control"
             type="text"
             id="videoTitle"
             placeholder="Enter the exact title"
@@ -153,19 +41,21 @@
 
           <label for="magnetLink">Magnet Link:</label>
           <input
+            class="form-control"
             type="text"
             id="magnetLink"
             placeholder="Enter the magnet link"
           />
 
           <label for="submissionDate">Date of Content Submission:</label>
-          <input type="date" id="submissionDate" />
+          <input class="form-control" type="date" id="submissionDate" />
 
           <h2>3. Reason for Appeal</h2>
           <label for="reasonBlocked"
             >Why do you believe your content was unfairly blocked?</label
           >
           <textarea
+            class="textarea"
             id="reasonBlocked"
             rows="3"
             placeholder="Explain in detail"
@@ -174,7 +64,7 @@
           <label for="fitsGuidelines"
             >Does your content fit within bitvid's Community Guidelines?</label
           >
-          <select id="fitsGuidelines">
+          <select class="select" id="fitsGuidelines">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -184,6 +74,7 @@
             >If yes, which guideline(s) support your appeal?</label
           >
           <textarea
+            class="textarea"
             id="guidelinesCited"
             rows="2"
             placeholder="Cite the specific guidelines"
@@ -192,7 +83,7 @@
           <label for="editedContent"
             >Was this content edited after being blocked?</label
           >
-          <select id="editedContent">
+          <select class="select" id="editedContent">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -200,6 +91,7 @@
 
           <label for="changesMade">If yes, what changes were made?</label>
           <textarea
+            class="textarea"
             id="changesMade"
             rows="2"
             placeholder="Describe the modifications"
@@ -210,6 +102,7 @@
             >Was there any misunderstanding or misclassification?</label
           >
           <textarea
+            class="textarea"
             id="misunderstanding"
             rows="2"
             placeholder="Provide context"
@@ -219,6 +112,7 @@
             >Are there external references that validate your appeal?</label
           >
           <textarea
+            class="textarea"
             id="externalReferences"
             rows="2"
             placeholder="Links, citations, or additional info"
@@ -233,12 +127,17 @@
             decisions are at the discretion of bitvid’s moderation process.
           </p>
           <label for="signature">Signature (Digital or Written):</label>
-          <input type="text" id="signature" placeholder="Your signature" />
+          <input
+            class="form-control"
+            type="text"
+            id="signature"
+            placeholder="Your signature"
+          />
 
           <label for="declarationDate">Date:</label>
-          <input type="date" id="declarationDate" />
+          <input class="form-control" type="date" id="declarationDate" />
 
-          <button type="submit">Submit Appeal</button>
+          <button class="btn" type="submit">Submit Appeal</button>
         </form>
         <div id="status"></div>
       </div>
diff --git a/components/iframe_forms/iframe-feedback-form.html b/components/iframe_forms/iframe-feedback-form.html
index c0e14625..0b1e2dff 100644
--- a/components/iframe_forms/iframe-feedback-form.html
+++ b/components/iframe_forms/iframe-feedback-form.html
@@ -6,136 +6,8 @@
     <!-- Link to your main stylesheet -->
 
     <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
-
-    <style>
-      /* Override for form page to match modal field styling */
-
-      /* Remove width constraints from body so our container can be full width */
-      body {
-        background-color: transparent;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        margin: 20px;
-      }
-
-      /* Override the .container to use the full available width */
-      .container {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      /* Card-like container for the form */
-      .form-container {
-        background-color: #111827; /* Tailwind's bg-gray-900 */
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--shadow-md);
-      }
-
-      h1,
-      h2 {
-        color: #fff;
-      }
-
-      /* Labels in a light gray */
-      label {
-        display: block;
-        margin-top: 1em;
-        font-weight: bold;
-        color: #e5e7eb; /* Tailwind's text-gray-200 */
-      }
-
-      /* Input, textarea, and select styling */
-      input,
-      textarea,
-      select {
-        width: 100%;
-        margin-bottom: 0.75em;
-        background-color: #1f2937; /* Tailwind's bg-gray-800 */
-        color: #f3f4f6; /* Tailwind's text-gray-100 */
-        border: 1px solid #374151; /* Tailwind's border-gray-700 */
-        padding: 0.5em;
-        border-radius: 0.375rem; /* rounded-md */
-        box-sizing: border-box;
-      }
-
-      input:focus,
-      textarea:focus,
-      select:focus {
-        border-color: #3b82f6; /* blue-500 */
-        outline: none;
-        box-shadow: 0 0 0 1px #3b82f6;
-      }
-
-      /* Checkbox group styling */
-      .checkbox-group label {
-        display: inline-block;
-        margin-right: 1rem;
-        font-weight: normal;
-      }
-
-      /* Radio group styling (for experience rating) */
-      .radio-group label {
-        display: inline-block;
-        margin-right: 1rem;
-        font-weight: normal;
-      }
-
-      /* Button styling */
-      button {
-        padding: 0.5em 1em;
-        background: #3b82f6; /* blue-500 */
-        color: #fff;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-      }
-
-      /* Status log area */
-      #status {
-        margin-top: 1em;
-        padding: 0.5em;
-        background: #111827;
-        white-space: pre-wrap;
-        min-height: 80px;
-        border-radius: 0.25rem;
-      }
-      .status-line {
-        margin: 0.25em 0;
-      }
-      .error {
-        color: #f87171;
-      }
-      .success {
-        color: #3b82f6;
-      }
-      .warn {
-        color: #facc15;
-      }
-
-      /* Custom Scrollbar styling for WebKit browsers */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-      /* Custom Scrollbar styling for Firefox */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-    </style>
+    <link rel="stylesheet" href="../../css/tailwind.generated.css" />
+    <link rel="stylesheet" href="./iframe-forms.css" />
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
@@ -152,6 +24,7 @@
           <h2>1. User Information</h2>
           <label for="userNpub">Nostr Public Key (npub) (optional):</label>
           <input
+            class="form-control"
             type="text"
             id="userNpub"
             placeholder="Enter your npub (optional)"
@@ -159,15 +32,26 @@
           <p>Are you a (check all that apply):</p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="userRole" value="Viewer" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Viewer"
+              />
               Viewer</label
             >
             <label
-              ><input type="checkbox" name="userRole" value="Content Creator" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Content Creator"
+              />
               Content Creator</label
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="userRole"
                 value="Developer/Contributor"
@@ -203,12 +87,14 @@
           </div>
           <label for="likeMost">What do you like most about bitvid?</label>
           <textarea
+            class="textarea"
             id="likeMost"
             rows="3"
             placeholder="Describe the features, usability, or content you enjoy"
           ></textarea>
           <label for="improvements">What would you like to see improved?</label>
           <textarea
+            class="textarea"
             id="improvements"
             rows="3"
             placeholder="Provide specific areas for improvement"
@@ -218,6 +104,7 @@
             use?</label
           >
           <textarea
+            class="textarea"
             id="confusingFeatures"
             rows="3"
             placeholder="Explain any challenges you’ve encountered"
@@ -229,6 +116,7 @@
             >Do you have any other suggestions or thoughts about bitvid?</label
           >
           <textarea
+            class="textarea"
             id="otherSuggestions"
             rows="3"
             placeholder="Share any other feedback"
@@ -236,7 +124,7 @@
           <label for="followUp"
             >Would you like to be contacted for follow-up discussions?</label
           >
-          <select id="followUp">
+          <select class="select" id="followUp">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -245,12 +133,13 @@
             >Preferred contact method (if applicable):</label
           >
           <input
+            class="form-control"
             type="text"
             id="preferredContact"
             placeholder="Nostr DM, email, or other"
           />
 
-          <button type="submit">Submit General Feedback</button>
+          <button class="btn" type="submit">Submit General Feedback</button>
         </form>
         <div id="status"></div>
       </div>
diff --git a/components/iframe_forms/iframe-forms.css b/components/iframe_forms/iframe-forms.css
new file mode 100644
index 00000000..e89eebb5
--- /dev/null
+++ b/components/iframe_forms/iframe-forms.css
@@ -0,0 +1,140 @@
+/* Shared styling for iframe-hosted forms so they match the modal design system. */
+body {
+  background-color: transparent;
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  margin: var(--space-lg);
+}
+
+.container {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.form-container {
+  background-color: var(--color-surface-alt);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+}
+
+.form-container > p {
+  margin: 0;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+form > * + * {
+  margin-top: var(--space-sm);
+}
+
+form h1,
+form h2 {
+  color: var(--color-text);
+  margin-top: var(--space-md);
+}
+
+label {
+  color: var(--color-subtle-text);
+  display: block;
+  font-weight: 600;
+  margin-top: var(--space-sm);
+}
+
+label + .form-control,
+label + .textarea,
+label + .select {
+  margin-top: var(--space-xs);
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
+.checkbox-group label {
+  align-items: center;
+  color: var(--color-subtle-text);
+  display: inline-flex;
+  font-weight: 500;
+  gap: var(--space-xs);
+  margin: 0;
+}
+
+.checkbox-group input[type="checkbox"] {
+  margin: 0;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
+.radio-group label {
+  align-items: center;
+  color: var(--color-subtle-text);
+  display: inline-flex;
+  font-weight: 500;
+  gap: var(--space-xs);
+  margin: 0;
+}
+
+.radio-group input[type="radio"] {
+  accent-color: var(--color-info-strong);
+  margin: 0;
+}
+
+button.btn {
+  align-self: flex-start;
+  margin-top: var(--space-md);
+}
+
+#status {
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  box-shadow: inset 0 0 0 1px var(--color-border-translucent);
+  color: var(--color-subtle-text);
+  min-height: 5rem;
+  padding: var(--space-sm);
+  white-space: pre-wrap;
+}
+
+.status-line {
+  color: var(--color-subtle-text);
+  margin: var(--space-2xs) 0;
+}
+
+.status-line.error {
+  color: var(--color-critical-strong);
+}
+
+.status-line.success {
+  color: var(--color-info-strong);
+}
+
+.status-line.warn {
+  color: var(--color-warning-strong);
+}
+
+@media (max-width: 640px) {
+  body {
+    margin: var(--space-md);
+  }
+
+  .form-container {
+    padding: var(--space-md);
+  }
+}
diff --git a/components/iframe_forms/iframe-request-form.html b/components/iframe_forms/iframe-request-form.html
index efa83470..f4f1e331 100644
--- a/components/iframe_forms/iframe-request-form.html
+++ b/components/iframe_forms/iframe-request-form.html
@@ -5,127 +5,8 @@
     <title>bitvid Feature Request Form</title>
     <!-- Link to your main stylesheet -->
     <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
-    <style>
-      /* Override for form page to match modal field styling */
-
-      /* Remove width constraints from body so our container can be full width */
-      body {
-        background-color: transparent;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        margin: 20px;
-      }
-
-      /* Full-width container */
-      .container {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      /* Card-like container for the form */
-      .form-container {
-        background-color: #111827;
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: var(--shadow-md);
-      }
-
-      h1,
-      h2 {
-        color: #fff;
-      }
-
-      /* Labels */
-      label {
-        display: block;
-        margin-top: 1em;
-        font-weight: bold;
-        color: #e5e7eb;
-      }
-
-      /* Input, textarea, and select styling */
-      input,
-      textarea,
-      select {
-        width: 100%;
-        margin-bottom: 0.75em;
-        background-color: #1f2937;
-        color: #f3f4f6;
-        border: 1px solid #374151;
-        padding: 0.5em;
-        border-radius: 0.375rem;
-        box-sizing: border-box;
-      }
-
-      input:focus,
-      textarea:focus,
-      select:focus {
-        border-color: #3b82f6;
-        outline: none;
-        box-shadow: 0 0 0 1px #3b82f6;
-      }
-
-      /* Checkbox group styling */
-      .checkbox-group label {
-        display: inline-block;
-        margin-right: 1rem;
-        font-weight: normal;
-      }
-
-      /* Button styling */
-      button {
-        padding: 0.5em 1em;
-        background: #3b82f6;
-        color: #fff;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-      }
-
-      /* Status log area */
-      #status {
-        margin-top: 1em;
-        padding: 0.5em;
-        background: #111827;
-        white-space: pre-wrap;
-        min-height: 80px;
-        border-radius: 0.25rem;
-      }
-      .status-line {
-        margin: 0.25em 0;
-      }
-      .error {
-        color: #f87171;
-      }
-      .success {
-        color: #3b82f6;
-      }
-      .warn {
-        color: #facc15;
-      }
-
-      /* Custom Scrollbar styling */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-    </style>
+    <link rel="stylesheet" href="../../css/tailwind.generated.css" />
+    <link rel="stylesheet" href="./iframe-forms.css" />
     <!-- Load nostr‑tools v2.10.4 -->
     <script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
   </head>
@@ -142,6 +23,7 @@
           <h2>1. User Information</h2>
           <label for="userNpub">Nostr Public Key (npub) (optional):</label>
           <input
+            class="form-control"
             type="text"
             id="userNpub"
             placeholder="Enter your npub (optional)"
@@ -149,15 +31,26 @@
           <p>Are you a (check all that apply):</p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="userRole" value="Viewer" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Viewer"
+              />
               Viewer</label
             >
             <label
-              ><input type="checkbox" name="userRole" value="Content Creator" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="userRole"
+                value="Content Creator"
+              />
               Content Creator</label
             >
             <label
               ><input
+                class="checkbox"
                 type="checkbox"
                 name="userRole"
                 value="Developer/Contributor"
@@ -170,6 +63,7 @@
           <h2>2. Feature Request Details</h2>
           <label for="featureName">Feature Name:</label>
           <input
+            class="form-control"
             type="text"
             id="featureName"
             placeholder="Short, descriptive title"
@@ -177,18 +71,21 @@
           />
           <label for="featureDescription">Describe the feature:</label>
           <textarea
+            class="textarea"
             id="featureDescription"
             rows="3"
             placeholder="Explain in detail what the feature does and how it works"
           ></textarea>
           <label for="featureImportance">Why is this feature important?</label>
           <textarea
+            class="textarea"
             id="featureImportance"
             rows="2"
             placeholder="Describe how this will improve the platform and benefit users"
           ></textarea>
           <label for="beneficiary">Who would benefit from this feature?</label>
           <input
+            class="form-control"
             type="text"
             id="beneficiary"
             placeholder="e.g., Content Creators, Viewers, Both"
@@ -200,12 +97,14 @@
             >Are there existing platforms that have this feature?</label
           >
           <textarea
+            class="textarea"
             id="existingPlatforms"
             rows="2"
             placeholder="Provide examples if applicable"
           ></textarea>
           <label for="mockups">Do you have any mockups or examples?</label>
           <textarea
+            class="textarea"
             id="mockups"
             rows="2"
             placeholder="Links, screenshots, or diagrams"
@@ -214,7 +113,7 @@
             >Would you be willing to help test this feature if
             implemented?</label
           >
-          <select id="willingToTest">
+          <select class="select" id="willingToTest">
             <option value="">Select an option</option>
             <option value="Yes">Yes</option>
             <option value="No">No</option>
@@ -225,15 +124,31 @@
           <p>How urgent is this feature?</p>
           <div class="checkbox-group">
             <label
-              ><input type="checkbox" name="featurePriority" value="High" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="featurePriority"
+                value="High"
+              />
               High (Essential for platform success)</label
             >
             <label
-              ><input type="checkbox" name="featurePriority" value="Medium" />
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="featurePriority"
+                value="Medium"
+              />
               Medium (Would improve experience significantly)</label
             >
             <label
-              ><input type="checkbox" name="featurePriority" value="Low" /> Low
+              ><input
+                class="checkbox"
+                type="checkbox"
+                name="featurePriority"
+                value="Low"
+              />
+              Low
               (Nice to have, but not urgent)</label
             >
           </div>
@@ -241,12 +156,13 @@
             >Does this feature require technical expertise to implement?</label
           >
           <textarea
+            class="textarea"
             id="techChallenges"
             rows="2"
             placeholder="Describe any dependencies or challenges"
           ></textarea>
 
-          <button type="submit">Submit Feature Request</button>
+          <button class="btn" type="submit">Submit Feature Request</button>
         </form>
         <div id="status"></div>
       </div>