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

migrated some icons to central-icon

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-29 12:26:03 +07:00
parent 5cf5bfbcde
commit e3b74b791a
12 changed files with 110 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/channel/components/createModal.tsx
View File

@ -1,4 +1,6 @@
import { AvatarUploader } from '@lume/shared/avatarUploader';
import CancelIcon from '@lume/shared/icons/cancel';
import PlusIcon from '@lume/shared/icons/plus';
import { RelayContext } from '@lume/shared/relayProvider';
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
@ -6,7 +8,6 @@ import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { createChannel } from '@lume/utils/storage';
import { Dialog, Transition } from '@headlessui/react';
import { Cancel, Plus } from 'iconoir-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { Fragment, useContext, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
@ -84,7 +85,7 @@ export default function ChannelCreateModal() {
className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
>
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
<Plus width={12} height={12} className="text-zinc-500" />
<PlusIcon 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>
@ -129,7 +130,7 @@ export default function ChannelCreateModal() {
autoFocus={false}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<Cancel width={20} height={20} className="text-zinc-300" />
<CancelIcon width={20} height={20} className="text-zinc-300" />
</button>
</div>
<Dialog.Description className="leading-tight text-zinc-400">

4
src/app/channel/components/messages/form.tsx
View File

@ -1,12 +1,12 @@
import UserReply from '@lume/app/channel/components/messages/userReply';
import { ImagePicker } from '@lume/shared/form/imagePicker';
import CancelIcon from '@lume/shared/icons/cancel';
import { RelayContext } from '@lume/shared/relayProvider';
import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { Cancel } from 'iconoir-react';
import { useAtom, useAtomValue } from 'jotai';
import { useResetAtom } from 'jotai/utils';
import { getEventHash, signEvent } from 'nostr-tools';
@ -87,7 +87,7 @@ export default function ChannelMessageForm({ channelID }: { channelID: string |
onClick={() => stopReply()}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
>
<Cancel width={12} height={12} className="text-zinc-100" />
<CancelIcon width={12} height={12} className="text-zinc-100" />
</button>
</div>
</div>

10
src/shared/appHeader.tsx
View File

@ -1,4 +1,6 @@
import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
import ArrowLeftIcon from '@lume/shared/icons/arrowLeft';
import ArrowRightIcon from '@lume/shared/icons/arrowRight';
import RefreshIcon from '@lume/shared/icons/refresh';
let platformName = 'darwin';
@ -27,19 +29,19 @@ export default function AppHeader() {
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
<ArrowLeftIcon 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"
>
<ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
<ArrowRightIcon 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"
>
<Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
<RefreshIcon width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
</div>
<div data-tauri-drag-region className="flex h-full w-full items-center justify-between">

4
src/shared/form/imagePicker.tsx
View File

@ -1,3 +1,4 @@
import PlusIcon from '@lume/shared/icons/plus';
import { channelContentAtom } from '@lume/stores/channel';
import { chatContentAtom } from '@lume/stores/chat';
import { noteContentAtom } from '@lume/stores/note';
@ -5,7 +6,6 @@ import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
import { open } from '@tauri-apps/api/dialog';
import { Body, fetch } from '@tauri-apps/api/http';
import { Plus } from 'iconoir-react';
import { useSetAtom } from 'jotai';
import { useState } from 'react';
@ -89,7 +89,7 @@ export const ImagePicker = ({ type }: { type: string }) => {
></path>
</svg>
) : (
<Plus width={16} height={16} className="text-zinc-400" />
<PlusIcon width={16} height={16} className="text-zinc-400" />
)}
</button>
);

15
src/shared/icons/arrowLeft.tsx Normal file
View File

@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function ArrowLeftIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M10 18.25L3.75 12M3.75 12L10 5.75M3.75 12H20.25"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

15
src/shared/icons/arrowRight.tsx Normal file
View File

@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function ArrowRightIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M14 5.75L20.25 12M20.25 12L14 18.25M20.25 12H3.75"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

14
src/shared/icons/cancel.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SVGProps } from 'react';
export default function CancelIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M4.75 4.75L19.25 19.25M19.25 4.75L4.75 19.25"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
/>
</svg>
);
}

