Read flag to handle redesign

packages/fakeyou/src/App.tsx

@@ -1,6 +1,3 @@
-// import 'bulma/css/bulma.css'
-import "./App.scss";
-
 import React from "react";
 import { ApiConfig } from "@storyteller/components";
 import {
@@ -58,6 +55,8 @@ enum MigrationMode {
   OLD_VOCODES,
 }
 
+const USE_REFRESH = false;
+
 interface Props {
   enableSpectrograms: boolean;
 
@@ -169,6 +168,16 @@ class App extends React.Component<Props, State> {
     };
   }
 
+  componentWillMount() {
+    // Handle redesign
+    if (USE_REFRESH) {
+      require("./AppNew.scss");
+    } else {
+      require("bulma/css/bulma.css");
+      require("./AppOld.scss");
+    }
+  }
+
   async componentDidMount() {
     await this.querySession();
     await this.queryLanguage();

packages/fakeyou/src/AppOld.scss

@@ -0,0 +1,305 @@
+//@import-normalize; /* bring in normalize.css styles */
+
+$page-width: 700px;
+
+$light-text-color: #777;
+$button-text-color: #666;
+
+$body-font-family: 'Fira Sans', serif;
+$nav-font-family: 'Fira Sans', sans-serif;
+$footer-font-family: 'Fira Sans Condensed', sans-serif;
+$textarea-font-family: 'Fira Sans', sans-serif;
+$headings-font-family: 'Merriweather', serif;
+
+body {
+  font-family: $body-font-family;
+  font-weight: 300; // For Fira Sans
+}
+
+// Style for user text input that overflows
+.overflow-fix {
+  overflow-wrap: anywhere;
+}
+
+.mainwrap {
+  max-width: 800px;
+  margin: auto;
+}
+
+canvas#spectrogram {
+  margin: 0.5em 0;
+  transform: scaleY(-1); /* Spectrograms are flipped */
+  height: 300px;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*p {
+  a:link, 
+  a:visited {
+    color: rgb(119, 165, 235);
+    font-weight: bold;
+  }
+  a:hover, 
+  a:active{
+    color: rgb(85, 133, 204);
+    font-weight: bold;
+  }
+}*/
+
+p {
+  a:before {
+    content: ' ';
+  }
+}
+
+#main {
+  position: relative; // Footer attachment.
+  min-height: 100vh;
+}
+
+$footer-height: 6rem;
+
+#viewable {
+  padding-bottom: $footer-height;
+}
+
+footer {
+  font-family: $footer-font-family;
+  text-align: center;
+  width: 100%;
+  position: absolute; // Footer attachment.
+  bottom: 0;
+  // NB: Setting explicit height doesn't appear to be necessary, and
+  // it was creating an annoying scrollbar.
+  //height: $footer-height; 
+  color: $light-text-color;
+}
+
+.social {
+  img {
+    max-width: 70px;
+    max-height: 70px;
+    padding: 1em;
+  }
+}
+
+// Tech logos need a hack to not have margin.
+.vocodes-grid-marginless {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+nav {
+  font-family: "Fugaz One";
+  margin: 0.2em 0 0 0;
+  padding: 0;
+
+  .signup {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+  a:link.signup,
+  a:visited.signup {
+    color: #da4f18;
+  }
+  a:hover.signup,
+  a:active.signup{
+    color: #da4f18;
+    text-decoration: underlinegt;
+  }
+
+  #logo_text {
+    font-family: "Fugaz One";
+    font-size: 1.5em;
+    margin: 0 0.3em 0 0;
+    padding: 0;
+    .vo {
+      color:  #209CEE;
+      padding: 0;
+      margin: 0;
+    }
+    .codes {
+      color:  rgba(32, 156, 238, 0.685);
+      padding: 0;
+      margin: 0;
+    }
+    a {
+      padding: 0;
+      margin: 0;
+    }
+    a:link,
+    a:visited {
+      text-decoration: none;
+      background-color: #fff;
+    }
+    a:active,
+    a:hover{
+      text-decoration: underline;
+      background-color: #fff;
+    }
+  }
+  a {
+    margin: 0;
+    padding: 0;
+  }
+  a,
+  a:link {
+    text-decoration: none;
+    color: $light-text-color;
+    padding: 0 10px;
+    cursor: pointer;
+  }
+  a:after {
+    content: '';
+    width: 99.5%;
+  }
+  a:hover,
+  a:active {
+    background-color: #bfdff5;
+  }
+
+  hr {
+    margin: 5px 0 15px 0;
+  }
+}
+
+.button-group {
+  padding: 1em 0;
+}
+
+#status {
+  .info {
+    color: #888888;
+  }
+  .warn {
+    color: #aaaa00;
+  }
+  .error {
+    color: #aa0000;
+  }
+  min-height: 1.5em;
+}
+
+.upload-box {
+  padding: 0 0 1em;
+}
+
+.video-template-selector {
+  margin: 1.5em 0 1.5em 0;
+  text-align: center;
+
+  .thumbnail {
+    max-width: 220px;
+    padding: 0em;
+    margin: 5px;
+    filter: brightness(70%) grayscale(1);
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .selected {
+    filter: brightness(100%) grayscale(0);
+    box-shadow: 0px 0px 25px #209CEE
+  }
+}
+
+.video-wrapper {
+  text-align: center;
+}
+
+#usage,
+#updates,
+#help-wanted,
+#terms {
+  h1, h2 {
+    font-family: $headings-font-family;
+  }
+  p {
+    text-align: justify;
+  }
+  li {
+    font-size: 1.2em;
+    text-align: justify;
+    margin-bottom: 1em;
+  }
+}
+
+.template-preview {
+  text-align: center;
+}
+
+/* V2 (but probably defined elsewhere too) */
+
+.mascot {
+  text-align: center;
+  margin: auto;
+}
+
+.mascot img {
+  max-width: 200px;
+}
+
+.main-form {
+  padding: 0 15px;
+}
+
+.git-sha {
+  color: #999;
+  font-size: 0.8rem;
+}
+
+/* TAILWIND STYLE CLASSES */
+
+.display-inline {
+  display: inline;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.padding-bottom-1em {
+  padding-bottom: 1em;
+}
+
+/** RESPONSIVENESS **/
+
+/** Hide footer when using onscreen keyboard. */
+/* Actually, let's not do that because people filed bug reports.
+@media screen and (max-height: 550px) {
+  footer {
+    display: none;
+  }
+  nav {
+    display: none;
+  }
+}
+*/
+
+@media screen and (max-height: 740px) {
+  footer p {
+    display: inline;
+  }
+  footer p:after {
+    content: ' '; // Not sure why the space disappears when inline.
+  }
+
+  .social {
+    img {
+      max-width: 50px;
+      max-height: 50px;
+      padding: 0.2em;
+    }
+  }
+}
+
+// Prevent Android devices from horizontal scrolling
+// Mine is 412x846.
+@media screen and (max-width: 412px) {
+  #root {
+    max-width: 380px;
+    margin: auto;
+  }
+}