update gaps for form fields, removed unnecessary divs

packages/fakeyou.com/src/components/common/TempInput/Input.scss

@@ -0,0 +1,7 @@
+input {
+  margin-bottom: 1rem !important;
+
+  :last-child {
+    margin-bottom: 0 !important;
+  }
+}

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" />
         )}

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;
+  }
+}

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 = {

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} />
     </>
   );
 }

packages/fakeyou.com/src/components/common/TempTextArea/TextArea.scss

@@ -0,0 +1,7 @@
+textarea {
+  margin-bottom: 1rem !important;
+
+  :last-child {
+    margin-bottom: 0 !important;
+  }
+}

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>