style selection number selected

src/website/packages/fakeyou.com/src/components/common/Modal/Modal.tsx

@@ -27,6 +27,7 @@ interface ModalProps {
   position?: "center" | "top";
   mobileFullscreen?: boolean;
   footerContent?: React.ReactNode;
+  titleAfter?: React.ReactNode;
 }
 
 export interface ModalUtilities {
@@ -70,6 +71,7 @@ const Modal: React.FC<ModalProps> = ({
   position = "center",
   mobileFullscreen = false,
   footerContent,
+  titleAfter,
 }) => {
   const fadeIn = useSpring({
     opacity: show ? 1 : 0,
@@ -135,7 +137,10 @@ const Modal: React.FC<ModalProps> = ({
                 <header className="modal-header">
                   <h4 className="modal-title fw-bold">
                     {icon && <FontAwesomeIcon icon={icon} className="me-3" />}
-                    {title || ""}
+                    <div className="d-flex gap-2">
+                      {title || ""}
+                      {titleAfter && titleAfter}
+                    </div>
                   </h4>
                   <button
                     type="button"

src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx

@@ -272,6 +272,11 @@ export default function StyleVideo() {
               large={true}
               content={StyleSelectionList}
               title="Select Style(s)"
+              titleAfter={
+                <div className="opacity-75">
+                  — ({selectedStyleValues.length}/3)
+                </div>
+              }
               subtitle="You may choose up to three styles to generate multiple videos at once."
               contentProps={{
                 styleOptions: STYLE_OPTIONS,