-
-
-
+
+
+
+
+
+
+
+
-
)
diff --git a/packages/client/src/components/common/Modal/Modal.scss b/packages/client/src/components/common/Modal/Modal.scss
new file mode 100644
index 0000000..a79a914
--- /dev/null
+++ b/packages/client/src/components/common/Modal/Modal.scss
@@ -0,0 +1,89 @@
+@import '../../../scss/vars.scss';
+
+$border-radius: 8px;
+$border-color: #70842f;
+$outline-gradient: linear-gradient(to left, #5e5e5e, #414243);
+
+.modal {
+ display: none;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ inset: 0;
+ background: $overlay-color;
+ z-index: 20;
+
+ &_show {
+ display: flex;
+ }
+
+ &__close-btn {
+ background: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+
+ position: absolute;
+ right: -24px;
+ top: -24px;
+ }
+
+ &__content {
+ position: relative;
+ padding: 12px;
+ border-radius: $border-radius;
+ min-width: 200px;
+ min-height: 200px;
+ max-width: 500px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: $border-radius;
+ background: $outline-gradient;
+ z-index: -1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 7px;
+ border: 2px solid $border-color;
+ border-radius: 4px;
+ background: $c_black;
+ z-index: -1;
+ }
+ }
+
+ &__decor {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+
+ @mixin borderDecorSettings($top, $bottom) {
+ content: '';
+ position: absolute;
+ top: $top;
+ bottom: $bottom;
+ left: 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 {
+ @include borderDecorSettings(auto, 0);
+
+ transform: rotate(180deg);
+ }
+ }
+}
diff --git a/packages/client/src/components/common/Modal/Modal.tsx b/packages/client/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..0f9db62
--- /dev/null
+++ b/packages/client/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,53 @@
+import { Icon } from '@/components/ui/Icon/Icon'
+import './Modal.scss'
+import ReactDOM from 'react-dom'
+import { useEffect } from 'react'
+
+type ModalPropsType = {
+ show: boolean
+ onClose: () => void
+ width?: number | null
+ height?: number | null
+ children: React.ReactNode
+}
+
+export const Modal = (props: ModalPropsType) => {
+ const { children, onClose, show = false, width = null, height = null } = props
+ const modalRoot = document.getElementById('modal-root') || document.body
+
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ event.preventDefault()
+
+ if (event.key === 'Escape') {
+ onClose()
+ }
+ }
+
+ document.addEventListener('keydown', handleEscape)
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape)
+ }
+ }, [onClose])
+
+ return ReactDOM.createPortal(
+
+
e.stopPropagation()}
+ style={{
+ width: width ? `${width}px` : '',
+ height: height ? `${height}px` : '',
+ }}>
+
+
+
+ {children}
+
+
,
+ modalRoot
+ )
+}
diff --git a/packages/client/src/components/ui/Avatar/Avatar.scss b/packages/client/src/components/ui/Avatar/Avatar.scss
index cb95849..5052582 100644
--- a/packages/client/src/components/ui/Avatar/Avatar.scss
+++ b/packages/client/src/components/ui/Avatar/Avatar.scss
@@ -7,7 +7,8 @@
max-height: 100%;
position: relative;
- &__image, &__image-placeholder {
+ &__image,
+ &__image-placeholder {
border-radius: 50%;
border: 5px solid $c_avatar-border-color;
width: inherit;
diff --git a/packages/client/src/components/ui/Button/Button.tsx b/packages/client/src/components/ui/Button/Button.tsx
index 95457c3..8a84794 100644
--- a/packages/client/src/components/ui/Button/Button.tsx
+++ b/packages/client/src/components/ui/Button/Button.tsx
@@ -7,7 +7,7 @@ export const Button = (props: {
useFixWidth?: boolean | undefined
onClick?: (event: React.MouseEvent
) => void | Promise
}) => {
- const { text, className, useFixWidth = false, onClick } = props
+ const { text, className = '', useFixWidth = false, onClick } = props
return (