From e15a03a4fd2467248d0cd8539ec94e1f6ca80959 Mon Sep 17 00:00:00 2001
From: ftk789 <lolt04588@gmail.com>
Date: Fri, 12 Aug 2022 23:12:47 +0300
Subject: [PATCH] Moved toggles to TopNav but still couldn't figrue out passing
 the functions to TopNav

---
 packages/fakeyou/src/App.tsx                 | 11 ++---------
 packages/fakeyou/src/v2/view/NewTopNavFc.tsx | 13 +++++++++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/fakeyou/src/App.tsx b/packages/fakeyou/src/App.tsx
index 4f439a5119..fa7573ad21 100644
--- a/packages/fakeyou/src/App.tsx
+++ b/packages/fakeyou/src/App.tsx
@@ -630,6 +630,7 @@ class App extends React.Component<Props, State> {
     mainClassNames = mainClassNames + (this.state.darkMode ? '' : 'dark-mode')
     mainClassNames = mainClassNames + mainClassNames + (this.state.LowSpec ? '' : 'low-spec')
     const DarkModeOff = () =>{
+      
       const currentValue = this.state.darkMode // true or false
 
        window.localStorage.setItem("darkMode", (currentValue ? "true" : "false"))
@@ -667,17 +668,9 @@ class App extends React.Component<Props, State> {
       sessionItem.hidden.opacity = 0
     }
 
-    }
+  }
     return (
       <BrowserRouter>
-  <div className="form-check form-switch">
-  <input className="form-check-input" type="checkbox" id="DarkModeToggle" onClick={DarkModeOff}></input>
-  <label className="form-check-label">Dark Mode</label>
-</div>
-<div className="form-check form-switch">
-  <input className="form-check-input" type="checkbox" id="LowSpec" onClick={LowSpec}></input>
-  <label className="form-check-label">Low Spec</label>
-</div>
 
         <div id="main" className={mainClassNames}>
           <div className="dark-mode"></div>
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index e628b94bca..9f2c288461 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -330,6 +330,15 @@ function NewTopNavFc(props: Props) {
   return (
     <div>
       <div className="top-bar d-none d-lg-flex">
+      <div className="form-check form-switch">
+  <input className="form-check-input" type="checkbox" id="DarkModeToggle" ></input>
+  <label className="form-check-label">Dark Mode</label>
+</div>
+<div> ‏‏‎ ‎ </div>
+<div className="form-check form-switch">
+  <input className="form-check-input" type="checkbox" id="LowSpec" ></input>
+  <label className="form-check-label">Low Spec</label>
+</div>
         <div className="container d-flex">
           <div className="d-flex gap-4 flex-grow-1">
             <Link className="top-bar-text" to="/about">
@@ -352,9 +361,13 @@ function NewTopNavFc(props: Props) {
             <p className="top-bar-text">
               TTS Queued: <span className="fw-bold text-red">{pendingTtsJobs.pending_job_count}</span>
             </p>
+            
           </div>
+          
         </div>
+        
       </div>
+  
       <nav
         className="navbar navbar-expand-lg navbar-dark py-3"
         aria-label="Offcanvas navbar large"