From ba965367090f183d62490c6a5e4d5ef5ea654dad Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Fri, 18 Dec 2020 17:09:30 -0500
Subject: icons everywhere, also finalized checkout form

---
 .../src/components/checkout/CheckoutForm.vue       | 173 +++++++++++++++------
 1 file changed, 128 insertions(+), 45 deletions(-)

(limited to 'iridescence/src/components/checkout')

diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
index ee6c898..d64d747 100644
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -10,89 +10,152 @@
             <div class="field">
               <label for="firstName" class="label">First Name</label>
 
-              <div class="control">
-                <input id="firstName" class="input" type="text" required />
+              <div class="control has-icons-left">
+                <input
+                  id="firstName"
+                  class="input is-rounded"
+                  type="text"
+                  required
+                />
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-card-account-details"
+                  ></span>
+                </span>
               </div>
             </div>
             <div class="field">
               <label class="label">Last Name</label>
 
-              <div class="control">
-                <input class="input" type="text" required />
+              <div class="control has-icons-left">
+                <input class="input is-rounded" type="text" required />
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-card-account-details"
+                  ></span>
+                </span>
               </div>
             </div>
 
             <div class="field">
               <label class="label">Email Address</label>
 
-              <div class="control">
-                <input class="input" type="email" required />
+              <div class="control has-icons-left">
+                <input class="input is-rounded" type="email" required />
+                <span class="icon is-left">
+                  <span class="iconify-inline" data-icon="mdi-email"></span>
+                </span>
               </div>
               <p class="help">Example: you@example.com</p>
             </div>
 
             <div class="field">
               <label class="label">Phone Number</label>
-              <div class="control">
-                <input class="input" type="tel" pattern="[0-9]{10}" required />
+              <div class="control has-icons-left">
+                <input
+                  class="input is-rounded"
+                  type="tel"
+                  pattern="[0-9]{10}"
+                  required
+                />
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-phone-classic"
+                  ></span>
+                </span>
               </div>
               <p class="help">Example: 7571234567</p>
             </div>
 
             <label class="checkbox">
               <input type="checkbox" />
+              <span class="iconify" data-icon="mdi-cellphone-android"></span>
               May we text order updates and questions to this number?
             </label>
           </div>
           <div class="column">
-            <div class="field">
-              <label class="label">Country</label>
-
-              <div class="control">
-                <div class="select">
+            <label class="label">Location</label>
+            <div class="field has-addons">
+              <div class="control has-icons-left">
+                <div class="select is-rounded">
                   <select required>
                     <option selected>United States</option>
                   </select>
                 </div>
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-flag-variant"
+                  ></span>
+                </span>
+              </div>
+
+              <div class="control has-icons-left">
+                <div class="select is-rounded">
+                  <select required>
+                    <option selected>Virginia</option>
+                  </select>
+                </div>
+                <span class="icon is-left">
+                  <span class="iconify-inline" data-icon="mdi-map"></span>
+                </span>
               </div>
             </div>
 
             <div class="field">
               <label class="label">Address</label>
 
-              <div class="control">
-                <input class="input" type="text" required />
+              <div class="control has-icons-left">
+                <input class="input is-rounded" type="text" required />
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-road-variant"
+                  ></span>
+                </span>
               </div>
             </div>
             <div class="field">
               <label class="label">Address 2 (Optional)</label>
 
-              <div class="control">
-                <input class="input" type="text" />
+              <div class="control has-icons-left">
+                <input class="input is-rounded" type="text" />
+                <span class="icon is-left">
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-format-list-numbered"
+                  ></span>
+                </span>
               </div>
             </div>
 
             <div class="field">
               <label class="label">City</label>
-              <div class="control">
-                <input class="input" type="text" required />
-              </div>
-            </div>
-
-            <div class="field">
-              <label class="label">State</label>
-
-              <div class="select">
-                <select required>
-                  <option selected>VA</option>
-                </select>
+              <div class="control has-icons-left">
+                <input class="input is-rounded" type="text" required />
+                <span class="icon is-left">
+                  <span class="iconify-inline" data-icon="mdi-city"></span>
+                </span>
               </div>
             </div>
 
             <div class="field">
               <label class="label">Zip Code</label>
 
-              <input class="input" type="text" pattern="[0-9]{5}" required />
+              <div class="control has-icons-left">
+                <input
+                  class="input is-rounded"
+                  type="text"
+                  pattern="[0-9]{5}"
+                  required
+                />
+                <span class="icon is-left">
+                  <span class="iconify-inline" data-icon="mdi-mailbox"></span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -101,30 +164,50 @@
       <section class="section">
         <h1 class="title">Payment</h1>
         <hr />
-        payment option (mailed check, paypal, cash or check on delivery)
+
+        <div class="field">
+          <div class="control ">
+            <label class="radio">
+              <input type="radio" name="payment" checked />
+              Cash or check upon delivery
+            </label>
+            <label class="radio">
+              <input type="radio" name="payment" />
+              Mail-in cash or check
+            </label>
+            <label class="radio">
+              <input type="radio" name="payment" />
+              PayPal, Square
+            </label>
+          </div>
+        </div>
       </section>
 
       <section class="section">
         <h1 class="title">Delivery Options</h1>
         <hr />
-        <div class="control">
-          <label class="radio">
-            <input type="radio" name="delivery" />
-            Pick up at studio
-          </label>
-          <label class="radio">
-            <input type="radio" name="delivery" />
-            Pick up at Simply Vintage Art Gallery
-          </label>
-          <label class="radio">
-            <input type="radio" name="delivery" />
-            Delivery
-          </label>
+        <div class="field">
+          <div class="control ">
+            <label class="radio">
+              <input type="radio" name="delivery" checked />
+              Pick up at studio
+            </label>
+            <label class="radio">
+              <input type="radio" name="delivery" />
+              Pick up at Simply Vintage Art Gallery
+            </label>
+            <label class="radio">
+              <input type="radio" name="delivery" />
+              Delivery
+            </label>
+          </div>
         </div>
       </section>
 
       <section class="section">
-        <button class="button is-primary">Continue to Confirmation</button>
+        <button class="button is-success is-rounded">
+          Continue to Confirmation
+        </button>
       </section>
     </form>
   </div>
-- 
cgit v1.2.3