From b4a132d4a2219c2783d5b5a2ef962b1829388001 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Thu, 2 Mar 2023 18:47:02 +0100 Subject: [PATCH] Move icons to svg file --- packages/app/public/icons.svg | 340 ++++++++++++++++++++ packages/app/src/Element/BackButton.tsx | 4 +- packages/app/src/Element/Collapsed.tsx | 4 +- packages/app/src/Element/Copy.tsx | 5 +- packages/app/src/Element/Invoice.css | 1 + packages/app/src/Element/Invoice.tsx | 4 +- packages/app/src/Element/Nip05.tsx | 4 +- packages/app/src/Element/Note.tsx | 7 +- packages/app/src/Element/NoteCreator.tsx | 4 +- packages/app/src/Element/NoteFooter.tsx | 50 ++- packages/app/src/Element/Reactions.tsx | 16 +- packages/app/src/Element/RelaysMetadata.tsx | 7 +- packages/app/src/Element/SendSats.tsx | 10 +- packages/app/src/Element/Timeline.tsx | 6 +- packages/app/src/Icons/ArrowBack.tsx | 15 - packages/app/src/Icons/ArrowFront.tsx | 9 - packages/app/src/Icons/ArrowUp.tsx | 15 - packages/app/src/Icons/Attachment.tsx | 15 - packages/app/src/Icons/Badge.tsx | 17 - packages/app/src/Icons/Bell.tsx | 15 - packages/app/src/Icons/Block.tsx | 15 - packages/app/src/Icons/Bookmark.tsx | 17 - packages/app/src/Icons/Check.tsx | 11 - packages/app/src/Icons/ChevronDown.tsx | 14 - packages/app/src/Icons/Close.tsx | 17 - packages/app/src/Icons/Copy.tsx | 17 - packages/app/src/Icons/Dislike.tsx | 17 - packages/app/src/Icons/Dots.tsx | 29 -- packages/app/src/Icons/Envelope.tsx | 17 - packages/app/src/Icons/Gear.tsx | 24 -- packages/app/src/Icons/Heart.tsx | 19 -- packages/app/src/Icons/Icon.tsx | 18 ++ packages/app/src/Icons/Index.css | 12 - packages/app/src/Icons/Json.tsx | 15 - packages/app/src/Icons/Link.tsx | 15 - packages/app/src/Icons/Logout.tsx | 15 - packages/app/src/Icons/Mute.tsx | 15 - packages/app/src/Icons/Pin.tsx | 14 - packages/app/src/Icons/Plus.tsx | 9 - packages/app/src/Icons/Profile.tsx | 17 - packages/app/src/Icons/Qr.tsx | 17 - packages/app/src/Icons/Read.tsx | 17 - packages/app/src/Icons/Relay.tsx | 17 - packages/app/src/Icons/Reply.tsx | 15 - packages/app/src/Icons/Repost.tsx | 17 - packages/app/src/Icons/Search.tsx | 15 - packages/app/src/Icons/Share.tsx | 15 - packages/app/src/Icons/Translate.tsx | 15 - packages/app/src/Icons/Trash.tsx | 17 - packages/app/src/Icons/Write.tsx | 17 - packages/app/src/Icons/Zap.tsx | 17 - packages/app/src/Icons/ZapCircle.tsx | 17 - packages/app/src/Icons/ZapFast.tsx | 17 - packages/app/src/Pages/Layout.tsx | 13 +- packages/app/src/Pages/ProfilePage.tsx | 15 +- 55 files changed, 419 insertions(+), 697 deletions(-) create mode 100644 packages/app/public/icons.svg delete mode 100644 packages/app/src/Icons/ArrowBack.tsx delete mode 100644 packages/app/src/Icons/ArrowFront.tsx delete mode 100644 packages/app/src/Icons/ArrowUp.tsx delete mode 100644 packages/app/src/Icons/Attachment.tsx delete mode 100644 packages/app/src/Icons/Badge.tsx delete mode 100644 packages/app/src/Icons/Bell.tsx delete mode 100644 packages/app/src/Icons/Block.tsx delete mode 100644 packages/app/src/Icons/Bookmark.tsx delete mode 100644 packages/app/src/Icons/Check.tsx delete mode 100644 packages/app/src/Icons/ChevronDown.tsx delete mode 100644 packages/app/src/Icons/Close.tsx delete mode 100644 packages/app/src/Icons/Copy.tsx delete mode 100644 packages/app/src/Icons/Dislike.tsx delete mode 100644 packages/app/src/Icons/Dots.tsx delete mode 100644 packages/app/src/Icons/Envelope.tsx delete mode 100644 packages/app/src/Icons/Gear.tsx delete mode 100644 packages/app/src/Icons/Heart.tsx create mode 100644 packages/app/src/Icons/Icon.tsx delete mode 100644 packages/app/src/Icons/Index.css delete mode 100644 packages/app/src/Icons/Json.tsx delete mode 100644 packages/app/src/Icons/Link.tsx delete mode 100644 packages/app/src/Icons/Logout.tsx delete mode 100644 packages/app/src/Icons/Mute.tsx delete mode 100644 packages/app/src/Icons/Pin.tsx delete mode 100644 packages/app/src/Icons/Plus.tsx delete mode 100644 packages/app/src/Icons/Profile.tsx delete mode 100644 packages/app/src/Icons/Qr.tsx delete mode 100644 packages/app/src/Icons/Read.tsx delete mode 100644 packages/app/src/Icons/Relay.tsx delete mode 100644 packages/app/src/Icons/Reply.tsx delete mode 100644 packages/app/src/Icons/Repost.tsx delete mode 100644 packages/app/src/Icons/Search.tsx delete mode 100644 packages/app/src/Icons/Share.tsx delete mode 100644 packages/app/src/Icons/Translate.tsx delete mode 100644 packages/app/src/Icons/Trash.tsx delete mode 100644 packages/app/src/Icons/Write.tsx delete mode 100644 packages/app/src/Icons/Zap.tsx delete mode 100644 packages/app/src/Icons/ZapCircle.tsx delete mode 100644 packages/app/src/Icons/ZapFast.tsx diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg new file mode 100644 index 0000000..59a3a98 --- /dev/null +++ b/packages/app/public/icons.svg @@ -0,0 +1,340 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/app/src/Element/BackButton.tsx b/packages/app/src/Element/BackButton.tsx index e9252e1..05186c6 100644 --- a/packages/app/src/Element/BackButton.tsx +++ b/packages/app/src/Element/BackButton.tsx @@ -1,7 +1,7 @@ import "./BackButton.css"; import { useIntl } from "react-intl"; -import ArrowBack from "Icons/ArrowBack"; +import Icon from "Icons/Icon"; import messages from "./messages"; @@ -20,7 +20,7 @@ const BackButton = ({ text, onClick }: BackButtonProps) => { return ( ); diff --git a/packages/app/src/Element/Collapsed.tsx b/packages/app/src/Element/Collapsed.tsx index 0459376..26b20b7 100644 --- a/packages/app/src/Element/Collapsed.tsx +++ b/packages/app/src/Element/Collapsed.tsx @@ -1,6 +1,6 @@ import { useState, ReactNode } from "react"; -import ChevronDown from "Icons/ChevronDown"; +import Icon from "Icons/Icon"; import ShowMore from "Element/ShowMore"; interface CollapsedProps { @@ -38,7 +38,7 @@ export const CollapsedSection = ({ title, children }: CollapsedSectionProps) => const [collapsed, setCollapsed] = useState(true); const icon = (
setCollapsed(!collapsed)}> - +
); return ( diff --git a/packages/app/src/Element/Copy.tsx b/packages/app/src/Element/Copy.tsx index 19f79cb..7d05ba6 100644 --- a/packages/app/src/Element/Copy.tsx +++ b/packages/app/src/Element/Copy.tsx @@ -1,6 +1,5 @@ import "./Copy.css"; -import Check from "Icons/Check"; -import CopyIcon from "Icons/Copy"; +import Icon from "Icons/Icon"; import { useCopy } from "useCopy"; export interface CopyProps { @@ -16,7 +15,7 @@ export default function Copy({ text, maxSize = 32 }: CopyProps) {
copy(text)}> {trimmed} - {copied ? : } + {copied ? : }
); diff --git a/packages/app/src/Element/Invoice.css b/packages/app/src/Element/Invoice.css index a2e88c5..e2eade8 100644 --- a/packages/app/src/Element/Invoice.css +++ b/packages/app/src/Element/Invoice.css @@ -85,4 +85,5 @@ position: absolute; top: 26px; right: 20px; + color: var(--font-color); } diff --git a/packages/app/src/Element/Invoice.tsx b/packages/app/src/Element/Invoice.tsx index 85539bf..8665613 100644 --- a/packages/app/src/Element/Invoice.tsx +++ b/packages/app/src/Element/Invoice.tsx @@ -4,7 +4,7 @@ import { useIntl, FormattedMessage } from "react-intl"; import { decode as invoiceDecode } from "light-bolt11-decoder"; import { useMemo } from "react"; import SendSats from "Element/SendSats"; -import ZapCircle from "Icons/ZapCircle"; +import Icon from "Icons/Icon"; import useWebln from "Hooks/useWebln"; import messages from "./messages"; @@ -58,7 +58,7 @@ export default function Invoice(props: InvoiceProps) {

- + { {domain} - + )} diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx index b858572..fc907c1 100644 --- a/packages/app/src/Element/Note.tsx +++ b/packages/app/src/Element/Note.tsx @@ -6,8 +6,7 @@ import { useInView } from "react-intersection-observer"; import { useIntl, FormattedMessage } from "react-intl"; import useEventPublisher from "Feed/EventPublisher"; -import Bookmark from "Icons/Bookmark"; -import Pin from "Icons/Pin"; +import Icon from "Icons/Icon"; import { parseZap } from "Element/Zap"; import ProfileImage from "Element/ProfileImage"; import Text from "Element/Text"; @@ -274,7 +273,7 @@ export default function Note(props: NoteProps) {
{options.showBookmarked && (
unbookmark(ev.Id)}> - +
)} {!options.showBookmarked && } @@ -282,7 +281,7 @@ export default function Note(props: NoteProps) { )} {options.showPinned && (
unpin(ev.Id)}> - +
)}
diff --git a/packages/app/src/Element/NoteCreator.tsx b/packages/app/src/Element/NoteCreator.tsx index 638067e..013427f 100644 --- a/packages/app/src/Element/NoteCreator.tsx +++ b/packages/app/src/Element/NoteCreator.tsx @@ -2,7 +2,7 @@ import "./NoteCreator.css"; import { useState } from "react"; import { FormattedMessage } from "react-intl"; -import Attachment from "Icons/Attachment"; +import Icon from "Icons/Icon"; import useEventPublisher from "Feed/EventPublisher"; import { openFile } from "Util"; import Textarea from "Element/Textarea"; @@ -113,7 +113,7 @@ export function NoteCreator(props: NoteCreatorProps) { onFocus={() => setActive(true)} /> {hasErrors && {error}} diff --git a/packages/app/src/Element/NoteFooter.tsx b/packages/app/src/Element/NoteFooter.tsx index f4b3b9b..c41b15e 100644 --- a/packages/app/src/Element/NoteFooter.tsx +++ b/packages/app/src/Element/NoteFooter.tsx @@ -4,21 +4,8 @@ import { useIntl, FormattedMessage } from "react-intl"; import { Menu, MenuItem } from "@szhsin/react-menu"; import { useLongPress } from "use-long-press"; -import Bookmark from "Icons/Bookmark"; -import Pin from "Icons/Pin"; -import Json from "Icons/Json"; -import Repost from "Icons/Repost"; -import Trash from "Icons/Trash"; -import Translate from "Icons/Translate"; -import Block from "Icons/Block"; -import Mute from "Icons/Mute"; -import Share from "Icons/Share"; -import Copy from "Icons/Copy"; -import Dislike from "Icons/Dislike"; -import Heart from "Icons/Heart"; -import Dots from "Icons/Dots"; -import Zap from "Icons/Zap"; -import Reply from "Icons/Reply"; +import Icon from "Icons/Icon"; + import { formatShort } from "Number"; import useEventPublisher from "Feed/EventPublisher"; import { hexToBech32, normalizeReaction, unwrap } from "Util"; @@ -35,7 +22,6 @@ import { TranslateHost } from "Const"; import useWebln from "Hooks/useWebln"; import { LNURL } from "LNURL"; import Spinner from "Icons/Spinner"; -import ZapFast from "Icons/ZapFast"; import messages from "./messages"; @@ -149,7 +135,7 @@ export default function NoteFooter(props: NoteFooterProps) { return ( <>
fastZap(e)}> -
{zapping ? : webln?.enabled ? : }
+
{zapping ? : webln?.enabled ? : }
{zapTotal > 0 &&
{formatShort(zapTotal)}
}
@@ -162,7 +148,7 @@ export default function NoteFooter(props: NoteFooterProps) { return (
repost()}>
- +
{reposts.length > 0 &&
{formatShort(reposts.length)}
}
@@ -179,7 +165,7 @@ export default function NoteFooter(props: NoteFooterProps) { className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `} onClick={() => react(prefs.reactionEmoji)}>
- +
{formatShort(positive.length)}
@@ -256,56 +242,56 @@ export default function NoteFooter(props: NoteFooterProps) { setShowReactions(true)}> - + share()}> - + {!pinned.includes(ev.Id) && ( pin(ev.Id)}> - + )} {!bookmarked.includes(ev.Id) && ( bookmark(ev.Id)}> - + )} copyId()}> - + mute(ev.PubKey)}> - + {prefs.enableReactions && ( react("-")}> - + )} block(ev.PubKey)}> - + translate()}> - + {prefs.showDebugMenus && ( copyEvent()}> - + )} {isMine && ( deleteEvent()}> - + )} @@ -321,14 +307,14 @@ export default function NoteFooter(props: NoteFooterProps) { {reactionIcons()}
setReply(s => !s)}>
- +
- +
} diff --git a/packages/app/src/Element/Reactions.tsx b/packages/app/src/Element/Reactions.tsx index 420d886..6d464b7 100644 --- a/packages/app/src/Element/Reactions.tsx +++ b/packages/app/src/Element/Reactions.tsx @@ -6,15 +6,11 @@ import { useIntl, FormattedMessage } from "react-intl"; import { TaggedRawEvent } from "@snort/nostr"; import { formatShort } from "Number"; -import Repost from "Icons/Repost"; -import Dislike from "Icons/Dislike"; -import Heart from "Icons/Heart"; -import ZapIcon from "Icons/Zap"; +import Icon from "Icons/Icon"; import { Tab } from "Element/Tabs"; import { ParsedZap } from "Element/Zap"; import ProfileImage from "Element/ProfileImage"; import Tabs from "Element/Tabs"; -import Close from "Icons/Close"; import Modal from "Element/Modal"; import messages from "./messages"; @@ -81,7 +77,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
- +

@@ -95,7 +91,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio return (
- {ev.content === "+" ? : ev.content} + {ev.content === "+" ? : ev.content}
@@ -107,7 +103,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio z.zapper && (
- + {formatShort(z.amount)}
- +
@@ -140,7 +136,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio return (
- +
diff --git a/packages/app/src/Element/RelaysMetadata.tsx b/packages/app/src/Element/RelaysMetadata.tsx index 6e63279..4152c67 100644 --- a/packages/app/src/Element/RelaysMetadata.tsx +++ b/packages/app/src/Element/RelaysMetadata.tsx @@ -3,8 +3,7 @@ import Nostrich from "nostrich.webp"; import { useState } from "react"; import { FullRelaySettings } from "@snort/nostr"; -import Read from "Icons/Read"; -import Write from "Icons/Write"; +import Icon from "Icons/Icon"; const RelayFavicon = ({ url }: { url: string }) => { const cleanUrl = url @@ -30,8 +29,8 @@ const RelaysMetadata = ({ relays }: RelaysMetadataProps) => { {url}
- - + +

); diff --git a/packages/app/src/Element/SendSats.tsx b/packages/app/src/Element/SendSats.tsx index f4c76ba..0769ca5 100644 --- a/packages/app/src/Element/SendSats.tsx +++ b/packages/app/src/Element/SendSats.tsx @@ -6,9 +6,7 @@ import { useSelector } from "react-redux"; import { formatShort } from "Number"; import { Event, HexKey, Tag } from "@snort/nostr"; import { RootState } from "State/Store"; -import Check from "Icons/Check"; -import Zap from "Icons/Zap"; -import Close from "Icons/Close"; +import Icon from "Icons/Icon"; import useEventPublisher from "Feed/EventPublisher"; import ProfileImage from "Element/ProfileImage"; import Modal from "Element/Modal"; @@ -259,7 +257,7 @@ export default function SendSats(props: SendSatsProps) { {(amount ?? 0) > 0 && ( diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx index 6989e91..239f3fb 100644 --- a/packages/app/src/Pages/ProfilePage.tsx +++ b/packages/app/src/Pages/ProfilePage.tsx @@ -11,10 +11,7 @@ import Note from "Element/Note"; import Bookmarks from "Element/Bookmarks"; import RelaysMetadata from "Element/RelaysMetadata"; import { Tab, TabElement } from "Element/Tabs"; -import Link from "Icons/Link"; -import Qr from "Icons/Qr"; -import Zap from "Icons/Zap"; -import Envelope from "Icons/Envelope"; +import Icon from "Icons/Icon"; import useMutedFeed from "Feed/MuteList"; import useRelaysFeed from "Feed/RelaysFeed"; import usePinnedFeed from "Feed/PinnedFeed"; @@ -142,7 +139,7 @@ export default function ProfilePage() { {user?.website && (