fix emoji-picker z-index & use better icon

This commit is contained in:
jilv220 2023-11-12 15:28:37 -08:00
parent f48d5ff024
commit 6d589cf6be
3 changed files with 15 additions and 17 deletions

View File

@ -1,7 +1,7 @@
import data, { Emoji } from "@emoji-mart/data";
import Picker from "@emoji-mart/react";
import { RefObject } from "react";
import customEmojis from '../custom_emojis.json';
import customEmojis from "../custom_emojis.json";
interface EmojiPickerProps {
topOffset: number;
@ -14,11 +14,11 @@ interface EmojiPickerProps {
const customCategoryIcons = {
categoryIcons: {
"poast": {
src: 'https://poa.st/emoji/custom/poast_hat.png',
poast: {
src: "https://poa.st/emoji/custom/poast_hat.png",
},
},
}
};
export function EmojiPicker({
topOffset,
@ -28,11 +28,11 @@ export function EmojiPicker({
height = 300,
ref,
}: EmojiPickerProps) {
const customEmojiList = customEmojis.map(pack => {
const customEmojiList = customEmojis.map((pack) => {
return {
id: pack.id,
name: pack.name,
emojis: pack.emojis.map(e => {
emojis: pack.emojis.map((e) => {
return {
id: e.shortcode,
name: e.shortcode,
@ -44,9 +44,7 @@ export function EmojiPicker({
return (
<>
<div
className="z-25"
ref={ref}>
<div className="absolute z-25" ref={ref}>
<style>
{`
em-emoji-picker { max-height: ${height}px; }

View File

@ -2,7 +2,7 @@ import {
ArrowUpTrayIcon,
CpuChipIcon,
ArrowPathIcon,
Square2StackIcon
FaceSmileIcon
} from "@heroicons/react/24/outline";
import { XCircleIcon } from "@heroicons/react/24/solid";
import { useState, useEffect, useRef } from "react";
@ -231,7 +231,7 @@ const NewNoteCard = ({
ref={emojiRef}
/>
)}
<Square2StackIcon className="h-4 w-4 text-neutral-400 cursor-pointer" onClick={pickEmoji}/>
<FaceSmileIcon className="h-4 w-4 text-neutral-400 cursor-pointer" onClick={pickEmoji}/>
</div>
<div className="flex items-center">
<ArrowUpTrayIcon

View File

@ -4,7 +4,7 @@ import { Event, nip19 } from "nostr-tools"
import { subNote, subNotesOnce } from '../utils/subscriptions';
import { useEffect } from 'react';
import { uniqBy } from '../utils/otherUtils';
import { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline';
import { ChatBubbleOvalLeftIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
import { getPow } from '../utils/mine';
import PostCard from './Modals/Card';
import Placeholder from './Modals/Placeholder';
@ -119,16 +119,16 @@ const Thread = () => {
{OPEvent && <PostCard event={OPEvent} metadata={getMetadataEvent(OPEvent)} replyCount={countReplies(OPEvent)} type={'OP'}/>}
</div>
<div className="col-span-full flex justify-center space-x-36">
<DocumentTextIcon
className="h-5 w-5 text-gray-200"
<ChatBubbleOvalLeftIcon
className="h-5 w-5 text-gray-200 cursor-pointer"
onClick={() => {
setShowForm(prevShowForm => !prevShowForm);
setPostType('Reply');
}}
/>
<FolderPlusIcon
className="h-5 w-5 text-gray-200"
<PlusCircleIcon
className="h-5 w-5 text-gray-200 cursor-pointer"
onClick={() => {
setShowForm(prevShowForm => !prevShowForm);
setPostType('Quote');