Working on requesting tutoring hours frontend.

5 files changed, 405 insertions, 77 deletions

diff --git a/package-lock.json b/package-lock.json
index e71c0c7..4dc3a11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -955,6 +955,25 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/iron-dropdown": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-dropdown/-/iron-dropdown-3.0.0-pre.21.tgz",
+      "integrity": "sha512-0fMnxf4p2fArEwRHvMNrDjDTsHQuUkgukzSq/ERww3oWBVPlYxMCTv5ikUFqLfupvjSYNoONxcjOt4V9VFiNow==",
+      "requires": {
+        "@polymer/iron-behaviors": "3.0.0-pre.21",
+        "@polymer/iron-overlay-behavior": "3.0.0-pre.21",
+        "@polymer/neon-animation": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@polymer/iron-fit-behavior": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-3.0.0-pre.21.tgz",
+      "integrity": "sha512-j3F59w4xGfVbmw8PQruQz4b7tHpi2cmgVeuOuQM6eG0+wA6hu5O2I+LYJCQmCLuQN8LzFjATTOCDfhlDb2Pfcg==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/iron-flex-layout": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.0-pre.21.tgz",
@@ -971,6 +990,25 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/iron-icon": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-3.0.0-pre.21.tgz",
+      "integrity": "sha512-B/6ncM/JiKYOCkYtIsgztZuMzmMWAR5POGQ0r7TU0RaBzKstqTvn6NfRHeNzYjsOwBMse/wA6/qvgvCRgx6kWw==",
+      "requires": {
+        "@polymer/iron-flex-layout": "3.0.0-pre.21",
+        "@polymer/iron-meta": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@polymer/iron-iconset-svg": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.0-pre.21.tgz",
+      "integrity": "sha512-YWdX3QROFHKsGds9wUDbD2u1hN6uG6oG4fEu/F16aHFQg9tu2oiSyRspGsOQlXJ28177Qc2rxQ1Kp8GdlzpMbw==",
+      "requires": {
+        "@polymer/iron-meta": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/iron-image": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/iron-image/-/iron-image-3.0.0-pre.21.tgz",
@@ -1005,6 +1043,25 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/iron-overlay-behavior": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-3.0.0-pre.21.tgz",
+      "integrity": "sha512-aHGtygYEXmFu0Y13vLuBfXm/obNlGnb4JdKCycB931ugfrloEwYo+8DcPyWdc3J0dMJDhv7pH8VZJglNdUQjZA==",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "3.0.0-pre.21",
+        "@polymer/iron-fit-behavior": "3.0.0-pre.21",
+        "@polymer/iron-resizable-behavior": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@polymer/iron-range-behavior": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-range-behavior/-/iron-range-behavior-3.0.0-pre.21.tgz",
+      "integrity": "sha512-2Fehcs9onjKIw18KivnOdH40sjy7Sn4l5OhCr8Zu7QBcB3MSBUxyEorRerzh3hVmUB5Y4WwXVFCCmz3SoEGoiA==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/iron-resizable-behavior": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.0-pre.21.tgz",
@@ -1021,6 +1078,14 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/iron-selector": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-selector/-/iron-selector-3.0.0-pre.21.tgz",
+      "integrity": "sha512-vfBRGY1EggP/mk7AbZAzVfYaPVh+ZCcH4mX8QccW8ZTrU0F6QXhoPAgss0gAFc+pz79C3irqDfVvoViQrmOUDw==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/iron-validatable-behavior": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.0-pre.21.tgz",
@@ -1039,6 +1104,16 @@
         "lit-html": "0.10.2"
       }
     },
+    "@polymer/neon-animation": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.21.tgz",
+      "integrity": "sha512-aOretgBxXazpGHKqn2FepGi5VHi7tzht2IeyGHG9J9S6k955cohZQ3twThT76ZhLi4Tlu761cCu9YwFg2aLxUQ==",
+      "requires": {
+        "@polymer/iron-resizable-behavior": "3.0.0-pre.21",
+        "@polymer/iron-selector": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/paper-behaviors": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.0-pre.21.tgz",
@@ -1072,6 +1147,24 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/paper-dropdown-menu": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-3.0.0-pre.21.tgz",
+      "integrity": "sha512-U7hBAqGG1OknVcp1B3q8CCAhJpGMUJsQT4i5SSDDf5oMw51n9IdmziBXxwJK25GM7GCsWnPNi89tFISaHkEEWg==",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "3.0.0-pre.21",
+        "@polymer/iron-form-element-behavior": "3.0.0-pre.21",
+        "@polymer/iron-icon": "3.0.0-pre.21",
+        "@polymer/iron-iconset-svg": "3.0.0-pre.21",
+        "@polymer/iron-validatable-behavior": "3.0.0-pre.21",
+        "@polymer/paper-behaviors": "3.0.0-pre.21",
+        "@polymer/paper-input": "3.0.0-pre.21",
+        "@polymer/paper-menu-button": "3.0.0-pre.21",
+        "@polymer/paper-ripple": "3.0.0-pre.21",
+        "@polymer/paper-styles": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/paper-input": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.0.0-pre.21.tgz",
@@ -1086,6 +1179,42 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/paper-item": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-item/-/paper-item-3.0.0-pre.21.tgz",
+      "integrity": "sha512-B1VsZWM1wksV7TUmo6TVaAoXncwOnckSxtiZAmUlu+F50MbD8QgddM0Y+/vhEBAx9org4P++WFJSci2Q3btTSw==",
+      "requires": {
+        "@polymer/iron-behaviors": "3.0.0-pre.21",
+        "@polymer/iron-flex-layout": "3.0.0-pre.21",
+        "@polymer/paper-styles": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@polymer/paper-menu-button": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-menu-button/-/paper-menu-button-3.0.0-pre.21.tgz",
+      "integrity": "sha512-nF4ncCsELt4Bb2zGw012TbtO3c71p0y86f+dHoX36ZqDD/2l0R4sOdGqIxfvY9rsqPlaKzFnEPLhKSQFln7JGg==",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "3.0.0-pre.21",
+        "@polymer/iron-behaviors": "3.0.0-pre.21",
+        "@polymer/iron-dropdown": "3.0.0-pre.21",
+        "@polymer/iron-fit-behavior": "3.0.0-pre.21",
+        "@polymer/neon-animation": "3.0.0-pre.21",
+        "@polymer/paper-styles": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@polymer/paper-progress": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-progress/-/paper-progress-3.0.0-pre.21.tgz",
+      "integrity": "sha512-U4uEaU77uJexdu9qPxMiiZDnD/OHSjKHTmgjyNqDzrF+Qzt4WKJtv2fsBXFf4kXvQgIXwIQBMBjn8uXXo4TrTw==",
+      "requires": {
+        "@polymer/iron-flex-layout": "3.0.0-pre.21",
+        "@polymer/iron-range-behavior": "3.0.0-pre.21",
+        "@polymer/paper-styles": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/paper-ripple": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.0-pre.21.tgz",
@@ -1095,6 +1224,22 @@
         "@polymer/polymer": "3.0.2"
       }
     },
+    "@polymer/paper-slider": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-slider/-/paper-slider-3.0.0-pre.21.tgz",
+      "integrity": "sha512-K1rMVDkxSWxWpmlPXEGrTtWfHaLnbSDwHdXLqlQD+iDawe6FFEnXcWAmaspvGiMDcS4qdJT0OGxlljtKli6RlA==",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "3.0.0-pre.21",
+        "@polymer/iron-behaviors": "3.0.0-pre.21",
+        "@polymer/iron-flex-layout": "3.0.0-pre.21",
+        "@polymer/iron-form-element-behavior": "3.0.0-pre.21",
+        "@polymer/paper-behaviors": "3.0.0-pre.21",
+        "@polymer/paper-input": "3.0.0-pre.21",
+        "@polymer/paper-progress": "3.0.0-pre.21",
+        "@polymer/paper-styles": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@polymer/paper-styles": {
       "version": "3.0.0-pre.21",
       "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.0-pre.21.tgz",
@@ -1536,6 +1681,124 @@
         "@types/node": "9.6.22"
       }
     },
