diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss new file mode 100644 index 0000000000..d5a58e8c67 --- /dev/null +++ b/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; +} diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx new file mode 100644 index 0000000000..188ca25bac --- /dev/null +++ b/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 { + 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 ( + + ); +} diff --git a/packages/fakeyou.com/src/components/common/Input/Input.scss b/packages/fakeyou.com/src/components/common/Inputs/Input.scss similarity index 100% rename from packages/fakeyou.com/src/components/common/Input/Input.scss rename to packages/fakeyou.com/src/components/common/Inputs/Input.scss diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx similarity index 100% rename from packages/fakeyou.com/src/components/common/Input/Input.tsx rename to packages/fakeyou.com/src/components/common/Inputs/Inputs.tsx diff --git a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx index c7caacfaaa..2e91e9e4da 100644 --- a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx +++ b/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} > - +
+
); diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx index 86fed8c367..952255e0b6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx +++ b/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) => { console.log(event.target.value); }; +const handleSave = (e: React.MouseEvent) => { + console.log("save"); +}; + const savebtn = ; const visibility = [ @@ -51,11 +56,14 @@ export default function VcModelEditPage(props: VcModelEditPageProps) { />