inputs update

packages/fakeyou.com/src/components/common/Button/Button.scss

@@ -0,0 +1,76 @@
+@import "scss/colours.scss";
+
+.button {
+  border-radius: 0.5rem;
+  outline: none;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 10px 20px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button-primary,
+.button-primary:focus,
+.button-primary:active {
+  background-color: $primary;
+  border: 2.5px solid;
+  border-color: $primary;
+  transition: 0.2s;
+  color: $white;
+}
+.button-primary:hover {
+  background-color: lighten($primary, 5%);
+  border-color: lighten($primary, 5%);
+  color: $white;
+}
+
+.button-secondary,
+.button-secondary:focus,
+.button-secondary:active {
+  background-color: $secondary;
+  color: $white;
+  border: 2.5px solid;
+  border-color: $secondary;
+  transition: 0.2s;
+}
+
+.button-secondary:hover {
+  background-color: lighten($secondary, 5%);
+  color: $white;
+  border: 2.5px solid;
+  border-color: lighten($secondary, 5%);
+}
+
+.button-destructive,
+.button-destructive:focus,
+.button-destructive:active {
+  background-color: $danger;
+  color: $white;
+  border: 2.5px solid;
+  border-color: $danger;
+  transition: 0.2s;
+}
+
+.button-destructive:hover {
+  background-color: lighten($danger, 5%);
+  color: $white;
+  border: 2.5px solid;
+  border-color: lighten($danger, 5%);
+}
+
+.button-small,
+.button-small:focus,
+.button-small:active {
+  font-weight: 500;
+  font-size: 14px;
+  padding: 8.25px 16px;
+  transition: 0.2s;
+  border: none;
+}
+
+.button-small:hover {
+  border: none;
+}

packages/fakeyou.com/src/components/common/Button/Button.tsx

@@ -0,0 +1,37 @@
+import React, { ButtonHTMLAttributes } from "react";
+import "./Button.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string;
+  icon?: IconDefinition;
+  small?: boolean;
+  secondary?: boolean;
+  danger?: boolean;
+}
+
+export default function Button({
+  label,
+  icon,
+  small,
+  secondary,
+  danger,
+  ...rest
+}: ButtonProps) {
+  const buttonClasses = `button ${small ? "button-small" : ""}
+  ${
+    secondary
+      ? "button-secondary"
+      : danger
+      ? "button-destructive"
+      : "button-primary"
+  } `;
+
+  return (
+    <button className={buttonClasses} type="button" {...rest}>
+      {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
+      {label}
+    </button>
+  );
+}

packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Tippy from "@tippyjs/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink } from "@fortawesome/pro-solid-svg-icons";
+import Button from "../Button/Button";
 
 interface ShareButtonProps {
   url: string;
@@ -31,12 +32,15 @@ export default function ShareButton(props: ShareButtonProps) {
         theme="fakeyou"
         arrow={false}
       >
-        <button className="btn-action" onClick={copyToClipboard} type="button">
-          <span>
-            <FontAwesomeIcon icon={faLink} className="me-2" />
-          </span>
-          Share Link
-        </button>
+        <div>
+          <Button
+            label="Share Link"
+            icon={faLink}
+            secondary
+            small
+            onClick={copyToClipboard}
+          />
+        </div>
       </Tippy>
     </div>
   );

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { useParams } from "react-router-dom";
-import { Input, TextArea, Select } from "components/common/Input/Input";
+import { Input, TextArea, Select } from "components/common/Inputs/Inputs";
 import Panel from "components/common/Panel/Panel";
-import { faEye, faFilePen } from "@fortawesome/pro-solid-svg-icons";
+import { faEye, faFilePen, faSave } from "@fortawesome/pro-solid-svg-icons";
 import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
+import Button from "components/common/Button/Button";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
@@ -14,6 +15,10 @@ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   console.log(event.target.value);
 };
 
+const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {
+  console.log("save");
+};
+
 const savebtn = <button className="btn btn-primary">Save Changes</button>;
 
 const visibility = [
@@ -51,11 +56,14 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
           />
 
           <Select
+            isSearchable={false}
             icon={faEye}
             defaultValue={visibility[0]}
             options={visibility}
             label="Visibility"
           />
+
+          <Button label="Share Link" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
     </div>