+    "@vaadin/vaadin-button": {
+      "version": "2.1.0-beta2",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-button/-/vaadin-button-2.1.0-beta2.tgz",
+      "integrity": "sha512-opJsiQiYrukayepzlrcVEK+NPc5e6h8PDG7a/sAbmgHiQTUyPbyzEjxCduFNxn+Dad2Eip0UADVKvoIJ7oNBcw==",
+      "requires": {
+        "@polymer/polymer": "3.0.2",
+        "@vaadin/vaadin-control-state-mixin": "2.1.1",
+        "@vaadin/vaadin-element-mixin": "1.1.2",
+        "@vaadin/vaadin-lumo-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-material-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-themable-mixin": "1.2.1"
+      }
+    },
+    "@vaadin/vaadin-control-state-mixin": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-control-state-mixin/-/vaadin-control-state-mixin-2.1.1.tgz",
+      "integrity": "sha512-YYhDdEdnFQOAoLY4SVJB5eUZHGAw/YTIeEEql6lHLlENDYuJ7eaniNhL5mIuQTf/uqSauTl1c1S/IJl3D8zGPw==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@vaadin/vaadin-date-picker": {
+      "version": "3.2.0-beta2",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-date-picker/-/vaadin-date-picker-3.2.0-beta2.tgz",
+      "integrity": "sha512-WX7/OUaSqftGl7XemHTF5y/JpfE3JB8Fuoh9nBdvXEwod7gLrrbSsDhbyhpMErM1aiaK5CpA57lf9i8ugQOceQ==",
+      "requires": {
+        "@polymer/iron-a11y-announcer": "3.0.0-pre.21",
+        "@polymer/iron-a11y-keys-behavior": "3.0.0-pre.21",
+        "@polymer/iron-media-query": "3.0.0-pre.21",
+        "@polymer/iron-resizable-behavior": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2",
+        "@vaadin/vaadin-button": "2.1.0-beta2",
+        "@vaadin/vaadin-control-state-mixin": "2.1.1",
+        "@vaadin/vaadin-element-mixin": "1.1.2",
+        "@vaadin/vaadin-lumo-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-material-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-overlay": "3.1.0-beta2",
+        "@vaadin/vaadin-text-field": "2.1.0-beta2",
+        "@vaadin/vaadin-themable-mixin": "1.2.1"
+      }
+    },
+    "@vaadin/vaadin-development-mode-detector": {
+      "version": "1.1.0-beta1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-development-mode-detector/-/vaadin-development-mode-detector-1.1.0-beta1.tgz",
+      "integrity": "sha512-ZVTqTrc1zNnAe1yejnV+fREglqX/mO3brInMCtjmbbrDuQ6s/6xfkAUl3b7o/nppGnxZUS683hyuK1Ie05zuUg==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@vaadin/vaadin-element-mixin": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-element-mixin/-/vaadin-element-mixin-1.1.2.tgz",
+      "integrity": "sha512-gsnX2/xZZG8HqD9rbEyyXSJRv0BrTYU0RocjtGzGfD86rZiKhmPML04gD+0Sg74d3TH9HzCSvzeMKnQ0Zog12g==",
+      "requires": {
+        "@polymer/polymer": "3.0.2",
+        "@vaadin/vaadin-development-mode-detector": "1.1.0-beta1",
+        "@vaadin/vaadin-usage-statistics": "1.1.0-beta1"
+      }
+    },
+    "@vaadin/vaadin-lumo-styles": {
+      "version": "1.1.0-beta1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-lumo-styles/-/vaadin-lumo-styles-1.1.0-beta1.tgz",
+      "integrity": "sha512-SqHbRIUE+p2X3TguHmC87e9SdyAmHNQC4HQa95SB0fFT0irQznzKVmZt0Z+V7SIGBsoCTofOI0KP1GEgRf0JQQ==",
+      "requires": {
+        "@polymer/iron-icon": "3.0.0-pre.21",
+        "@polymer/iron-iconset-svg": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@vaadin/vaadin-material-styles": {
+      "version": "1.1.0-beta1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-material-styles/-/vaadin-material-styles-1.1.0-beta1.tgz",
+      "integrity": "sha512-bZak3bBoU/iqb9nU5Kr+dJnRvAXaeYXBkh5sQvWDTi0IsGepsQ4+8mfCTb6thKWSrzyK+qy25fsKQgT1OCFqww==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@vaadin/vaadin-overlay": {
+      "version": "3.1.0-beta2",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-overlay/-/vaadin-overlay-3.1.0-beta2.tgz",
+      "integrity": "sha512-YzFJB6mv8ctfFeH3m7eXCrVyM1vWf0H8hsjdbD8TodomDXKYfYGUQNJa6+RQ4RfT7aSTicJQvy9dHpH6ByJ9lw==",
+      "requires": {
+        "@polymer/iron-overlay-behavior": "3.0.0-pre.21",
+        "@polymer/polymer": "3.0.2",
+        "@vaadin/vaadin-lumo-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-material-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-themable-mixin": "1.2.1"
+      }
+    },
+    "@vaadin/vaadin-text-field": {
+      "version": "2.1.0-beta2",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-text-field/-/vaadin-text-field-2.1.0-beta2.tgz",
+      "integrity": "sha512-zjWbFgxc8YzruUS35A89QoqYxFy6t5rJ2CjiGU5DHwYuR1inzdPQUq+eyz1TOA2OIa0/LWmU3eP88T1uj1+Pbw==",
+      "requires": {
+        "@polymer/polymer": "3.0.2",
+        "@vaadin/vaadin-control-state-mixin": "2.1.1",
+        "@vaadin/vaadin-element-mixin": "1.1.2",
+        "@vaadin/vaadin-lumo-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-material-styles": "1.1.0-beta1",
+        "@vaadin/vaadin-themable-mixin": "1.2.1"
+      }
+    },
+    "@vaadin/vaadin-themable-mixin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-1.2.1.tgz",
+      "integrity": "sha512-5mWCS/Xv2A2pFLtTSNcXl6VuUklihhXfm8JY5MzVaRRg4idYhRroDGIILGTa3NaMDWC9BaTWJgNa+g9rkMKMXQ==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
+    "@vaadin/vaadin-usage-statistics": {
+      "version": "1.1.0-beta1",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-usage-statistics/-/vaadin-usage-statistics-1.1.0-beta1.tgz",
+      "integrity": "sha512-ribGDrQg6NI/Wf1JEZdNEEAb6oFdDJmuVoSSwoiBzvkUPr+qHn+3VaKUlan0kfdOHNeQPDllbIqSSeqfjz2EKw==",
+      "requires": {
+        "@polymer/polymer": "3.0.2"
+      }
+    },
     "@webcomponents/shadycss": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.3.1.tgz",
@@ -4149,8 +4412,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
+            "delegates": "1.0.0",
+            "readable-stream": "2.3.6"
           }
         },
         "balanced-match": {
@@ -4227,7 +4490,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minipass": "^2.2.1"
+            "minipass": "2.2.4"
           }
         },
         "fs.realpath": {
@@ -4242,14 +4505,14 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
+            "aproba": "1.2.0",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
           }
         },
         "glob": {
@@ -4258,12 +4521,12 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
           }
         },
         "has-unicode": {
@@ -4296,8 +4559,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
           }
         },
         "inherits": {
@@ -4343,8 +4606,8 @@
           "bundled": true,
           "dev": true,
           "requires": {
-            "safe-buffer": "^5.1.1",
-            "yallist": "^3.0.0"
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
           }
         },
         "minizlib": {
@@ -4353,7 +4616,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minipass": "^2.2.1"
+            "minipass": "2.2.4"
           }
         },
         "mkdirp": {
@@ -4387,16 +4650,16 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.0",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.1.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
+            "detect-libc": "1.0.3",
+            "mkdirp": "0.5.1",
+            "needle": "2.2.0",
+            "nopt": "4.0.1",
+            "npm-packlist": "1.1.10",
+            "npmlog": "4.1.2",
+            "rc": "1.2.7",
+            "rimraf": "2.6.2",
+            "semver": "5.5.0",
+            "tar": "4.4.1"
           }
         },
         "nopt": {
@@ -4431,10 +4694,10 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
           }
         },
         "number-is-nan": {
@@ -4453,7 +4716,7 @@
           "bundled": true,
           "dev": true,
           "requires": {
-            "wrappy": "1"
+            "wrappy": "1.0.2"
           }
         },
         "os-homedir": {
@@ -4516,13 +4779,13 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
           }
         },
         "rimraf": {
@@ -4531,7 +4794,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "glob": "^7.0.5"
+            "glob": "7.1.2"
           }
         },
         "safe-buffer": {
@@ -4608,13 +4871,13 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "chownr": "^1.0.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.2.4",
-            "minizlib": "^1.1.0",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.1",
-            "yallist": "^3.0.2"
+            "chownr": "1.0.1",
+            "fs-minipass": "1.2.5",
+            "minipass": "2.2.4",
+            "minizlib": "1.1.0",
+            "mkdirp": "0.5.1",
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
           }
         },
         "util-deprecate": {
@@ -4629,7 +4892,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "string-width": "^1.0.2"
+            "string-width": "1.0.2"
           }
         },
         "wrappy": {
@@ -12827,7 +13090,7 @@
               "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
               "dev": true,
               "requires": {
-                "balanced-match": "^1.0.0",
+                "balanced-match": "1.0.0",
                 "concat-map": "0.0.1"
               }
             },
