diff --git a/packages/client/src/components/common/Modal/Modal.scss b/packages/client/src/components/common/Modal/Modal.scss index 033c48e..3ceff14 100644 --- a/packages/client/src/components/common/Modal/Modal.scss +++ b/packages/client/src/components/common/Modal/Modal.scss @@ -61,30 +61,27 @@ $border-color: #70842f; inset: 0; z-index: -1; - &::before { + @mixin borderDecorSettings($top, $bottom) { content: ''; position: absolute; - height: 8px; + top: $top; + bottom: $bottom; left: 0; - top: 0; right: 0; + height: 8px; background: url('@/assets/images/svg/title-decor.svg') no-repeat center center; background-size: contain; } + &::before { + @include borderDecorSettings(0, auto); + } + &::after { - content: ''; - position: absolute; - height: 8px; - left: 0; - bottom: 0; - right: 0; + @include borderDecorSettings(auto, 0); - background: url('@/assets/images/svg/title-decor.svg') no-repeat center - center; - background-size: contain; transform: rotate(180deg); } } diff --git a/packages/client/src/components/common/Modal/Modal.tsx b/packages/client/src/components/common/Modal/Modal.tsx index b09a86c..78ba914 100644 --- a/packages/client/src/components/common/Modal/Modal.tsx +++ b/packages/client/src/components/common/Modal/Modal.tsx @@ -2,7 +2,7 @@ import { Icon } from '@/components/ui/Icon/Icon' import './Modal.scss' type ModalPropsType = { - show?: boolean + show: boolean onClose: () => void width?: number | null height?: number | null diff --git a/packages/client/src/components/ui/Loader/Loader.scss b/packages/client/src/components/ui/Loader/Loader.scss index 0ec947d..c8bd13d 100644 --- a/packages/client/src/components/ui/Loader/Loader.scss +++ b/packages/client/src/components/ui/Loader/Loader.scss @@ -34,6 +34,25 @@ $road-color: #2c414c; &__image { width: 60px; } + + &__close-btn { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, 100px); + cursor: pointer; + + background: none; + border: none; + outline: none; + + color: $text-color; + font-size: 14px; + + &:hover { + text-decoration: underline; + } + } } @keyframes moveRoad { diff --git a/packages/client/src/components/ui/Loader/Loader.tsx b/packages/client/src/components/ui/Loader/Loader.tsx index 80194ef..ec938be 100644 --- a/packages/client/src/components/ui/Loader/Loader.tsx +++ b/packages/client/src/components/ui/Loader/Loader.tsx @@ -1,18 +1,40 @@ import './Loader.scss' +import { useEffect, useState } from 'react' import LoaderGif from '@/assets/images/loader.png' type LoaderPropsType = { - show?: boolean + show: boolean + onClose?: () => void } export const Loader = (props: LoaderPropsType) => { - const { show } = props + const { show, onClose } = props + const [showCloseButton, setShowCloseButton] = useState(false) + + useEffect(() => { + let timer: NodeJS.Timeout + + if (show) { + timer = setTimeout(() => { + setShowCloseButton(true) + }, 5000) + } else { + setShowCloseButton(false) + } + + return () => clearTimeout(timer) + }, [show]) return (