mostly css and some other tweaks to mission trip form

assets/css/compiled/main.css

@@ -1714,6 +1714,11 @@ select {
   margin-bottom: 2rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -2039,18 +2044,6 @@ select {
   height: 1000px;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
-.h-4 {
-  height: 1rem;
-}
-
-.h-2 {
-  height: 0.5rem;
-}
-
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -2115,6 +2108,10 @@ select {
   width: 0.75rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -2209,6 +2206,18 @@ select {
   flex-basis: 33.333333%;
 }
 
+.basis-2\/3 {
+  flex-basis: 66.666667%;
+}
+
+.basis-1\/4 {
+  flex-basis: 25%;
+}
+
+.basis-3\/4 {
+  flex-basis: 75%;
+}
+
 .-translate-y-8 {
   --tw-translate-y: -2rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2659,6 +2668,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -2699,11 +2713,6 @@ select {
   padding-bottom: 2.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2842,6 +2851,11 @@ select {
   line-height: 2.25rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .text-6xl {
   font-size: 3.75rem;
   line-height: 1;
@@ -2851,11 +2865,6 @@ select {
   font-size: 0.6rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .font-extrabold {
   font-weight: 800;
 }
@@ -2900,10 +2909,6 @@ select {
   line-height: .75rem;
 }
 
-.leading-10 {
-  line-height: 2.5rem;
-}
-
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-900), var(--tw-text-opacity));
@@ -2993,6 +2998,31 @@ select {
   color: transparent;
 }
 
+.text-secondary-300 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
+}
+
+.text-secondary-100 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-100), var(--tw-text-opacity));
+}
+
+.text-secondary-200 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
+}
+
+.text-secondary-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-700), var(--tw-text-opacity));
+}
+
+.text-secondary-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
+}
+
 .\!no-underline {
   text-decoration-line: none !important;
 }

layouts/shortcodes/mt-form.html

@@ -73,7 +73,7 @@
     <form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
         <h3 class="basis-full">Mission Trip Application</h3>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="firstname" class="basis-full">What is your first and last name?</label>
+            <label for="firstname" class="basis-full mx-2">What is your first and last name?</label>
             <br/>
             <input type="text" id="firstname" name="firstname"
                    placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
@@ -81,7 +81,7 @@
                    placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="parentfirstname" class="basis-full">What is your parent's first and last name?</label>
+            <label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?</label>
             <input type="text" id="parentfirstname" name="parentfirstname"
                    class="flex-1 form-input {{ $formClasses }}"
                    placeholder="First Name">
@@ -89,11 +89,7 @@
                    class="flex-1 form-input {{ $formClasses }}"
                    placeholder="Last Name">
         </div>
-        <label for="parentemail" class="basis-full">What is your parent's email address?</label>
+        <div class="basis-full my-4">
-        <input type="email" id="parentemail" name="parentemail"
-               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-               class="basis-full form-input {{ $formClasses }}">
-        <div class="basis-full my-8">
             <div class="">
                 <label for="birthdate" class="">When were you born?</label>
                 <input type="date" id="birthdate" name="birthdate"
@@ -108,12 +104,12 @@
             </div>
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="street" class="basis-full">What is your address? {{ $requiredField }}</label>
+            <label for="street" class="basis-full mx-2">What is your address? <span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
             <input type="text" id="street" name="street"
                    class="basis-full form-input {{ $formClasses }}"
                    placeholder="Street Address" required>
             <input type="text" id="city" name="city"
-                   class="flex-auto form-input {{ $formClasses }}"
+                   class="basis-full form-input {{ $formClasses }}"
                    placeholder="City" required>
             <input type="text" id="state" name="state"
                    class="flex-auto form-input {{ $formClasses }}"
@@ -122,29 +118,34 @@
                    class="flex-auto form-input {{ $formClasses }}"
                    placeholder="Zip Code" required>
         </div>
-        <div class="basis-full flex flex-wrap items-center my-8">
         <div class="flex-auto flex flex-wrap items-center">
-                <label for="cellphone" class="mr-4">Cell phone</label>
+            <label for="cellphone" class="basis-1/4 mr-4">Cell phone</label>
             <input type="tel" id="cellphone" name="cellphone"
                    class="flex-auto form-input {{ $formClasses }}">
         </div>
         <div class="flex-auto flex flex-wrap items-center">
-                <label for="homephone" class="mr-4">Parent phone</label>
+            <label for="homephone" class="basis-1/4 mr-4">Parent phone</label>
             <input type="tel" id="homephone" name="homephone"
                    class="flex-auto form-input {{ $formClasses }}">
         </div>
