From 8f9330f2606b279d9a2f84792b2fc1d99879a804 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 18 May 2023 13:33:27 +0700
Subject: [PATCH] display fixes and responsiveness

---
 .../pages/contribute/ContributeIndexPage.tsx  | 16 ++++++------
 .../src/v2/view/pages/landing/LandingPage.tsx | 26 +++++++------------
 .../vc/vc_model_list/VcModelListPage.tsx      |  7 ++---
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx b/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
index 76bad95911..dbc68b4ff1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx
@@ -79,13 +79,13 @@ function ContributeIndexPage(props: Props) {
       />
 
       <motion.div className="container-panel pb-3" variants={panel}>
-        <div className="panel p-3 p-lg-4">
+        <div className="panel p-3 py-4 p-md-4 text-center text-lg-start">
           <h2 className="fw-bold">
             <FontAwesomeIcon icon={faFileArrowUp} className="me-3" />
             {t("pages.contributeIndex.headingUploadModels")}
           </h2>
-          <div className="d-flex flex-column gap-4">
-            <p className="text-center text-lg-start mb-3">
+          <div className="d-flex flex-column">
+            <p className="mb-4">
               <Trans i18nKey="pages.contributeIndex.describeUploadModels">
                 Create new voices and video templates for FakeYou.
                 <DiscordLink
@@ -135,13 +135,13 @@ function ContributeIndexPage(props: Props) {
       </motion.div>
 
       <motion.div className="container-panel pt-3 pb-3" variants={item}>
-        <div className="panel p-3 p-lg-4 mt-lg-0">
+        <div className="panel p-3 py-4 p-md-4 text-center text-lg-start">
           <h2 className="fw-bold">
             <FontAwesomeIcon icon={faTags} className="me-3" />
             {categoryHeading}
           </h2>
-          <div className="d-flex flex-column gap-4">
-            <p className="text-center text-lg-start mb-3">
+          <div className="d-flex flex-column">
+            <p className="text-center text-lg-start mb-4">
               {t("pages.contributeIndex.describeSuggest")}
             </p>
             <div className="d-flex gap-3">
@@ -156,12 +156,12 @@ function ContributeIndexPage(props: Props) {
         </div>
       </motion.div>
       <div className="container-panel pt-3">
-        <div className="panel p-3 p-lg-4 load-hidden mt-lg-0">
+        <div className="panel p-3 py-4 p-md-4 text-center text-lg-start">
           <h2 className="fw-bold">
             <FontAwesomeIcon icon={faHandsHelping} className="me-3" />
             {t("pages.contributeIndex.headingMore")}
           </h2>
-          <div className="d-flex flex-column gap-4">
+          <div className="d-flex flex-column">
             <p className="text-center text-lg-start">
               <Trans i18nKey="pages.contributeIndex.describeMore">
                 Want to contribute code, design, or data science?
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index ff725ea678..8995cdbeeb 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -91,26 +91,20 @@ function LandingPage(props: Props) {
           <div className="row gy-3 zi-2">
             <div className="col-12 col-lg-4">
               <Link to="/upload/tts" className="btn btn-secondary">
-                <span className="d-flex align-items-center">
-                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
-                  Upload TTS Model
-                </span>
+                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                Upload TTS Model
               </Link>
             </div>
             <div className="col-12 col-lg-4">
               <Link to="/upload/voice_conversion" className="btn btn-secondary">
-                <span className="d-flex align-items-center">
-                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
-                  Upload VTV Model
-                </span>
+                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                Upload V2V Model
               </Link>
             </div>
             <div className="col-12 col-lg-4">
               <Link to="/upload/w2l_photo" className="btn btn-secondary">
-                <span className="d-flex align-items-center">
-                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
-                  Upload W2L Model
-                </span>
+                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                Upload W2L Model
               </Link>
             </div>
           </div>
@@ -158,10 +152,7 @@ function LandingPage(props: Props) {
             Get rewarded from our $15k prize pool for creating Voice to Voice
             models!
           </span>
-          <Link
-            to="/commissions"
-            className="fw-semibold ms-2 d-inline-flex align-items-center"
-          >
+          <Link to="/commissions" className="fw-semibold ms-2">
             See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
           </Link>
         </div>
@@ -178,7 +169,8 @@ function LandingPage(props: Props) {
           <div className="col-12 col-lg-7 d-flex flex-column justify-content-center flex-reverse px-md-5 px-lg-3">
             <h1 className="fw-bold display-5 text-center text-lg-start px-md-5 px-lg-0">
               AI Music, Text to Speech,
-              <br />& Voice Transformation
+              <br />
+              and Voice to Voice
             </h1>
             <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
               Generate audio or videos of your favorite characters saying
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
index 586ee32438..90efaae98a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
@@ -190,10 +190,7 @@ function VcModelListPage(props: Props) {
             Get rewarded from our $15k prize pool for creating Voice to Voice
             models!
           </span>
-          <Link
-            to="/commissions"
-            className="fw-semibold ms-2 d-inline-flex align-items-center"
-          >
+          <Link to="/commissions" className="fw-semibold ms-2">
             See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
           </Link>
         </div>
@@ -382,7 +379,7 @@ function VcModelListPage(props: Props) {
                         icon={faBarsStaggered}
                         className="me-3"
                       />
-                      Session VTV Results
+                      Session V2V Results
                     </h4>
                     <div className="d-flex flex-column gap-3 session-tts-section">
                       <SessionVoiceConversionResultsList