From 895a254174f6a0ec0d6f577f1870dbd49bda7372 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 19 Oct 2022 08:07:07 +0700
Subject: [PATCH] new color theme

---
 packages/fakeyou/src/AppNew.scss              | 163 +-----------------
 packages/fakeyou/src/scss/CSSParticles.scss   |   2 +-
 packages/fakeyou/src/scss/colours.scss        |  11 +-
 packages/fakeyou/src/scss/site-refresh.scss   |  85 +++++++--
 packages/fakeyou/src/v2/view/NewTopNavFc.tsx  | 114 +++++++-----
 .../tts/tts_model_list/TtsModelListPage.tsx   |   2 +-
 6 files changed, 159 insertions(+), 218 deletions(-)

diff --git a/packages/fakeyou/src/AppNew.scss b/packages/fakeyou/src/AppNew.scss
index 5decef3642..3972299572 100644
--- a/packages/fakeyou/src/AppNew.scss
+++ b/packages/fakeyou/src/AppNew.scss
@@ -31,16 +31,7 @@ $headings-font-family: "Merriweather", serif;
   }
 
   .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-repeat: no-repeat;
-    background-attachment: fixed;
+    background: $bg !important;
   }
 
   // Style for user text input that overflows
@@ -139,148 +130,6 @@ $headings-font-family: "Merriweather", serif;
         width: 1px;
       }
     }
