From cde6f34ea9ce2a7442f17c3393a236625450c176 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 19 Feb 2023 17:07:35 +0700
Subject: [PATCH 1/2] margin fix on mobile

---
 .../fakeyou.com/src/v2/view/pages/news/NewsPage.tsx    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
index e653fbaea8..583a2cbf28 100644
--- a/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/news/NewsPage.tsx
@@ -102,10 +102,12 @@ function NewsPage(props: Props) {
     );
 
     subscribeButton = (
-      <Link to="/pricing" className="btn btn-primary w-100">
-        <FontAwesomeIcon icon={faStar} className="me-2" />
-        Subscribe to FakeYou
-      </Link>
+      <div className="mx-3 mx-md-0">
+        <Link to="/pricing" className="btn btn-primary w-100">
+          <FontAwesomeIcon icon={faStar} className="me-2" />
+          Subscribe to FakeYou
+        </Link>
+      </div>
     );
   }
 

From 00666ea49bb4df6f9a426e50780adf7d388529e8 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 26 Feb 2023 12:24:38 +0700
Subject: [PATCH 2/2] audio limit alert

---
 .../fakeyou.com/src/scss/site-refresh.scss    |  4 ++++
 .../tts/tts_model_list/TtsModelListPage.tsx   | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index f3874e6721..16396ba996 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -937,6 +937,10 @@ styles with important tags:
   .border-thick {
     border-width: 2px;
   }
+
+  .fs-7 {
+    font-size: 14px !important;
+  }
 }
 
 select {
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index f2ea548077..41023ec96d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -130,6 +130,7 @@ interface Props {
 function TtsModelListPage(props: Props) {
   //Loading spinning icon
   const [loading, setLoading] = useState(false);
+  const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
 
   const handleLoading = () => {
     setLoading(true);
@@ -263,6 +264,7 @@ function TtsModelListPage(props: Props) {
   const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
     const textValue = (ev.target as HTMLTextAreaElement).value;
     props.setTextBuffer(textValue);
+    setAudioLimitAlertVisible(textValue.length > 100);
   };
 
   const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
@@ -459,6 +461,26 @@ function TtsModelListPage(props: Props) {
     ? "btn btn-primary w-100 disabled"
     : "btn btn-primary w-100";
 
+  let audioLimitAlert = <></>;
+  if (
+    isAudioLimitAlertVisible &&
+    !props.sessionSubscriptionsWrapper.hasPaidFeatures()
+  ) {
+    audioLimitAlert = (
+      <>
+        <div className="alert alert-warning fs-7 mb-0">
+          <span className="fw-semibold">
+            <u>Note:</u> Non-premium is limited to 12 seconds of audio.{" "}
+            <Link className="fw-semibold" to="/pricing">
+              Upgrade now
+            </Link>
+            .
+          </span>
+        </div>
+      </>
+    );
+  }
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       {bootstrapLanguageNotice}
@@ -538,6 +560,7 @@ function TtsModelListPage(props: Props) {
                         }
                       )}
                     ></textarea>
+                    {audioLimitAlert}
                     <div className="d-flex gap-3">
                       <button
                         className={speakButtonClass}