started on some styles, state, and localStorage config

packages/fakeyou/src/App.tsx

@@ -111,6 +111,8 @@ interface State {
 
   // Current text entered
   textBuffer: string;
+
+  lightMode: boolean;
 }
 
 function newVocodes() {
@@ -165,6 +167,8 @@ class App extends React.Component<Props, State> {
       w2lTemplateUploadJobs: [],
 
       textBuffer: "",
+
+      lightMode: true
     };
   }
 
@@ -172,6 +176,16 @@ class App extends React.Component<Props, State> {
     // Handle redesign
     console.log('componentWillMount', 'useRefresh?', USE_REFRESH);
 
+    if (!window.localStorage.getItem('lightMode')) {
+      window.localStorage.setItem('lightMode', 'false')
+    } else {
+      const currentView = window.localStorage.getItem('lightMode') === 'true' ? true : false
+
+      this.setState({
+        lightMode: currentView
+      })
+    }
+
     if (USE_REFRESH) {
       // Redesign-specific CSS
       // NB(echelon): Despite the branches here, scss is all combined together at compile time 
@@ -188,6 +202,8 @@ class App extends React.Component<Props, State> {
       require("./AppOld.scss");
       require("./v2/view/_css/footer.scss");
     }
+
+    // check to see if their is a cookie
   }
 
   async componentDidMount() {
@@ -217,7 +233,7 @@ class App extends React.Component<Props, State> {
       const hasChineseSimplified = locale.language_codes.indexOf("zh") > -1;
       const hasFrench = locale.language_codes.indexOf("fr") > -1;
       const hasGerman = locale.language_codes.indexOf("de") > -1;
-      const hasHindi= locale.language_codes.indexOf("hi") > -1;
+      const hasHindi = locale.language_codes.indexOf("hi") > -1;
       const hasIndonesian = locale.language_codes.indexOf("id") > -1;
       const hasItalian = locale.language_codes.indexOf("it") > -1;
       const hasJapanese = locale.language_codes.indexOf("ja") > -1;
@@ -272,16 +288,16 @@ class App extends React.Component<Props, State> {
       const showPleaseFollowNotice = hasSpanish || hasPortuguese;
 
       const showBootstrapLanguageNotice = (
-        hasJapanese 
+        hasJapanese
         || hasChineseSimplified
-        || hasFrench 
-        || hasGerman 
-        || hasHindi 
-        || hasIndonesian 
-        || hasItalian 
-        || hasKorean 
-        || hasTurkish 
-        || hasVietnamese 
+        || hasFrench
+        || hasGerman
+        || hasHindi
+        || hasIndonesian
+        || hasItalian
+        || hasKorean
+        || hasTurkish
+        || hasVietnamese
       );
 
       this.setState({
@@ -578,27 +594,29 @@ class App extends React.Component<Props, State> {
     this.setState({ textBuffer: "" });
   };
 
+
+
   public render() {
     // Redesign features
-    let mainClassNames = USE_REFRESH ? "bg-gradient" : "";
-    if (USE_REFRESH) {
+    let mainClassNames;
 
-    }
+    mainClassNames = USE_REFRESH ? "bg-gradient " : "";
+    mainClassNames = mainClassNames + (this.state.lightMode ? ' light-mode' : '')
 
     return (
       <BrowserRouter>
-        
-        <div id="main" className={mainClassNames}>
-        <div className="page-bg"></div>
 
-<div className="animation-wrapper">
-  <div className="particle particle-1"></div>
-  <div className="particle particle-2"></div>
-  <div className="particle particle-3"></div>
-  <div className="particle particle-4"></div>
-</div>
-<div className="page-wrapper"> 
-</div>
+        <div id="main" className={mainClassNames}>
+          <div className="page-bg light-mode"></div>
+
+          <div className="animation-wrapper">
+            <div className="particle particle-1"></div>
+            <div className="particle particle-2"></div>
+            <div className="particle particle-3"></div>
+            <div className="particle particle-4"></div>
+          </div>
+          <div className="page-wrapper">
+          </div>
 
 
           <div id="viewable">
@@ -610,7 +628,7 @@ class App extends React.Component<Props, State> {
               />
             */}
 
-            <div className="migrationComponentWrapper">
+            <div className="migrationComponentWrapper light-mode">
               <Switch>
                 <Route path="/">
                   <NewVocodesContainer

packages/fakeyou/src/AppNew.scss

@@ -22,25 +22,46 @@ $headings-font-family: "Merriweather", serif;
 // makes it impossible to dynamically change styles.
 //
 // Once the rollout is complete, this outer wrapper class can be removed.
+
 .fakeyou-refresh {
   body {
     font-family: $body-font-family;
     font-weight: 300; // For Fira Sans
     color: $white;
-    //background gradient
+
+    &.light-mode {
+
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $black  !important;
+      }
+    }
   }
 
   .bg-gradient {
     background: rgb(13, 16, 25) !important;
 
-    background: linear-gradient(
-      325deg,
-      rgba(13, 16, 25, 1) 0%,
-      rgba(42, 21, 34, 1) 55%,
-      rgba(16, 14, 26, 1) 100%
-    ) !important;
+    background: linear-gradient(325deg,
+        rgba(13, 16, 25, 1) 0%,
+        rgba(42, 21, 34, 1) 55%,
+        rgba(16, 14, 26, 1) 100%) !important;
     background-repeat: no-repeat;
     background-attachment: fixed;
+
+    &.light-mode {
+
+      background: #fff !important;
+
+      background: #fff !important;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+
+    }
   }
 
   // Style for user text input that overflows
@@ -149,6 +170,7 @@ $headings-font-family: "Merriweather", serif;
     .navbar-brand {
       padding-top: 0;
     }
+
     .dropdown-item {
       font-size: 15px;
       font-weight: 600;
@@ -158,6 +180,7 @@ $headings-font-family: "Merriweather", serif;
       &:hover {
         color: $secondary;
       }
+
       &:focus {
         background-color: $white;
       }
@@ -198,7 +221,7 @@ $headings-font-family: "Merriweather", serif;
   }
 
   a.top-bar-text:hover {
-    color: $primary !important;
+    color: $primary  !important;
   }
 
   .top-bar {

packages/fakeyou/src/scss/colours.scss

@@ -1,3 +1,4 @@
+// Default colours
 $primary: #fc6b68;
 $secondary: #212529;
 $info: #252d43;
@@ -5,7 +6,11 @@ $success: #40ad48;
 $danger: #e51c23;
 $warning: darken(#f7941c, 5%);
 $accent: #80cfd3;
-$workflow: $primary; // Used to be accent-dark
+$workflow: $primary;
+
+// Light mode colours
+
+$primary-lm: #000;
 
 // Darken some of the grays, since the default bootswatch grays are almost impossible to see against white
 $gray-100: #ecf0f1;

packages/fakeyou/src/scss/lightMode.scss

@@ -0,0 +1,13 @@
+.light-mode {
+  .bg-gradient {
+    background-color: #fff !important;
+  }
+
+  .page-bg {
+    display: none;
+  }
+
+  .text-primary-lm {
+    color: $primary-lm  !important;
+  }
+}

packages/fakeyou/src/v2/view/NewTopNavFc.tsx

@@ -43,7 +43,7 @@ function NewTopNavFc(props: Props) {
 
   // NB: The responses from the "job count" endpoint are cached in a distributed manner.
   // We use the timestamp as a vector clock to know when to update our view.
-  const [pendingTtsJobs, setPendingTtsJobs] = useState<GetPendingTtsJobCountSuccessResponse>({ 
+  const [pendingTtsJobs, setPendingTtsJobs] = useState<GetPendingTtsJobCountSuccessResponse>({
     success: true,
     pending_job_count: 0,
     cache_time: new Date(0), // NB: Epoch
@@ -407,7 +407,7 @@ function NewTopNavFc(props: Props) {
                 <li data-bs-toggle="offcanvas" className="nav-item">
                   <Link
                     to={FrontendUrlConfig.cloneRequestPage()}
-                    className="nav-link"
+                    className="nav-link "
                   >
                     <FontAwesomeIcon icon={faMicrophone} className="me-2" />
                     Clone My Voice!