Merge pull request #279 from storytold/bflat-fy-alert-component

alert banner component

packages/fakeyou.com/src/components/common/Alert/Alert.scss

@@ -0,0 +1,23 @@
+.alert {
+  border-radius: 0.5rem !important;
+  font-weight: 400;
+  font-size: 14px;
+  margin-bottom: 1rem !important;
+  padding: 0.75rem 0.75rem !important;
+
+  &.alert-dismissible {
+    padding-right: 2rem !important;
+  }
+
+  .btn-close {
+    padding: 1rem 1rem !important;
+    transition: 0.2s;
+    font-size: 11px;
+  }
+}
+
+.alert-new {
+  background-color: #fff3d0;
+  color: #833c00;
+  border-color: #833c00;
+}

packages/fakeyou.com/src/components/common/Alert/Alert.tsx

@@ -0,0 +1,89 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import "./Alert.scss";
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import { Link } from "react-router-dom";
+
+interface AlertProps {
+  id: string;
+  message: string;
+  alertVariant?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "danger"
+    | "warning"
+    | "info"
+    | "light"
+    | "dark"
+    | "new";
+  duration?: number;
+  icon?: IconProp;
+  link?: string;
+  linkText?: string;
+}
+
+function Alert({
+  id,
+  message,
+  alertVariant,
+  duration,
+  icon,
+  linkText,
+  link,
+}: AlertProps) {
+  const [show, setShow] = useState<boolean>(() => {
+    const closedAt = localStorage.getItem(`alertClosedAt_${id}`);
+    const currentTime = Date.now();
+    const hideDurationPassed =
+      !closedAt || currentTime - parseInt(closedAt) >= duration! * 1000; // Using ! after duration since it can be undefined, but defaultProps will handle it
+
+    if (hideDurationPassed) {
+      localStorage.removeItem(`alertClosedAt_${id}`);
+    }
+
+    return hideDurationPassed;
+  });
+
+  const handleClose = () => {
+    setShow(false);
+    localStorage.setItem(`alertClosedAt_${id}`, Date.now().toString());
+  };
+
+  return (
+    <>
+      {show && (
+        <div
+          className={`alert alert-${alertVariant} alert-dismissible fade show`}
+          role="alert"
+        >
+          {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
+          <span className="fw-medium">{message}</span>{" "}
+          {link && linkText && (
+            <Link to={link} className="fw-semibold">
+              <div className="d-inline-flex align-items-center">
+                {linkText}
+                <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
+              </div>
+            </Link>
+          )}
+          <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            onClick={handleClose}
+          ></button>
+        </div>
+      )}
+    </>
+  );
+}
+
+Alert.defaultProps = {
+  alertVariant: "primary",
+  duration: 259200, // default to 3 days in seconds
+};
+
+export default Alert;

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

@@ -404,26 +404,6 @@ styles with important tags:
     }
   }
 
-  .alert {
-    border-radius: 0.5rem;
-    font-weight: 400;
-    font-size: 12px;
-    margin-bottom: 1rem;
-    padding: 0.75rem 1rem;
-
-    a {
-      color: darken($primary, 3%);
-
-      &:hover {
-        opacity: 0.85;
-      }
-    }
-
-    &.alert-dismissible {
-      padding-right: 2.75rem;
-    }
-  }
-
   .input-icon {
     display: flex;
     align-items: center;
@@ -719,10 +699,6 @@ styles with important tags:
     }
   }
 
-  .btn-close {
-    transition: 0.2s;
-  }
-
   .session-tts-section {
     height: 100%;
     overflow-x: hidden;
@@ -1322,10 +1298,6 @@ styles with important tags:
     font-size: 14px;
   }
 
-  .alert-info {
-    font-size: 14px;
-  }
-
   .range-slider-value {
     text-align: center;
     max-width: 50px;
@@ -1465,10 +1437,6 @@ textarea {
       font-size: 18px;
     }
 
-    .alert {
-      font-size: 13px;
-    }
-
     .session-tts-section {
       height: 450px;
     }
@@ -1499,10 +1467,6 @@ textarea {
       padding-top: 7rem;
       padding-bottom: 7rem;
     }
-
-    .alert-info {
-      font-size: 16px;
-    }
   }
 }
 

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -13,6 +13,7 @@ import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { WebUrl } from "../../../../common/WebUrl";
 import { faFileArrowUp, faSparkles } from "@fortawesome/pro-solid-svg-icons";
 import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
+import Alert from "components/common/Alert/Alert";
 // import {
 //   faFileArrowUp,
 //   faMicrophone,
@@ -147,17 +148,15 @@ function LandingPage(props: Props) {
   return (
     <div>
       <div className="container pb-5 pb-lg-0 pt-lg-4 px-md-5 px-lg-5 px-xl-3">
-        {/* Community Commissions Alert */}
-        {/* <div className="alert alert-info">
-          <FontAwesomeIcon icon={faMoneyBill} className="me-2" />
-          <span className="fw-medium">
-            Get rewarded from our $15k prize pool for creating Voice to Voice
-            models!
-          </span>
-          <Link to="/commissions" className="fw-semibold ms-2">
-            See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
-          </Link>
-        </div> */}
+        {/* Face Animation Alert Banner */}
+        <Alert
+          id="face-animation-alert"
+          icon={faSparkles}
+          message="Have you tried our new Face Animator? Turn photos of faces into animated lip-synced videos with just a picture and some audio!"
+          alertVariant="primary"
+          link="/face-animation"
+          linkText="Try it now"
+        />
 
         <div className="row flex-md-row-reverse">
           <div className="col-12 col-lg-5 p-md-0 d-flex justify-content-center">
@@ -334,7 +333,9 @@ function LandingPage(props: Props) {
             >
               <div className="d-flex px-4 pt-4 align-items-center w-100">
                 <div className="flex-grow-1">
-                  <h3 className="fw-bold text-white mb-1">{t("productVideoTitle")}</h3>
+                  <h3 className="fw-bold text-white mb-1">
+                    {t("productVideoTitle")}
+                  </h3>
                   <h6 className="fw-normal opacity-75 text-white mb-0">
                     {t("productVideoText")}
                   </h6>