12
src/shared/icons/navArrowDown.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SVGProps } from 'react';
export default function NavArrowDownIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M4.29233 7.97419C3.37989 6.14866 4.70668 4 6.74799 4H17.2519C19.2932 4 20.62 6.14866 19.7076 7.97419L14.4556 18.4819C13.4439 20.5061 10.556 20.506 9.54431 18.4819L4.29233 7.97419Z"
fill="currentColor"
/>
</svg>
);
}

15
src/shared/icons/plus.tsx Normal file
View File

@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function PlusIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M12 3.75V12M12 12V20.25M12 12H3.75M12 12H20.25"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

14
src/shared/icons/refresh.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SVGProps } from 'react';
export default function RefreshIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.979 4.5C7.83687 4.5 4.479 7.85786 4.479 12C4.479 16.1421 7.83687 19.5 11.979 19.5C15.2434 19.5 18.0225 17.4141 19.0524 14.5001C19.1905 14.1095 19.619 13.9048 20.0095 14.0429C20.4 14.1809 20.6047 14.6094 20.4667 14.9999C19.2315 18.4945 15.8988 21 11.979 21C7.00844 21 2.979 16.9706 2.979 12C2.979 7.02944 7.00844 3 11.979 3C13.709 3 15.1419 3.42256 16.4191 4.20651C17.1663 4.6651 17.8487 5.24046 18.5 5.90708V4C18.5 3.58579 18.8358 3.25 19.25 3.25C19.6642 3.25 20 3.58579 20 4V8C20 8.41421 19.6642 8.75 19.25 8.75H15.25C14.8358 8.75 14.5 8.41421 14.5 8C14.5 7.58579 14.8358 7.25 15.25 7.25H17.7068C17.0285 6.51595 16.3546 5.92693 15.6345 5.4849C14.6015 4.85088 13.4417 4.5 11.979 4.5Z"
fill="currentColor"
/>
</svg>
);
}

4
src/shared/multiAccounts.tsx
View File

@ -1,10 +1,10 @@
import ActiveAccount from '@lume/shared/accounts/active';
import InactiveAccount from '@lume/shared/accounts/inactive';
import LumeIcon from '@lume/shared/icons/lume';
import PlusIcon from '@lume/shared/icons/plus';
import { APP_VERSION } from '@lume/stores/constants';
import { getAccounts } from '@lume/utils/storage';
import { Plus } from 'iconoir-react';
import useSWR from 'swr';
const fetcher = () => getAccounts();
@ -39,7 +39,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"
>
<Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
<PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</a>
</div>
<div className="flex flex-col gap-0.5 text-center">

18
src/shared/navigation.tsx
View File

@ -1,9 +1,9 @@
import ChannelsList from '@lume/app/channel/components/list';
import ChatsList from '@lume/app/chat/components/list';
import ActiveLink from '@lume/shared/activeLink';
import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
import { Disclosure } from '@headlessui/react';
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
export default function Navigation() {
return (
@ -15,10 +15,10 @@ export default function Navigation() {
<Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
<div
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
open ? '' : 'rotate-180'
}`}
>
<NavArrowUp width={16} height={16} className="text-zinc-700" />
<NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
</Disclosure.Button>
@ -28,7 +28,7 @@ export default function Navigation() {
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
>
<PeopleTag width={16} height={16} className="text-zinc-500" />
<span>#</span>
<span>Following</span>
</ActiveLink>
<ActiveLink
@ -36,7 +36,7 @@ export default function Navigation() {
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
>
<Bonfire width={16} height={16} className="text-zinc-500" />
<span>#</span>
<span>Circle</span>
</ActiveLink>
</Disclosure.Panel>
@ -50,10 +50,10 @@ export default function Navigation() {
<Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
<div
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
open ? '' : 'rotate-180'
}`}
>
<NavArrowUp width={16} height={16} className="text-zinc-700" />
<NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
</Disclosure.Button>
@ -70,10 +70,10 @@ export default function Navigation() {
<Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
<div
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
open ? '' : 'rotate-180'
}`}
>
<NavArrowUp width={16} height={16} className="text-zinc-700" />
<NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
</Disclosure.Button>