updated styling for existing-level compoenent

templates/panel/add-site-key/add-level.html

@@ -1,9 +1,11 @@
-<fieldset class="sitekey-form__level">
-  <legend>Level <.= level .></legend>
-  <label class="sitekey-form__level-fieldname" for="visitor<.= level .>"
+<fieldset class="sitekey__level-container">
+  <legend class="sitekey__level-title">
+    Level <.= level .>
+  </legend>
+  <label class="sitekey-form__level-label" for="visitor<.= level .>"
     >Visitor
     <input
-      class="sitekey-form__number-filed"
+      class="sitekey-form__level-input"
       type="number"
       name=""
       value=""
@@ -11,21 +13,24 @@
     />
   </label>
 
-  <label class="sitekey-form__level-fieldname" for="difficulty<.= level .>">
+  <label class="sitekey-form__level-label" for="difficulty<.= level .>">
     Difficulty
     <input
       type="number"
       name="difficulty"
-      class="sitekey-form__number-filed"
+      class="sitekey-form__level-input"
       value=""
       id="difficulty<.= level .>"
     />
   </label>
-  <input
-    class="sitekey-form__add-level-button"
-    type="button"
-    name="add"
-    id="add"
-    value="Add"
-  />
+  <label class="sitekey-form__level-label--hidden" for="add">
+    Add level
+    <input
+      class="sitekey-form__level-add-level-button"
+      type="button"
+      name="add"
+      id="add"
+      value="Add"
+    />
+  </label>
 </fieldset>

templates/panel/add-site-key/existing-level.html

@@ -1,12 +1,36 @@
-<div class="sitekey-form__add-level-flex-container">
-  <!-- insert Javascript for adding more levels as needed -->
-  <label class="sitekey-form__label" for="level<.= level .>">Level <.= level .></label>
-</div>
+<fieldset class="sitekey__level-container">
+  <legend class="sitekey__level-title">
+    Level <.= level .>
+  </legend>
+  <label class="sitekey-form__level-label" for="visitor<.= level .>"
+    >Visitor
+    <input
+      class="sitekey-form__level-input"
+      type="number"
+      name=""
+      value=""
+      id="visitor<.= level .>"
+    />
+  </label>
 
-<input
-  class="sitekey-form__input"
-  type="number"
-  name="level1"
-  id="level<.= level .>"
-  value=""
-/>
+  <label class="sitekey-form__level-label" for="difficulty<.= level .>">
+    Difficulty
+    <input
+      type="number"
+      name="difficulty"
+      class="sitekey-form__level-input"
+      value=""
+      id="difficulty<.= level .>"
+    />
+  </label>
+  <label class="sitekey-form__level-label--hidden" for="remove<.= level .>">
+    Add level
+    <input
+      class="sitekey-form__level-add-level-button"
+      type="button"
+      name="remove"
+	  id="remove<.= level .>"
+      value="Remove"
+    />
+  </label>
+</fieldset>

templates/panel/add-site-key/form.html

@@ -16,7 +16,7 @@
 
   <. for level in 1..=levels { .>
     <. if level == levels { .>
-    <. include!("./new-add-level.html"); .> 
+    <. include!("./add-level.html"); .> 
     <. } else { .> 
     <. include!("./existing-level.html"); .> 
     <. } .> 

templates/panel/add-site-key/new-add-level.html

@@ -1,36 +0,0 @@
-<fieldset class="sitekey__level-container">
-  <legend class="sitekey__level-title">
-    Level <.= level .>
-  </legend>
-  <label class="sitekey-form__level-label" for="visitor<.= level .>"
-    >Visitor
-    <input
-      class="sitekey-form__level-input"
-      type="number"
-      name=""
-      value=""
-      id="visitor<.= level .>"
-    />
-  </label>
-
-  <label class="sitekey-form__level-label" for="difficulty<.= level .>">
-    Difficulty
-    <input
-      type="number"
-      name="difficulty"
-      class="sitekey-form__level-input"
-      value=""
-      id="difficulty<.= level .>"
-    />
-  </label>
-  <label class="sitekey-form__level-label--hidden" for="add">
-    Add level
-    <input
-      class="sitekey-form__level-add-level-button"
-      type="button"
-      name="add"
-      id="add"
-      value="Add"
-    />
-  </label>
-</fieldset>