Replace sprockets/browserify with Webpack (#2617)

* Replace browserify with webpack

* Add react-intl-translations-manager

* Do not minify in development, add offline-plugin for ServiceWorker background cache updates

* Adjust tests and dependencies

* Fix production deployments

* Fix tests

* More optimizations

* Improve travis cache for npm stuff

* Re-run travis

* Add back support for custom.scss as before

* Remove offline-plugin and babili

* Fix issue with Immutable.List().unshift(...values) not working as expected

* Make travis load schema instead of running all migrations in sequence

* Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of
React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in
<UI />

* Add react definitions to places that use JSX

* Add Procfile.dev for running rails, webpack and streaming API at the same time

21 files changed, 5535 insertions, 0 deletions

diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
new file mode 100644
index 00000000000..b1139b86ff8
--- /dev/null
+++ b/app/javascript/styles/about.scss
@@ -0,0 +1,374 @@
+.about-body {
+  .wrapper {
+    max-width: 600px;
+    margin: 0 auto;
+    color: $color3;
+    padding-top: 50px;
+    padding-bottom: 50px;
+
+    &.thicc {
+      max-width: 700px;
+    }
+  }
+
+  h1 {
+    font: 46px/52px 'Roboto', sans-serif;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: $color4;
+    padding: 20px 0;
+
+    img {
+      margin-bottom: -5px;
+      margin-right: 5px;
+      width: 46px;
+      height: 46px;
+    }
+  }
+
+  h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    color: $color5;
+  }
+
+  h3 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    color: $color2;
+  }
+
+  ul, ol {
+    list-style: inherit;
+    margin-left: 20px;
+
+    &[type='a'] {
+      list-style-type: lower-alpha;
+    }
+
+    &[type='i'] {
+      list-style-type: lower-roman;
+    }
+  }
+
+  li > ol, li > ul {
+    margin-top: 20px;
+  }
+
+  p, li {
+    font: 16px/28px 'Montserrat', sans-serif;
+    font-weight: 400;
+    margin-bottom: 12px;
+
+    a {
+      color: $color4;
+      text-decoration: underline;
+    }
+  }
+
+  em {
+    display: inline-block;
+    padding: 7px 7px 5px 7px;
+    margin: 0 2px;
+    background: $color3;
+    color: $color1;
+    font: 16px/16px 'Montserrat', sans-serif;
+    font-weight: 300;
+  }
+
+  .screenshot {
+    box-shadow: 0 0 15px rgba($color8, 0.4);
+    margin-bottom: 26px;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .actions {
+    overflow: hidden;
+    margin-bottom: 20px;
+
+    .info {
+      float: right;
+      text-align: right;
+      line-height: 36px;
+
+      a {
+        color: $color3;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media screen and (max-width: 625px) {
+    .wrapper {
+      padding: 20px;
+    }
+
+    .features-list {
+      display: block;
+    }
+  }
+}
+
+.information-board {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid lighten($color1, 10%);
+  border-bottom: 1px solid lighten($color1, 10%);
+  padding-right: 14px;
+
+  .section {
+    flex: 1 0 0;
+    padding: 14px;
+    text-align: right;
+    font: 16px/28px 'Montserrat', sans-serif;
+
+    span, strong {
+      display: block;
+    }
+
+    span {
+      font-size: 16px;
+
+      &:last-child {
+        color: $color2;
+        font-size: 14px;
+      }
+    }
+
+    strong {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+      color: $color5;
+    }
+  }
+
+  @media screen and (max-width: 500px) {
+    flex-direction: column;
+
+    .section {
+      text-align: left;
+    }
+  }
+}
+
+.owner {
+  text-align: center;
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto;
+    margin-bottom: 15px;
+
+    img {
+      display: block;
+      width: 80px;
+      height: 80px;
+      border-radius: 48px;
+    }
+  }
+
+  .name {
+    font-size: 14px;
+
+    a {
+      display: block;
+      color: $color5;
+      text-decoration: none;
+
+      &:hover {
+        .display_name {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .username {
+      display: block;
+      color: $color3;
+    }
+  }
+}
+
+.contact-email {
+  text-align: center;
+  margin: 40px 0;
+
+  strong {
+    display: block;
+    color: $color5;
+    word-break: break-word;
+  }
+}
+
+.sidebar-layout {
+  display: flex;
+
+  .main {
+    flex: 1 1 auto;
+    padding: 14px 0;
+
+    .panel {
+      padding-right: 14px;
+    }
+  }
+
+  .sidebar {
+    border-left: 1px solid lighten($color1, 10%);
+    width: 180px;
+    flex: 0 0 auto;
+  }
+
+  .panel {
+    .panel-header {
+      background: lighten($color1, 10%);
+      padding: 7px 14px;
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .panel-body {
+      padding: 14px;
+    }
+
+    .panel-list {
+      ul {
+        list-style: none;
+        margin: 0;
+
+        li {
+          margin: 0;
+          font-family: inherit;
+          font-size: 13px;
+          line-height: 18px;
+
+          a {
+            display: block;
+            padding: 7px 14px;
+            color: rgba($color5, 0.7);
+            text-decoration: none;
+            transition: all 200ms linear;
+
+            i.fa {
+              margin-right: 5px;
+            }
+
+            &:hover {
+              color: $color5;
+              background-color: darken($color1, 5%);
+              transition: all 100ms linear;
+            }
+
+            &.selected {
+              color: $color5;
+              background-color: $color4;
+
+              &:hover {
+                background-color: lighten($color4, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 625px) {
+    flex-direction: column;
+
+    .sidebar {
+      border: 1px solid lighten($color1, 10%);
+      width: auto;
+    }
+  }
+}
+
+.features-list {
+  display: flex;
+  margin-bottom: 20px;
+
+  .features-list__column {
+    flex: 1 1 0;
+
+    ul {
+      list-style: none;
+    }
+
+    li {
+      margin: 0;
+    }
+  }
+}
+
+.screenshot-with-signup {
+  display: flex;
+  margin-bottom: 20px;
+
+  .mascot {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    img {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .simple_form, .closed-registrations-message {
+    width: 300px;
+    flex: 0 0 auto;
+    background: rgba(darken($color1, 7%), 0.5);
+    padding: 14px;
+    border-radius: 4px;
+    box-shadow: 0 0 15px rgba($color8, 0.4);
+
+    .actions {
+      margin-bottom: 0;
+    }
+
+    .info {
+      text-align: center;
+
+      a {
+        color: $color2;
+      }
+    }
+  }
+
+  @media screen and (max-width: 625px) {
+    .mascot {
+      display: none;
+    }
+
+    .simple_form, .closed-registrations-message {
+      flex: auto;
+    }
+  }
+}
+
+.closed-registrations-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
new file mode 100644
index 00000000000..99af9c98206
--- /dev/null
+++ b/app/javascript/styles/accounts.scss
@@ -0,0 +1,391 @@
+.card {
+  background: $color1;
+  background-size: cover;
+  padding: 60px 0;
+  padding-bottom: 0;
+  border-radius: 4px 4px 0 0;
+  box-shadow: 0 0 15px rgba($color8, 0.2);
+  overflow: hidden;
+  position: relative;
+
+  @media screen and (max-width: 700px) {
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  &:after {
+    background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
+    display: block;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .name {
+    display: block;
+    font-size: 20px;
+    line-height: 18px * 1.5;
+    color: $color5;
+    font-weight: 500;
+    text-align: center;
+    position: relative;
+    z-index: 2;
+    text-shadow: 0 0 2px $color8;
+
+    small {
+      display: block;
+      font-size: 14px;
+      color: $color4;
+      font-weight: 400;
+    }
+  }
+
+  .avatar {
+    width: 120px;
+    margin: 0 auto;
+    margin-bottom: 15px;
+    position: relative;
+    z-index: 2;
+
+    img {
+      width: 120px;
+      height: 120px;
+      display: block;
+      border-radius: 120px;
+    }
+  }
+
+  .controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 2;
+  }
+
+  .details {
+    display: flex;
+    margin-top: 30px;
+    position: relative;
+    z-index: 2;
+    flex-direction: row;
+  }
+
+  .details-counters {
+    display: flex;
+    flex-direction: row;
+    order: 0;
+  }
+
+  .counter {
+    width: 80px;
+    color: $color3;
+    padding: 5px 10px 0px;
+    margin-bottom: 10px;
+    border-right: 1px solid $color3;
+    cursor: default;
+    position: relative;
+
+    a {
+      display: block;
+    }
+
+    &:after {
+      display: block;
+      content: "";
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      width: 100%;
+      border-bottom: 4px solid $color3;
+      opacity: 0.5;
+      transition: all 0.8s ease;
+    }
+
+    &.active {
+      &:after {
+        border-bottom: 4px solid $color4;
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      &:after {
+        opacity: 1;
+        transition-duration: 0.2s;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .counter-label {
+      font-size: 12px;
+      text-transform: uppercase;
+      display: block;
+      margin-bottom: 5px;
+      text-shadow: 0 0 2px $color8;
+    }
+
+    .counter-number {
+      font-weight: 500;
+      font-size: 18px;
+      color: $color5;
+    }
+  }
+
+  .bio {
+    flex: 1;
+    font-size: 14px;
+    line-height: 18px;
+    padding: 5px 10px;
+    color: $color2;
+    order: 1;
+  }
+
+  @media screen and (max-width: 480px) {
+    .details {
+      display: block;
+    }
+
+    .bio {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .counter {
+      flex: 1 1 auto;
+    }
+
+    .counter:last-child {
+      border-right: none;
+    }
+  }
+}
+
+.pagination {
+  padding: 30px 0;
+  text-align: center;
+  overflow: hidden;
+
+  a, .current, .next, .prev, .page, .gap {
+    font-size: 14px;
+    color: $color5;
+    font-weight: 500;
+    display: inline-block;
+    padding: 6px 10px;
+    text-decoration: none;
+  }
+
+  .current {
+    background: $color5;
+    border-radius: 100px;
+    color: $color1;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .gap {
+    cursor: default;
+  }
+
+  .prev, .next {
+    text-transform: uppercase;
+    color: $color2;
+  }
+
+  .prev {
+    float: left;
+    padding-left: 0;
+
+    .fa {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .next {
+    float: right;
+    padding-right: 0;
+
+    .fa {
+      display: inline-block;
+      margin-left: 5px;
+    }
+  }
+
+  .disabled {
+    cursor: default;
+    color: lighten($color1, 10%);
+  }
+
+  @media screen and (max-width: 360px) {
+    padding: 30px 20px;
+
+    a, .current, .next, .prev, .gap {
+      display: none;
+    }
+
+    .next, .prev {
+      display: inline-block;
+    }
+  }
+}
+
+.accounts-grid {
+  box-shadow: 0 0 15px rgba($color8, 0.2);
+  background: $color5;
+  border-radius: 0 0 4px 4px;
+  padding: 20px 10px;
+  padding-bottom: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+
+  @media screen and (max-width: 700px) {
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .account-grid-card {
+    box-sizing: border-box;
+    width: 335px;
+    border: 1px solid $color2;
+    border-radius: 4px;
+    color: $color1;
+    margin-bottom: 10px;
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+
+    .account-grid-card__header {
+      overflow: hidden;
+      padding: 10px;
+      border-bottom: 1px solid $color2;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+      float: left;
+      margin-right: 15px;
+
+      img {
+        display: block;
+        width: 60px;
+        height: 60px;
+        border-radius: 60px;
+      }
+    }
+
+    .name {
+      padding-top: 10px;
+
+      a {
+        display: block;
+        color: $color1;
+        text-decoration: none;
+
+        &:hover {
+          .display_name {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .display_name {
+      font-size: 14px;
+      display: block;
+    }
+
+    .username {
+      color: $color4;
+    }
+
+    .note {
+      padding: 10px;
+      padding-top: 15px;
+      color: $color3;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.nothing-here {
+  color: $color3;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  padding: 15px 0;
+  padding-bottom: 25px;
+  cursor: default;
+}
+
+.account-card {
+  padding: 14px 10px;
+  background: $color5;
+  border-radius: 4px;
+  text-align: left;
+  box-shadow: 0 0 15px rgba($color8, 0.2);
+
+  .detailed-status__display-name {
+    display: block;
+    overflow: hidden;
+    margin-bottom: 15px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & > div {
+      float: left;
+      margin-right: 10px;
+      width: 48px;
+      height: 48px;
+    }
+
+    .avatar {
+      display: block;
+      border-radius: 4px;
+    }
+
+    .display-name {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: default;
+
+      strong {
+        font-weight: 500;
+        color: $color1;
+      }
+
+      span {
+        font-size: 14px;
+        color: $color3;
+      }
+    }
+
+    &:hover {
+      .display-name {
+        strong {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .account__header__content {
+    font-size: 14px;
+    color: $color1;
+  }
+}
diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss
new file mode 100644
index 00000000000..6d246ded26d
--- /dev/null
+++ b/app/javascript/styles/admin.scss
@@ -0,0 +1,245 @@
+.admin-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+
+  .sidebar-wrapper {
+    flex: 1;
+    height: 100%;
+    background: $color1;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .sidebar {
+    width: 240px;
+    height: 100%;
+    padding: 0;