From fd20050f862ec23c1d2f0aab7bb7f12dc73434c7 Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Wed, 27 Sep 2023 20:29:10 -0700
Subject: [PATCH] fixed delte button on image input, added icon

---
 .../common/FileDetails/FileDetails.tsx        |  2 +-
 .../common/ImageInput/ImageInput.tsx          |  3 ++-
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 19 -------------------
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx b/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx
index 0c4250af52..e809eaad34 100644
--- a/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx
+++ b/packages/fakeyou.com/src/components/common/FileDetails/FileDetails.tsx
@@ -19,7 +19,7 @@ export default function FileDetails({ clear = () => {}, file, hideClearDetails,
       : null;
 
   return <div {...{ className: "fy-uploader-layout upload-details" }}>
-    <Icon {...{ className: "fy-uploader-layout-icon", icon }}/>
+    { icon && <Icon {...{ className: "fy-uploader-layout-icon", icon }}/> }
     <div>
       <div {...{ className: "filename" }}>
         { file.name.slice(0, file.name.lastIndexOf(".")) }
diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.tsx b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.tsx
index 883fd0a67e..162ef96370 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.tsx
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { a, useSpring } from '@react-spring/web';
 import { FileDetails, FileWrapper, FileLabel } from "components/common";
+import { faImagePortrait } from "@fortawesome/pro-solid-svg-icons";
 import "./ImageInput.scss";
 
 const fileTypes = ["JPG", "GIF", "PNG"];
@@ -34,7 +35,7 @@ export default function ImageInput({ blob = "", clear = n, file, hideActions, hi
     <div {...{ className: "fy-image-uploader" }}>
       { file ? <>
         <a.img {...{ alt: "file preview", className: "file-preview", onLoad, src: blob, style }} />
-        <FileDetails {...{ file, hideClearDetails }}/>
+        <FileDetails {...{ clear, file, hideClearDetails, icon: faImagePortrait }}/>
       </> : <>
         <svg {...{ className: "image-placeholder", height: 400, viewBox: "0 0 300 300", width: 400 }}>
           <path d="m152.42 226c41.8 0 69.49-43.57 73.21-90.87 3.78-47.97-26.06-87.13-75.69-87.13-49.64 0-79.28 39.15-75.69 87.13 3.72 49.79 36.37 90.87 78.17 90.87zm-29.19-50.93c1.62-1.51 4.15-1.42 5.65.2 4.1 4.41 15.31 6.97 21.88 6.97s17.77-2.56 21.88-6.97c1.5-1.62 4.04-1.71 5.65-.2 1.62 1.5 1.92 3.95.2 5.65-6.31 6.27-18.31 9.52-27.74 9.52s-22.16-3.54-27.74-9.52c-1.49-1.61-1.4-4.14.22-5.65zm115.25 112.93h-176.62c-37.67 0-38.24-17.41-27.56-26.36 21.49-18.01 57.18-23.64 114.81-23.64 60.01 0 96.24 4.84 117.41 24.06 10.09 9.16 7.67 25.94-28.04 25.94z"/>
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index 0bd90106bd..542eaea13e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -53,25 +53,6 @@ interface EditorProps {
 
 const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
 
-// const InputPage = ({ audioProps, imageProps, toggle, style, t }: LipSyncProps )  => {
-
-//   return <animated.div {...{ className: "lipsync-editor", style }}>
-//   <div {...{ className: "grid-heading" }}>
-//     <h5>{ t("headings.image") }</h5>
-//   </div>
-//   <div {...{ className: "grid-heading" }}>
-//     <h5>{ t("headings.audio") }</h5>
-//   </div>
-//   <div {...{ className: "grid-square lipsync-audio col-lg-6" }}>
-//     <ImageInput {...{ ...imageProps, onRest: () => toggle.image(imageProps.file ? true : false) }}/>
-//   </div>
-//   <div {...{ className: "grid-square col-lg-6" }}>
-//     <AudioInput {...{ ...audioProps, onRest: (p:any,c:any,item:any,l:any) => {
-//       toggle.audio(!!audioProps.file);
-//     }, hideActions: true } }/>
-//   </div>
-// </animated.div>};
-
 const InputPage = ({
   audioProps,
   imageProps,