mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-04 19:00:47 +00:00
Emoji picking modal in note editor
This commit is contained in:
parent
511adb7aa2
commit
1b421a6da0
6
src/assets/icons/emoji.svg
Normal file
6
src/assets/icons/emoji.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.73132 11.5834C4.6416 11.2842 4.87854 11 5.19092 11H14.8091C15.1215 11 15.3584 11.2842 15.2687 11.5834C14.5887 13.8491 12.4872 15.5 10 15.5C7.51282 15.5 5.41125 13.8491 4.73132 11.5834Z" fill="#666666"/>
|
||||||
|
<path d="M8.5 7.5C8.5 8.32843 7.94031 9 7.25 9C6.55969 9 6 8.32843 6 7.5C6 6.67157 6.55969 6 7.25 6C7.94031 6 8.5 6.67157 8.5 7.5Z" fill="#666666"/>
|
||||||
|
<path d="M12.75 9C13.4403 9 14 8.32843 14 7.5C14 6.67157 13.4403 6 12.75 6C12.0597 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0597 9 12.75 9Z" fill="#666666"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 10C19 14.9706 14.9706 19 10 19C5.02942 19 1 14.9706 1 10C1 5.02945 5.02942 1 10 1C14.9706 1 19 5.02945 19 10ZM17.5 10C17.5 14.1422 14.1421 17.5 10 17.5C5.85791 17.5 2.5 14.1422 2.5 10C2.5 5.85785 5.85791 2.5 10 2.5C14.1421 2.5 17.5 5.85785 17.5 10Z" fill="#666666"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 944 B |
26
src/components/Buttons/ButtonGhost.tsx
Normal file
26
src/components/Buttons/ButtonGhost.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { Button } from '@kobalte/core';
|
||||||
|
import { Component, JSXElement } from 'solid-js';
|
||||||
|
import { hookForDev } from '../../lib/devTools';
|
||||||
|
|
||||||
|
import styles from './Buttons.module.scss';
|
||||||
|
|
||||||
|
|
||||||
|
const ButtonGhost: Component<{
|
||||||
|
id?: string,
|
||||||
|
onClick?: (e: MouseEvent) => void,
|
||||||
|
children?: JSXElement,
|
||||||
|
disabled?: boolean,
|
||||||
|
}> = (props) => {
|
||||||
|
return (
|
||||||
|
<Button.Root
|
||||||
|
id={props.id}
|
||||||
|
class={styles.ghost}
|
||||||
|
onClick={props.onClick}
|
||||||
|
disabled={props.disabled}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Button.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default hookForDev(ButtonGhost);
|
@ -200,3 +200,21 @@
|
|||||||
border: 1px solid var(--text-tertiary);
|
border: 1px solid var(--text-tertiary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
border-radius: 6px;
|
||||||
|
padding-inline: 10px;
|
||||||
|
padding-block: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
88
src/components/EmojiPickModal/EmojiPickModal.module.scss
Normal file
88
src/components/EmojiPickModal/EmojiPickModal.module.scss
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
.zapEmojiChangeModal {
|
||||||
|
position: fixed;
|
||||||
|
height: 344px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
background-color: var(--background-input);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 22px;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-block: 22px;
|
||||||
|
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: flex;
|
||||||
|
width: 70%;
|
||||||
|
height: 36px;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-inline: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--subtile-devider);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xClose {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 22px;
|
||||||
|
|
||||||
|
.iconClose {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0px 0px;
|
||||||
|
background-color: var(--text-secondary);
|
||||||
|
-webkit-mask: url(../../assets/icons/close.svg) no-repeat center;
|
||||||
|
mask: url(../../assets/icons/close.svg) no-repeat center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.iconClose {
|
||||||
|
background-color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
85
src/components/EmojiPickModal/EmojiPickModal.tsx
Normal file
85
src/components/EmojiPickModal/EmojiPickModal.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import { Component, createEffect, createSignal, For } from 'solid-js';
|
||||||
|
|
||||||
|
import styles from './EmojiPickModal.module.scss';
|
||||||
|
import { useSettingsContext } from '../../contexts/SettingsContext';
|
||||||
|
import { debounce, isVisibleInContainer, uuidv4 } from '../../utils';
|
||||||
|
import { useIntl } from '@cookbook/solid-intl';
|
||||||
|
import ConfirmModal from '../ConfirmModal/ConfirmModal';
|
||||||
|
import { settings as t } from '../../translations';
|
||||||
|
import { hookForDev } from '../../lib/devTools';
|
||||||
|
import ButtonLink from '../Buttons/ButtonLink';
|
||||||
|
import Modal from '../Modal/Modal';
|
||||||
|
|
||||||
|
import emojiSearch from '@jukben/emoji-search';
|
||||||
|
import { createStore } from 'solid-js/store';
|
||||||
|
import { EmojiOption } from '../../types/primal';
|
||||||
|
import ButtonPrimary from '../Buttons/ButtonPrimary';
|
||||||
|
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
||||||
|
|
||||||
|
const EmojiPickModal: Component<{
|
||||||
|
id?: string,
|
||||||
|
open: boolean,
|
||||||
|
onClose: (e: MouseEvent | KeyboardEvent) => void,
|
||||||
|
onSelect: (emoji: EmojiOption) => void,
|
||||||
|
}> = (props) => {
|
||||||
|
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const [emojiSearchTerm, setEmojiSearchTerm] = createSignal('smile');
|
||||||
|
|
||||||
|
const onKey = (e: KeyboardEvent) => {
|
||||||
|
if (e.code === 'Escape') {
|
||||||
|
props.onClose(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let emojiInput: HTMLInputElement | undefined;
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
if (props.open) {
|
||||||
|
window.addEventListener('keydown', onKey);
|
||||||
|
setTimeout(() => {
|
||||||
|
setEmojiSearchTerm(() => 'smile')
|
||||||
|
emojiInput?.focus();
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
window.removeEventListener('keydown', onKey);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={props.open}
|
||||||
|
onBackdropClick={(e: MouseEvent) => props.onClose(e)}
|
||||||
|
>
|
||||||
|
<div id={props.id} class={styles.zapEmojiChangeModal}>
|
||||||
|
<div class={styles.title}>
|
||||||
|
{intl.formatMessage(t.zapEmojiFilterTitle)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class={styles.xClose} onClick={props.onClose}>
|
||||||
|
<div class={styles.iconClose}></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref={emojiInput}
|
||||||
|
onInput={(e: InputEvent) => {
|
||||||
|
const target = e.target as HTMLInputElement;
|
||||||
|
setEmojiSearchTerm(() => target.value);
|
||||||
|
}}
|
||||||
|
placeholder={intl.formatMessage(t.zapEmojiFilterPlaceholder)}
|
||||||
|
>
|
||||||
|
</input>
|
||||||
|
|
||||||
|
<EmojiPicker
|
||||||
|
filter={emojiSearchTerm()}
|
||||||
|
onSelect={props.onSelect}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EmojiPickModal;
|
@ -79,6 +79,7 @@
|
|||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.editorOptions {
|
.editorOptions {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.attachIcon {
|
.attachIcon {
|
||||||
@ -93,6 +94,26 @@
|
|||||||
background-color: var(--text-secondary);
|
background-color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.emojiIcon {
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 9px;
|
||||||
|
background-color: var(--text-tertiary);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>button {
|
||||||
|
width: 26px;
|
||||||
|
height: 21px;
|
||||||
|
padding: 0;
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,6 +39,9 @@ import { hookForDev } from "../../../lib/devTools";
|
|||||||
import ButtonPrimary from "../../Buttons/ButtonPrimary";
|
import ButtonPrimary from "../../Buttons/ButtonPrimary";
|
||||||
import ButtonSecondary from "../../Buttons/ButtonSecondary";
|
import ButtonSecondary from "../../Buttons/ButtonSecondary";
|
||||||
import { useProfileContext } from "../../../contexts/ProfileContext";
|
import { useProfileContext } from "../../../contexts/ProfileContext";
|
||||||
|
import ButtonTertiary from "../../Buttons/ButtonTertiary";
|
||||||
|
import ButtonGhost from "../../Buttons/ButtonGhost";
|
||||||
|
import EmojiPickModal from "../../EmojiPickModal/EmojiPickModal";
|
||||||
|
|
||||||
type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
|
type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
|
||||||
|
|
||||||
@ -483,6 +486,9 @@ const EditBox: Component<{
|
|||||||
|
|
||||||
const onEscape = (e: KeyboardEvent) => {
|
const onEscape = (e: KeyboardEvent) => {
|
||||||
if (e.code === 'Escape') {
|
if (e.code === 'Escape') {
|
||||||
|
console.log('ESCAPE: ', isPickingEmoji())
|
||||||
|
if (isPickingEmoji()) return;
|
||||||
|
|
||||||
!isMentioning() && !isEmojiInput() ?
|
!isMentioning() && !isEmojiInput() ?
|
||||||
closeEditor() :
|
closeEditor() :
|
||||||
closeEmojiAndMentions();
|
closeEmojiAndMentions();
|
||||||
@ -992,14 +998,14 @@ const EditBox: Component<{
|
|||||||
|
|
||||||
// Get index of the token and insert emoji character
|
// Get index of the token and insert emoji character
|
||||||
const index = msg.slice(0, cursor).lastIndexOf(':');
|
const index = msg.slice(0, cursor).lastIndexOf(':');
|
||||||
const value = msg.slice(0, index) + emoji.name + msg.slice(cursor);
|
const value = msg.slice(0, index) + `${emoji.name} ` + msg.slice(cursor);
|
||||||
|
|
||||||
// Reset query, update message and text area value
|
// Reset query, update message and text area value
|
||||||
setMessage(value);
|
setMessage(value);
|
||||||
textArea.value = message();
|
textArea.value = message();
|
||||||
|
|
||||||
// Calculate new cursor position
|
// Calculate new cursor position
|
||||||
textArea.selectionEnd = index + 1;
|
textArea.selectionEnd = index + 3;
|
||||||
textArea.focus();
|
textArea.focus();
|
||||||
|
|
||||||
setEmojiInput(false);
|
setEmojiInput(false);
|
||||||
@ -1148,6 +1154,30 @@ const EditBox: Component<{
|
|||||||
callback && callback();
|
callback && callback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [isPickingEmoji, setIsPickingEmoji] = createSignal(false);
|
||||||
|
|
||||||
|
const addSelectedEmoji = (emoji: EmojiOption) => {
|
||||||
|
if (!textArea || !emoji) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const msg = message();
|
||||||
|
|
||||||
|
// Get cursor position to determine insertion point
|
||||||
|
let cursor = textArea.selectionStart;
|
||||||
|
|
||||||
|
// Get index of the token and insert emoji character
|
||||||
|
const value = msg.slice(0, cursor) + `${emoji.name} ` + msg.slice(cursor);
|
||||||
|
|
||||||
|
// Reset query, update message and text area value
|
||||||
|
setMessage(value);
|
||||||
|
textArea.value = message();
|
||||||
|
|
||||||
|
// Calculate new cursor position
|
||||||
|
textArea.selectionEnd = cursor + 3;
|
||||||
|
textArea.focus();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
id={props.id}
|
id={props.id}
|
||||||
@ -1255,6 +1285,9 @@ const EditBox: Component<{
|
|||||||
/>
|
/>
|
||||||
<label for={`upload-${instanceId}`} class={`attach_icon ${styles.attachIcon}`}>
|
<label for={`upload-${instanceId}`} class={`attach_icon ${styles.attachIcon}`}>
|
||||||
</label>
|
</label>
|
||||||
|
<ButtonGhost onClick={() => {setIsPickingEmoji(true)}}>
|
||||||
|
<div class={`emoji_icon ${styles.emojiIcon}`}></div>
|
||||||
|
</ButtonGhost>
|
||||||
</div>
|
</div>
|
||||||
<ButtonPrimary
|
<ButtonPrimary
|
||||||
onClick={postNote}
|
onClick={postNote}
|
||||||
@ -1266,6 +1299,17 @@ const EditBox: Component<{
|
|||||||
{intl.formatMessage(tActions.cancel)}
|
{intl.formatMessage(tActions.cancel)}
|
||||||
</ButtonSecondary>
|
</ButtonSecondary>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<EmojiPickModal
|
||||||
|
open={isPickingEmoji()}
|
||||||
|
onClose={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsPickingEmoji(false);
|
||||||
|
textArea?.focus();
|
||||||
|
}, 100)
|
||||||
|
}}
|
||||||
|
onSelect={addSelectedEmoji}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -111,92 +111,3 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
margin-top: 36px;
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zapEmojiChangeModal {
|
|
||||||
position: fixed;
|
|
||||||
height: 344px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
background-color: var(--background-input);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-left: 22px;
|
|
||||||
padding-right: 16px;
|
|
||||||
padding-block: 22px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: flex;
|
|
||||||
width: 70%;
|
|
||||||
height: 36px;
|
|
||||||
text-align: left;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding-inline: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 20px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 18px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--subtile-devider);
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xClose {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: fit-content;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 16px;
|
|
||||||
right: 22px;
|
|
||||||
|
|
||||||
.iconClose {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0px 0px;
|
|
||||||
background-color: var(--text-secondary);
|
|
||||||
-webkit-mask: url(../../assets/icons/close.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/close.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.iconClose {
|
|
||||||
background-color: var(--text-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -15,6 +15,7 @@ import { createStore } from 'solid-js/store';
|
|||||||
import { EmojiOption } from '../../types/primal';
|
import { EmojiOption } from '../../types/primal';
|
||||||
import ButtonPrimary from '../Buttons/ButtonPrimary';
|
import ButtonPrimary from '../Buttons/ButtonPrimary';
|
||||||
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
||||||
|
import EmojiPickModal from '../EmojiPickModal/EmojiPickModal';
|
||||||
|
|
||||||
const SettingsZap: Component<{ id?: string }> = (props) => {
|
const SettingsZap: Component<{ id?: string }> = (props) => {
|
||||||
|
|
||||||
@ -176,35 +177,11 @@ const SettingsZap: Component<{ id?: string }> = (props) => {
|
|||||||
onAbort={() => setIsRestoringZaps(false)}
|
onAbort={() => setIsRestoringZaps(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Modal
|
<EmojiPickModal
|
||||||
open={isEmojiChange() >= 0}
|
open={isEmojiChange() >= 0}
|
||||||
onBackdropClick={() => setIsEmojiChange(-1)}
|
onClose={() => setIsEmojiChange(-1)}
|
||||||
>
|
onSelect={changeZapOptionEmoji}
|
||||||
<div id={props.id} class={styles.zapEmojiChangeModal}>
|
/>
|
||||||
<div class={styles.title}>
|
|
||||||
{intl.formatMessage(t.zapEmojiFilterTitle)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class={styles.xClose} onClick={() => setIsEmojiChange(-1)}>
|
|
||||||
<div class={styles.iconClose}></div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<input
|
|
||||||
ref={emojiInput}
|
|
||||||
onInput={(e: InputEvent) => {
|
|
||||||
const target = e.target as HTMLInputElement;
|
|
||||||
setEmojiSearchTerm(() => target.value);
|
|
||||||
}}
|
|
||||||
placeholder={intl.formatMessage(t.zapEmojiFilterPlaceholder)}
|
|
||||||
>
|
|
||||||
</input>
|
|
||||||
|
|
||||||
<EmojiPicker
|
|
||||||
filter={emojiSearchTerm()}
|
|
||||||
onSelect={changeZapOptionEmoji}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -159,6 +159,10 @@ a {
|
|||||||
-webkit-mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
|
-webkit-mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
|
||||||
mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
|
mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
|
||||||
}
|
}
|
||||||
|
.emoji_icon {
|
||||||
|
-webkit-mask: url(./assets/icons/emoji.svg) no-repeat 0 / 100%;
|
||||||
|
mask: url(./assets/icons/emoji.svg) no-repeat 0 / 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.bordered {
|
.bordered {
|
||||||
border:solid 1px var(--subtile-devider);
|
border:solid 1px var(--subtile-devider);
|
||||||
|
Loading…
Reference in New Issue
Block a user