From 957a22b7bc00377c9b3fed2fcf7d15f3623daee3 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 14 Jan 2022 01:53:37 -0500
Subject: [PATCH] this is starting to look great

---
 fakeyou/src/App.tsx                           |   2 +
 fakeyou/src/v2/view/NewTopNavFc.tsx           | 154 ++++++++++--------
 .../tts/tts_model_list/TtsModelListFc.tsx     |  15 +-
 3 files changed, 99 insertions(+), 72 deletions(-)

diff --git a/fakeyou/src/App.tsx b/fakeyou/src/App.tsx
index e0bd4dce07..575e8f767a 100644
--- a/fakeyou/src/App.tsx
+++ b/fakeyou/src/App.tsx
@@ -400,11 +400,13 @@ class App extends React.Component<Props, State> {
         <div id="main" className="mainwrap">
           <div id="viewable">
 
+            {/*
             <MigrationTopNav
               enableAlpha={this.state.enableAlpha}
               sessionWrapper={this.state.sessionWrapper}
               querySessionAction={this.querySession}
               />
+            */}
 
             <div className="migrationComponentWrapper">
 
diff --git a/fakeyou/src/v2/view/NewTopNavFc.tsx b/fakeyou/src/v2/view/NewTopNavFc.tsx
index 82a2fb0d8d..f34016b6d9 100644
--- a/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { SessionWrapper } from '../../session/SessionWrapper';
 import { Link } from 'react-router-dom';
+import { MigrationTopNavSession } from '../../migration/MigrationTopNav_Session';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -19,79 +20,93 @@ function NewTopNavFc(props: Props) {
   return (
     <>
     <nav className="navbar is-transparent">
-  <div className="navbar-brand">
-    <Link className="navbar-item" to="/">
-      <img src="https://bulma.io/images/bulma-logo.png" alt="FakeYou: Cartoon and Celebrity Text to Speech" width="112" height="28" />
-    </Link>
-    <div className="navbar-burger" data-target="navbarExampleTransparentExample">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-
-  <div id="navbarExampleTransparentExample" className="navbar-menu">
-    <div className="navbar-start">
-      <a className="navbar-item" href="https://bulma.io/">
-        Home
-      </a>
-      <div className="navbar-item has-dropdown is-hoverable">
-        <a className="navbar-link" href="https://bulma.io/documentation/overview/start/">
-          Docs
-        </a>
-        <div className="navbar-dropdown is-boxed">
-          <a className="navbar-item" href="https://bulma.io/documentation/overview/start/">
-            Overview
-          </a>
-          <a className="navbar-item" href="https://bulma.io/documentation/overview/modifiers/">
-            Modifiers
-          </a>
-          <a className="navbar-item" href="https://bulma.io/documentation/columns/basics/">
-            Columns
-          </a>
-          <a className="navbar-item" href="https://bulma.io/documentation/layout/container/">
-            Layout
-          </a>
-          <a className="navbar-item" href="https://bulma.io/documentation/form/general/">
-            Form
-          </a>
-          <hr className="navbar-divider" />
-          <a className="navbar-item" href="https://bulma.io/documentation/elements/box/">
-            Elements
-          </a>
-          <a className="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
-            Components
-          </a>
+      <div className="navbar-brand">
+        <Link className="navbar-item" to="/">
+          <img src="/fakeyou/fakeyou-nav-logo-8.png" alt="FakeYou: Cartoon and Celebrity Text to Speech" />
+        </Link>
+        <div className="navbar-burger" data-target="navbarExampleTransparentExample">
+          <span></span>
+          <span></span>
+          <span></span>
         </div>
       </div>
-    </div>
 
-    <div className="navbar-end">
-      <div className="navbar-item">
-        <div className="field is-grouped">
-          <p className="control">
-            <a className="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
-              <span className="icon">
-                <i className="fab fa-twitter"></i>
-              </span>
-              <span>
-                Tweet
-              </span>
-            </a>
-          </p>
-          <p className="control">
-            <a className="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.3/bulma-0.9.3.zip">
-              <span className="icon">
-                <i className="fas fa-download"></i>
-              </span>
-              <span>Download</span>
-            </a>
-          </p>
+      <div id="navbarExampleTransparentExample" className="navbar-menu">
+        <div className="navbar-start">
+
+          <Link to="/"
+            className="navbar-item"
+            >TTS</Link>
+
+          <Link to="/video"
+            className="navbar-item"
+            >Video</Link>
+
+          <div className="navbar-item has-dropdown is-hoverable">
+            <Link to={myDataLink}
+              className="navbar-link"
+              >Community</Link>
+
+            <div className="navbar-dropdown is-boxed">
+
+              <Link to="/contribute"
+                className="navbar-item"
+                >Contribute</Link>
+
+              <Link to="/firehose"
+                className="navbar-item"
+                >Feed</Link>
+
+              <Link to="/leaderboard"
+                className="navbar-item"
+                >Leaderboard</Link>
+
+
+              <hr className="navbar-divider" />
+
+              <Link to={myDataLink}
+                className="navbar-item is-active"
+                >My Data</Link>
+
+
+            </div>
+          </div>
+        </div>
+
+        <div className="navbar-end">
+          <div className="navbar-item">
+            <div className="field is-grouped">
+              <p className="control">
+                <a className="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
+                  <span className="icon">
+                    <i className="fab fa-twitter"></i>
+                  </span>
+                  <span>
+                    Tweet
+                  </span>
+                </a>
+              </p>
+              <p className="control">
+                <a className="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.3/bulma-0.9.3.zip">
+                  <span className="icon">
+                    <i className="fas fa-download"></i>
+                  </span>
+                  <span>Download</span>
+                </a>
+
+                <MigrationTopNavSession
+                  sessionWrapper={props.sessionWrapper}
+                  enableAlpha={true}
+                  querySessionAction={() => { /* TODO */}}
+                  />
+              </p>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-</nav>
+    </nav>
+
+    {/*
     <nav>
       <div className="columns">
         <div className="column">
@@ -126,7 +141,10 @@ function NewTopNavFc(props: Props) {
         </div>
       </div>
       <hr />
+
+
     </nav>
+    */}
     </>
   )
 }
diff --git a/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx b/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
index 36c6d854dd..040bb074d4 100644
--- a/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
+++ b/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
@@ -189,10 +189,17 @@ function TtsModelListFc(props: Props) {
 
   return (
     <div>
-      <h1 className="title is-1"> FakeYou Text to Speech </h1>
-      <h5 className="subtitle is-5">
-        Use deep fake tech to say stuff with your favorite characters.
-      </h5>
+
+      <section className="hero">
+        <div className="hero-body">
+          <p className="title">
+            Text to Speech
+          </p>
+          <p className="subtitle">
+            Use <strong>FakeYou</strong> deep fake tech to say stuff with your favorite characters.
+          </p>
+        </div>
+      </section>
 
       {vocodesNotice}