-            <div class="flex-auto flex flex-wrap items-center">
+        <div class="basis-full flex items-center">
-                <label for="email" class="mr-4">Email</label>
+            <label for="email" class="basis-1/4 mr-4">Email</label>
             <input type="email" id="email" name="email"
                    pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-                       class="flex-auto form-input {{ $formClasses }}">
+                   class="basis-3/4 form-input {{ $formClasses }}">
         </div>
+        <div class="basis-full flex items-center">
+            <label for="parentemail" class="basis-1/4 mr-4">Parent's email?</label>
+            <input type="email" id="parentemail" name="parentemail"
+                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+                   class="basis-3/4 form-input {{ $formClasses }}">
         </div>
-        <label for="school" class="basis-full my-4">What school do you go to?</label>
+
+        <label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
         <input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
 
         <div class="basis-full my-4">
-            <label for="grade" class="">Grade</label>
+            <label for="grade" class=" mx-2">Grade</label>
             <br/>
             <input type="radio" id="grade" name="grade" value="8"
                    class="form-input {{ $formClasses }}" checked>
@@ -167,7 +168,7 @@
             <label for="grade" class="">Senior</label>
         </div>
         <div class="basis-full flex flex-wrap my-4">
-            <label for="pastorfirstname" class="basis-full">What is your pastor's name and number?</label>
+            <label for="pastorfirstname" class="basis-full mx-2">What is your pastor's name and number?</label>
             <input type="text" id="pastorfirstname" name="pastorfirstname"
                    class="flex-auto form-input {{ $formClasses }}"
                    placeholder="First Name">
@@ -179,10 +180,10 @@
                    placeholder="Phone Number">
         </div>
         <div class="basis-full my-4 flex flex-wrap items-center">
-            <label for="church" class="basis-full">What church do you attend?</label>
+            <label for="church" class="basis-full mx-2">What church do you attend?</label>
             <input type="text" id="church" name="church"
                    class="basis-full form-input {{ $formClasses }}">
-            <label for="churchattendance" class="basis-full mt-8">Do you attend church regularly?</label>
+            <label for="churchattendance" class="basis-full mt-8 mx-2">Do you attend church regularly? <code id="layout" class="inline-block text-secondary-500">Regularly being 3 times a month</code></label>
             <div class="basis-full flex flex-wrap items-center">
                 <input type="radio" id="churchattendance" name="churchattendance"
                        value="yes" class="flex-none form-input {{ $formClasses }}" checked>
@@ -228,37 +229,30 @@
             </div>
         </div>
         <div class="basis-full my-4 mb-8 flex flex-wrap">
-            <label for="image" class="basis-full">
+            <label for="image" class="basis-full mx-2">
                 Please give us a picture you'd like to use on prayer cards.
             </label>
             <input type="file" id="image" name="image"
                    class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
         </div>
 
-        <label class="basis-full mt-8">Please rank the trips you'd like to go on: 1 being your first choice and 2 being your last choice. If you cannot go on a trip for sure, please use the X.</label>
+        <label class="basis-full mt-8 mx-2" for="trip">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</label>
-        <div class="basis-full grid grid-cols-1 gap-8 lg:grid-cols-3
+        <select id="trip" name="trip" class="form-select {{ $formClasses }} basis-full items-center mb-8">
-                    md:grid-cols-1 sm:grid-cols-1 items-center mb-8">
+            <option value="New Mexico">New Mexico</option>
-            <div class="">
+            <option value="Mexico">Mexico</option>
-                <label for="trip-1">New Mexico</label>
-                <select id="trip-1" name="trip-1" class="form-select {{ $formClasses }}">
-                    <option value="1">1</option>
-                    <option value="2">2</option>
-                    <option value="X">X</option>
         </select>
-            </div>
+            <!-- <div class="flex-auto basis-1/3">
-            <div class="flex-auto basis-1/3">
                  <label for="trip-2" class="basis-1/2">Mexico</label>
                  <select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="X">X</option>
                  </select>
-            </div>
+                 </div> -->
-        </div>
 
         <div class="basis-full mt-10">
             <label for="tripnotes" class="p-4">
-                Do you have any other notes for us regarding this trip?
+                Is there a trip you cannot go on due to scheduling conflicts? Or do you have any other things you'd wish to inform us about regarding a specific trip?
             </label>
             <br/>
             <textarea id="tripnotes" name="tripnotes"
@@ -347,7 +341,7 @@
                       placeholder=""></textarea>
         </div>
         <div class="basis-full my-10">
-            <label for="final-agreement">
+            <label for="final-agreement" class="px-2">
                 I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed.
             </label>
             <div class="my-4">
@@ -358,7 +352,7 @@
                 </label>
             </div>
         </div>
-        <label for="registration" class="basis-full">
+        <label for="registration" class="basis-full px-2">
             Would you like to pay the registration fee now or later?
         </label>
         <div class="basis-full">