From 2cc8ee8177dcbb9682e5b81b5a746104a6c6f808 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Jul 2024 15:52:53 -0700
Subject: [PATCH] various design adjustments on AI Face Mirror

---
 .../components/common/Checkbox/Checkbox.scss  | 14 ++++
 .../components/common/Checkbox/Checkbox.tsx   |  8 ++-
 .../entities/EntityInput/EntityInput.tsx      |  1 +
 .../pages/ai_face_mirror/AIFaceMirror.scss    | 47 ++++++++++++-
 .../pages/ai_face_mirror/AIFaceMirror.tsx     | 67 ++++++++++---------
 5 files changed, 102 insertions(+), 35 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
index 39b426b633..3e8ca33dd1 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
@@ -55,3 +55,17 @@
   stroke: white;
   transition: 0.2s;
 }
+
+.fy-checkbox-disabled {
+  opacity: 0.25;
+  cursor: default;
+  label {
+    cursor: default;
+  }
+
+  &:hover {
+    .fy-checkbox {
+      background-color: $secondary;
+    }
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
index 65ab69e22f..93a87cc20c 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -7,6 +7,7 @@ import "./Checkbox.scss";
 interface Props {
   checked?: boolean;
   className?: string;
+  disabled?: boolean;
   label?: string;
   name?: string;
   onChange?: any;
@@ -16,13 +17,16 @@ interface Props {
 export default function Checkbox({
   checked,
   className = "",
+  disabled,
   label = "",
   name = "",
   onChange,
   variant = "secondary",
 }: Props) {
   const onClick = ({ target }: any) =>
-    onChange({ target: { checked: !checked, name, type: "checkbox" } });
+    !disabled
+      ? onChange({ target: { checked: !checked, name, type: "checkbox" } })
+      : {};
   const id = "checkbox-" + useId();
   return (
     <div
@@ -30,7 +34,7 @@ export default function Checkbox({
         ...makeClass(
           `fy-checkbox-frame fy-checkbox-${variant}-${
             checked ? "checked" : "unchecked"
-          }`,
+          } ${disabled ? "fy-checkbox-disabled" : ""}`,
           className
         ),
       }}
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
index 4e49094cb9..4acef55c1c 100644
--- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
@@ -165,6 +165,7 @@ export default function EntityInput({
   const clear = () => {
     mediaSet(undefined);
     mediaTokenSet("");
+    onChange({ target: { name, value: "" } });
   };
 
   const selectToken = (token: string) => {
diff --git a/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss b/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss
index f822db6193..2f7b944099 100644
--- a/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss
@@ -1,15 +1,21 @@
 @import "scss/colours.scss";
+
+@import "scss/_breakpoint.scss";
+@import "scss/breakpoints.scss";
+
 .fy-ai-face-mirror-panel {
-	overflow: hidden;
+	// overflow: hidden;
 }
 
 .fy-ai-face-mirror-header {
 	display: flex;
 	justify-content: center;
+	overflow: hidden;
 	position: relative;
 	height: 250px;
 	margin-bottom: 1rem;
 	background: #f8f4f3;
+	border-radius: 0.5rem 0.5rem 0 0;
 
 	video {
 		margin: auto;
@@ -56,20 +62,57 @@
 	width: 100%;
 	gap: 1rem;
 	grid-template-columns: auto auto;
-	margin-bottom: 1rem;
+	// margin-bottom: 1rem;
 	height: fit-content;
 	padding: 1rem;
 
 	.fy-ai-face-mirror-column {
 		// width: 33%;
 		display: inline-block;
+
+		.fy-entity-input {
+			width: 100%;
+		}
+	}
+
+	@include breakpoint($under992) {
+		display: block;
+
+		.fy-ai-face-mirror-column {
+			width: 100%;
+		}
 	}
 }
 
 .fy-ai-face-mirror-secondary-inputs {
+	display: flex;
+	// align-items: center;
+	// justify-content: space-between;
 	padding: 0 1rem 1rem;
 
+	legend {
+		color: #b6b6bb;
+		font-size: 0.75rem;
+	}
+
 	.fy-premium-lock {
 		height: 150px;
 	}
+
+	.input-block:nth-child(2) {
+		margin-left: 1rem;
+		margin-right: auto;
+	}
+
+	button {
+		margin: auto 0 0;
+		width: 25%;
+	}
+
+	.fy-ai-face-mirror-premium-label {
+		margin-bottom: 0.5rem;
+		a {
+			margin-left: 0.25em;
+		}
+	}
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx b/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx
index 41b5b46cbb..c2dbde57e7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx
@@ -22,7 +22,7 @@ import {
   useInferenceJobs,
   // useSession
 } from "hooks";
-import PremiumLock from "components/PremiumLock";
+import { Link } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
 import "./AIFaceMirror.scss";
 
@@ -45,7 +45,9 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
     { label: "Public", value: "public" },
   ];
 
-  const hasTokens = sourceMediaToken && faceDriverToken;
+  const hasTokens = !!sourceMediaToken && !!faceDriverToken;
+
+  const hasPremium = sessionSubscriptionsWrapper.hasPaidFeatures();
 
   const enqueueClick = () => {
     if (hasTokens) {
@@ -84,13 +86,6 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
                 portrait image or video.
               </p>
             </div>
-            <Button
-              {...{
-                disabled: !hasTokens,
-                label: hasTokens ? "Create" : "Choose media to begin",
-                onClick: enqueueClick,
-              }}
-            />
           </div>
         </header>
         <div
@@ -107,7 +102,7 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
             <EntityInput
               {...{
                 accept: ["video", "image"],
-                aspectRatio: "landscape",
+                // aspectRatio: "landscape",
                 name: "mediaToken",
                 value: sourceMediaToken,
                 onChange: ({ target }: { target: any }) => {
@@ -126,7 +121,7 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
             <EntityInput
               {...{
                 accept: ["video"],
-                aspectRatio: "landscape",
+                // aspectRatio: "landscape",
                 // debug: "AFM driver input",
                 name: "faceDriverToken",
                 value: faceDriverToken,
@@ -143,33 +138,43 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
             className: "fy-ai-face-mirror-secondary-inputs",
           }}
         >
-          <Select
-            {...{
-              label: "visibility",
-              onChange: ({ target }: any) => {
-                visibilitySet(target.value);
-              },
-              options: visibilityOptions,
-              value: visibility,
-            }}
-          />
-          <PremiumLock
-            {...{
-              requiredPlan: "any",
-              sessionSubscriptionsWrapper,
-              large: true,
-              showCtaButton: true,
-            }}
-          >
+          <fieldset {...{ className: "input-block" }}>
+            <Select
+              {...{
+                label: "Visibility",
+                onChange: ({ target }: any) => {
+                  visibilitySet(target.value);
+                },
+                options: visibilityOptions,
+                value: visibility,
+              }}
+            />
+          </fieldset>
+          <fieldset {...{ className: "input-block" }}>
+            <div {...{ className: "fy-ai-face-mirror-premium-label" }}>
+              Watermark
+              {!hasPremium ? (
+                <Link {...{ to: "pricing" }}>subscribe to remove</Link>
+              ) : null}
+            </div>
+
             <Checkbox
               {...{
-                label: "Remove watermark",
+                disabled: !hasPremium,
+                label: "Remove",
                 onChange: ({ target }: any) => {
                   removeWatermarkSet(target.value);
                 },
               }}
             />
-          </PremiumLock>
+          </fieldset>
+          <Button
+            {...{
+              disabled: !hasTokens,
+              label: "Create",
+              onClick: enqueueClick,
+            }}
+          />
         </div>
       </Panel>
     </Container>