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 (
{
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.
-
{
@@ -126,7 +121,7 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
-