nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

converted all icons to iconoir

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-14 15:54:33 +07:00
parent 4ad5cdbe3d
commit 55fdeef395
26 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -19,7 +19,6 @@
"@radix-ui/react-collapsible": "^1.0.2",
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-popover": "^1.0.5",
"@radix-ui/react-tabs": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.5",
@ -30,6 +29,7 @@
"destr": "^1.2.2",
"emoji-mart": "^5.5.2",
"framer-motion": "^9.1.7",
"iconoir-react": "^6.6.0",
"jotai": "^2.0.3",
"next": "^13.3.0",
"nostr-relaypool": "^0.5.18",

22
pnpm-lock.yaml
View File

@ -7,7 +7,6 @@ specifiers:
'@radix-ui/react-collapsible': ^1.0.2
'@radix-ui/react-dialog': ^1.0.3
'@radix-ui/react-dropdown-menu': ^2.0.4
'@radix-ui/react-icons': ^1.3.0
'@radix-ui/react-popover': ^1.0.5
'@radix-ui/react-tabs': ^1.0.3
'@radix-ui/react-tooltip': ^1.0.5
@ -34,6 +33,7 @@ specifiers:
eslint-plugin-react-hooks: ^4.6.0
framer-motion: ^9.1.7
husky: ^8.0.3
iconoir-react: ^6.6.0
jotai: ^2.0.3
lint-staged: ^13.2.0
next: ^13.3.0
@ -61,7 +61,6 @@ dependencies:
'@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq
'@radix-ui/react-dropdown-menu': 2.0.4_zn3vyfk3tbnwebg5ldvieekjaq
'@radix-ui/react-icons': 1.3.0_react@18.2.0
'@radix-ui/react-popover': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
'@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-tooltip': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
@ -72,6 +71,7 @@ dependencies:
destr: 1.2.2
emoji-mart: 5.5.2
framer-motion: 9.1.7_biqbaboplfbrettd7655fr4n2y
iconoir-react: 6.6.0_react@18.2.0
jotai: 2.0.3_react@18.2.0
next: 13.3.0_biqbaboplfbrettd7655fr4n2y
nostr-relaypool: 0.5.18_ws@8.13.0
@ -755,15 +755,6 @@ packages:
react-dom: 18.2.0_react@18.2.0
dev: false
/@radix-ui/react-icons/1.3.0_react@18.2.0:
resolution:
{ integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== }
peerDependencies:
react: ^16.x || ^17.x || ^18.x
dependencies:
react: 18.2.0
dev: false
/@radix-ui/react-id/1.0.0_react@18.2.0:
resolution:
{ integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw== }
@ -2971,6 +2962,15 @@ packages:
hasBin: true
dev: true
/iconoir-react/6.6.0_react@18.2.0:
resolution:
{ integrity: sha512-7ueB0jQlSZFjEa4qUCaGbfWLRjGBtOc0E+RYHEb3Ek3zDwQuNh4VLtV9kwGoiATRfBYVv8bgCmXI0nr52TRXsw== }
peerDependencies:
react: ^16.8.6 || ^17 || ^18
dependencies:
react: 18.2.0
dev: false
/ignore/5.2.4:
resolution:
{ integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== }

12
src/components/appHeader/actions.tsx
View File

