From 14e266f7cbdb4bddfc4ee5274d27cf9642ea79bb Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 31 Dec 2023 12:51:24 +0700
Subject: [PATCH 1/3] update gaps for form fields, removed unnecessary divs

---
 .../components/common/TempInput/Input.scss    |  7 ++
 .../components/common/TempInput/TempInput.tsx |  3 +-
 .../components/common/TempSelect/Select.scss  |  7 ++
 .../common/TempSelect/TempSelect.tsx          |  3 +-
 .../common/TempTextArea/TempTextArea.tsx      |  5 +-
 .../common/TempTextArea/TextArea.scss         |  7 ++
 .../view/pages/upload/UploadSdWeightPage.tsx  | 76 +++++++++----------
 7 files changed, 62 insertions(+), 46 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/TempInput/Input.scss
 create mode 100644 packages/fakeyou.com/src/components/common/TempSelect/Select.scss
 create mode 100644 packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss

diff --git a/packages/fakeyou.com/src/components/common/TempInput/Input.scss b/packages/fakeyou.com/src/components/common/TempInput/Input.scss
new file mode 100644
index 0000000000..7dc777225f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TempInput/Input.scss
@@ -0,0 +1,7 @@
+input {
+  margin-bottom: 1rem !important;
+
+  :last-child {
+    margin-bottom: 0 !important;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
index bf743ce1fc..a349db41b4 100644
--- a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
+++ b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import "./Input.scss";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: IconDefinition;
@@ -23,7 +24,7 @@ export default function TempInput({
           {label}
         </label>
       )}
-      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+      <div className={`${icon ? "input-icon" : ""}`}>
         {icon && (
           <FontAwesomeIcon icon={icon} className="form-control-feedback" />
         )}
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/Select.scss b/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
new file mode 100644
index 0000000000..94f46b688f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
@@ -0,0 +1,7 @@
+.fy-select {
+  margin-bottom: 1rem !important;
+
+  :last-child {
+    margin-bottom: 0 !important;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
index 7ac093c8e8..fd7edb0f78 100644
--- a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
+++ b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import "../Select/Select.scss";
 import ReactSelect, { Props as ReactSelectProps } from "react-select";
+import "./Select.scss";
 
 export interface Option {
   value: string | number | boolean;
@@ -35,7 +36,7 @@ export default function Select({
     options.find((option: any) => option.value === value)?.label || "";
   const onChange = ({ value }: any) =>
     inChange({ target: { value, name, type: "select" } });
-  const className = `form-group${icon ? " input-icon" : ""}${
+  const className = `fy-select ${icon ? " input-icon" : ""}${
     small ? " select-small" : ""
   }`;
   const classNames = {
diff --git a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
index 9c86b75baf..0cdf919de2 100644
--- a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
+++ b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "./TextArea.scss";
 
 interface TextAreaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -20,9 +21,7 @@ export default function TempTextArea({
           {label}
         </label>
       )}
-      <div className="form-group">
-        <textarea className="form-control" {...rest} />
-      </div>
+      <textarea className="form-control" {...rest} />
     </>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss b/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss
new file mode 100644
index 0000000000..8789503d73
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss
@@ -0,0 +1,7 @@
+textarea {
+  margin-bottom: 1rem !important;
+
+  :last-child {
+    margin-bottom: 0 !important;
+  }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx
index e6b45ad400..11659f426a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/upload/UploadSdWeightPage.tsx
@@ -86,47 +86,41 @@ export default function UploadSdWeightPage({
                 <div className="col-12 col-lg-5">
                   <label className="sub-title required">Cover Image</label>
                 </div>
-                <div className="col-12 col-lg-7 d-flex flex-column gap-3 order-first order-lg-last">
-                  <div>
-                    <TempInput
-                      {...{
-                        label: "Title",
-                        name: "title",
-                        placeholder: "Title",
-                        required: true,
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <TempInput
-                      {...{
-                        label: "Download URL, eg. Google Drive link",
-                        name: "Url",
-                        placeholder: "Download URL",
-                        required: true,
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <TempSelect
-                      {...{
-                        icon: faEye,
-                        label: "Visibility",
-                        name: "visibility",
-                        options: visibilityOptions,
-                        placeholder: "Voice name",
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <TempTextArea
-                      {...{
-                        label: "Description",
-                        name: "descriptionMD",
-                        placeholder: "Description",
-                      }}
-                    />
-                  </div>
+                <div className="col-12 col-lg-7 order-first order-lg-last">
+                  <TempInput
+                    {...{
+                      label: "Title",
+                      name: "title",
+                      placeholder: "Title",
+                      required: true,
+                    }}
+                  />
+
+                  <TempInput
+                    {...{
+                      label: "Download URL, eg. Google Drive link",
+                      name: "Url",
+                      placeholder: "Download URL",
+                      required: true,
+                    }}
+                  />
+
+                  <TempSelect
+                    {...{
+                      icon: faEye,
+                      label: "Visibility",
+                      name: "visibility",
+                      options: visibilityOptions,
+                      placeholder: "Voice name",
+                    }}
+                  />
+                  <TempTextArea
+                    {...{
+                      label: "Description",
+                      name: "descriptionMD",
+                      placeholder: "Description",
+                    }}
+                  />
                 </div>
               </div>
             </SplitPanel.Body>

From 2b17b5d76f564c1e48110f0835f77292efc60605 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 31 Dec 2023 12:55:45 +0700
Subject: [PATCH 2/3] removed voice designer unnecessary field divs

---
 .../VoiceDesignerVoiceEditPage.tsx            |  64 ++++---
 .../components/steps/UploadSamples.tsx        | 156 +++++++++++-------
 .../components/steps/VoiceDetails.tsx         |  12 +-
 3 files changed, 130 insertions(+), 102 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
index dc78d59210..cf54a043be 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
@@ -67,43 +67,37 @@ function VoiceDesignerVoiceEditPage() {
       />
 
       <Panel>
-        <div className="d-flex flex-column gap-4 p-3 py-4 p-md-4">
-          <div>
-            <TempInput
-              {...{
-                label: "Title",
-                placeholder: "Voice name",
-                onChange: inputCtrl(titleSet),
-                value: title,
-              }}
-            />
-          </div>
+        <div className="p-3 py-4 p-md-4">
+          <TempInput
+            {...{
+              label: "Title",
+              placeholder: "Voice name",
+              onChange: inputCtrl(titleSet),
+              value: title,
+            }}
+          />
 
-          <div>
-            <TempSelect
-              {...{
-                icon: faLanguage,
-                label: "Language",
-                // placeholder: "Voice name",
-                onChange: inputCtrl(languageSet),
-                options: languages,
-                value: language,
-              }}
-            />
-          </div>
+          <TempSelect
+            {...{
+              icon: faLanguage,
+              label: "Language",
+              // placeholder: "Voice name",
+              onChange: inputCtrl(languageSet),
+              options: languages,
+              value: language,
+            }}
+          />
 
-          <div>
-            <TempSelect
-              {...{
-                icon: faEye,
-                label: "Visibility",
-                // placeholder: "Voice name",
-                onChange: inputCtrl(visibilitySet),
-                options: visibilityOptions,
-                value: visibility,
-              }}
-            />
-          </div>
+          <TempSelect
+            {...{
+              icon: faEye,
+              label: "Visibility",
+              // placeholder: "Voice name",
+              onChange: inputCtrl(visibilitySet),
+              options: visibilityOptions,
+              value: visibility,
+            }}
+          />
         </div>
         <hr className="mt-0 mb-4" />
         <div className="p-3 pb-4 px-lg-4 pt-0">
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index e3a345bd24..789e6040fc 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { AudioInput } from "components/common";
-import moment from 'moment';
+import moment from "moment";
 import ListItems from "../NewList";
 import { v4 as uuidv4 } from "uuid";
 import { ListSamplesForDataset } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset";
@@ -10,72 +10,94 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWaveform } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
-   audioProps: any,
-   datasetToken?: string,
-   deleting: any,
-   deletingSet: any,
-   inProgress: any,
-   inProgressSet: any
-   samples: any,
-   samplesSet: any
+  audioProps: any;
+  datasetToken?: string;
+  deleting: any;
+  deletingSet: any;
+  inProgress: any;
+  inProgressSet: any;
+  samples: any;
+  samplesSet: any;
 }
 
-function UploadSamples({ audioProps, datasetToken, deleting, deletingSet, inProgress, inProgressSet, samples, samplesSet }: Props) {
-  const [listFetched,listFetchedSet] = useState(false);
+function UploadSamples({
+  audioProps,
+  datasetToken,
+  deleting,
+  deletingSet,
+  inProgress,
+  inProgressSet,
+  samples,
+  samplesSet,
+}: Props) {
+  const [listFetched, listFetchedSet] = useState(false);
 
-  const SampleBadge = () => <FontAwesomeIcon icon={faWaveform} className="me-2 me-lg-3" />;
+  const SampleBadge = () => (
+    <FontAwesomeIcon icon={faWaveform} className="me-2 me-lg-3" />
+  );
 
-  const sampleClick =  () => ({ target }: { target: any }) => {
-      let sampleToken = samples[target.name.split(",")[0].split(":")[1]].sample_token;
-      deletingSet([ ...deleting, sampleToken ]); // add to deleting list
-      DeleteSample(sampleToken,{ as_mod: false, set_delete: true })
-      .then((res) => {
-        listFetchedSet(false);
-        deletingSet(deleting.filter((item: any) => item === sampleToken)); // remove from deleting list
-      });
-  };
+  const sampleClick =
+    () =>
+    ({ target }: { target: any }) => {
+      let sampleToken =
+        samples[target.name.split(",")[0].split(":")[1]].sample_token;
+      deletingSet([...deleting, sampleToken]); // add to deleting list
+      DeleteSample(sampleToken, { as_mod: false, set_delete: true }).then(
+        res => {
+          listFetchedSet(false);
+          deletingSet(deleting.filter((item: any) => item === sampleToken)); // remove from deleting list
+        }
+      );
+    };
 
-  const actionSamples = [ // these spread operators combine the inProgress and sample arrays
+  const actionSamples = [
+    // these spread operators combine the inProgress and sample arrays
     ...inProgress,
     ...samples.map((sample: any, i: number) => {
-        let date = new Date(sample.created_at);
-        return {
-          ...sample,
-          badge: SampleBadge,
-          buttons: [
-            {
-              label: "Delete",
-              small: true,
-              variant: "secondary",
-              onClick: sampleClick()
-            },
-          ],
-          name: `Sample from ${ date ? moment(date).format("MMMM Do YYYY, h:mm a") : "" }`,
-        };
-      })
+      let date = new Date(sample.created_at);
+      return {
+        ...sample,
+        badge: SampleBadge,
+        buttons: [
+          {
+            label: "Delete",
+            small: true,
+            variant: "secondary",
+            onClick: sampleClick(),
+          },
+        ],
+        name: `Sample from ${
+          date ? moment(date).format("MMMM Do YYYY, h:mm a") : ""
+        }`,
+      };
+    }),
   ];
 
   useEffect(() => {
     if (audioProps.file && datasetToken) {
       let uuid_idempotency_token = uuidv4();
       audioProps.clear();
-      inProgressSet([ // add sample to in progress list
+      inProgressSet([
+        // add sample to in progress list
         {
-        //  badge: Component // this can be a loading indicator
+          //  badge: Component // this can be a loading indicator
           name: "Uploading",
-          uuid_idempotency_token
+          uuid_idempotency_token,
         },
-        ...inProgress
+        ...inProgress,
       ]);
-      UploadSample("",{
+      UploadSample("", {
         dataset_token: datasetToken || "",
         file: audioProps.file,
         uuid_idempotency_token,
-      })
-      .then((res) => {
+      }).then(res => {
         if (res.success) {
-          inProgressSet(inProgress.filter((item: any) => // removes sample from in progress list
-            item.uuid_idempotency_token === uuid_idempotency_token)
+          inProgressSet(
+            inProgress.filter(
+              (
+                item: any // removes sample from in progress list
+              ) => item.uuid_idempotency_token === uuid_idempotency_token
+            )
           );
           listFetchedSet(false); // refetches sample list
         }
@@ -84,30 +106,40 @@ function UploadSamples({ audioProps, datasetToken, deleting, deletingSet, inProg
 
     if (datasetToken && !listFetched) {
       listFetchedSet(true);
-      ListSamplesForDataset(datasetToken,{})
-      .then((res) => {
+      ListSamplesForDataset(datasetToken, {}).then(res => {
         if (res.success && res.samples) {
           samplesSet(res.samples);
         }
       });
     }
+  }, [
+    audioProps,
+    datasetToken,
+    listFetched,
+    inProgress,
+    inProgressSet,
+    samplesSet,
+  ]);
 
-  },[audioProps, datasetToken, listFetched, inProgress, inProgressSet, samplesSet]);
-
-  return <div className="d-flex flex-column gap-4">
-    <label className="sub-title">Upload Audio</label>
-    <div className="d-flex flex-column gap-3 upload-component">
-      <AudioInput {...{ ...audioProps }}/>
-      { actionSamples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : 
-        <div className="panel panel-inner text-center p-5 rounded-5 h-100">
-          <div className="d-flex flex-column opacity-75 h-100 justify-content-center">
-            <FontAwesomeIcon icon={faWaveform} className="fs-3 mb-3" />
-            <h5>No voice samples yet</h5>
-            <p>Uploaded samples will appear here.</p>
+  return (
+    <div>
+      <label className="sub-title">Upload Audio</label>
+      <div className="d-flex flex-column gap-3 upload-component">
+        <AudioInput {...{ ...audioProps }} />
+        {actionSamples.length ? (
+          <ListItems {...{ data: actionSamples, isLoading: false }} />
+        ) : (
+          <div className="panel panel-inner text-center p-5 rounded-5 h-100">
+            <div className="d-flex flex-column opacity-75 h-100 justify-content-center">
+              <FontAwesomeIcon icon={faWaveform} className="fs-3 mb-3" />
+              <h5>No voice samples yet</h5>
+              <p>Uploaded samples will appear here.</p>
+            </div>
           </div>
-        </div> }
+        )}
+      </div>
     </div>
-  </div>;
+  );
 }
 
 export { UploadSamples };
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx
index 17a10faf3a..1848d35445 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx
@@ -24,11 +24,13 @@ function VoiceDetails({ datasetInputs }: { datasetInputs: any }) {
   const classNames = SearchFieldClass;
 
   return (
-    <div className="d-flex flex-column gap-4">
-      { datasetInputs.map(({ type = "", options = [], ...props }, key: number) => {
-        if (type === "text") return <Input {...{ ...props, key }} />;
-        else return <Select {...{ ...props, classNames, key, options } }/>;
-      }) }
+    <div>
+      {datasetInputs.map(
+        ({ type = "", options = [], ...props }, key: number) => {
+          if (type === "text") return <Input {...{ ...props, key }} />;
+          else return <Select {...{ ...props, classNames, key, options }} />;
+        }
+      )}
     </div>
   );
 }

From 244e0c29e22d224f4d71d44bdbbb253512be2014 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 31 Dec 2023 13:30:14 +0700
Subject: [PATCH 3/3] field inputs gap fix

---
 .../src/components/common/TempInput/Input.scss     | 14 ++++++++++----
 .../src/components/common/TempInput/TempInput.tsx  |  2 +-
 .../src/components/common/TempSelect/Select.scss   |  8 ++++++--
 .../common/TempTextArea/TempTextArea.tsx           |  2 +-
 .../components/common/TempTextArea/TextArea.scss   | 14 ++++++++++----
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/TempInput/Input.scss b/packages/fakeyou.com/src/components/common/TempInput/Input.scss
index 7dc777225f..ab021632e2 100644
--- a/packages/fakeyou.com/src/components/common/TempInput/Input.scss
+++ b/packages/fakeyou.com/src/components/common/TempInput/Input.scss
@@ -1,7 +1,13 @@
-input {
-  margin-bottom: 1rem !important;
+.fy-input {
+  input {
+    margin-bottom: 1rem;
 
-  :last-child {
-    margin-bottom: 0 !important;
+    :only-child {
+      margin-bottom: 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
index a349db41b4..3623bf8766 100644
--- a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
+++ b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx
@@ -24,7 +24,7 @@ export default function TempInput({
           {label}
         </label>
       )}
-      <div className={`${icon ? "input-icon" : ""}`}>
+      <div className={`fy-input ${icon ? "input-icon" : ""}`}>
         {icon && (
           <FontAwesomeIcon icon={icon} className="form-control-feedback" />
         )}
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/Select.scss b/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
index 94f46b688f..1f694a2eb5 100644
--- a/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
+++ b/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
@@ -1,7 +1,11 @@
 .fy-select {
-  margin-bottom: 1rem !important;
+  margin-bottom: 1rem;
+
+  :only-child {
+    margin-bottom: 0;
+  }
 
   :last-child {
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 }
diff --git a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
index 0cdf919de2..139590124a 100644
--- a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
+++ b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
@@ -21,7 +21,7 @@ export default function TempTextArea({
           {label}
         </label>
       )}
-      <textarea className="form-control" {...rest} />
+      <textarea className="fy-textarea form-control" {...rest} />
     </>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss b/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss
index 8789503d73..f835796ece 100644
--- a/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss
+++ b/packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss
@@ -1,7 +1,13 @@
-textarea {
-  margin-bottom: 1rem !important;
+.fy-textarea {
+  &:textarea {
+    margin-bottom: 1rem;
 
-  :last-child {
-    margin-bottom: 0 !important;
+    :only-child {
+      margin-bottom: 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
   }
 }