fixed notices close button

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

@@ -489,17 +489,7 @@ styles with important tags:
   }
 
   .alert {
-    .close {
-      position: absolute;
-      border-radius: 50px;
-      border: none;
-      background: none;
-      padding: 0;
-      margin: 0;
-      right: 12px;
-      top: 0px;
-      font-size: 30px;
-    }
+    font-size: 14px;
   }
 }
 
@@ -548,5 +538,9 @@ styles with important tags:
     ul.patrons-list {
       columns: 3;
     }
+
+    .alert {
+      font-size: 16px;
+    }
   }
 }

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

@@ -415,6 +415,14 @@ function TtsModelListFc(props: Props) {
 
   return (
     <div>
+      {pleaseFollowNotice}
+
+      {languageNotice}
+
+      {vocodesNotice}
+
+      {twitchTtsNotice}
+
       <div className="container hero-section">
         <div className="row gx-3 flex-lg-row-reverse align-items-center">
           <div className="col-lg-6">
@@ -446,7 +454,7 @@ function TtsModelListFc(props: Props) {
             </Fade>
 
             <Fade bottom delay={delay} duration={duration} distance={distance}>
-              <div className="d-grid gap-3 d-lg-flex justify-content-lg-start mb-4">
+              <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-lg-start mb-5 mb-lg-4">
                 <Link to="/">
                   <button type="button" className="btn btn-primary w-100">
                     Sign Up
@@ -463,14 +471,6 @@ function TtsModelListFc(props: Props) {
         </div>
       </div>
 
-      {pleaseFollowNotice}
-
-      {languageNotice}
-
-      {vocodesNotice}
-
-      {twitchTtsNotice}
-
       <div className="container-panel pt-4 pb-5 mb-4">
         <Fade bottom distance={distance} delay={delay2} duration={duration}>
           <div className="panel p-3 p-lg-4 mt-5 mt-lg-0">
@@ -527,7 +527,7 @@ function TtsModelListFc(props: Props) {
 
                   {maybeError}
 
-                  <div className="d-flex flex-column flex-lg-row w-100 gap-3 mt-3">
+                  <div className="d-flex flex-column flex-md-row w-100 gap-3 mt-3">
                     <button
                       className="btn btn-primary w-100"
                       disabled={remainingCharactersButtonDisabled}

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

@@ -80,11 +80,17 @@ function LanguageNotice(props: Props) {
   return (
     <>
       \
-      <div className="container pb-5">
-        <div className="alert alert-primary alert-dismissible position-relative">
-          <button className="close" onClick={() => props.clearLanguageNotice()}>
-            <span aria-hidden="true">&times;</span>
-          </button>
+      <div className="container pt-3">
+        <div
+          className="alert alert-primary alert-dismissible fade show"
+          role="alert"
+        >
+          <button
+            className="btn-close"
+            onClick={() => props.clearLanguageNotice()}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
           <h1>{title}</h1>
           {weHaveModels}
           {joinUs}

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

@@ -11,14 +11,17 @@ interface Props {
 function PleaseFollowNotice(props: Props) {
   return (
     <>
-      <div className="container pb-5">
-        <div className="alert alert-primary alert-dismissible position-relative">
+      <div className="container pt-3">
+        <div
+          className="alert alert-primary alert-dismissible fade show"
+          role="alert"
+        >
           <button
-            className="close"
+            className="btn-close"
             onClick={() => props.clearPleaseFollowNotice()}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
           <strong>
             <Trans i18nKey="notices.pleaseFollow.title">
               Sorry our site is so slow!

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

@@ -7,14 +7,17 @@ interface Props {
 function TwitchTtsNotice(props: Props) {
   return (
     <>
-      <div className="container pb-5">
-        <div className="alert alert-primary alert-dismissible position-relative">
+      <div className="container pt-3">
+        <div
+          className="alert alert-primary alert-dismissible fade show"
+          role="alert"
+        >
           <button
-            className="close"
+            className="btn-close"
             onClick={() => props.clearTwitchTtsNotice()}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
           <strong>
             If you stream on Twitch, we have a brand new platform for you!
           </strong>

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

@@ -16,11 +16,17 @@ function VocodesNotice(props: Props) {
           production and deepfake tools, so stay tuned.
         </div>
       </article>*/}
-      <div className="container pb-5">
-        <div className="alert alert-primary alert-dismissible position-relative">
-          <button className="close" onClick={() => props.clearVocodesNotice()}>
-            <span aria-hidden="true">&times;</span>
-          </button>
+      <div className="container pt-3">
+        <div
+          className="alert alert-primary alert-dismissible fade show"
+          role="alert"
+        >
+          <button
+            className="btn-close"
+            onClick={() => props.clearVocodesNotice()}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
           <em>Vocodes</em> is now{" "}
           <strong>
             <em>FakeYou</em>