@ -1,7 +1,7 @@
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
import { platform } from '@tauri-apps/api/os';
import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useLayoutEffect, useState } from 'react';
export default function AppActions() {
const router = useRouter();
@ -19,7 +19,7 @@ export default function AppActions() {
router.reload();
};
useEffect(() => {
useLayoutEffect(() => {
const getPlatform = async () => {
const result = await platform();
setOS(result);
@ -34,19 +34,19 @@ export default function AppActions() {
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => goForward()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
<ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => reload()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
<Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
</div>
);

4
src/components/channels/channelList.tsx
View File

@ -1,7 +1,7 @@
import { ChannelListItem } from '@components/channels/channelListItem';
import { CreateChannelModal } from '@components/channels/createChannelModal';
import { GlobeIcon } from '@radix-ui/react-icons';
import { Globe } from 'iconoir-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
@ -26,7 +26,7 @@ export default function ChannelList() {
className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950"
>
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
<GlobeIcon className="h-3 w-3 text-zinc-500" />
<Globe width={12} height={12} className="text-zinc-500" />
</div>
<div>
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>

6
src/components/channels/createChannelModal.tsx
View File

@ -3,8 +3,8 @@ import { RelayContext } from '@components/relaysProvider';
import { dateToUnix } from '@utils/getDate';
import * as Dialog from '@radix-ui/react-dialog';
import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { Cancel, Plus } from 'iconoir-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useCallback, useContext, useState } from 'react';
import { useForm } from 'react-hook-form';
@ -53,7 +53,7 @@ export const CreateChannelModal = () => {
<Dialog.Trigger asChild>
<div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
<PlusIcon className="h-3 w-3 text-zinc-500" />
<Plus width={12} height={12} className="text-zinc-500" />
</div>
<div>
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
@ -73,7 +73,7 @@ export const CreateChannelModal = () => {
autoFocus={false}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<Cross1Icon className="h-3 w-3 text-zinc-300" />
<Cancel width={12} height={12} className="text-zinc-500" />
</button>
</Dialog.Close>
</div>

3
src/components/channels/messages/hideMessageButton.tsx
View File

@ -7,6 +7,7 @@ import HideIcon from '@assets/icons/hide';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import * as Tooltip from '@radix-ui/react-tooltip';
import useLocalStorage from '@rehooks/local-storage';
import { EyeClose } from 'iconoir-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useCallback, useContext } from 'react';
@ -36,7 +37,7 @@ export const HideMessageButton = ({ id }: { id: string }) => {
<AlertDialog.Trigger asChild>
<Tooltip.Trigger asChild>
<button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
<HideIcon className="h-4 w-4 text-zinc-400" />
<EyeClose width={16} height={16} className="text-zinc-400" />
</button>
</Tooltip.Trigger>
</AlertDialog.Trigger>

5
src/components/channels/messages/muteButton.tsx
View File

@ -2,11 +2,10 @@ import { RelayContext } from '@components/relaysProvider';
import { dateToUnix } from '@utils/getDate';
import MuteIcon from '@assets/icons/mute';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import * as Tooltip from '@radix-ui/react-tooltip';
import useLocalStorage from '@rehooks/local-storage';
import { MicMute } from 'iconoir-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useCallback, useContext } from 'react';
@ -36,7 +35,7 @@ export const MuteButton = ({ pubkey }: { pubkey: string }) => {
<AlertDialog.Trigger asChild>
<Tooltip.Trigger asChild>
<button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
<MuteIcon className="h-4 w-4 text-zinc-400" />
<MicMute width={16} height={16} className="text-zinc-400" />
</button>
</Tooltip.Trigger>
</AlertDialog.Trigger>

5
src/components/channels/messages/replyButton.tsx
View File

@ -1,8 +1,7 @@
import { channelReplyAtom } from '@stores/channel';
import ReplyIcon from '@assets/icons/reply';
import * as Tooltip from '@radix-ui/react-tooltip';
import { Reply } from 'iconoir-react';
import { useSetAtom } from 'jotai';
export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: string; content: string }) => {
@ -20,7 +19,7 @@ export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: strin
onClick={() => createReply()}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
>
<ReplyIcon className="h-4 w-4 text-zinc-400" />
<Reply width={16} height={16} className="text-zinc-400" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>

6
src/components/chats/chatModal.tsx
View File

@ -1,8 +1,8 @@
import { ChatModalUser } from '@components/chats/chatModalUser';
import * as Dialog from '@radix-ui/react-dialog';
import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { Cancel, Plus } from 'iconoir-react';
import { useCallback, useEffect, useState } from 'react';
export const ChatModal = () => {
@ -25,7 +25,7 @@ export const ChatModal = () => {
<Dialog.Trigger asChild>
<div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
<PlusIcon className="h-3 w-3 text-zinc-500" />
<Plus width={12} height={12} className="text-zinc-500" />
</div>
<div>
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new chat</h5>
@ -44,7 +44,7 @@ export const ChatModal = () => {
autoFocus={false}
className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"
>
<Cross1Icon className="h-3 w-3 text-zinc-300" />
<Cancel width={12} height={12} className="text-zinc-300" />
</button>
</Dialog.Close>
<h5 className="font-semibold leading-none text-zinc-500">New chat</h5>

4
src/components/form/channelMessage.tsx
View File

@ -6,8 +6,8 @@ import { channelReplyAtom } from '@stores/channel';
import { dateToUnix } from '@utils/getDate';
import { Cross1Icon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { Cancel } from 'iconoir-react';
import { useAtomValue } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { getEventHash, signEvent } from 'nostr-tools';
@ -93,7 +93,7 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
onClick={() => stopReply()}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
>
<Cross1Icon className="h-3 w-3 text-zinc-100" />
<Cancel width={12} height={12} className="text-zinc-100" />
</button>
</div>
</div>

7
src/components/form/emojiPicker.tsx
View File

@ -1,10 +1,9 @@
import { noteContentAtom } from '@stores/note';
import EmojiIcon from '@assets/icons/emoji';
import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react';
import * as Popover from '@radix-ui/react-popover';
import { Emoji } from 'iconoir-react';
import { useAtom } from 'jotai';
export default function EmojiPicker() {
@ -14,12 +13,12 @@ export default function EmojiPicker() {
<Popover.Root>
<Popover.Trigger asChild>
<button className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
<EmojiIcon className="h-4 w-4 text-zinc-400" />
<Emoji width={16} height={16} className="text-zinc-400" />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
className="rounded-md will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
className="rounded-md will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={5}
>
<Picker

6
src/components/form/imagePicker.tsx
View File

@ -1,7 +1,7 @@
import { noteContentAtom } from '@stores/note';
import { PlusIcon } from '@radix-ui/react-icons';
import * as Popover from '@radix-ui/react-popover';
import { Plus } from 'iconoir-react';
import { useAtom } from 'jotai';
import { useState } from 'react';
@ -19,12 +19,12 @@ export default function ImagePicker() {
<Popover.Root>
<Popover.Trigger asChild>
<button className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
<PlusIcon className="h-4 w-4 text-zinc-400" />
<Plus width={16} height={16} className="text-zinc-400" />
</button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
className="w-80 rounded-md bg-zinc-900/80 p-3 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
className="w-80 rounded-md bg-zinc-900/80 p-3 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={3}
>
<div>

8
src/components/multiAccounts/activeAccount.tsx
View File

@ -1,8 +1,8 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
import { writeText } from '@tauri-apps/api/clipboard';
import { LogOut, ProfileCircle, Settings } from 'iconoir-react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { nip19 } from 'nostr-tools';
@ -44,7 +44,7 @@ export const ActiveAccount = ({ user }: { user: any }) => {
className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500"
>
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<AvatarIcon />
<ProfileCircle />
</div>
Open profile
</DropdownMenu.Item>
@ -60,13 +60,13 @@ export const ActiveAccount = ({ user }: { user: any }) => {
<DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<GearIcon />
<Settings />
</div>
Settings
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-800 data-[highlighted]:text-fuchsia-500">
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<ExitIcon />
<LogOut />
</div>
Logout
</DropdownMenu.Item>

4
src/components/multiAccounts/index.tsx
View File

@ -5,8 +5,8 @@ import { APP_VERSION } from '@stores/constants';
import LumeSymbol from '@assets/icons/Lume';
import { PlusIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { Plus } from 'iconoir-react';
import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
@ -50,7 +50,7 @@ export default function MultiAccounts() {
href="/onboarding"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
>
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
<Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</Link>
</div>
<div className="flex flex-col gap-0.5 text-center">

4
src/components/navigation/channels.tsx
View File

@ -1,7 +1,7 @@
import ChannelList from '@components/channels/channelList';
import * as Collapsible from '@radix-ui/react-collapsible';
import { TriangleUpIcon } from '@radix-ui/react-icons';
import { NavArrowUp } from 'iconoir-react';
import { useState } from 'react';
export default function Channels() {
@ -16,7 +16,7 @@ export default function Channels() {
open ? 'rotate-180' : ''
}`}
>
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
<NavArrowUp width={16} height={16} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
</Collapsible.Trigger>

4
src/components/navigation/chats.tsx
View File

@ -1,7 +1,7 @@
import ChatList from '@components/chats/chatList';
import * as Collapsible from '@radix-ui/react-collapsible';
import { TriangleUpIcon } from '@radix-ui/react-icons';
import { NavArrowUp } from 'iconoir-react';
import { useState } from 'react';
export default function Chats() {
@ -16,7 +16,7 @@ export default function Chats() {
open ? 'rotate-180' : ''
}`}
>
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
<NavArrowUp width={16} height={16} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
</Collapsible.Trigger>

4
src/components/navigation/newsfeed.tsx
View File

@ -1,7 +1,7 @@
import ActiveLink from '@components/activeLink';
import * as Collapsible from '@radix-ui/react-collapsible';
import { TriangleUpIcon } from '@radix-ui/react-icons';
import { NavArrowUp } from 'iconoir-react';
import { useState } from 'react';
export default function Newsfeed() {
@ -16,7 +16,7 @@ export default function Newsfeed() {
open ? 'rotate-180' : ''
}`}
>
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
<NavArrowUp width={16} height={16} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
</Collapsible.Trigger>

8
src/components/note/meta/comment.tsx
View File

@ -4,11 +4,9 @@ import { UserExtend } from '@components/user/extend';
import { dateToUnix } from '@utils/getDate';
import CommentIcon from '@assets/icons/comment';
import * as Dialog from '@radix-ui/react-dialog';
import { SizeIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { MultiBubble, OpenNewWindow } from 'iconoir-react';
import { useRouter } from 'next/router';
import { getEventHash, signEvent } from 'nostr-tools';
import { memo, useContext, useState } from 'react';
@ -59,7 +57,7 @@ export const NoteComment = memo(function NoteComment({
<Dialog.Trigger asChild>
<button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">
<CommentIcon className="h-5 w-5 text-zinc-500" />
<MultiBubble width={20} height={20} className="text-zinc-500" />
</div>
<span>{count}</span>
</button>
@ -111,7 +109,7 @@ export const NoteComment = memo(function NoteComment({
onClick={() => openThread()}
className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
>
<SizeIcon className="h-4 w-4 text-zinc-400" />
<OpenNewWindow width={16} height={16} className="text-zinc-400" />
</button>
<div className="flex items-center gap-2 pl-2"></div>
</div>

10
src/components/note/meta/reaction.tsx
View File

@ -2,10 +2,8 @@ import { RelayContext } from '@components/relaysProvider';
import { dateToUnix } from '@utils/getDate';
import LikeIcon from '@assets/icons/like';
import LikedIcon from '@assets/icons/liked';
import useLocalStorage from '@rehooks/local-storage';
import { Heart } from 'iconoir-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { memo, useContext, useEffect, useState } from 'react';
@ -54,7 +52,11 @@ export const NoteReaction = memo(function NoteReaction({
return (
<button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">
{isReact ? <LikedIcon className="h-5 w-5 text-red-500" /> : <LikeIcon className="h-5 w-5 text-zinc-500" />}
{isReact ? (
<Heart width={20} height={20} className="fill-red-500" />
) : (
<Heart width={20} height={20} className="text-zinc-500" />
)}
</div>
<span>{like}</span>
</button>

4
src/components/user/extend.tsx
View File

@ -5,9 +5,9 @@ import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { MoreHoriz } from 'iconoir-react';
dayjs.extend(relativeTime);
@ -35,7 +35,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
</div>
<div>
<button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
<DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
<MoreHoriz width={12} height={12} className="text-zinc-500" />
</button>
</div>
</div>

4
src/components/user/large.tsx
View File

@ -5,9 +5,9 @@ import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { MoreHoriz } from 'iconoir-react';
dayjs.extend(relativeTime);
@ -36,7 +36,7 @@ export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) =>
</div>
<div>
<button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
<DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
<MoreHoriz width={12} height={12} className="text-zinc-500" />
</button>
</div>
</div>

4
src/pages/newsfeed/following.tsx
View File

@ -10,7 +10,7 @@ import { hasNewerNoteAtom } from '@stores/note';
import { dateToUnix } from '@utils/getDate';
import { filterDuplicateParentID } from '@utils/transform';
import { ArrowUpIcon } from '@radix-ui/react-icons';
import { ArrowUp } from 'iconoir-react';
import { useAtom } from 'jotai';
import {
JSXElementConstructor,
@ -97,7 +97,7 @@ export default function Page() {
onClick={() => loadLatest()}
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
>
<ArrowUpIcon className="h-3.5 w-3.5" />
<ArrowUp width={14} height={14} />
Load latest
</button>
</div>

8
src/pages/onboarding/create/index.tsx
View File

@ -2,7 +2,7 @@ import BaseLayout from '@layouts/base';
import { RelayContext } from '@components/relaysProvider';
import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
import { ArrowLeft, EyeClose, EyeEmpty } from 'iconoir-react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
@ -95,7 +95,7 @@ export default function Page() {
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<div>
<h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
@ -131,9 +131,9 @@ export default function Page() {
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
>
{type === 'password' ? (
<EyeClosedIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
<EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
) : (
<EyeOpenIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
<EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
)}
</button>
</div>

4
src/pages/onboarding/create/step-2.tsx
View File

@ -6,8 +6,8 @@ import { UserBase } from '@components/user/base';
import { fetchMetadata } from '@utils/metadata';
import { followsTag } from '@utils/transform';
import { CheckCircledIcon } from '@radix-ui/react-icons';
import { createClient } from '@supabase/supabase-js';
import { CheckCircle } from 'iconoir-react';
import { useRouter } from 'next/router';
import { getEventHash, signEvent } from 'nostr-tools';
import {
@ -146,7 +146,7 @@ export default function Page() {
<UserBase pubkey={item.pubkey} />
{follows.includes(item.pubkey) && (
<div>
<CheckCircledIcon className="h-4 w-4 text-green-400" />
<CheckCircle width={16} height={16} className="text-zinc-400" />
</div>
)}
</button>

4
src/pages/onboarding/index.tsx
View File

@ -1,6 +1,6 @@
import BaseLayout from '@layouts/base';
import { ArrowRightIcon } from '@radix-ui/react-icons';
import { ArrowRight } from 'iconoir-react';
import Image from 'next/image';
import Link from 'next/link';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@ -115,7 +115,7 @@ export default function Page() {
className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
>
Create new key
<ArrowRightIcon className="h-5 w-5" />
<ArrowRight width={20} height={20} />
</Link>
<Link
href="/onboarding/login"

6
src/pages/onboarding/login/index.tsx
View File

@ -1,6 +1,6 @@
import BaseLayout from '@layouts/base';
import { ArrowLeftIcon, LightningBoltIcon } from '@radix-ui/react-icons';
import { ArrowLeft, CableTag } from 'iconoir-react';
import { useRouter } from 'next/router';
import { nip19 } from 'nostr-tools';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@ -64,7 +64,7 @@ export default function Page() {
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<div>
<h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
@ -80,7 +80,7 @@ export default function Page() {
{/* #TODO: add function */}
<button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-700 px-3.5 py-2.5 font-medium text-zinc-200 shadow-input ring-1 ring-zinc-600 active:translate-y-1">
{/* #TODO: change to nostr connect logo */}
<LightningBoltIcon className="h-5 w-5 text-fuchsia-500" />
<CableTag width={20} height={20} className="text-fuchsia-500" />
<span>Continue with Nostr Connect</span>
</button>
</div>