diff --git a/src/components/EmojiPicker/EmojiPicker.module.scss b/src/components/EmojiPicker/EmojiPicker.module.scss
index 85e005f..3617322 100644
--- a/src/components/EmojiPicker/EmojiPicker.module.scss
+++ b/src/components/EmojiPicker/EmojiPicker.module.scss
@@ -2,10 +2,10 @@
position: relative;
display: grid;
grid-template-columns: 50px 50px 50px 50px 50px 50px;
- width: 322px;
+ // width: 322px;
max-height: 200px;
overflow-y: scroll;
- padding: 4px;
+ // padding: 4px;
background-color: var(--background-input);
border: none;
border-radius: 8px;
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index ca90530..3770715 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -9,7 +9,7 @@ const Modal: Component<{
open?: boolean,
id?: string,
opaqueBackdrop?: boolean,
- onBackdropClick?: () => void,
+ onBackdropClick?: (e: MouseEvent) => void,
}> = (props) => {
return (
@@ -18,7 +18,13 @@ const Modal: Component<{
{
+ if (!(e.target as Element).classList.contains(styles.modal)) {
+ return;
+ }
+
+ props.onBackdropClick && props.onBackdropClick(e)
+ }}
>
{props.children}
diff --git a/src/components/SettingsZap/SettingsZap.module.scss b/src/components/SettingsZap/SettingsZap.module.scss
index decbbcf..b6496c9 100644
--- a/src/components/SettingsZap/SettingsZap.module.scss
+++ b/src/components/SettingsZap/SettingsZap.module.scss
@@ -114,7 +114,6 @@
.zapEmojiChangeModal {
position: fixed;
- width: 420px;
height: 344px;
color: var(--text-secondary);
background-color: var(--background-input);
@@ -123,19 +122,22 @@
display: flex;
flex-direction: column;
- padding: 22px;
+ padding-left: 22px;
+ padding-right: 16px;
+ padding-block: 22px;
justify-content: flex-start;
align-items: center;
input {
- width: 220px;
+ display: flex;
+ width: 70%;
height: 36px;
text-align: left;
margin: 0;
margin-bottom: 24px;
padding-bottom: 0;
- padding-top: 4px;
+ padding-top: 2px;
padding-inline: 16px;
font-size: 16px;
font-weight: 600;
@@ -156,6 +158,7 @@
font-size: 16px;
font-weight: 400;
line-height: 20px;
+ transform: translate(0, 2px);
}
}
@@ -177,7 +180,7 @@
position: absolute;
top: 16px;
- right: 18px;
+ right: 22px;
.iconClose {
width: 14px;