reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrated icons to radix-icons

Browse Source
This commit is contained in:
Ren Amamiya
2023-02-24 09:16:38 +07:00
parent c45ad04d87
commit f6d687cec9
36 changed files with 47 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/accountBar/index.tsx
View File

@@ -3,10 +3,10 @@ import { Account } from '@components/accountBar/account';
import { currentUser } from '@stores/currentUser';
import LumeIcon from '@assets/icons/Lume';
import MiniPlusIcon from '@assets/icons/MiniPlus';
import LumeSymbol from '@assets/icons/Lume';
import { useStore } from '@nanostores/react';
import { PlusIcon } from '@radix-ui/react-icons';
import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api';
@@ -28,18 +28,18 @@ export default function AccountBar() {
return (
<div className="flex h-full flex-col items-center justify-between px-2 pt-12 pb-4">
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-4">
{users.map((user, index) => (
<Account key={index} user={user} current={$currentUser.pubkey} />
))}
<Link
href="/onboarding"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-zinc-600 hover:border-zinc-400">
<MiniPlusIcon className="h-6 w-6 text-zinc-400 group-hover:text-zinc-200" />
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
</Link>
</div>
<div className="flex flex-col gap-4">
<LumeIcon className="h-8 w-auto text-zinc-700" />
<LumeSymbol className="h-8 w-auto text-zinc-700" />
</div>
</div>
);

11
src/components/empty.tsx
View File

@@ -1,7 +1,4 @@
import MiniMailIcon from '@assets/icons/MiniMail';
import MiniPlusIcon from '@assets/icons/MiniPlus';
import RefreshIcon from '@assets/icons/Refresh';
import { EnvelopeClosedIcon, PlusIcon, UpdateIcon } from '@radix-ui/react-icons';
import Image from 'next/image';
const sampleData = [
@@ -56,7 +53,7 @@ export default function Empty() {
placeholder="Enter an email"
/>
<button className="absolute right-0.5 top-1/2 inline-flex h-10 -translate-y-1/2 transform items-center gap-1 rounded-md border border-zinc-600 bg-zinc-700 px-4 text-sm font-medium text-zinc-200 shadow-md">
<MiniMailIcon className="h-4 w-4" />
<EnvelopeClosedIcon className="h-4 w-4" />
Invite
</button>
</form>
@@ -64,7 +61,7 @@ export default function Empty() {
<div className="mt-10 flex flex-col items-start gap-4">
<div className="flex w-full items-center justify-between">
<h3 className="text-sm font-medium text-zinc-500">Suggestions</h3>
<RefreshIcon className="h-4 w-4 text-zinc-600" />
<UpdateIcon className="h-4 w-4 text-zinc-600" />
</div>
<ul className="w-full divide-y divide-zinc-800 border-t border-b border-zinc-800">
{sampleData.map((person, index) => (
@@ -87,7 +84,7 @@ export default function Empty() {
<button
type="button"
className="inline-flex items-center rounded-full border border-zinc-700 bg-zinc-800 px-3 py-1 text-xs font-medium text-zinc-400 shadow-sm hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2">
<MiniPlusIcon className="-ml-1 h-5 w-5" />
<PlusIcon className="-ml-1 h-5 w-5" />
<span className="text-sm font-medium text-zinc-300">Follow</span>
</button>
</div>

8
src/components/navigatorBar/index.tsx
View File

@@ -2,7 +2,7 @@
import ActiveLink from '@components/activeLink';
import CreatePost from '@components/navigatorBar/createPost';
import PlusIcon from '@assets/icons/Plus';
import { PlusIcon } from '@radix-ui/react-icons';
export default function NavigatorBar() {
return (
@@ -10,7 +10,7 @@ export default function NavigatorBar() {
{/* main */}
<div className="flex flex-col gap-4">
{/* Create post */}
<div className="flex flex-col gap-2 rounded-lg bg-zinc-900 ring-1 ring-white/10">
<div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
<div className="p-2">
<CreatePost />
</div>
@@ -22,7 +22,7 @@ export default function NavigatorBar() {
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900">
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
<PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
</button>
</div>
<div className="flex flex-col gap-1 text-zinc-500">
@@ -49,7 +49,7 @@ export default function NavigatorBar() {
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900">
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
<PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
</button>
</div>
<div></div>

8
src/components/note/atoms/reaction.tsx
View File

@@ -1,10 +1,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { currentUser } from '@stores/currentUser';
import LikeIcon from '@assets/icons/Like';
import LikeSolidIcon from '@assets/icons/LikeSolid';
import { useStore } from '@nanostores/react';
import { HeartFilledIcon, HeartIcon } from '@radix-ui/react-icons';
import { dateToUnix, useNostr, useNostrEvents } from 'nostr-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useState } from 'react';
@@ -72,9 +70,9 @@ export default function Reaction({
className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
{isReact ? (
<LikeSolidIcon className="h-5 w-5 text-red-500" />
<HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" />
) : (
<LikeIcon className="h-5 w-5 group-hover:text-red-400" />
<HeartIcon className="h-4 w-4 text-zinc-500" />
)}
</div>
<span>{reaction}</span>

5
src/components/note/atoms/reply.tsx
View File

@@ -1,5 +1,4 @@
import ReplyIcon from '@assets/icons/Reply';
import { ChatBubbleIcon } from '@radix-ui/react-icons';
import { useNostrEvents } from 'nostr-react';
export default function Reply({ eventID }: { eventID: string }) {
@@ -15,7 +14,7 @@ export default function Reply({ eventID }: { eventID: string }) {
return (
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
<ReplyIcon className="h-5 w-5 group-hover:text-orange-400" />
<ChatBubbleIcon className="h-4 w-4 group-hover:text-orange-400" />
</div>
<span>{events.length || 0}</span>
</button>

5
src/components/note/atoms/user.tsx
View File

@@ -3,8 +3,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import MoreIcon from '@assets/icons/More';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import Avatar from 'boring-avatars';
import { useNostrEvents } from 'nostr-react';
import { memo, useEffect, useState } from 'react';
@@ -90,7 +89,7 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
</Moment>
</div>
<div>
<MoreIcon />
<DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
</div>
</div>
</div>

5
src/components/note/atoms/userWithUsername.tsx
View File

@@ -3,8 +3,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import MoreIcon from '@assets/icons/More';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import Avatar from 'boring-avatars';
import { useNostrEvents } from 'nostr-react';
import { memo, useEffect, useState } from 'react';
@@ -88,7 +87,7 @@ export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pub
</span>
</div>
<div>
<MoreIcon />
<DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
</div>
</div>
</div>

5
src/components/note/repost.tsx
View File

@@ -3,9 +3,8 @@ import { UserRepost } from '@components/note/atoms/userRepost';
import { Content } from '@components/note/content';
import { Placeholder } from '@components/note/placeholder';
import RepostIcon from '@assets/icons/Repost';
import * as Dialog from '@radix-ui/react-dialog';
import { LoopIcon } from '@radix-ui/react-icons';
import dynamic from 'next/dynamic';
import { useNostrEvents } from 'nostr-react';
import { memo } from 'react';
@@ -30,7 +29,7 @@ export const Repost = memo(function Repost({ root, user }: { root: any; user: st
<Dialog.Trigger>
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
<div className="flex items-center gap-1 pl-8 text-sm">
<RepostIcon className="h-4 w-4 text-zinc-400" />
<LoopIcon className="h-4 w-4 text-zinc-400" />
<div className="ml-2">
<UserRepost pubkey={user} />
</div>