-
-    &.dark-mode {
-      &.bg-gradient {
-        background: darken(rgb(13, 16, 25), 2%) !important;
-
-        background: linear-gradient(
-          325deg,
-          darken(rgba(13, 16, 25, 1), 2%) 0%,
-          darken(rgba(42, 21, 34, 1), 3%) 55%,
-          darken(rgba(16, 14, 26, 1), 2%) 100%
-        ) !important;
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-      }
-
-      .nav-bg-dark {
-        background-color: darken(#17101c, 2%);
-      }
-
-      .top-bar {
-        background-color: rgba($white, 0.05);
-      }
-
-      .panel {
-        background-color: rgba($white, 0.05);
-      }
-
-      select {
-        border-color: $input-dark !important;
-        background-color: $input-dark !important;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
-      }
-
-      .btn-destructive {
-        background-color: #ffcfce !important;
-      }
-
-      .video-card-title,
-      .video-card-text {
-        color: $white !important;
-      }
-
-      textarea {
-        background-color: $input-dark !important;
-        border-color: $input-dark !important;
-        color: $white;
-      }
-
-      .form-select {
-        color: $white;
-      }
-
-      ::placeholder {
-        color: $white !important;
-      }
-
-      .input-icon .form-control-feedback {
-        color: $white !important;
-      }
-
-      input {
-        background-color: $input-dark !important;
-        border-color: $input-dark !important;
-        color: $white;
-      }
-
-      .btn-secondary {
-        color: $white !important;
-        border-color: #974e4c;
-        background-color: #974e4c;
-
-        &:hover {
-          border-color: lighten(#974e4c, 6%);
-          background-color: lighten(#974e4c, 6%);
-        }
-      }
-
-      .btn-destructive {
-        background-color: #6d353b !important;
-        border-color: #6d353b;
-        color: $white;
-
-        &:hover {
-          border-color: lighten(#6d353b, 6%);
-          background-color: lighten(#6d353b, 6%) !important;
-        }
-      }
-
-      .btn-inform svg {
-        filter: invert(98%) sepia(2%) saturate(0%) hue-rotate(196deg)
-          brightness(200%) contrast(103%);
-      }
-
-      .dropdown-menu {
-        background-color: #281b25;
-      }
-
-      .dropdown-item {
-        color: $white;
-
-        &:hover {
-          background-color: lighten(#271e25, 8%);
-        }
-        &:focus {
-          background-color: lighten(#271e25, 8%);
-        }
-        &:active {
-          background-color: $primary;
-        }
-      }
-
-      .menu-item {
-        color: $white;
-        background-color: $input-dark;
-        border-bottom: 1px solid;
-        border-color: rgba($white, 0.05);
-
-        &:hover {
-          background-color: lighten($input-dark, 10%);
-        }
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      .form-control::placeholder {
-        /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: rgba($white, 0.5) !important;
-        opacity: 1; /* Firefox */
-      }
-
-      .form-control:-ms-input-placeholder {
-        /* Internet Explorer 10-11 */
-        color: rgba($white, 0.5) !important;
-      }
-
-      .form-control::-ms-input-placeholder {
-        /* Microsoft Edge */
-        color: rgba($white, 0.5) !important;
-      }
-    }
   }
 
   $footer-height: 2rem;
@@ -345,23 +194,25 @@ $headings-font-family: "Merriweather", serif;
       font-size: 15px;
       font-weight: 600;
       padding: 0.5rem 1rem;
-      color: $secondary;
+      color: $white;
 
       &:hover {
-        color: $secondary;
+        color: $white;
+        background-color: $secondary;
       }
 
       &:focus {
-        background-color: $white;
+        background-color: $secondary;
       }
 
       &:active {
-        background-color: $primary;
+        background-color: lighten($secondary, 10%);
         color: $white;
       }
     }
 
     .dropdown-menu {
+      background-color: $panel;
       border-color: rgba($white, 0.12) !important;
       border: 1px solid;
       border-radius: 8px;
diff --git a/packages/fakeyou/src/scss/CSSParticles.scss b/packages/fakeyou/src/scss/CSSParticles.scss
index b9a136d394..f73654cafd 100644
--- a/packages/fakeyou/src/scss/CSSParticles.scss
+++ b/packages/fakeyou/src/scss/CSSParticles.scss
@@ -1,6 +1,6 @@
 /* Config */
 $color-bg: #000000;
-$color-particle: rgba(255, 255, 255, 0.05);
+$color-particle: rgba(255, 255, 255, 0.04);
 $spacing: 2560px;
 $time-1: 120s;
 $time-2: 240s;
diff --git a/packages/fakeyou/src/scss/colours.scss b/packages/fakeyou/src/scss/colours.scss
index c9f6cec1ba..baf868c074 100644
--- a/packages/fakeyou/src/scss/colours.scss
+++ b/packages/fakeyou/src/scss/colours.scss
@@ -1,10 +1,15 @@
 // Default colours
 $primary: #fc6b68;
-$secondary: #212529;
-$input-dark: darken(#55434e, 7%);
+$secondary: #3c3c49;
+$bg: #1c1c25;
+$panel: #272731;
+$input: #3c3c49;
+$input-placeholder: #aeaeb3;
+$danger: #8f4951;
+
+$input-dark: #3c3c49;
 $info: #252d43;
 $success: #40ad48;
-$danger: #e51c23;
 $warning: darken(#f7941c, 5%);
 $accent: #80cfd3;
 $workflow: $primary;
diff --git a/packages/fakeyou/src/scss/site-refresh.scss b/packages/fakeyou/src/scss/site-refresh.scss
index 2a0e532af0..996be0602a 100644
--- a/packages/fakeyou/src/scss/site-refresh.scss
+++ b/packages/fakeyou/src/scss/site-refresh.scss
@@ -159,42 +159,42 @@ styles with important tags:
   .btn-secondary,
   .btn-secondary:focus,
   .btn-secondary:active {
-    background-color: $white;
-    color: $secondary;
+    background-color: $secondary;
+    color: $white;
     border: 2.5px solid;
-    border-color: $white;
+    border-color: $secondary;
     transition: 0.2s;
   }
 
   .btn-secondary:hover {
-    background-color: #ccc;
-    color: $secondary;
+    background-color: lighten($secondary, 5%) !important;
+    color: $white;
     border: 2.5px solid;
-    border-color: #ccc;
+    border-color: lighten($secondary, 5%) !important;
   }
 
   .btn-secondary.disabled,
   .btn-secondary:disabled {
-    color: rgba($secondary, 0.8);
-    background-color: #fff;
-    border-color: #fff;
+    color: $white;
+    background-color: lighten($secondary, 5%) !important;
+    border-color: lighten($secondary, 5%) !important;
   }
 
   .btn-destructive,
   .btn-destructive:focus,
   .btn-destructive:active {
-    background-color: #fff;
-    color: #fc6b68;
+    background-color: $danger;
+    color: $white;
     border: 2.5px solid;
-    border-color: #fff;
+    border-color: $danger;
     transition: 0.2s;
   }
 
   .btn-destructive:hover {
-    background-color: #fdcfce;
-    color: #fc6b68;
+    background-color: lighten($danger, 5%) !important;
+    color: $white;
     border: 2.5px solid;
-    border-color: #fdcfce;
+    border-color: lighten($danger, 5%) !important;
   }
 
   .btn-inform {
@@ -208,11 +208,10 @@ styles with important tags:
   .panel {
     position: relative;
     width: 100%;
-    background-color: rgba($white, 0.1);
+    background-color: $panel;
     border-color: #ffffff12 !important;
     border: 1px solid;
     border-radius: 0px;
-    backdrop-filter: blur(5px);
 
     .panel-title {
       position: static;
@@ -555,6 +554,57 @@ styles with important tags:
   }
 }
 
+select {
+  border-color: $input-dark !important;
+  background-color: $input-dark !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+.btn-destructive {
+  background-color: $danger !important;
+}
+
+.video-card-title,
+.video-card-text {
+  color: $white !important;
+}
+
+textarea {
+  background-color: $input-dark !important;
+  border-color: $input-dark !important;
+  color: $white !important;
+}
+
+.form-select {
+  color: $white !important;
+}
+
+.form-control::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: rgba($white, 0.5) !important;
+  opacity: 1; /* Firefox */
+}
+
+.form-control:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: rgba($white, 0.5) !important;
+}
+
+.form-control::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: rgba($white, 0.5) !important;
+}
+
+.input-icon .form-control-feedback {
+  color: $white !important;
+}
+
+input {
+  background-color: $input !important;
+  border-color: $input !important;
+  color: $white !important;
+}
+
 @media (min-width: 992px) {
   .fakeyou-refresh {
     .panel {
@@ -594,7 +644,6 @@ styles with important tags:
       margin-left: auto;
       max-width: 1080px;
       border-radius: 8px;
-      backdrop-filter: blur(5px);
     }
 
     .panel {
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index 14ee9ffa6c..f21e8f2deb 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -46,12 +46,12 @@ interface Props {
 }
 
 function NewTopNavFc(props: Props) {
-  const defaultColourView = window.localStorage.getItem("darkMode");
+  // const defaultColourView = window.localStorage.getItem("darkMode");
   const defaultLowSpecView = window.localStorage.getItem("lowSpec");
 
-  const [darkModes, toggleDarkModes] = useState(
-    defaultColourView === "false" ? true : false
-  );
+  // const [darkModes, toggleDarkModes] = useState(
+  //   defaultColourView === "false" ? true : false
+  // );
 
   const [lowSpecView, toggleLowSpecs] = useState(
     defaultLowSpecView === "false" ? true : false
@@ -92,11 +92,11 @@ function NewTopNavFc(props: Props) {
     return () => clearInterval(interval);
   }, [pendingTtsJobs]);
 
-  const toggleDarkMode = () => {
-    window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
+  // const toggleDarkMode = () => {
+  //   window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
 
-    toggleDarkModes(!darkModes);
-  };
+  //   toggleDarkModes(!darkModes);
+  // };
 
   const toggleLowSpec = () => {
     window.localStorage.setItem("lowSpec", lowSpecView ? "true" : "false");
@@ -128,8 +128,8 @@ function NewTopNavFc(props: Props) {
 
   useEffect(() => {
     // Logic for dark mode toggle
-    if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
-    else document.getElementById("main")!.classList.remove("dark-mode");
+    // if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
+    // else document.getElementById("main")!.classList.remove("dark-mode");
 
     // Logic for the animation toggle
     if (lowSpecView) document.getElementById("main")!.classList.add("low-spec");
@@ -226,9 +226,10 @@ function NewTopNavFc(props: Props) {
               Online Users: <span className="fw-bold text-red">1,204</span>
             </p> */}
 
-            <Tippy
-              content={`${darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
-                }`}
+            {/* <Tippy
+              content={`${
+                darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
+              }`}
             >
               <button
                 className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
@@ -236,13 +237,14 @@ function NewTopNavFc(props: Props) {
               >
                 <FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
               </button>
-            </Tippy>
+            </Tippy> */}
             <Tippy
-              content={`${lowSpecView ? "Turn on animations" : "Turn off animations"
-                }`}
+              content={`${
+                lowSpecView ? "Turn on animations" : "Turn off animations"
+              }`}
             >
               <button
-                className={`btn btn-toggle  ${darkModes ? "dark" : ""}`}
+                className="btn btn-toggle"
                 onClick={() => toggleLowSpec()}
               >
                 <FontAwesomeIcon
@@ -370,42 +372,64 @@ function NewTopNavFc(props: Props) {
                     aria-labelledby="offcanvasNavbarLgDropdown-community"
                   >
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/contribute" title="to Upload page">
+                      <Link
+                        className="dropdown-item"
+                        to="/contribute"
+                        title="to Upload page"
+                      >
                         <FontAwesomeIcon icon={faUpload} className="me-2" />
                         Contribute/Upload
                       </Link>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/leaderboard" title="to leaderboard">
+                      <Link
+                        className="dropdown-item"
+                        to="/leaderboard"
+                        title="to leaderboard"
+                      >
                         <FontAwesomeIcon icon={faTrophy} className="me-2" />
                         Leaderboard
                       </Link>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <a className="dropdown-item" 
-                          href={ThirdPartyLinks.FAKEYOU_DISCORD} 
-                          title="discord chat" 
-                          target="_blank" 
-                          rel="noopener noreferrer">
+                      <a
+                        className="dropdown-item"
+                        href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                        title="discord chat"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
                         <FontAwesomeIcon icon={faDiscord} className="me-2" />
                         Discord Chat
                       </a>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/patrons" title="to patron list">
+                      <Link
+                        className="dropdown-item"
+                        to="/patrons"
+                        title="to patron list"
+                      >
                         <FontAwesomeIcon icon={faPatreon} className="me-2" />
                         Patrons
                       </Link>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/firehose" title="to feed">
+                      <Link
+                        className="dropdown-item"
+                        to="/firehose"
+                        title="to feed"
+                      >
                         <FontAwesomeIcon icon={faList} className="me-2" />
                         Feed
                       </Link>
                     </li>
-                    <hr className='dropdown-divider' />
+                    <hr className="dropdown-divider" />
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to={myDataLink} title="my profile">
+                      <Link
+                        className="dropdown-item"
+                        to={myDataLink}
+                        title="my profile"
+                      >
                         <FontAwesomeIcon icon={faUser} className="me-2" />
                         My Data
                       </Link>
@@ -414,13 +438,23 @@ function NewTopNavFc(props: Props) {
                 </li>
 
                 <li data-bs-toggle="offcanvas" className="nav-item d-lg-none">
-                  <Link className="nav-link" aria-current="page" to="/about" title="About Us">
+                  <Link
+                    className="nav-link"
+                    aria-current="page"
+                    to="/about"
+                    title="About Us"
+                  >
                     About
                   </Link>
                 </li>
 
                 <li data-bs-toggle="offcanvas" className="nav-item d-lg-none">
-                  <Link className="nav-link" aria-current="page" title="Terms of Use" to="/terms">
+                  <Link
+                    className="nav-link"
+                    aria-current="page"
+                    title="Terms of Use"
+                    to="/terms"
+                  >
                     Terms of Use
                   </Link>
                 </li>
@@ -461,9 +495,10 @@ function NewTopNavFc(props: Props) {
                 <li className="ps-3 d-lg-none">
                   <div className="d-flex gap-4 py-2">
                     <div className="top-bar-text mobile">Options:</div>
-                    <Tippy
-                      content={`${darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
-                        }`}
+                    {/* <Tippy
+                      content={`${
+                        darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
+                      }`}
                     >
                       <button
                         className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
@@ -471,15 +506,16 @@ function NewTopNavFc(props: Props) {
                       >
                         <FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
                       </button>
-                    </Tippy>
+                    </Tippy> */}
                     <Tippy
-                      content={`${lowSpecView
-                        ? "Turn on animations"
-                        : "Turn off animations"
-                        }`}
+                      content={`${
+                        lowSpecView
+                          ? "Turn on animations"
+                          : "Turn off animations"
+                      }`}
                     >
                       <button
-                        className={`btn btn-toggle  ${darkModes ? "dark" : ""}`}
+                        className="btn btn-toggle"
                         onClick={() => toggleLowSpec()}
                       >
                         <FontAwesomeIcon
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
index 8ae3f9845e..58165a55b9 100644
--- a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
@@ -338,7 +338,7 @@ function TtsModelListPage(props: Props) {
           <div className="col-lg-6">
             <div className="d-flex justify-content-center">
               <motion.img
-                src="mascot/Halloween-Hanashi.webp"
+                src="mascot/kitsune_pose2.webp"
                 className="img-fluid"
                 width="516"
                 height="508"