firehose and pricing page animations

packages/fakeyou/src/data/animation.ts

@@ -3,3 +3,8 @@ export const distance = "30px";
 export const delay = "100";
 export const delay2 = "200";
 export const duration = "400";
+
+//pricing page
+export const pricing1 = "0";
+export const pricing2 = "100";
+export const pricing3 = "200";

packages/fakeyou/src/v2/view/firehose/FirehoseEventListFc.tsx

@@ -6,7 +6,17 @@ import { Link } from "react-router-dom";
 import { distance, duration, delay } from "../../../data/animation";
 import { USE_REFRESH } from "../../../Refresh";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlay, faFlagCheckered } from "@fortawesome/free-solid-svg-icons";
+import {
+  faPlay,
+  faFlagCheckered,
+  faAward,
+  faPenToSquare,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  faTwitter,
+  faDiscord,
+  faTwitch,
+} from "@fortawesome/free-brands-svg-icons";
 
 const Fade = require("react-reveal/Fade");
 
@@ -107,6 +117,7 @@ function FirehoseEventListFc(props: Props) {
       case "user_sign_up":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faPenToSquare} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -117,6 +128,7 @@ function FirehoseEventListFc(props: Props) {
       case "user_badge_granted":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faAward} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -127,6 +139,7 @@ function FirehoseEventListFc(props: Props) {
       case "tts_model_upload_started":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faPlay} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -137,6 +150,7 @@ function FirehoseEventListFc(props: Props) {
       case "tts_model_upload_completed":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faFlagCheckered} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -169,6 +183,7 @@ function FirehoseEventListFc(props: Props) {
       case "w2l_template_upload_started":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faPlay} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -179,6 +194,7 @@ function FirehoseEventListFc(props: Props) {
       case "w2l_template_upload_completed":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faFlagCheckered} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -189,6 +205,7 @@ function FirehoseEventListFc(props: Props) {
       case "w2l_inference_started":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faPlay} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -199,6 +216,7 @@ function FirehoseEventListFc(props: Props) {
       case "w2l_inference_completed":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faFlagCheckered} className="me-3" />
             {gravatar}
             &nbsp;
             {userLink}
@@ -209,6 +227,7 @@ function FirehoseEventListFc(props: Props) {
       case "twitter_mention":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faTwitter} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -219,6 +238,7 @@ function FirehoseEventListFc(props: Props) {
       case "twitter_retweet":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faTwitter} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -229,6 +249,7 @@ function FirehoseEventListFc(props: Props) {
       case "discord_join":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faDiscord} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -239,6 +260,7 @@ function FirehoseEventListFc(props: Props) {
       case "discord_message":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faDiscord} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -249,6 +271,7 @@ function FirehoseEventListFc(props: Props) {
       case "twitch_subscribe":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faTwitch} />
             {gravatar}
             &nbsp;
             {userLink}
@@ -259,6 +282,7 @@ function FirehoseEventListFc(props: Props) {
       case "twitch_follow":
         inner = (
           <span>
+            <FontAwesomeIcon icon={faTwitch} />
             {gravatar}
             &nbsp;
             {userLink}

packages/fakeyou/src/v2/view/pricing/Pricing.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
 import {
-  faMoneyBillWave,
   faCheckCircle as TRUE,
   faTimesCircle as FALSE,
   faCheck,
@@ -12,7 +11,14 @@ import {
   FAKEYOU_PRICES as FYP,
   STORYTELLER_PRICES as STP,
 } from "@storyteller/fakeyou/src/data/PriceTiers";
-import { distance, delay, delay2, duration } from "../../../data/animation";
+import {
+  distance,
+  pricing1,
+  pricing2,
+  pricing3,
+  delay2,
+  duration,
+} from "../../../data/animation";
 const Fade = require("react-reveal/Fade");
 
 interface Props {
@@ -70,14 +76,13 @@ function PricingPage(props: Props) {
 
       <div className="container mt-3">
         <div className="row gy-4">
-          <Fade
-            bottom
-            cascade
-            duration={duration}
-            distance={distance}
-            delay={delay2}
-          >
-            <div className="col-12 col-lg-4">
+          <div className="col-12 col-lg-4">
+            <Fade
+              bottom
+              duration={duration}
+              distance={distance}
+              delay={pricing1}
+            >
               <div className="rounded panel p-4 h-100">
                 <h2 className="text-center my-2 fw-bold">Free</h2>
                 <p className="mb-4 text-center">Great for hobbyists</p>
@@ -99,8 +104,15 @@ function PricingPage(props: Props) {
                   </li>
                 </ul>
               </div>
-            </div>
-            <div className="col-12 col-lg-4">
+            </Fade>
+          </div>
+          <div className="col-12 col-lg-4">
+            <Fade
+              bottom
+              duration={duration}
+              distance={distance}
+              delay={pricing2}
+            >
               <div className="rounded panel p-4 panel-border h-100">
                 <h2 className="text-center my-2 fw-bold">Basic</h2>
                 <p className="mb-4 text-center">Great for hobbyists</p>
@@ -126,8 +138,15 @@ function PricingPage(props: Props) {
                   </li>
                 </ul>
               </div>
-            </div>
-            <div className="col-12 col-lg-4">
+            </Fade>
+          </div>
+          <div className="col-12 col-lg-4">
+            <Fade
+              bottom
+              duration={duration}
+              distance={distance}
+              delay={pricing3}
+            >
               <div className="rounded panel p-4 h-100">
                 <h2 className="text-center my-2 fw-bold">Pro</h2>
                 <p className="mb-4 text-center">Great for hobbyists</p>
@@ -161,8 +180,8 @@ function PricingPage(props: Props) {
                   </li>
                 </ul>
               </div>
-            </div>
-          </Fade>
+            </Fade>
+          </div>
         </div>
       </div>