Merge pull request #15 from nloomans/react

Move project over to react

5 files changed, 133 insertions, 0 deletions

diff --git a/src/client/style/_component-help-box.scss b/src/client/style/_component-help-box.scss
new file mode 100644
index 0000000..e7457c2
--- /dev/null
+++ b/src/client/style/_component-help-box.scss
@@ -0,0 +1,23 @@
+.help-box {
+  position: relative;
+  margin-top: 32px;
+
+  .arrow {
+    position: absolute;
+    background-color: white;
+    width: 32px;
+    height: 32px;
+    top: -16px;
+    left: 48px;
+    transform: rotate(45deg);
+  }
+
+  .bubble {
+    position: relative;
+    background-color: white;
+    font-weight: bold;
+    margin: 16px;
+    padding: 16px;
+    border-radius: 4px;
+  }
+}
diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss
new file mode 100644
index 0000000..51d6b4a
--- /dev/null
+++ b/src/client/style/_component-search.scss
@@ -0,0 +1,64 @@
+.search {
+  height: 54px;
+  position: relative;
+
+  &-overflow {
+    border-radius: 2px;
+    background-color: white;
+    position: absolute;
+    width: 100%;
+  }
+
+  &--has-focus {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  }
+
+  &__results--has-results {
+    border-top: 1px #BDBDBD solid;
+  }
+
+  &__icon-wrapper {
+    height: 54px;
+    padding: 15px;
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  &__input-wrapper {
+    display: flex;
+    height: 54px;
+
+    input {
+      border: 0;
+      background-color: transparent;
+      flex-grow: 1;
+      height: inherit;
+      padding: 16px;
+      padding-left: 0px;
+      font-size: 16px;
+      outline: none;
+    }
+  }
+
+  &__results {
+    transition: 0.1s ease-in-out min-height;
+    overflow: hidden;
+  }
+
+  &__result {
+    display: flex;
+
+    &--selected {
+      background-color: lightgray;
+    }
+
+    &__text {
+      padding: 15px;
+      padding-left: 0px;
+      font-size: 16px;
+      transform: translate(0, 3px);
+    }
+  }
+}
diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss
new file mode 100644
index 0000000..c09f996
--- /dev/null
+++ b/src/client/style/_page-index.scss
@@ -0,0 +1,21 @@
+.page-index {
+  background-color: #ececec;
+  padding-top: 24vh;
+  height: 100vh;
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 8px;
+
+    img {
+      display: block;
+      margin: 0 auto;
+    }
+
+    .search {
+      z-index: 1; // Position search above help-box
+      margin-top: 64px;
+    }
+  }
+}
diff --git a/src/client/style/_page-user.scss b/src/client/style/_page-user.scss
new file mode 100644
index 0000000..395e492
--- /dev/null
+++ b/src/client/style/_page-user.scss
@@ -0,0 +1,11 @@
+.page-user {
+  .menu {
+    background-color: #F44336;
+
+    &-container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 8px;
+    }
+  }
+}
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
new file mode 100644
index 0000000..763a329
--- /dev/null
+++ b/src/client/style/index.scss
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Roboto';
+  margin: 0;
+}
+
+@import "page-index";
+@import "page-user";
+
+@import "component-search";
+@import "component-help-box";