dashboard

packages/storyteller-stream/package.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "@storyteller/components": "0.1.0",
     "@craco/craco": "^6.4.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^13.5.0",

packages/storyteller-stream/src/App.scss

@@ -1,7 +1,8 @@
 //@import-normalize; /* bring in normalize.css styles */
 
 // $page-width: 700px;
-
+$primary: #fc6b68;
+$white: #fff;
 $light-text-color: #777;
 $button-text-color: #666;
 
@@ -156,12 +157,44 @@ p {
   border: none;
 }
 
-.nav-bg-dark {
-  background-color: #17101c !important;
+// .nav-bg-dark {
+//   background-color: #17101c !important;
+// }
+
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: $primary;
+
+  &:hover {
+    background-color: $primary;
+  }
 }
 
-.m-page-top {
-  margin-top: 100px;
+.nav-pills .nav-link {
+  border-radius: 5px;
+  color: rgba(#fff, 0.7);
+  transition: 0.2s;
+  padding: 12px 14px !important;
+
+  &:hover {
+    background-color: rgba($white, 0.1);
+  }
+}
+
+.icon {
+  content: "";
+  width: 20px;
+  margin-right: 16px;
+}
+
+.p-page-top {
+  padding-top: 110px;
+}
+
+.p-page {
+  padding-top: 100px;
+  padding-bottom: 100px;
 }
 
 .offcanvas {
@@ -223,12 +256,6 @@ span.word:after {
   min-height: 100%;
 }
 
-.bg-title {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='300' preserveAspectRatio='none' viewBox='0 0 1920 300'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1028%26quot%3b)' fill='none'%3e%3cpath d='M1170 175L183 174' stroke-width='8' stroke='url(%23SvgjsLinearGradient1029)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1456 93L968 92' stroke-width='10' stroke='url(%23SvgjsLinearGradient1029)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1459 102L2490 101' stroke-width='6' stroke='url(%23SvgjsLinearGradient1029)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M766 41L192 40' stroke-width='6' stroke='url(%23SvgjsLinearGradient1030)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M261 212L-475 211' stroke-width='10' stroke='url(%23SvgjsLinearGradient1030)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M251 192L1533 191' stroke-width='6' stroke='url(%23SvgjsLinearGradient1029)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M172 211L936 210' stroke-width='8' stroke='url(%23SvgjsLinearGradient1030)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1070 207L1854 206' stroke-width='10' stroke='url(%23SvgjsLinearGradient1029)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1028'%3e%3crect width='1920' height='300' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1029'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05 )' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1030'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
-  background-size: auto;
-  background-repeat: no-repeat;
-}
-
 .bg-hero {
   background: rgb(18, 14, 26);
   background: linear-gradient(

packages/storyteller-stream/src/App.tsx

@@ -28,6 +28,7 @@ import { TtsConfigsDeleteRulePage } from "./pages/tts_configs/TtsConfigsDeleteRu
 import { TtsConfigsEditRulePage } from "./pages/tts_configs/TtsConfigsEditRulePage";
 import { TtsConfigsReorderPage } from "./pages/tts_configs/TtsConfigsReorderPage";
 import { ObsConfigsPage } from "./pages/obs_configs/ObsConfigsPage";
+import { Dashboard } from "./pages/dashboard/Dashboard";
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
@@ -120,7 +121,7 @@ class App extends React.Component<Props, State> {
   public render() {
     return (
       <BrowserRouter>
-        <div id="main" className="mainwrap">
+        <div>
           <div id="viewable">
             <TopNav
               sessionWrapper={this.state.sessionWrapper}
@@ -172,6 +173,10 @@ class App extends React.Component<Props, State> {
                   allTtsModelsByToken={this.state.allTtsModelsByToken}
                 />
               </Route>
+              <Route exact={true} path="/dashboard">
+                <Dashboard sessionWrapper={this.state.sessionWrapper} />
+              </Route>
+
               <Route exact={true} path="/tts_configs">
                 <TtsConfigsIndexPage
                   sessionWrapper={this.state.sessionWrapper}
@@ -186,14 +191,14 @@ class App extends React.Component<Props, State> {
               </Route>
             </Switch>
 
-            <footer className="footer">
+            {/* <footer className="footer">
               <div className="content has-text-centered">
                 <p>Copyright &copy; 2022 Storyteller</p>
                 <p>
                   <GitSha />
                 </p>
               </div>
-            </footer>
+            </footer> */}
           </div>
         </div>
       </BrowserRouter>

packages/storyteller-stream/src/layout/TopNav.tsx

@@ -16,13 +16,13 @@ function TopNav(props: Props) {
         aria-label="Offcanvas navbar large"
       >
         <div className="container">
-          <a className="navbar-brand me-5 pr-8" href="#">
+          <Link className="navbar-brand me-5 pr-8" to="/">
             <img
-              src="assets/storyteller-logo.png"
+              src="/assets/storyteller-logo.png"
               alt="Fake You Logo"
               height="34"
             />
-          </a>
+          </Link>
           <button
             className="navbar-toggler p-0 border-0"
             type="button"
@@ -39,7 +39,7 @@ function TopNav(props: Props) {
           >
             <div className="offcanvas-header">
               <a className="navbar-brand me-5 pr-8" href="index.html">
-                <img src="assets/storyteller-logo.png" alt="" height="34" />
+                <img src="/assets/storyteller-logo.png" alt="" height="34" />
               </a>
               <button
                 type="button"
@@ -50,7 +50,7 @@ function TopNav(props: Props) {
             </div>
             <div className="offcanvas-body">
               <ul className="navbar-nav justify-content-start flex-grow-1 align-items-lg-center">
-                <li className="nav-item">
+                {/* <li className="nav-item">
                   <a
                     className="nav-link"
                     aria-current="page"
@@ -64,7 +64,7 @@ function TopNav(props: Props) {
                   <a className="nav-link" aria-current="page" href="#">
                     OBS Configs
                   </a>
-                </li>
+                </li> */}
               </ul>
               <div className="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
                 <a className="nav-login me-3" href="">

packages/storyteller-stream/src/pages/dashboard/Dashboard.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { Route, Switch } from "react-router-dom";
+import { Sidebar } from "./Sidebar";
+import { DashboardPage } from "./DashboardPage";
+import { Test } from "./Test";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+}
+
+function Dashboard(props: Props) {
+  // if (!props.sessionWrapper.isLoggedIn()) {
+  //   return (
+  //     <div className="container vh-100 d-flex align-items-center">
+  //       <div className="w-100">
+  //         <h1 className="text-center">Must Log In</h1>
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <>
+      <div className="bg-gradient">
+        <div className="container vh-100">
+          <div className="p-page-top row gx-5 h-100">
+            <div className="d-none d-lg-flex col-lg-3 pb-5">
+              {/* Sidebar */}
+              <Sidebar />
+            </div>
+            <div className="col-lg-9">
+              {/* Page routes */}
+              <Switch>
+                <Route path="/">
+                  <DashboardPage />
+                </Route>
+                <Route path="/test">
+                  <Test />
+                </Route>
+              </Switch>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export { Dashboard };

packages/storyteller-stream/src/pages/dashboard/DashboardPage.tsx

@@ -0,0 +1,32 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCog,
+  faHome,
+  faVideo,
+  faVolumeUp,
+} from "@fortawesome/free-solid-svg-icons";
+
+function DashboardPage(props: Props) {
+  // if (!props.sessionWrapper.isLoggedIn()) {
+  //   return (
+  //     <div className="container vh-100 d-flex align-items-center">
+  //       <div className="w-100">
+  //         <h1 className="text-center">Must Log In</h1>
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div className="parent">
+      <h1 className="word mb-4">
+        <span className="word">Dashboard</span>
+      </h1>
+      <button className="btn btn-primary w-100">
+        Link your Twitch account
+      </button>
+    </div>
+  );
+}
+
+export { DashboardPage };

packages/storyteller-stream/src/pages/dashboard/Sidebar.tsx

@@ -0,0 +1,71 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCog,
+  faHome,
+  faVideo,
+  faVolumeUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { Link } from "react-router-dom";
+
+function Sidebar(props: Props) {
+  // if (!props.sessionWrapper.isLoggedIn()) {
+  //   return (
+  //     <div className="container vh-100 d-flex align-items-center">
+  //       <div className="w-100">
+  //         <h1 className="text-center">Must Log In</h1>
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div className="panel p-3">
+      <div className="d-flex flex-column flex-shrink-0">
+        <ul className="nav nav-pills flex-column gap-2">
+          <li className="nav-item">
+            <Link to="/" className="nav-link active d-flex" aria-current="page">
+              <div className="icon">
+                <FontAwesomeIcon icon={faHome} />
+              </div>
+              Dashboard
+            </Link>
+          </li>
+          <li>
+            <Link to="/test" className="nav-link d-flex">
+              <div className="icon">
+                <FontAwesomeIcon icon={faVolumeUp} />
+              </div>
+              TTS Configs
+            </Link>
+          </li>
+          <li>
+            <a href="/" className="nav-link d-flex">
+              <div className="icon">
+                <FontAwesomeIcon icon={faVideo} />
+              </div>
+              OBS Setup
+            </a>
+          </li>
+          <li>
+            <a href="/" className="nav-link d-flex">
+              <div className="icon">
+                <FontAwesomeIcon icon={faCog} />
+              </div>
+              Settings
+            </a>
+          </li>
+          <li>
+            <a href="/" className="nav-link d-flex">
+              <div className="icon">
+                <FontAwesomeIcon icon={faCog} />
+              </div>
+              Support
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export { Sidebar };

packages/storyteller-stream/src/pages/dashboard/Test.tsx

@@ -0,0 +1,32 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCog,
+  faHome,
+  faVideo,
+  faVolumeUp,
+} from "@fortawesome/free-solid-svg-icons";
+
+function Test(props: Props) {
+  // if (!props.sessionWrapper.isLoggedIn()) {
+  //   return (
+  //     <div className="container vh-100 d-flex align-items-center">
+  //       <div className="w-100">
+  //         <h1 className="text-center">Must Log In</h1>
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div className="parent">
+      <h1 className="word mb-4">
+        <span className="word">TESTY TEST</span>
+      </h1>
+      <button className="btn btn-primary w-100">
+        Link your Twitch account
+      </button>
+    </div>
+  );
+}
+
+export { Test };