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

---
 iridescence/src/App.vue                            |  25 ++-
 iridescence/src/components/CartCheckout.vue        |  19 +--
 iridescence/src/components/Footer.vue              |  29 +++-
 iridescence/src/components/Navbar.vue              |   4 +-
 iridescence/src/components/ProductDetail.vue       |  25 ++-
 iridescence/src/components/ProductSearch.vue       |  14 +-
 iridescence/src/components/cart/CartItem.vue       |  21 ++-
 iridescence/src/components/cart/Totals.vue         |  11 +-
 .../src/components/checkout/CheckoutForm.vue       | 173 +++++++++++++++------
 9 files changed, 238 insertions(+), 83 deletions(-)

(limited to 'iridescence/src')

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 1d60cc3..8e4e1ec 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -32,8 +32,31 @@ export default {
 
 <style lang="scss">
 @charset "utf-8";
-/*modal-background-background-color: hsla(0, 0%, 4%, 0.2);*/
+
+/* Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap");
+$family-sans-serif: "Oxygen", sans-serif;
+
+/* Custom colors */
+$viridian-green: #2b9292ff;
+$cultured: #f4f6f6ff;
+$gainsboro: #dee5e5ff;
+$queen-blue: #41668cff;
+$madder-lake: #cc2936ff;
+$rich-black-fogra-29: #001011ff;
+
+/* Color overrides */
+$primary: $viridian-green;
+$danger: $madder-lake;
+$info: $queen-blue;
+$link: $queen-blue;
+$black: $rich-black-fogra-29;
+$scheme-main: $cultured;
+$scheme-main-bis: $gainsboro;
+
+/* Resizing */
 $modal-content-width: 50em;
+
 @import "../node_modules/bulma/bulma.sass";
 
 #app {
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
index 590e5b9..1b327b2 100644
--- a/iridescence/src/components/CartCheckout.vue
+++ b/iridescence/src/components/CartCheckout.vue
@@ -1,9 +1,17 @@
 <template>
   <div id="cartCheckout">
     <div class="buttons has-addons">
-      <router-link to="/cart" class="button is-primary is-rounded"
-        >🛒 {{ checkoutReady }}</router-link
+      <router-link
+        v-if="inCart"
+        to="/cart"
+        class="button is-success is-rounded"
       >
+        <span class="iconify-inline" data-icon="mdi-cart"></span>
+        <span>Checkout</span></router-link
+      >
+      <a v-else class="button is-static is-rounded">
+        <span class="iconify-inline" data-icon="mdi-cart"></span>
+      </a>
       <button class="button is-static">x{{ inCart }}</button>
       <button class="button is-static is-rounded">
         {{ cartTotal }}
@@ -24,13 +32,6 @@ export default {
     },
     cartTotal() {
       return this.$store.getters.cartTotal;
-    },
-    checkoutReady() {
-      if (this.inCart) {
-        return "Checkout";
-      } else {
-        return "";
-      }
     }
   }
 };
diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue
index d0d4f70..ac394c7 100644
--- a/iridescence/src/components/Footer.vue
+++ b/iridescence/src/components/Footer.vue
@@ -7,9 +7,22 @@
             <li>
               <a
                 class="navbar-item"
+                target="_blank"
                 href="https://www.facebook.com/glassyladiesart"
-                >Like Us on Facebook</a
               >
+                <span class="iconify-inline" data-icon="mdi-facebook"></span>
+                <span>Like Us on Facebook</span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="navbar-item"
+                target="_blank"
+                href="mailto:liz@theglassyladies.com"
+              >
+                <span class="iconify-inline" data-icon="mdi-email"></span>
+                <span>Write to Us</span>
+              </a>
             </li>
           </ul>
         </div>
@@ -22,15 +35,23 @@
             <li>
               <a>
                 <router-link to="/admin" class="navbar-item">
-                  Inventory
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-package-variant-closed"
+                  ></span>
+                  <span>Inventory</span>
                 </router-link>
               </a>
             </li>
             <li>
               <a
                 ><router-link to="/privacy" class="navbar-item">
-                  Privacy Policy</router-link
-                ></a
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-monitor-eye"
+                  ></span>
+                  <span>Privacy Policy</span>
+                </router-link></a
               >
             </li>
           </ul>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 0ef7de5..f9f99c2 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="navbar">
-    <nav class="navbar is-fixed-top is-transparent">
+    <nav class="navbar is-fixed-top is-primary">
       <div class="navbar-brand">
         <div class="navbar-item">
           <img src="@/assets/logo.png" />
           <div class="navbar-item">
-            <span>
+            <span style="color: white">
               The Glassy Ladies
             </span>
           </div>
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 430d78b..6aeb68c 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -38,33 +38,44 @@
                 <p class="subtitle">{{ stock }}</p>
                 <div v-if="inCart" class="field has-addons">
                   <p class="control is-expanded">
