Adding slide to pronoun preset selection

src/popup.css

@@ -132,18 +132,35 @@ label {
   align-items: center;
   text-wrap: nowrap;
   gap: 6px;
-  margin-top: 20px;
+  align-content: center;
 }
 
-.primary-promt input {
+#header-name {
-  font-size: 50px;
+  margin-bottom: 17.25px;
+}
+
+#header-pov {
+  margin-top: 8px;
+  margin-bottom: 21.25px;
+  transition: .5s;
 }
 
 #other {
-  display: none; /* Modified by options.js */
+  display: grid;
-  gap: 6px;
+  overflow: hidden;
-  margin-top: 12px;
+  margin-top: 8px;
   margin-left: 18px;
+  gap: 6px;
+  height: 0;
+  transition: .5s;
+}
+
+#other.show-other {
+  height: 297px; /* Height of other options */
+}
+
+#header-pov.show-other {
+  margin-top: 16px;
 }
 
 #other li {
@@ -217,6 +234,7 @@ h1 {
 ul {
   list-style: none;
   padding-left: 0;
+  margin: 0;
 }
 
 
@@ -225,8 +243,7 @@ ul {
   display: grid;
   grid-template-columns: 7fr 5fr;
   gap: 8px;
-  margin-top: 20px;
+  margin-top: 34px;
-  margin-bottom: 20px;
 }
 
 button:not(.delete) {
@@ -246,8 +263,6 @@ button:not(.delete) {
 #button-grid > button {
   border-radius: .5em;
   width: 100%;
-  margin-top: 6px;
-  margin-bottom: 6px;
   gap: 8px;
   text-align: center;
 }
@@ -375,7 +390,7 @@ background-color: var(--color-l-red-20);
 
 #configuration {
   background-color: var(--color-l-gray-10);
-  padding: 10px;
+  padding: 16px 10px;
   border: 1px solid var(--border-color);
   border-radius: .5em;
   margin-top: var(--small-text);
@@ -389,42 +404,6 @@ label {
   font-size: 50px;
 }
 
-#other {
-  display: none; /* Modified by options.js */
-  gap: 6px;
-  margin-top: 12px;
-  margin-left: 18px;
-}
-
-#other li {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  align-items: center;
-  gap: 6px;
-}
-
-#other > li > label {
-  font-size: var(--small-text);
-  text-align: right;
-  text-wrap: nowrap;
-}
-
-#other > li > input {
-  font-size: var(--small-text);
-}
-
-#other > li > select {
-  font-size: var(--small-text);
-  width: min-content;
-}
-
-#also > li {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 6px;
-}
-
 .lhs {
   text-align: right;
 }
@@ -454,10 +433,11 @@ label {
 
 #links {
   text-align: right;
+  padding: var(--small-text) 0;
 }
 
 #links > li {
-  margin-top: 6px;
+  margin-bottom: 6px;
 }
 
 a {

src/popup.html

@@ -22,14 +22,14 @@
         <form id="options">
           <h2 class="visually-hidden">Name</h2>
 
-          <div class="primary-prompt">
+          <div id="header-name" class="primary-prompt">
             <label for="name">My name is</label>
             <input type="text" id="name" name="name">
           </div>
 
           <h2 class="visually-hidden">Pronouns</h2>
 
-          <div class="primary-prompt">
+          <div id="header-preset" class="primary-prompt">
             <label for="preset">My pronouns are</label>
             <select id="preset" name="preset">
               <option value=""></option>
@@ -97,7 +97,7 @@
 
           <h2 class="visually-hidden">Perspective</h2>
 
-          <div class="primary-prompt">
+          <div id="header-pov" class="primary-prompt">
             <label for="pov">I prefer to read in</label>
             <select id="pov" name="pov">
               <option value=""></option>
@@ -109,7 +109,7 @@
 
           <h2 class="visually-hidden">Also replace</h2>
 
-          <label class="primary-prompt" for="lhs-1">I also want to replace...</label>
+          <label id="header-also" for="lhs-1">I also want to replace...</label>
 
           <ul id="also"></ul>
 

src/popup.js

@@ -238,10 +238,13 @@ function setFinal(li, isFinal) {
 /* Displays more options for pronouns if "other" is selected */
 function showOther() {
   let other = document.querySelector("#other");
+  let headerPov = document.querySelector("#header-pov");
   if (document.querySelector("#preset").value == "other") {
-    other.style.display = "grid";
+    other.classList.add("show-other");
+    headerPov.classList.add("show-other");
   } else {
-    other.style.display = "none";
+    other.classList.remove("show-other");
+    headerPov.classList.remove("show-other");
   }
 }