@@ -13016,7 +13279,7 @@
               "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
               "dev": true,
               "requires": {
-                "brace-expansion": "^1.1.7"
+                "brace-expansion": "1.1.11"
               }
             },
             "minimist": {
diff --git a/package.json b/package.json
index decaf60..e5ea35b 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,11 @@
     "@polymer/lit-element": "^0.5.2",
     "@polymer/paper-button": "^3.0.0-pre.21",
     "@polymer/paper-card": "^3.0.0-pre.21",
+    "@polymer/paper-dropdown-menu": "^3.0.0-pre.21",
     "@polymer/paper-input": "^3.0.0-pre.21",
+    "@polymer/paper-item": "^3.0.0-pre.21",
+    "@polymer/paper-slider": "^3.0.0-pre.21",
+    "@vaadin/vaadin-date-picker": "^3.2.0-beta2",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "pwa-helpers": "^0.8.2",
     "redux": "^4.0.0",
diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index fe3ddb0..ab2e28e 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -74,17 +74,18 @@ export const getHours = () => (dispatch, getState) => {
   if(currentState.initialized) {
     var docRef  =  firestore.collection('users').doc(currentState.uid);
     docRef.onSnapshot((doc) => {
-      dispatch(updateHours(doc.data().hours));
+      dispatch(updateHours(doc.data().hours, doc.data().requestedHours));
     });
   }
 
 
 }
 
-export const updateHours = (hours) => {
+export const updateHours = (hours, reqHours) => {
   return {
-    type:     'UPDATE_HOURS',
-    payload:  hours
+    type:           'UPDATE_HOURS',
+    approvedHours:  hours,
+    requestedHours: reqHours
   }
 }
 
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index c4d2911..c9840a0 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -31,8 +31,14 @@ import { ButtonSharedStyles } from './button-shared-styles.js'
 
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-slider/paper-slider.js';
 import '@polymer/paper-button/paper-button.js';
 
+// Import other customElements
+import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+
 class MaoTutoring extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -103,6 +109,10 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         text-align: center;
       }
 
+      #datePicker {
+        margin-top: 10px;
+      }
+
       @media (min-width: 460px) {
         .tutoring-grid {
           grid-template-areas:
@@ -125,13 +135,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       </style>
 
       <section>
-        <div class="tutoring-grid" id="tutoring-grid">
+        <div class="tutoring-grid" id="tutoring-grid" hidden="${props.signedIn}">
 
           <div class="title">
             <h2 class="underline">Tutoring</h2>
           </div>
 
-          <div class="tutorCard" hidden="${props.signedIn}">
+          <div class="tutorCard">
             <h3>Need to see or document hours?</h3>
             <paper-button
             class="info"
@@ -140,7 +150,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             on-tap="${() => this.toggleloginFields()}">Sign In</paper-button>
             <div hidden="${!props.loginFieldsOpened}">
               <paper-input label="username" id="emailField">
-                <div slot="suffix">@communityschoolnaples.org</div>
               </paper-input>
 
               <paper-input type="password" label="password" id="passwordField">
@@ -151,13 +160,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             </div>
           </div>
 
-          <div hidden="${!props.signedIn}" class="hoursCard">
+          <div hidden="${props.signedIn}" class="hoursCard">
             <h3>Hours</h3>
             <p>Every national society member must have at least 5 hours.</p>
             <p>You must sign in to see hours</p>
           </div>
 
-          <div hidden="${props.signedIn}" class="hoursCard">
+          <div hidden="${!props.signedIn}" class="hoursCard">
 
             <div class="hours-grid">
 
@@ -167,18 +176,56 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
               <div class="approved-card">
                 <h3>Approved Hours</h3>
-                <div class="circle" style="background-color: #0f9d58;">${props.hours}</div>
+                <div
+                hidden= "${props.hours==-1}"
+                class=  "circle"
+                style=  "background-color: #0f9d58;">${props.hours}</div>
               </div>
 
               <div class="unapproved-card">
                 <h3>Requested Hours</h3>
-                <div class="circle" style="background-color: #f4b400;">${5-props.hours}</div>
+                <div
+                hidden= "${props.requestedHours==-1}"
+                class=  "circle"
+                style=  "background-color: #f4b400;">${props.requestedHours}</div>
               </div>
 
               <div class="sumbit-hours">
-                <paper-button class="info" id="submit-hours-btn" raised>Submit Hours</paper-button>
+                <paper-button
+                class="info"
+                id="submit-hours-btn"
+                on-tap="${() => this.toggleSubmitFields()}"
+                hidden="${props.submitFieldsOpened}"
+                raised>
+                  Submit Hours
+                </paper-button>
+
+                <div class="submit-card" hidden="${!props.submitFieldsOpened}">
+
+                  <h3>Fill Fields</h3>
+
+                  <p>How many hours of tutoring?</p>
+
+                  <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input>
+
+                  <paper-input id="traineeField" label="Trainee's Name"></paper-input>
+
+                  <vaadin-date-picker id="dateField" placeholder="Choose Date">
+                  </vaadin-date-picker>
+
+                  <paper-button
+                  class="info"
+                  id="submit-form-btn"
+                  on-tap="${() => this.requestHours()}"
+                  raised>
+                    Submit Form
+                  </paper-button>
+
+                </div>
               </div>
 
+
+
             </div>
 
           </div>
@@ -200,19 +247,23 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:     Boolean,
-    authMessage:  String,
-    hours:        Number,
+    signedIn:       Boolean,
+    authMessage:    String,
+    hours:          Number,
+    requestedHours: Number,
 
-    loginFieldsOpened: Boolean
+    loginFieldsOpened:  Boolean,
+    submitFieldsOpened: Boolean
   }}
 
   _stateChanged(state) {
-    this.hours        = state.firebase.hours;
-    this.signedIn     = state.firebase.initialized;
-    this.authMessage  = state.firebase.authMessage;
+    this.hours          = state.firebase.hours;
+    this.requestedHours = state.firebase.requestedHours;
+    this.signedIn       = state.firebase.initialized;
+    this.authMessage    = state.firebase.authMessage;
 
-    this.loginFieldsOpened = false;
+    this.loginFieldsOpened  = false;
+    this.sumbitFieldsOpened = false;
   }
 
   logIn() {
@@ -229,6 +280,14 @@ class MaoTutoring extends connect(store)(PageViewElement) {
     this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card1" "card2";';
   }
 
+  toggleSubmitFields() {
+    this.submitFieldsOpened = !this.submitFieldsOpened;
+  }
+
+  requestHours() {
+
+  }
+
 }
 
 window.customElements.define('mao-tutoring', MaoTutoring);
diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js
index 4b0ed9a..b708dbe 100644
--- a/src/reducers/firebase.js
+++ b/src/reducers/firebase.js
@@ -17,7 +17,7 @@ import {
 }
 from '../actions/firebase.js';
 
-const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid: null, registeredComps: []}, action) => {
+const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: null, registeredComps: []}, action) => {
   switch (action.type) {
     case AUTH_SUCCESS:
       return {
@@ -46,7 +46,8 @@ const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid:
     case UPDATE_HOURS:
       return {
         ...state,
-        hours:  action.payload
+        hours:          action.approvedHours,
+        requestedHours: action.requestedHours
       }
     break;