Added some icons to tutoring page and fixed bug with empty textbox fields.

1 files changed, 24 insertions, 5 deletions

diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index cf769cd..ed44b8f 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -29,10 +29,15 @@ store.addReducers({
 import { SharedStyles }       from './shared-styles.js';
 import { ButtonSharedStyles } from './button-shared-styles.js';
 
+// Import iron-icon
+import '@polymer/iron-icons/communication-icons.js';
+
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-item/paper-icon-item.js';
+import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/paper-slider/paper-slider.js';
 import '@polymer/paper-button/paper-button.js';
 
@@ -91,7 +96,11 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       }
 
       .hopeCard {
-        --paper-card-background-color: #b7e1cd;
+        --paper-card-background-color: #58d68d;
+      }
+
+      paper-item {
+        display: block;
       }
 
       paper-button {
@@ -108,6 +117,11 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         margin-top: 10px;
       }
 
+      .paper-item-link {
+      color: inherit;
+      text-decoration: none;
+      }
+
       .tutoring-grid {
         display:  grid;
         grid-gap: 10px;
@@ -231,17 +245,22 @@ class MaoTutoring extends connect(store)(PageViewElement) {
           <paper-card class="hopeCard">
             <div class="card-actions">
               <h3>Need Help Finiding A Tutor?</h3>
-              <p>Please, meet with your friends to create tutring sessions.
-              Otherwise, contact our tutoring coordinator <em>Mike Binkowski</em>.</p>
+              <p>Please, meet with your friends to create tutring sessions.</p>
+              <p>Otherwise, contact our tutoring coordinator <em>Mike Binkowski</em>.</p>
             </div>
 
             <div class="card-actions">
               <div role="listbox">
-                <paper-icon-item>
-                  <iron-iconset name="call" icons="communication"></iron-iconset>
+                <paper-icon-item selected="false">
                   <iron-icon icon="communication:call" slot="item-icon"></iron-icon>
                   (440)-256-1593
                 </paper-icon-item>
+                <a class="paper-item-link" href="mailto:mbinkowski2020@communityschoolnaples.org" tabindex="-1">
+                  <paper-icon-item>
+                    <iron-icon icon="communication:email" slot="item-icon"></iron-icon>
+                    mbinkowski2020@communityschoolnaples.org
+                  </paper-icon-item>
+                </a>
               </div>
             </div>
           </paper-card>