-                    <a class="button is-static is-fullwidth">
+                    <a
+                      class="button is-static is-fullwidth is-rounded is-medium"
+                    >
                       {{ inCart }} in cart
                     </a>
                   </p>
                   <div class="control">
                     <a
                       @click="incrementCartQuantity(-1)"
-                      class="button is-info is-outlined"
+                      class="button is-info is-medium"
                     >
-                      -
+                      <span
+                        class="iconify-inline"
+                        data-icon="mdi-cart-minus"
+                      ></span>
                     </a>
                   </div>
                   <div class="control">
                     <a
                       @click="incrementCartQuantity(1)"
-                      class="button is-info is-outlined"
+                      class="button is-info is-rounded is-medium"
                     >
-                      +
+                      <span
+                        class="iconify-inline"
+                        data-icon="mdi-cart-plus"
+                      ></span>
                     </a>
                   </div>
                 </div>
                 <button
                   v-else
                   @click="incrementCartQuantity(1)"
-                  class="button is-primary is-fullwidth"
+                  class="button is-success is-fullwidth is-rounded is-medium"
                 >
-                  Add to Cart
+                  <span
+                    class="iconify-inline"
+                    data-icon="mdi-cart-arrow-down"
+                  ></span>
                 </button>
               </div>
             </div>
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
index 0cf8cf2..2a7a2e3 100644
--- a/iridescence/src/components/ProductSearch.vue
+++ b/iridescence/src/components/ProductSearch.vue
@@ -1,24 +1,30 @@
 <template>
   <div id="productSearch">
     <div class="field is-grouped is-grouped-multiline">
-      <div class="control is-expanded">
+      <div class="control is-expanded has-icons-left">
         <input
-          class="input is-primary is-medium"
+          class="input is-medium is-primary is-rounded"
           type="text"
           placeholder="Find something in particular..."
           v-model.trim="term"
           @input="updateSearch"
           autofocus
         />
+        <span class="icon is-left">
+          <span class="iconify-inline" data-icon="mdi-magnify"></span>
+        </span>
       </div>
-      <div class="control">
-        <div class="select is-primary is-medium">
+      <div class="control has-icons-left">
+        <div class="select is-medium is-primary is-rounded">
           <select v-model="sortOptionName" @change="updateSort">
             <option v-for="name in sortOptionNames" :key="name" :value="name">
               {{ name }}
             </option>
           </select>
         </div>
+        <span class="icon is-left">
+          <span class="iconify-inline" data-icon="mdi-sort"></span>
+        </span>
       </div>
     </div>
     <content class="has-text-centered" v-if="noResults">
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index c99d714..0d26f4e 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -25,32 +25,39 @@
             <div class="level-item">
               <div class="field has-addons">
                 <p class="control is-expanded">
-                  <a class="button is-static is-fullwidth">
+                  <a class="button is-static is-fullwidth is-rounded">
                     {{ inCart }} in cart
                   </a>
                 </p>
                 <div class="control">
                   <a
                     @click="incrementCartQuantity(-1)"
-                    class="button is-info is-outlined"
+                    class="button is-info is-rounded"
                   >
-                    -
+                    <span
+                      class="iconify-inline"
+                      data-icon="mdi-cart-minus"
+                    ></span>
                   </a>
                 </div>
                 <div class="control">
                   <a
                     @click="incrementCartQuantity(1)"
-                    class="button is-info is-outlined"
+                    class="button is-info is-rounded"
                   >
-                    +
+                    <span
+                      class="iconify-inline"
+                      data-icon="mdi-cart-plus"
+                    ></span>
                   </a>
                 </div>
               </div>
             </div>
 
             <div class="level-item">
-              <button class="button is-outlined is-danger" @click="removeAll">
-                Remove
+              <button class="button is-danger is-rounded" @click="removeAll">
+                <span class="iconify-inline" data-icon="mdi-cart-remove"></span>
+                <span>Remove All</span>
               </button>
             </div>
           </div>
diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue
index b679207..5c211ae 100644
--- a/iridescence/src/components/cart/Totals.vue
+++ b/iridescence/src/components/cart/Totals.vue
@@ -1,13 +1,16 @@
 <template>
   <div>
     <h1 class="subtitle has-text-centered">
-      Summary
+      Total
     </h1>
     <hr />
 
-    <h1 class="title has-text-centered">Total: {{ cartTotal }}</h1>
-    <router-link to="/checkout" class="button is-primary is-fullwidth">
-      Checkout
+    <h1 class="title has-text-centered">{{ cartTotal }}</h1>
+    <router-link
+      to="/checkout"
+      class="button is-success is-fullwidth is-rounded is-medium"
+    >
+      Checkout Now
     </router-link>
   </div>
 </template>
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