From b5c9575cba7a8ef11c612a1ae40483c484749ef6 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 26 Jul 2022 13:05:53 +0100
Subject: [PATCH] update

---
 .../Profile_TtsInferenceResultListFc.tsx      |  4 +--
 .../profile_view/Profile_TtsModelListFc.tsx   | 26 ++++++++++++-------
 .../Profile_W2lInferenceResultListFc.tsx      |  4 +--
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
index de75bff14d..32ecb49b47 100644
--- a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
+++ b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
@@ -195,14 +195,14 @@ function ProfileTtsInferenceResultsListFc(props: Props) {
 
       <div className="justify-content-center d-flex gap-3">
         <button
-          className="btn btn-secondary"
+          className="btn btn-secondary w-100"
           onClick={() => getPage(previousCursor, true)}
           disabled={prevDisabled}
         >
           <FontAwesomeIcon icon={faArrowLeft} className="me-2" /> Get newer
         </button>
         <button
-          className="btn btn-secondary"
+          className="btn btn-secondary w-100"
           onClick={() => getPage(nextCursor, false)}
           disabled={nextDisabled}
         >
diff --git a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx
index b6c29a1a0d..0a053b7b7a 100644
--- a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx
+++ b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx
@@ -3,7 +3,13 @@ import { ApiConfig } from "@storyteller/components";
 import { Link } from "react-router-dom";
 import { formatDistance } from "date-fns";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { distance, duration } from "../../../../data/animation";
+
+const Fade = require("react-reveal/Fade");
 
 const PER_PAGE = 10;
 
@@ -107,27 +113,27 @@ function ProfileTtsModelListFc(props: Props) {
             </th>
           </tr>
         </thead>
-        <tbody>{rows}</tbody>
+        <Fade cascade bottom duration="200" distance="10px">
+          <tbody>{rows}</tbody>
+        </Fade>
       </table>
-      <div className="d-flex flex-column flex-md-row w-100 gap-3 mt-3">
+      <div className="d-flex w-100 gap-3 mt-4">
         <button
-          className="btn btn-primary w-100"
+          className="btn btn-secondary w-100"
           disabled={isLastButtonDisabled}
           onClick={() => previousPage()}
         >
           <FontAwesomeIcon icon={faChevronLeft} className="me-2" />
-          {" "}
-          Last Page
+          <span>Last Page</span>
         </button>
 
         <button
-          className="btn btn-primary w-100"
+          className="btn btn-secondary w-100"
           disabled={isNextButtonDisabled}
           onClick={() => nextPage()}
         >
-          Next Page
-          {" "}
-          <FontAwesomeIcon icon={faChevronRight} className="me-2" />
+          <span>Next Page</span>
+          <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
         </button>
       </div>
     </div>
diff --git a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
index ed02451a87..28c15ce2f9 100644
--- a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
+++ b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
@@ -199,14 +199,14 @@ function ProfileW2lInferenceResultsListFc(props: Props) {
 
       <div className="justify-content-center d-flex gap-3">
         <button
-          className="btn btn-secondary"
+          className="btn btn-secondary w-100"
           onClick={() => getPage(previousCursor, true)}
           disabled={prevDisabled}
         >
           <FontAwesomeIcon icon={faArrowLeft} className="me-2" /> Get newer
         </button>
         <button
-          className="btn btn-secondary"
+          className="btn btn-secondary w-100"
           onClick={() => getPage(nextCursor, false)}
           disabled={nextDisabled}
         >