Merge pull request #98 from storytold/bflat-alert-fix

alert banner and text overlap fixes + dark mode button color change

packages/fakeyou/src/AppNew.scss

@@ -207,23 +207,23 @@ $headings-font-family: "Merriweather", serif;
 
       .btn-secondary {
         color: $white !important;
-        border-color: #5a4a54;
-        background-color: #5a4a54;
+        border-color: #974e4c;
+        background-color: #974e4c;
 
         &:hover {
-          border-color: lighten(#5a4a54, 5%);
-          background-color: lighten(#5a4a54, 5%);
+          border-color: lighten(#974e4c, 6%);
+          background-color: lighten(#974e4c, 6%);
         }
       }
 
       .btn-destructive {
-        background-color: #5a3d47 !important;
-        border-color: #5a3d47;
+        background-color: #6d353b !important;
+        border-color: #6d353b;
         color: $white;
 
         &:hover {
-          border-color: lighten(#5a3d47, 6%);
-          background-color: lighten(#5a3d47, 6%) !important;
+          border-color: lighten(#6d353b, 6%);
+          background-color: lighten(#6d353b, 6%) !important;
         }
       }
 

packages/fakeyou/src/scss/site-refresh.scss

@@ -312,6 +312,21 @@ styles with important tags:
   .alert {
     border-radius: 5px;
     font-weight: 400;
+    font-size: 12px;
+    margin-bottom: 1rem;
+    padding: 0.75rem 1rem;
+
+    a {
+      color: darken($primary, 3%);
+
+      &:hover {
+        opacity: 0.85;
+      }
+    }
+
+    &.alert-dismissible {
+      padding-right: 2.75rem;
+    }
   }
 
   .input-icon {
@@ -517,10 +532,6 @@ styles with important tags:
     }
   }
 
-  .alert {
-    font-size: 14px;
-  }
-
   .rounded-circle {
     border-radius: 50px;
   }
@@ -538,6 +549,10 @@ styles with important tags:
       color: rgba($white, 0.6);
     }
   }
+
+  .btn-close {
+    transition: 0.2s;
+  }
 }
 
 @media (min-width: 992px) {
@@ -562,6 +577,10 @@ styles with important tags:
     .lead {
       font-size: 20px;
     }
+
+    .alert {
+      font-size: 13px;
+    }
   }
 }
 
@@ -586,10 +605,6 @@ styles with important tags:
       columns: 3;
     }
 
-    .alert {
-      font-size: 16px;
-    }
-
     .video-card {
       min-height: 220px;
     }

packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx

@@ -350,7 +350,7 @@ function TtsModelListPage(props: Props) {
           <div className="col-lg-6 px-md-2 px-lg-5 px-xl-2">
             <div>
               <motion.h1
-                className="display-2 fw-bold lh-1 mb-3 text-center text-lg-start no-wrap"
+                className="display-3 fw-bold lh-1 mb-3 text-center text-lg-start"
                 variants={item}
               >
                 {t("tts.TtsModelListPage.heroSection.title")}

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/GenericNotice.tsx

@@ -9,9 +9,9 @@ interface Props {
 function GenericNotice(props: Props) {
   return (
     <>
-      <div className="container pt-3">
+      <div className="container">
         <div
-          className="alert alert-primary alert-dismissible fade show"
+          className="alert alert-secondary alert-dismissible fade show"
           role="alert"
         >
           <button
@@ -20,10 +20,7 @@ function GenericNotice(props: Props) {
             data-bs-dismiss="alert"
             aria-label="Close"
           ></button>
-          <h2>
-            {props.title}
-          </h2>
-          {props.body}
+          <strong>{props.title}</strong> {props.body}
         </div>
       </div>
     </>

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/LanguageNotice.tsx

@@ -22,19 +22,15 @@ function LanguageNotice(props: Props) {
   let title = "¡Bienvenidos!";
   let weHaveModels = (
     <>
-      <p>
-        Tenemos modelos de habla hispana. Echa un vistazo a la categoría
-        "Español" ("Category Filters").
-      </p>
+      Tenemos modelos de habla hispana. Echa un vistazo a la categoría "Español"
+      ("Category Filters").
     </>
   );
   let joinUs = (
     <>
-      <p>
-        Podemos ayudarte a hacer tus propias voces.&nbsp;
-        <DiscordLink text="Únete a nuestro chat Discord" iconAfterText={true} />
-        . Pagaremos por los primeros cincuenta modelos subidos.
-      </p>
+      Podemos ayudarte a hacer tus propias voces.&nbsp;
+      <DiscordLink text="Únete a nuestro chat Discord" iconAfterText={true} />.
+      Pagaremos por los primeros cincuenta modelos subidos.
     </>
   );
 
@@ -42,22 +38,18 @@ function LanguageNotice(props: Props) {
     title = "Bem vinda!";
     weHaveModels = (
       <>
-        <p>
-          Temos modelos que falam português. Dê uma olhada na categoria
-          "Português" ("Filtros de Categoria").
-        </p>
+        Temos modelos que falam português. Dê uma olhada na categoria
+        "Português" ("Filtros de Categoria").
       </>
     );
     joinUs = (
       <>
-        <p>
-          Nós podemos ajudá-lo a fazer suas próprias vozes.&nbsp;
-          <DiscordLink
-            text="Participe do nosso bate-papo no Discord"
-            iconAfterText={true}
-          />
-          . Pagaremos os primeiros cinquenta modelos portugueses carregados.
-        </p>
+        Nós podemos ajudá-lo a fazer suas próprias vozes.&nbsp;
+        <DiscordLink
+          text="Participe do nosso bate-papo no Discord"
+          iconAfterText={true}
+        />
+        . Pagaremos os primeiros cinquenta modelos portugueses carregados.
       </>
     );
   } else if (props.displayLanguage === Language.Turkish) {
@@ -65,23 +57,18 @@ function LanguageNotice(props: Props) {
     weHaveModels = <></>;
     joinUs = (
       <>
-        <p>
-          Kendi sesinizi çıkarmanıza yardımcı olabiliriz.&nbsp;
-          <DiscordLink
-            text="Discord sohbetimize katılın"
-            iconAfterText={true}
-          />
-          . Yüklenen ilk elli Türk modelinin ücretini biz ödeyeceğiz.
-        </p>
+        Kendi sesinizi çıkarmanıza yardımcı olabiliriz.&nbsp;
+        <DiscordLink text="Discord sohbetimize katılın" iconAfterText={true} />.
+        Yüklenen ilk elli Türk modelinin ücretini biz ödeyeceğiz.
       </>
     );
   }
 
   return (
     <>
-      <div className="container pt-3">
+      <div className="container">
         <div
-          className="alert alert-primary alert-dismissible fade show"
+          className="alert alert-secondary alert-dismissible fade show"
           role="alert"
         >
           <button
@@ -90,8 +77,7 @@ function LanguageNotice(props: Props) {
             data-bs-dismiss="alert"
             aria-label="Close"
           ></button>
-          <h1>{title}</h1>
-          {weHaveModels}
+          <strong>{title}</strong> {weHaveModels}
           {joinUs}
         </div>
       </div>

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/PleaseFollowNotice.tsx

@@ -11,9 +11,9 @@ interface Props {
 function PleaseFollowNotice(props: Props) {
   return (
     <>
-      <div className="container pt-3">
+      <div className="container">
         <div
-          className="alert alert-primary alert-dismissible fade show"
+          className="alert alert-secondary alert-dismissible fade show"
           role="alert"
         >
           <button
@@ -26,8 +26,7 @@ function PleaseFollowNotice(props: Props) {
             <Trans i18nKey="notices.pleaseFollow.title">
               Sorry our site is so slow!
             </Trans>
-          </strong>
-          <br />
+          </strong>{" "}
           <Trans i18nKey="notices.pleaseFollow.body">
             I am so sorry the website is slow. We're getting millions of
             requests. <TwitterLink>Please follow us on Twitter</TwitterLink> and
@@ -39,8 +38,7 @@ function PleaseFollowNotice(props: Props) {
               video deepfake technology will debut on Twitch
             </TwitchLabsLink>
             , so please follow us there too.
-          </Trans>
-          <br />
+          </Trans>{" "}
           <DiscordLink2 /> | <TwitterLink /> | <TwitchLabsLink />
         </div>
       </div>

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/TwitchTtsNotice.tsx

@@ -7,9 +7,9 @@ interface Props {
 function TwitchTtsNotice(props: Props) {
   return (
     <>
-      <div className="container pt-3">
+      <div className="container">
         <div
-          className="alert alert-primary alert-dismissible fade show"
+          className="alert alert-secondary alert-dismissible fade show"
           role="alert"
         >
           <button

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/VocodesNotice.tsx

@@ -16,9 +16,9 @@ function VocodesNotice(props: Props) {
           production and deepfake tools, so stay tuned.
         </div>
       </article>*/}
-      <div className="container pt-3">
+      <div className="container">
         <div
-          className="alert alert-primary alert-dismissible fade show"
+          className="alert alert-secondary alert-dismissible fade show"
           role="alert"
         >
           <button