nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-10-03 02:10:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix custom zap settings emoji picker

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-01-18 15:26:51 +01:00
parent bcc1fc57a3
commit 729af39c48
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/EmojiPicker/EmojiPicker.module.scss
View File

@ -2,10 +2,10 @@
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 50px 50px 50px 50px 50px 50px; grid-template-columns: 50px 50px 50px 50px 50px 50px;
width: 322px; // width: 322px;
max-height: 200px; max-height: 200px;
overflow-y: scroll; overflow-y: scroll;
padding: 4px; // padding: 4px;
background-color: var(--background-input); background-color: var(--background-input);
border: none; border: none;
border-radius: 8px; border-radius: 8px;

10
src/components/Modal/Modal.tsx
View File

@ -9,7 +9,7 @@ const Modal: Component<{
open?: boolean, open?: boolean,
id?: string, id?: string,
opaqueBackdrop?: boolean, opaqueBackdrop?: boolean,
onBackdropClick?: () => void, onBackdropClick?: (e: MouseEvent) => void,
}> = (props) => { }> = (props) => {
return ( return (
@ -18,7 +18,13 @@ const Modal: Component<{
<div <div
id={props.id} id={props.id}
class={`${styles.modal} ${props.opaqueBackdrop ? styles.opaque : ''}`} class={`${styles.modal} ${props.opaqueBackdrop ? styles.opaque : ''}`}
onClick={props.onBackdropClick} onClick={(e: MouseEvent) => {
if (!(e.target as Element).classList.contains(styles.modal)) {
return;
}
props.onBackdropClick && props.onBackdropClick(e)
}}
> >
{props.children} {props.children}
</div> </div>

13
src/components/SettingsZap/SettingsZap.module.scss
View File

@ -114,7 +114,6 @@
.zapEmojiChangeModal { .zapEmojiChangeModal {
position: fixed; position: fixed;
width: 420px;
height: 344px; height: 344px;
color: var(--text-secondary); color: var(--text-secondary);
background-color: var(--background-input); background-color: var(--background-input);
@ -123,19 +122,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 22px; padding-left: 22px;
padding-right: 16px;
padding-block: 22px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
input { input {
width: 220px; display: flex;
width: 70%;
height: 36px; height: 36px;
text-align: left; text-align: left;
margin: 0; margin: 0;
margin-bottom: 24px; margin-bottom: 24px;
padding-bottom: 0; padding-bottom: 0;
padding-top: 4px; padding-top: 2px;
padding-inline: 16px; padding-inline: 16px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -156,6 +158,7 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
transform: translate(0, 2px);
} }
} }
@ -177,7 +180,7 @@
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 18px; right: 22px;
.iconClose { .iconClose {
width: 14px; width: 14px;