diff --git a/src/components/Form/IgnoreButton/IgnoreButton.tsx b/src/components/Form/IgnoreButton/IgnoreButton.tsx new file mode 100644 index 0000000..f42499a --- /dev/null +++ b/src/components/Form/IgnoreButton/IgnoreButton.tsx @@ -0,0 +1,53 @@ +import { FC, ReactNode, useState } from "react" +import styles from "./styles.module.scss" + +type Props = { + children?: ReactNode | undefined + text: string + onClick?: () => void +} + +const FormButton: FC = ({ children, text, onClick }): JSX.Element => { + const [doShowMessage, setDoShowMessage] = useState(false) + + const showMessage = () => { + setDoShowMessage(true) + } + const onIgnore = () => { + setDoShowMessage(true) + onClick?.() + } + const onCloseIgnore = () => { + setDoShowMessage(false) + } + + return ( + <> + + {doShowMessage && ( +
+ +
{children}
+ +
+ )} + + ) +} + +FormButton.defaultProps = { + children: undefined, + onClick: undefined, +} + +export default FormButton diff --git a/src/components/Form/IgnoreButton/styles.module.scss b/src/components/Form/IgnoreButton/styles.module.scss new file mode 100644 index 0000000..9e5fae4 --- /dev/null +++ b/src/components/Form/IgnoreButton/styles.module.scss @@ -0,0 +1,30 @@ +@import "../../../theme/mixins"; + +.greyButton { + @include form-grey-button; + + margin-top: 10px; +} + +.infoBeforeIgnore { + margin-top: 15px; + position: relative; + padding: 15px; + outline: 0; + background-color: $color-white; +} +.closeButton { + position: absolute; + padding: 0; + z-index: 10; + top: 10px; + right: 10px; + width: 20px; + height: 20px; + border-radius: 0; + line-height: 20px; + color: $color-grey-dark; + text-align: center; + background: none; + cursor: pointer; +} diff --git a/src/components/Navigation/MainMenu.tsx b/src/components/Navigation/MainMenu.tsx index 740e843..971996f 100644 --- a/src/components/Navigation/MainMenu.tsx +++ b/src/components/Navigation/MainMenu.tsx @@ -6,6 +6,7 @@ import styles from "./styles.module.scss" const MainMenu: FC = (): JSX.Element | null => { const connected = useSelector(isUserConnected) + const [opened, setOpened] = useState(false) const onOpen = useCallback(() => { @@ -24,6 +25,9 @@ const MainMenu: FC = (): JSX.Element | null => { ☰