Align iframe forms with design tokens

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/[email protected]/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>