From 44d39014e9aa133f351e78901bb7fb549071d2cd Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Mon, 12 May 2025 17:54:23 -0400 Subject: [PATCH] split out icons into seperate files The theory is this will improve build times? We'll see... --- app/home/AccountSettings.tsx | 3 +- app/home/CreateNewButton.tsx | 10 +- app/home/HomeHelp.tsx | 2 +- app/home/LeafletOptions.tsx | 12 +- app/home/LeafletPreview.tsx | 2 +- app/lish/Footer.tsx | 2 +- app/lish/Subscribe.tsx | 3 +- .../[publication]/CallToActionButton.tsx | 2 +- app/login/LoginForm.tsx | 5 +- app/templates/TemplateList.tsx | 2 +- app/templates/page.tsx | 2 +- components/Blocks/Block.tsx | 4 +- components/Blocks/BlockCommands.tsx | 37 +- .../Blocks/BlueskyPostBlock/BlueskyEmpty.tsx | 4 +- components/Blocks/BlueskyPostBlock/index.tsx | 4 +- components/Blocks/ButtonBlock.tsx | 11 +- components/Blocks/DateTimeBlock.tsx | 3 +- components/Blocks/DeleteBlock.tsx | 2 +- components/Blocks/EmbedBlock.tsx | 3 +- components/Blocks/ExternalLinkBlock.tsx | 3 +- components/Blocks/ImageBlock.tsx | 2 +- components/Blocks/MailboxBlock.tsx | 39 +- components/Blocks/PollBlock.tsx | 4 +- .../Blocks/RSVPBlock/ContactDetailsForm.tsx | 2 +- components/Blocks/RSVPBlock/SendUpdate.tsx | 20 +- components/Blocks/TextBlock/index.tsx | 4 +- components/Buttons.tsx | 3 +- components/Canvas.tsx | 9 +- components/Checkbox.tsx | 53 +- components/HelpPopover.tsx | 3 +- components/HomeButton.tsx | 3 +- components/Icons.tsx | 1636 ----------------- components/Icons/AccountSmall.tsx | 21 + components/Icons/AddBlockLarge.tsx | 21 + components/Icons/AddSmall.tsx | 21 + components/Icons/AddTiny.tsx | 21 + components/Icons/AddToHomeSmall.tsx | 20 + components/Icons/ArrowDownTiny.tsx | 21 + components/Icons/ArrowRightTiny.tsx | 21 + components/Icons/BackToLeafletSmall.tsx | 0 components/Icons/BlockBlueskySmall.tsx | 19 + components/Icons/BlockButtonSmall.tsx | 20 + components/Icons/BlockCalendarSmall.tsx | 27 + components/Icons/BlockCanvasPageSmall.tsx | 21 + components/Icons/BlockDocPageSmall.tsx | 21 + components/Icons/BlockEmbedSmall.tsx | 21 + components/Icons/BlockImageSmall.tsx | 21 + components/Icons/BlockMailboxSmall.tsx | 21 + components/Icons/BlockPollSmall.tsx | 21 + components/Icons/BlockRSVPSmall.tsx | 21 + components/Icons/BlockTextSmall.tsx | 79 + components/Icons/BlueskySmall.tsx | 18 + components/Icons/BlueskyTiny.tsx | 21 + components/Icons/CheckTiny.tsx | 21 + components/Icons/CheckboxChecked.tsx | 21 + components/Icons/CheckboxEmpty.tsx | 21 + components/Icons/CloseContrastSmall.tsx | 25 + components/Icons/CloseTiny.tsx | 21 + components/Icons/CommentTiny.tsx | 21 + components/Icons/DeleteSmall.tsx | 21 + components/Icons/HelpSmall.tsx | 21 + components/Icons/HideSmall.tsx | 21 + components/Icons/HomeSmall.tsx | 21 + components/Icons/InfoSmall.tsx | 21 + components/Icons/LinkSmall.tsx | 21 + components/Icons/LockTiny.tsx | 21 + components/Icons/LogoSmall.tsx | 30 + components/Icons/LogoutSmall.tsx | 21 + components/Icons/MoreOptionsTiny.tsx | 21 + components/Icons/PaintSmall.tsx | 21 + components/Icons/PopoverArrow.tsx | 27 + components/Icons/Props.ts | 2 + components/Icons/ShareSmall.tsx | 21 + components/Icons/TemplateRemoveSmall.tsx | 21 + components/Icons/TemplateSmall.tsx | 25 + components/Icons/TrashSmall.tsx | 1 + components/Layout.tsx | 8 +- components/LoginButton.tsx | 3 +- components/Pages/index.tsx | 61 +- components/Popover.tsx | 2 +- components/ShareOptions/DomainOptions.tsx | 2 +- components/ShareOptions/index.tsx | 2 +- components/ThemeManager/PageThemeSetter.tsx | 3 +- components/ThemeManager/ThemeSetter.tsx | 13 +- components/Toast.tsx | 2 +- components/Toolbar/BlockToolbar.tsx | 40 +- components/Toolbar/HighlightToolbar.tsx | 40 +- components/Toolbar/ImageToolbar.tsx | 45 +- components/Toolbar/InlineLinkToolbar.tsx | 3 +- components/Toolbar/ListToolbar.tsx | 94 +- components/Toolbar/LockBlockButton.tsx | 43 +- components/Toolbar/MultiSelectToolbar.tsx | 43 +- components/Toolbar/TextAlignmentToolbar.tsx | 64 +- components/Toolbar/TextBlockTypeToolbar.tsx | 24 +- components/Toolbar/TextToolbar.tsx | 59 +- components/Toolbar/index.tsx | 2 +- components/Watermark.tsx | 3 +- 97 files changed, 1560 insertions(+), 1834 deletions(-) delete mode 100644 components/Icons.tsx create mode 100644 components/Icons/AccountSmall.tsx create mode 100644 components/Icons/AddBlockLarge.tsx create mode 100644 components/Icons/AddSmall.tsx create mode 100644 components/Icons/AddTiny.tsx create mode 100644 components/Icons/AddToHomeSmall.tsx create mode 100644 components/Icons/ArrowDownTiny.tsx create mode 100644 components/Icons/ArrowRightTiny.tsx create mode 100644 components/Icons/BackToLeafletSmall.tsx create mode 100644 components/Icons/BlockBlueskySmall.tsx create mode 100644 components/Icons/BlockButtonSmall.tsx create mode 100644 components/Icons/BlockCalendarSmall.tsx create mode 100644 components/Icons/BlockCanvasPageSmall.tsx create mode 100644 components/Icons/BlockDocPageSmall.tsx create mode 100644 components/Icons/BlockEmbedSmall.tsx create mode 100644 components/Icons/BlockImageSmall.tsx create mode 100644 components/Icons/BlockMailboxSmall.tsx create mode 100644 components/Icons/BlockPollSmall.tsx create mode 100644 components/Icons/BlockRSVPSmall.tsx create mode 100644 components/Icons/BlockTextSmall.tsx create mode 100644 components/Icons/BlueskySmall.tsx create mode 100644 components/Icons/BlueskyTiny.tsx create mode 100644 components/Icons/CheckTiny.tsx create mode 100644 components/Icons/CheckboxChecked.tsx create mode 100644 components/Icons/CheckboxEmpty.tsx create mode 100644 components/Icons/CloseContrastSmall.tsx create mode 100644 components/Icons/CloseTiny.tsx create mode 100644 components/Icons/CommentTiny.tsx create mode 100644 components/Icons/DeleteSmall.tsx create mode 100644 components/Icons/HelpSmall.tsx create mode 100644 components/Icons/HideSmall.tsx create mode 100644 components/Icons/HomeSmall.tsx create mode 100644 components/Icons/InfoSmall.tsx create mode 100644 components/Icons/LinkSmall.tsx create mode 100644 components/Icons/LockTiny.tsx create mode 100644 components/Icons/LogoSmall.tsx create mode 100644 components/Icons/LogoutSmall.tsx create mode 100644 components/Icons/MoreOptionsTiny.tsx create mode 100644 components/Icons/PaintSmall.tsx create mode 100644 components/Icons/PopoverArrow.tsx create mode 100644 components/Icons/Props.ts create mode 100644 components/Icons/ShareSmall.tsx create mode 100644 components/Icons/TemplateRemoveSmall.tsx create mode 100644 components/Icons/TemplateSmall.tsx create mode 100644 components/Icons/TrashSmall.tsx diff --git a/app/home/AccountSettings.tsx b/app/home/AccountSettings.tsx index 1a307da7..d71954ef 100644 --- a/app/home/AccountSettings.tsx +++ b/app/home/AccountSettings.tsx @@ -1,10 +1,11 @@ "use client"; import { ActionButton } from "components/ActionBar/ActionButton"; -import { AccountSmall, LogoutSmall } from "components/Icons"; import { Menu, MenuItem } from "components/Layout"; import { logout } from "actions/logout"; import { mutate } from "swr"; +import { AccountSmall } from "components/Icons/AccountSmall"; +import { LogoutSmall } from "components/Icons/LogoutSmall"; // it was going have a popover with a log out button export const AccountSettings = () => { diff --git a/app/home/CreateNewButton.tsx b/app/home/CreateNewButton.tsx index bcf40749..f5f72bd9 100644 --- a/app/home/CreateNewButton.tsx +++ b/app/home/CreateNewButton.tsx @@ -3,12 +3,10 @@ import { createNewLeaflet } from "actions/createNewLeaflet"; import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; import { ActionButton } from "components/ActionBar/ActionButton"; -import { - AddTiny, - BlockCanvasPageSmall, - BlockDocPageSmall, - TemplateSmall, -} from "components/Icons"; +import { AddTiny } from "components/Icons/AddTiny"; +import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall"; +import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; +import { TemplateSmall } from "components/Icons/TemplateSmall"; import { Menu, MenuItem } from "components/Layout"; import { useIsMobile } from "src/hooks/isMobile"; import { create } from "zustand"; diff --git a/app/home/HomeHelp.tsx b/app/home/HomeHelp.tsx index 55c2998a..83c5d3d5 100644 --- a/app/home/HomeHelp.tsx +++ b/app/home/HomeHelp.tsx @@ -1,6 +1,6 @@ "use client"; -import { HelpSmall } from "components/Icons"; import { ActionButton } from "components/ActionBar/ActionButton"; +import { HelpSmall } from "components/Icons/HelpSmall"; import { Popover } from "components/Popover"; export const HomeHelp = () => { diff --git a/app/home/LeafletOptions.tsx b/app/home/LeafletOptions.tsx index 7eabfc0c..a14fb025 100644 --- a/app/home/LeafletOptions.tsx +++ b/app/home/LeafletOptions.tsx @@ -1,11 +1,5 @@ "use client"; -import { - DeleteSmall, - HideSmall, - MoreOptionsTiny, - TemplateRemoveSmall, - TemplateSmall, -} from "components/Icons"; + import { Menu, MenuItem } from "components/Layout"; import { PermissionToken } from "src/replicache"; import { hideDoc } from "./storage"; @@ -16,6 +10,10 @@ import { Item } from "@radix-ui/react-dropdown-menu"; import { useSmoker } from "components/Toast"; import { removeLeafletFromHome } from "actions/removeLeafletFromHome"; import { useIdentityData } from "components/IdentityProvider"; +import { HideSmall } from "components/Icons/HideSmall"; +import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; +import { TemplateRemoveSmall } from "components/Icons/TemplateRemoveSmall"; +import { TemplateSmall } from "components/Icons/TemplateSmall"; export const LeafletOptions = (props: { leaflet: PermissionToken; diff --git a/app/home/LeafletPreview.tsx b/app/home/LeafletPreview.tsx index 61d4f5a5..4f315833 100644 --- a/app/home/LeafletPreview.tsx +++ b/app/home/LeafletPreview.tsx @@ -18,12 +18,12 @@ import { mutate } from "swr"; import { ButtonPrimary } from "components/Buttons"; import { LeafletOptions } from "./LeafletOptions"; import { CanvasContent } from "components/Canvas"; -import { TemplateSmall } from "components/Icons"; import { theme } from "tailwind.config"; import { useTemplateState } from "./CreateNewButton"; import styles from "./LeafletPreview.module.css"; import { useRouter } from "next/navigation"; import Link from "next/link"; +import { TemplateSmall } from "components/Icons/TemplateSmall"; export const LeafletPreview = (props: { index: number; diff --git a/app/lish/Footer.tsx b/app/lish/Footer.tsx index 14fe34a1..65ea0460 100644 --- a/app/lish/Footer.tsx +++ b/app/lish/Footer.tsx @@ -1,5 +1,4 @@ "use client"; -import { MoreOptionsTiny } from "components/Icons"; import { Menu, MenuItem } from "components/Layout"; import { useEffect, useState } from "react"; import { SubscribeButton } from "./Subscribe"; @@ -7,6 +6,7 @@ import Link from "next/link"; import { ButtonPrimary } from "components/Buttons"; import { usePublicationRelationship } from "./[handle]/[publication]/usePublicationRelationship"; import { usePublicationContext } from "components/Providers/PublicationContext"; +import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; export const Footer = (props: { pageType: "post" | "pub" }) => { return ( diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx index 6f70ebba..35c6bc88 100644 --- a/app/lish/Subscribe.tsx +++ b/app/lish/Subscribe.tsx @@ -1,6 +1,5 @@ "use client"; import { ButtonPrimary } from "components/Buttons"; -import { ArrowRightTiny, ShareSmall } from "components/Icons"; import { useEffect, useState } from "react"; import { Input } from "components/Input"; import { useIdentityData } from "components/IdentityProvider"; @@ -10,6 +9,8 @@ import { requestAuthEmailToken, } from "actions/emailAuth"; import { subscribeToPublicationWithEmail } from "actions/subscribeToPublicationWithEmail"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { ShareSmall } from "components/Icons/ShareSmall"; type State = | { state: "email" } diff --git a/app/lish/[handle]/[publication]/CallToActionButton.tsx b/app/lish/[handle]/[publication]/CallToActionButton.tsx index efc5897c..3c73e65f 100644 --- a/app/lish/[handle]/[publication]/CallToActionButton.tsx +++ b/app/lish/[handle]/[publication]/CallToActionButton.tsx @@ -5,9 +5,9 @@ import { usePublicationRelationship } from "./usePublicationRelationship"; import { usePublicationContext } from "components/Providers/PublicationContext"; import { NewDraftButton } from "./NewDraftButton"; import { Menu, MenuItem } from "components/Layout"; -import { ArrowRightTiny, MoreOptionsTiny, ShareSmall } from "components/Icons"; import { useIdentityData } from "components/IdentityProvider"; import { unsubscribeFromPublication } from "actions/unsubscribeFromPublication"; +import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; export function CallToActionButton() { let rel = usePublicationRelationship(); diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx index e8fb8f0c..541c7cbc 100644 --- a/app/login/LoginForm.tsx +++ b/app/login/LoginForm.tsx @@ -6,8 +6,9 @@ import { import { loginWithEmailToken } from "actions/login"; import { getHomeDocs } from "app/home/storage"; import { ButtonPrimary } from "components/Buttons"; -import { ArrowRightTiny, BlueskySmall } from "components/Icons"; -import { InputWithLabel, Input } from "components/Input"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { BlueskySmall } from "components/Icons/BlueskySmall"; +import { Input } from "components/Input"; import { useSmoker, useToaster } from "components/Toast"; import React, { useState } from "react"; import useSWR, { mutate } from "swr"; diff --git a/app/templates/TemplateList.tsx b/app/templates/TemplateList.tsx index 643859c1..908fa738 100644 --- a/app/templates/TemplateList.tsx +++ b/app/templates/TemplateList.tsx @@ -4,7 +4,7 @@ import { ButtonPrimary } from "components/Buttons"; import Image from "next/image"; import Link from "next/link"; import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate"; -import { AddTiny } from "components/Icons"; +import { AddTiny } from "components/Icons/AddTiny"; export function LeafletTemplate(props: { title: string; diff --git a/app/templates/page.tsx b/app/templates/page.tsx index dd635f87..12603528 100644 --- a/app/templates/page.tsx +++ b/app/templates/page.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import { TemplateListExamples, TemplateListThemes } from "./TemplateList"; import { ActionButton } from "components/ActionBar/ActionButton"; -import { HomeSmall } from "components/Icons"; +import { HomeSmall } from "components/Icons/HomeSmall"; export const metadata = { title: "Leaflet Templates", diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx index c7a13a48..57b18831 100644 --- a/components/Blocks/Block.tsx +++ b/components/Blocks/Block.tsx @@ -14,7 +14,6 @@ import { PageLinkBlock } from "./PageLinkBlock"; import { ExternalLinkBlock } from "./ExternalLinkBlock"; import { EmbedBlock } from "./EmbedBlock"; import { MailboxBlock } from "./MailboxBlock"; -import { CheckboxChecked, CheckboxEmpty, LockTiny } from "components/Icons"; import { AreYouSure } from "./DeleteBlock"; import { useEntitySetContext } from "components/EntitySetProvider"; import { useIsMobile } from "src/hooks/isMobile"; @@ -24,6 +23,9 @@ import { elementId } from "src/utils/elementId"; import { ButtonBlock } from "./ButtonBlock"; import { PollBlock } from "./PollBlock"; import { BlueskyPostBlock } from "./BlueskyPostBlock"; +import { CheckboxChecked } from "components/Icons/CheckboxChecked"; +import { CheckboxEmpty } from "components/Icons/CheckboxEmpty"; +import { LockTiny } from "components/Icons/LockTiny"; export type Block = { factID: string; diff --git a/components/Blocks/BlockCommands.tsx b/components/Blocks/BlockCommands.tsx index 4e421fbe..efb3a2b1 100644 --- a/components/Blocks/BlockCommands.tsx +++ b/components/Blocks/BlockCommands.tsx @@ -1,22 +1,6 @@ import { Fact, ReplicacheMutators } from "src/replicache"; import { useUIState } from "src/useUIState"; -import { - BlockDocPageSmall, - BlockCanvasPageSmall, - BlockImageSmall, - Header1Small, - Header2Small, - Header3Small, - BlockMailboxSmall, - ParagraphSmall, - LinkSmall, - BlockEmbedSmall, - BlockButtonSmall, - BlockCalendarSmall, - RSVPSmall, - BlockPollSmall, - BlockBlueskySmall, -} from "components/Icons"; + import { generateKeyBetween } from "fractional-indexing"; import { focusPage } from "components/Pages"; import { v7 } from "uuid"; @@ -27,6 +11,23 @@ import { UndoManager } from "src/undoManager"; import { focusBlock } from "src/utils/focusBlock"; import { usePollBlockUIState } from "./PollBlock"; import { focusElement } from "components/Input"; +import { BlockBlueskySmall } from "components/Icons/BlockBlueskySmall"; +import { BlockButtonSmall } from "components/Icons/BlockButtonSmall"; +import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall"; +import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall"; +import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; +import { BlockEmbedSmall } from "components/Icons/BlockEmbedSmall"; +import { BlockImageSmall } from "components/Icons/BlockImageSmall"; +import { BlockMailboxSmall } from "components/Icons/BlockMailboxSmall"; +import { BlockPollSmall } from "components/Icons/BlockPollSmall"; +import { + ParagraphSmall, + Header1Small, + Header2Small, + Header3Small, +} from "components/Icons/BlockTextSmall"; +import { LinkSmall } from "components/Icons/LinkSmall"; +import { BlockRSVPSmall } from "components/Icons/BlockRSVPSmall"; type Props = { parent: string; @@ -266,7 +267,7 @@ export const blockCommands: Command[] = [ { name: "RSVP", - icon: , + icon: , type: "event", onSelect: (rep, props) => { props.entityID && clearCommandSearchText(props.entityID); diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx index 1ee84f95..7374b840 100644 --- a/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx +++ b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx @@ -6,12 +6,12 @@ import { useUIState } from "src/useUIState"; import { BlockProps } from "../Block"; import { v7 } from "uuid"; import { useSmoker } from "components/Toast"; -import { BlockBlueskySmall, CheckTiny } from "components/Icons"; import { Separator } from "components/Layout"; import { Input } from "components/Input"; import { isUrl } from "src/utils/isURL"; -import { AppBskyFeedDefs, AtpAgent } from "@atproto/api"; import { addBlueskyPostBlock } from "src/utils/addLinkBlock"; +import { BlockBlueskySmall } from "components/Icons/BlockBlueskySmall"; +import { CheckTiny } from "components/Icons/CheckTiny"; export const BlueskyPostEmpty = (props: BlockProps) => { let { rep } = useReplicache(); diff --git a/components/Blocks/BlueskyPostBlock/index.tsx b/components/Blocks/BlueskyPostBlock/index.tsx index 9222f01d..4b60de85 100644 --- a/components/Blocks/BlueskyPostBlock/index.tsx +++ b/components/Blocks/BlueskyPostBlock/index.tsx @@ -8,11 +8,11 @@ import { focusBlock } from "src/utils/focusBlock"; import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api"; import { BlueskyEmbed, PostNotAvailable } from "./BlueskyEmbed"; import { BlueskyPostEmpty } from "./BlueskyEmpty"; -import { BlueskyTiny, CommentTiny } from "components/Icons"; import { BlueskyRichText } from "./BlueskyRichText"; import { Separator } from "components/Layout"; -import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs"; import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { BlueskyTiny } from "components/Icons/BlueskyTiny"; +import { CommentTiny } from "components/Icons/CommentTiny"; export const BlueskyPostBlock = (props: BlockProps & { preview?: boolean }) => { let { permissions } = useEntitySetContext(); diff --git a/components/Blocks/ButtonBlock.tsx b/components/Blocks/ButtonBlock.tsx index 6a529222..02f25f80 100644 --- a/components/Blocks/ButtonBlock.tsx +++ b/components/Blocks/ButtonBlock.tsx @@ -6,17 +6,14 @@ import { useUIState } from "src/useUIState"; import { BlockProps } from "./Block"; import { v7 } from "uuid"; import { useSmoker } from "components/Toast"; -import { - BlockEmbedSmall, - LinkSmall, - CheckTiny, - BlockButtonSmall, -} from "components/Icons"; + import { Separator } from "components/Layout"; import { Input } from "components/Input"; import { isUrl } from "src/utils/isURL"; -import { deleteBlock } from "./DeleteBlock"; import { ButtonPrimary } from "components/Buttons"; +import { BlockButtonSmall } from "components/Icons/BlockButtonSmall"; +import { CheckTiny } from "components/Icons/CheckTiny"; +import { LinkSmall } from "components/Icons/LinkSmall"; export const ButtonBlock = (props: BlockProps & { preview?: boolean }) => { let { permissions } = useEntitySetContext(); diff --git a/components/Blocks/DateTimeBlock.tsx b/components/Blocks/DateTimeBlock.tsx index 34ab5c9d..ead49e52 100644 --- a/components/Blocks/DateTimeBlock.tsx +++ b/components/Blocks/DateTimeBlock.tsx @@ -3,7 +3,6 @@ import { BlockProps } from "./Block"; import { ChevronProps, DayPicker } from "react-day-picker"; import { Popover } from "components/Popover"; import { useEffect, useMemo, useState } from "react"; -import { ArrowRightTiny, BlockCalendarSmall } from "components/Icons"; import { useEntitySetContext } from "components/EntitySetProvider"; import { useUIState } from "src/useUIState"; import { setHours, setMinutes } from "date-fns"; @@ -11,6 +10,8 @@ import { Separator } from "react-aria-components"; import { Checkbox } from "components/Checkbox"; import { useInitialPageLoad } from "components/InitialPageLoadProvider"; import { useSpring, animated } from "@react-spring/web"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall"; export function DateTimeBlock(props: BlockProps) { const [isClient, setIsClient] = useState(false); diff --git a/components/Blocks/DeleteBlock.tsx b/components/Blocks/DeleteBlock.tsx index f6b6d182..89abc9dd 100644 --- a/components/Blocks/DeleteBlock.tsx +++ b/components/Blocks/DeleteBlock.tsx @@ -10,7 +10,7 @@ import { scanIndex } from "src/replicache/utils"; import { getBlocksWithType } from "src/hooks/queries/useBlocks"; import { focusBlock } from "src/utils/focusBlock"; import { ButtonPrimary } from "components/Buttons"; -import { CloseTiny } from "components/Icons"; +import { CloseTiny } from "components/Icons/CloseTiny"; export const AreYouSure = (props: { entityID: string[] | string; diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx index c390ca43..9a27f042 100644 --- a/components/Blocks/EmbedBlock.tsx +++ b/components/Blocks/EmbedBlock.tsx @@ -6,7 +6,6 @@ import { useUIState } from "src/useUIState"; import { BlockProps } from "./Block"; import { v7 } from "uuid"; import { useSmoker } from "components/Toast"; -import { BlockEmbedSmall, CheckTiny } from "components/Icons"; import { Separator } from "components/Layout"; import { Input } from "components/Input"; import { isUrl } from "src/utils/isURL"; @@ -14,6 +13,8 @@ import { elementId } from "src/utils/elementId"; import { deleteBlock } from "./DeleteBlock"; import { focusBlock } from "src/utils/focusBlock"; import { useDrag } from "src/hooks/useDrag"; +import { BlockEmbedSmall } from "components/Icons/BlockEmbedSmall"; +import { CheckTiny } from "components/Icons/CheckTiny"; export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => { let { permissions } = useEntitySetContext(); diff --git a/components/Blocks/ExternalLinkBlock.tsx b/components/Blocks/ExternalLinkBlock.tsx index 599c109c..f5c45d4c 100644 --- a/components/Blocks/ExternalLinkBlock.tsx +++ b/components/Blocks/ExternalLinkBlock.tsx @@ -7,12 +7,13 @@ import { addLinkBlock } from "src/utils/addLinkBlock"; import { BlockProps } from "./Block"; import { v7 } from "uuid"; import { useSmoker } from "components/Toast"; -import { CheckTiny, LinkSmall } from "components/Icons"; import { Separator } from "components/Layout"; import { focusElement, Input } from "components/Input"; import { isUrl } from "src/utils/isURL"; import { elementId } from "src/utils/elementId"; import { focusBlock } from "src/utils/focusBlock"; +import { CheckTiny } from "components/Icons/CheckTiny"; +import { LinkSmall } from "components/Icons/LinkSmall"; export const ExternalLinkBlock = ( props: BlockProps & { preview?: boolean }, diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx index a90d5b16..423e1d22 100644 --- a/components/Blocks/ImageBlock.tsx +++ b/components/Blocks/ImageBlock.tsx @@ -3,7 +3,6 @@ import { useEntity, useReplicache } from "src/replicache"; import { Block, BlockProps } from "./Block"; import { useUIState } from "src/useUIState"; -import { BlockImageSmall } from "components/Icons"; import Image from "next/image"; import { v7 } from "uuid"; import { useEntitySetContext } from "components/EntitySetProvider"; @@ -12,6 +11,7 @@ import { addImage, localImages } from "src/utils/addImage"; import { elementId } from "src/utils/elementId"; import { useEffect } from "react"; import { deleteBlock } from "./DeleteBlock"; +import { BlockImageSmall } from "components/Icons/BlockImageSmall"; export function ImageBlock(props: BlockProps & { preview?: boolean }) { let { rep } = useReplicache(); diff --git a/components/Blocks/MailboxBlock.tsx b/components/Blocks/MailboxBlock.tsx index c3a467e5..0ca4b9b7 100644 --- a/components/Blocks/MailboxBlock.tsx +++ b/components/Blocks/MailboxBlock.tsx @@ -1,5 +1,4 @@ import { ButtonPrimary } from "components/Buttons"; -import { ArrowDownTiny, InfoSmall } from "components/Icons"; import { Popover } from "components/Popover"; import { Menu, MenuItem, Separator } from "components/Layout"; import { useUIState } from "src/useUIState"; @@ -23,6 +22,8 @@ import { useSubscriptionStatus, } from "src/hooks/useSubscriptionStatus"; import { usePageTitle } from "components/utils/UpdateLeafletTitle"; +import { ArrowDownTiny } from "components/Icons/ArrowDownTiny"; +import { InfoSmall } from "components/Icons/InfoSmall"; export const MailboxBlock = (props: BlockProps) => { let isSubscribed = useSubscriptionStatus(props.entityID); @@ -45,7 +46,7 @@ export const MailboxBlock = (props: BlockProps) => { return (
void; -}) => { - return ( - - {props.channel === "email" ? "Email" : "SMS"}{" "} - -
- } - > - { - props.setChannel("email"); - }} - > - Email - - { - props.setChannel("sms"); - }} - > - SMS - - - ); -}; export const DraftPostOptions = (props: { mailboxEntity: string }) => { let toaster = useToaster(); let draft = useEntity(props.mailboxEntity, "mailbox/draft"); let { rep, permission_token } = useReplicache(); let entity_set = useEntitySetContext(); - let archive = useEntity(props.mailboxEntity, "mailbox/archive"); let pagetitle = usePageTitle(permission_token.root_entity); let subscriber_count = useEntity( props.mailboxEntity, diff --git a/components/Blocks/PollBlock.tsx b/components/Blocks/PollBlock.tsx index 4c413ea1..99cae5a5 100644 --- a/components/Blocks/PollBlock.tsx +++ b/components/Blocks/PollBlock.tsx @@ -3,7 +3,6 @@ import { BlockProps } from "./Block"; import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; import { useCallback, useEffect, useState } from "react"; import { focusElement, Input } from "components/Input"; -import { CheckTiny, CloseTiny, InfoSmall } from "components/Icons"; import { Separator } from "components/Layout"; import { useEntitySetContext } from "components/EntitySetProvider"; import { theme } from "tailwind.config"; @@ -12,8 +11,9 @@ import { v7 } from "uuid"; import { usePollData } from "components/PageSWRDataProvider"; import { voteOnPoll } from "actions/pollActions"; import { create } from "zustand"; -import { poll_votes_on_entity } from "drizzle/schema"; import { elementId } from "src/utils/elementId"; +import { CheckTiny } from "components/Icons/CheckTiny"; +import { CloseTiny } from "components/Icons/CloseTiny"; export let usePollBlockUIState = create( () => diff --git a/components/Blocks/RSVPBlock/ContactDetailsForm.tsx b/components/Blocks/RSVPBlock/ContactDetailsForm.tsx index a50eda92..d66e91c6 100644 --- a/components/Blocks/RSVPBlock/ContactDetailsForm.tsx +++ b/components/Blocks/RSVPBlock/ContactDetailsForm.tsx @@ -14,8 +14,8 @@ import { createPhoneAuthToken } from "actions/phone_auth/request_phone_auth_toke import { Input, InputWithLabel } from "components/Input"; import { IPLocationContext } from "components/Providers/IPLocationProvider"; import { Popover } from "components/Popover"; -import { InfoSmall } from "components/Icons"; import { theme } from "tailwind.config"; +import { InfoSmall } from "components/Icons/InfoSmall"; export function ContactDetailsForm(props: { status: RSVP_Status; diff --git a/components/Blocks/RSVPBlock/SendUpdate.tsx b/components/Blocks/RSVPBlock/SendUpdate.tsx index 50934e13..2818f391 100644 --- a/components/Blocks/RSVPBlock/SendUpdate.tsx +++ b/components/Blocks/RSVPBlock/SendUpdate.tsx @@ -3,7 +3,6 @@ import { useState } from "react"; import { useRSVPData } from "components/PageSWRDataProvider"; import { useEntitySetContext } from "components/EntitySetProvider"; import { ButtonPrimary } from "components/Buttons"; -import { UpdateSmall } from "components/Icons"; import { Popover } from "components/Popover"; import { theme } from "tailwind.config"; import { useToaster } from "components/Toast"; @@ -174,3 +173,22 @@ const RecipientPicker = (props: {
); }; + +const UpdateSmall = () => { + return ( + + + + ); +}; diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx index 4bf5bdee..4d80912f 100644 --- a/components/Blocks/TextBlock/index.tsx +++ b/components/Blocks/TextBlock/index.tsx @@ -28,11 +28,13 @@ import { useHandlePaste } from "./useHandlePaste"; import { highlightSelectionPlugin } from "./plugins"; import { inputrules } from "./inputRules"; import { autolink } from "./autolink-plugin"; -import { AddTiny, BlockDocPageSmall, BlockImageSmall } from "components/Icons"; import { TooltipButton } from "components/Buttons"; import { blockCommands } from "../BlockCommands"; import { betterIsUrl } from "src/utils/isURL"; import { useSmoker } from "components/Toast"; +import { AddTiny } from "components/Icons/AddTiny"; +import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; +import { BlockImageSmall } from "components/Icons/BlockImageSmall"; const HeadingStyle = { 1: "text-xl font-bold", diff --git a/components/Buttons.tsx b/components/Buttons.tsx index 227c637e..d86984b2 100644 --- a/components/Buttons.tsx +++ b/components/Buttons.tsx @@ -1,12 +1,13 @@ import React, { forwardRef, type JSX } from "react"; import * as RadixTooltip from "@radix-ui/react-tooltip"; import { theme } from "tailwind.config"; -import { PopoverArrow } from "./Icons"; + import { CardThemeProvider, NestedCardThemeProvider, } from "./ThemeManager/ThemeProvider"; import { useReplicache } from "src/replicache"; +import { PopoverArrow } from "./Icons/PopoverArrow"; type ButtonProps = Omit; export const ButtonPrimary = forwardRef< diff --git a/components/Canvas.tsx b/components/Canvas.tsx index fd612baf..010488e2 100644 --- a/components/Canvas.tsx +++ b/components/Canvas.tsx @@ -1,14 +1,8 @@ import { useEntity, useReplicache } from "src/replicache"; import { useEntitySetContext } from "./EntitySetProvider"; import { v7 } from "uuid"; -import { BaseBlock, Block } from "./Blocks/Block"; +import { BaseBlock } from "./Blocks/Block"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { - AddBlockLarge, - AddSmall, - CanvasShrinkSmall, - CanvasWidenSmall, -} from "./Icons"; import { useDrag } from "src/hooks/useDrag"; import { useLongPress } from "src/hooks/useLongPress"; import { focusBlock } from "src/utils/focusBlock"; @@ -19,6 +13,7 @@ import { useIsMobile } from "src/hooks/isMobile"; import { Media } from "./Media"; import { TooltipButton } from "./Buttons"; import { useBlockKeyboardHandlers } from "./Blocks/useBlockKeyboardHandlers"; +import { AddSmall } from "./Icons/AddSmall"; export function Canvas(props: { entityID: string; preview?: boolean }) { let entity_set = useEntitySetContext(); diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx index cc8717dd..0bac5729 100644 --- a/components/Checkbox.tsx +++ b/components/Checkbox.tsx @@ -1,9 +1,6 @@ -import { - CheckboxChecked, - CheckboxEmpty, - RadioChecked, - RadioEmpty, -} from "./Icons"; +import { CheckboxChecked } from "./Icons/CheckboxChecked"; +import { CheckboxEmpty } from "./Icons/CheckboxEmpty"; +import { Props } from "./Icons/Props"; export function Checkbox(props: { checked: boolean; @@ -73,3 +70,47 @@ export function Radio(props: { ); } + +const RadioEmpty = (props: Props) => { + return ( + + + + ); +}; + +const RadioChecked = (props: Props) => { + return ( + + + + + ); +}; diff --git a/components/HelpPopover.tsx b/components/HelpPopover.tsx index b49b29a7..96ed30b6 100644 --- a/components/HelpPopover.tsx +++ b/components/HelpPopover.tsx @@ -1,14 +1,13 @@ "use client"; import { isMac } from "@react-aria/utils"; -import { HelpSmall } from "./Icons"; import { ShortcutKey } from "./Layout"; import { Media } from "./Media"; import { Popover } from "./Popover"; import { metaKey } from "src/utils/metaKey"; import { useEntitySetContext } from "./EntitySetProvider"; -import Link from "next/link"; import { useState } from "react"; import { ActionButton } from "components/ActionBar/ActionButton"; +import { HelpSmall } from "./Icons/HelpSmall"; export const HelpPopover = (props: { noShortcuts?: boolean }) => { let entity_set = useEntitySetContext(); diff --git a/components/HomeButton.tsx b/components/HomeButton.tsx index e32b5818..2facf8f3 100644 --- a/components/HomeButton.tsx +++ b/components/HomeButton.tsx @@ -1,12 +1,13 @@ import Link from "next/link"; import { useEntitySetContext } from "./EntitySetProvider"; -import { AddToHomeSmall, HomeSmall } from "./Icons"; import { ActionButton } from "components/ActionBar/ActionButton"; import { useParams, useSearchParams } from "next/navigation"; import { useIdentityData } from "./IdentityProvider"; import { useReplicache } from "src/replicache"; import { addLeafletToHome } from "actions/addLeafletToHome"; import { useSmoker } from "./Toast"; +import { AddToHomeSmall } from "./Icons/AddToHomeSmall"; +import { HomeSmall } from "./Icons/HomeSmall"; export function HomeButton() { let { permissions } = useEntitySetContext(); diff --git a/components/Icons.tsx b/components/Icons.tsx deleted file mode 100644 index 809b6de3..00000000 --- a/components/Icons.tsx +++ /dev/null @@ -1,1636 +0,0 @@ -import { SVGProps } from "react"; - -type Props = SVGProps; - -export const AddBlockLarge = (props: Props) => { - return ( - - - - ); -}; - -export const HomeMedium = (props: Props) => { - return ( - - - - ); -}; - -// SMALL ICONS 24X24 - -export const AccountSmall = (props: Props) => { - return ( - - - - ); -}; - -export const AddSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BackToLeafletSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockSmall = (props: Props) => { - return ( - - - - ); -}; -export const BlockBlueskySmall = (props: Props) => { - return ( - - - - ); -}; -export const BlockButtonSmall = (props: Props) => { - return ( - - - - ); -}; -export const BlockLinkSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockDocPageSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockCalendarSmall = (props: Props) => { - return ( - - - - - ); -}; - -export const BlockCanvasPageSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockEmbedSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockImageSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockMailboxSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlockPollSmall = (props: Props) => { - return ( - - - - ); -}; - -export const BlueskySmall = (props: Props) => { - return ( - - - - ); -}; - -export const CanvasWidenSmall = (props: Props) => { - return ( - - - - ); -}; - -export const CanvasShrinkSmall = (props: Props) => { - return ( - - - - ); -}; - -export const CloseContrastSmall = (props: { fill: string; stroke: string }) => { - // this is a special close (x) icon that has high contrast for use on top of images and noisy backgrounds - return ( - - - - - ); -}; - -export const DeleteSmall = (props: Props) => { - return ( - - - - ); -}; - -export const HelpSmall = (props: Props) => { - return ( - - - - ); -}; - -export const HideSmall = (props: Props) => { - return ( - - - - ); -}; - -export const AddToHomeSmall = (props: Props) => { - return ( - - - - ); -}; -export const HomeSmall = (props: Props) => { - return ( - - - - ); -}; - -export const InfoSmall = (props: Props) => { - return ( - - - - ); -}; - -export const LogoSmall = ( - props: Props & { fillColor?: string; strokeColor: string }, -) => { - let { strokeColor, fillColor, ...baseProps } = props; - return ( - - - - - ); -}; - -export const LogoutSmall = (props: Props) => { - return ( - - - - ); -}; - -export const PaintSmall = (props: Props) => { - return ( - - - - ); -}; - -export const RSVPSmall = (props: Props) => { - return ( - - - - ); -}; - -export const ShareSmall = (props: Props) => { - return ( - - - - ); -}; - -export const TemplateSmall = (props: Props & { fill?: string }) => { - return ( - - - - - ); -}; -export const TemplateRemoveSmall = (props: Props) => { - return ( - - - - ); -}; - -export const TrashSmall = (props: Props) => { - return ( - - - - ); -}; - -// TINY ICONS 16x16 - -export const AddTiny = (props: Props) => { - return ( - - - - ); -}; -export const ArrowRightTiny = (props: Props) => { - return ( - - - - ); -}; - -export const ArrowDownTiny = (props: Props) => { - return ( - - - - ); -}; - -export const BlueskyTiny = (props: Props) => { - return ( - - - - ); -}; - -export const CheckTiny = (props: Props) => { - return ( - - - - ); -}; - -export const CheckboxEmpty = (props: Props) => { - return ( - - - - ); -}; -export const CheckboxChecked = (props: Props) => { - return ( - - - - ); -}; - -export const CommentTiny = (props: Props) => { - return ( - - - - ); -}; -export const RadioEmpty = (props: Props) => { - return ( - - - - ); -}; - -export const RadioChecked = (props: Props) => { - return ( - - - - - ); -}; - -export const CloseTiny = (props: Props) => { - return ( - - - - ); -}; - -export const LockTiny = (props: Props) => { - return ( - - - - ); -}; - -export const UnlockTiny = (props: Props) => { - return ( - - - - ); -}; - -export const LogoTiny = ( - props: Props & { fillColor: string; strokeColor: string }, -) => { - return ( - - - - - ); -}; - -export const MoreOptionsTiny = (props: Props) => { - return ( - - - - ); -}; - -export const UndoTiny = (props: Props) => { - return ( - - - - ); -}; - -export const RedoTiny = (props: Props) => { - return ( - - - - ); -}; - -export const SearchTiny = (props: Props) => { - return ( - - - - ); -}; - -// Text Toolbar Icons h:24px, w: variable - -export const BoldSmall = (props: Props) => { - return ( - - - - ); -}; - -export const CopySmall = (props: Props) => { - return ( - - - - ); -}; - -export const ItalicSmall = (props: Props) => { - return ( - - - - ); -}; - -export const StrikethroughSmall = (props: Props) => { - return ( - - - - ); -}; - -export const UnderlineSmall = (props: Props) => { - return ( - - - - ); -}; - -export const HighlightSmall = (props: { highlightColor: string } & Props) => { - let { highlightColor, ...svgProps } = props; - return ( - - - - - ); -}; - -export const LinkSmall = (props: Props) => { - return ( - - - - ); -}; - -export const Header1Small = (props: Props) => { - return ( - - - - ); -}; - -export const Header2Small = (props: Props) => { - return ( - - - - ); -}; - -export const Header3Small = (props: Props) => { - return ( - - - - ); -}; - -export const ParagraphSmall = (props: Props) => { - return ( - - - - ); -}; - -export const TextSizeSmall = (props: Props) => { - return ( - - - - ); -}; - -export const AlignLeftSmall = (props: Props) => { - return ( - - - - ); -}; -export const AlignCenterSmall = (props: Props) => { - return ( - - - - ); -}; -export const AlignRightSmall = (props: Props) => { - return ( - - - - ); -}; -export const ImageFullBleedOffSmall = (props: Props) => { - return ( - - - - ); -}; -export const ImageFullBleedOnSmall = (props: Props) => { - return ( - - - - ); -}; - -export const ListUnorderedSmall = (props: Props) => { - return ( - - - - ); -}; - -export const ListOrderedSmall = (props: Props) => { - return ( - - - - ); -}; -export const ListIndentIncreaseSmall = (props: Props) => { - return ( - - - - ); -}; - -export const ListIndentDecreaseSmall = (props: Props) => { - return ( - - - - ); -}; - -export const ListCheckboxSmall = (props: Props) => { - return ( - - - - ); -}; - -export const LockSmall = (props: Props) => { - return ( - - - - ); -}; - -export const UnlockSmall = (props: Props) => { - return ( - - - - ); -}; - -export const UpdateSmall = (props: Props) => { - return ( - - - - ); -}; - -export const MoveBlockDown = (props: Props) => { - return ( - - - - ); -}; - -export const MoveBlockUp = (props: Props) => { - return ( - - - - ); -}; - -// OTHER ICONS - -export const PopoverArrow = ( - props: { arrowFill: string; arrowStroke: string } & Props, -) => { - let { arrowFill, arrowStroke, ...passDownProps } = props; - return ( - - - - - ); -}; diff --git a/components/Icons/AccountSmall.tsx b/components/Icons/AccountSmall.tsx new file mode 100644 index 00000000..0415521a --- /dev/null +++ b/components/Icons/AccountSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const AccountSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/AddBlockLarge.tsx b/components/Icons/AddBlockLarge.tsx new file mode 100644 index 00000000..0598fe7d --- /dev/null +++ b/components/Icons/AddBlockLarge.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const AddBlockLarge = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/AddSmall.tsx b/components/Icons/AddSmall.tsx new file mode 100644 index 00000000..9c7b549a --- /dev/null +++ b/components/Icons/AddSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const AddSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/AddTiny.tsx b/components/Icons/AddTiny.tsx new file mode 100644 index 00000000..5c87f6ae --- /dev/null +++ b/components/Icons/AddTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const AddTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/AddToHomeSmall.tsx b/components/Icons/AddToHomeSmall.tsx new file mode 100644 index 00000000..41e16dcb --- /dev/null +++ b/components/Icons/AddToHomeSmall.tsx @@ -0,0 +1,20 @@ +import { Props } from "./Props"; + +export const AddToHomeSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/ArrowDownTiny.tsx b/components/Icons/ArrowDownTiny.tsx new file mode 100644 index 00000000..cedd84bd --- /dev/null +++ b/components/Icons/ArrowDownTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const ArrowDownTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/ArrowRightTiny.tsx b/components/Icons/ArrowRightTiny.tsx new file mode 100644 index 00000000..e08d994e --- /dev/null +++ b/components/Icons/ArrowRightTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const ArrowRightTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BackToLeafletSmall.tsx b/components/Icons/BackToLeafletSmall.tsx new file mode 100644 index 00000000..e69de29b diff --git a/components/Icons/BlockBlueskySmall.tsx b/components/Icons/BlockBlueskySmall.tsx new file mode 100644 index 00000000..14b57414 --- /dev/null +++ b/components/Icons/BlockBlueskySmall.tsx @@ -0,0 +1,19 @@ +import { Props } from "./Props"; + +export const BlockBlueskySmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockButtonSmall.tsx b/components/Icons/BlockButtonSmall.tsx new file mode 100644 index 00000000..34518b95 --- /dev/null +++ b/components/Icons/BlockButtonSmall.tsx @@ -0,0 +1,20 @@ +import { Props } from "./Props"; +export const BlockButtonSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockCalendarSmall.tsx b/components/Icons/BlockCalendarSmall.tsx new file mode 100644 index 00000000..400826cc --- /dev/null +++ b/components/Icons/BlockCalendarSmall.tsx @@ -0,0 +1,27 @@ +import { Props } from "./Props"; + +export const BlockCalendarSmall = (props: Props) => { + return ( + + + + + ); +}; diff --git a/components/Icons/BlockCanvasPageSmall.tsx b/components/Icons/BlockCanvasPageSmall.tsx new file mode 100644 index 00000000..af84998f --- /dev/null +++ b/components/Icons/BlockCanvasPageSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockCanvasPageSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockDocPageSmall.tsx b/components/Icons/BlockDocPageSmall.tsx new file mode 100644 index 00000000..ce0498e0 --- /dev/null +++ b/components/Icons/BlockDocPageSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockDocPageSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockEmbedSmall.tsx b/components/Icons/BlockEmbedSmall.tsx new file mode 100644 index 00000000..41976ae6 --- /dev/null +++ b/components/Icons/BlockEmbedSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockEmbedSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockImageSmall.tsx b/components/Icons/BlockImageSmall.tsx new file mode 100644 index 00000000..4f294a57 --- /dev/null +++ b/components/Icons/BlockImageSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockImageSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockMailboxSmall.tsx b/components/Icons/BlockMailboxSmall.tsx new file mode 100644 index 00000000..2fa94eff --- /dev/null +++ b/components/Icons/BlockMailboxSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockMailboxSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockPollSmall.tsx b/components/Icons/BlockPollSmall.tsx new file mode 100644 index 00000000..b6bd73a5 --- /dev/null +++ b/components/Icons/BlockPollSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockPollSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockRSVPSmall.tsx b/components/Icons/BlockRSVPSmall.tsx new file mode 100644 index 00000000..c5d678de --- /dev/null +++ b/components/Icons/BlockRSVPSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlockRSVPSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlockTextSmall.tsx b/components/Icons/BlockTextSmall.tsx new file mode 100644 index 00000000..583eecd7 --- /dev/null +++ b/components/Icons/BlockTextSmall.tsx @@ -0,0 +1,79 @@ +import { Props } from "./Props"; + +export const Header1Small = (props: Props) => { + return ( + + + + ); +}; + +export const Header2Small = (props: Props) => { + return ( + + + + ); +}; + +export const Header3Small = (props: Props) => { + return ( + + + + ); +}; + +export const ParagraphSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlueskySmall.tsx b/components/Icons/BlueskySmall.tsx new file mode 100644 index 00000000..2f731c13 --- /dev/null +++ b/components/Icons/BlueskySmall.tsx @@ -0,0 +1,18 @@ +import { Props } from "./Props"; + +export const BlueskySmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/BlueskyTiny.tsx b/components/Icons/BlueskyTiny.tsx new file mode 100644 index 00000000..34f0ee11 --- /dev/null +++ b/components/Icons/BlueskyTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const BlueskyTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/CheckTiny.tsx b/components/Icons/CheckTiny.tsx new file mode 100644 index 00000000..879e4a43 --- /dev/null +++ b/components/Icons/CheckTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const CheckTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/CheckboxChecked.tsx b/components/Icons/CheckboxChecked.tsx new file mode 100644 index 00000000..696de633 --- /dev/null +++ b/components/Icons/CheckboxChecked.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const CheckboxChecked = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/CheckboxEmpty.tsx b/components/Icons/CheckboxEmpty.tsx new file mode 100644 index 00000000..36d1b19d --- /dev/null +++ b/components/Icons/CheckboxEmpty.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const CheckboxEmpty = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/CloseContrastSmall.tsx b/components/Icons/CloseContrastSmall.tsx new file mode 100644 index 00000000..1ad61fd7 --- /dev/null +++ b/components/Icons/CloseContrastSmall.tsx @@ -0,0 +1,25 @@ +export const CloseContrastSmall = (props: { fill: string; stroke: string }) => { + // this is a special close (x) icon that has high contrast for use on top of images and noisy backgrounds + return ( + + + + + ); +}; diff --git a/components/Icons/CloseTiny.tsx b/components/Icons/CloseTiny.tsx new file mode 100644 index 00000000..1132f5cb --- /dev/null +++ b/components/Icons/CloseTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const CloseTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/CommentTiny.tsx b/components/Icons/CommentTiny.tsx new file mode 100644 index 00000000..d52cec04 --- /dev/null +++ b/components/Icons/CommentTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const CommentTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/DeleteSmall.tsx b/components/Icons/DeleteSmall.tsx new file mode 100644 index 00000000..7ac5464e --- /dev/null +++ b/components/Icons/DeleteSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const DeleteSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/HelpSmall.tsx b/components/Icons/HelpSmall.tsx new file mode 100644 index 00000000..26057369 --- /dev/null +++ b/components/Icons/HelpSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const HelpSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/HideSmall.tsx b/components/Icons/HideSmall.tsx new file mode 100644 index 00000000..0d323f62 --- /dev/null +++ b/components/Icons/HideSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const HideSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/HomeSmall.tsx b/components/Icons/HomeSmall.tsx new file mode 100644 index 00000000..337a1d7c --- /dev/null +++ b/components/Icons/HomeSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const HomeSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/InfoSmall.tsx b/components/Icons/InfoSmall.tsx new file mode 100644 index 00000000..136216e1 --- /dev/null +++ b/components/Icons/InfoSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const InfoSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/LinkSmall.tsx b/components/Icons/LinkSmall.tsx new file mode 100644 index 00000000..db80dc99 --- /dev/null +++ b/components/Icons/LinkSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const LinkSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/LockTiny.tsx b/components/Icons/LockTiny.tsx new file mode 100644 index 00000000..675c5f1b --- /dev/null +++ b/components/Icons/LockTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const LockTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/LogoSmall.tsx b/components/Icons/LogoSmall.tsx new file mode 100644 index 00000000..0efa1ae6 --- /dev/null +++ b/components/Icons/LogoSmall.tsx @@ -0,0 +1,30 @@ +import { Props } from "./Props"; + +export const LogoSmall = ( + props: Props & { fillColor?: string; strokeColor: string }, +) => { + let { strokeColor, fillColor, ...baseProps } = props; + return ( + + + + + ); +}; diff --git a/components/Icons/LogoutSmall.tsx b/components/Icons/LogoutSmall.tsx new file mode 100644 index 00000000..1b42fce8 --- /dev/null +++ b/components/Icons/LogoutSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const LogoutSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/MoreOptionsTiny.tsx b/components/Icons/MoreOptionsTiny.tsx new file mode 100644 index 00000000..8a180bde --- /dev/null +++ b/components/Icons/MoreOptionsTiny.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const MoreOptionsTiny = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/PaintSmall.tsx b/components/Icons/PaintSmall.tsx new file mode 100644 index 00000000..6bb042a9 --- /dev/null +++ b/components/Icons/PaintSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const PaintSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/PopoverArrow.tsx b/components/Icons/PopoverArrow.tsx new file mode 100644 index 00000000..06d0a8eb --- /dev/null +++ b/components/Icons/PopoverArrow.tsx @@ -0,0 +1,27 @@ +import { Props } from "./Props"; + +export const PopoverArrow = ( + props: { arrowFill: string; arrowStroke: string } & Props, +) => { + let { arrowFill, arrowStroke, ...passDownProps } = props; + return ( + + + + + ); +}; diff --git a/components/Icons/Props.ts b/components/Icons/Props.ts new file mode 100644 index 00000000..442093db --- /dev/null +++ b/components/Icons/Props.ts @@ -0,0 +1,2 @@ +import type { SVGProps } from "react"; +export type Props = SVGProps; diff --git a/components/Icons/ShareSmall.tsx b/components/Icons/ShareSmall.tsx new file mode 100644 index 00000000..7fd004f5 --- /dev/null +++ b/components/Icons/ShareSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const ShareSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/TemplateRemoveSmall.tsx b/components/Icons/TemplateRemoveSmall.tsx new file mode 100644 index 00000000..9768bec3 --- /dev/null +++ b/components/Icons/TemplateRemoveSmall.tsx @@ -0,0 +1,21 @@ +import { Props } from "./Props"; + +export const TemplateRemoveSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/TemplateSmall.tsx b/components/Icons/TemplateSmall.tsx new file mode 100644 index 00000000..93f27c7b --- /dev/null +++ b/components/Icons/TemplateSmall.tsx @@ -0,0 +1,25 @@ +import { Props } from "./Props"; + +export const TemplateSmall = (props: Props & { fill?: string }) => { + return ( + + + + + ); +}; diff --git a/components/Icons/TrashSmall.tsx b/components/Icons/TrashSmall.tsx new file mode 100644 index 00000000..ad7c9a75 --- /dev/null +++ b/components/Icons/TrashSmall.tsx @@ -0,0 +1 @@ +import { Props } from "./Props"; diff --git a/components/Layout.tsx b/components/Layout.tsx index 80b317f6..111a7422 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,11 +1,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; import { theme } from "tailwind.config"; -import { PopoverArrow } from "./Icons"; -import { - CardThemeProvider, - NestedCardThemeProvider, -} from "./ThemeManager/ThemeProvider"; -import { Input } from "./Input"; +import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; +import { PopoverArrow } from "./Icons/PopoverArrow"; export const Separator = (props: { classname?: string }) => { return ( diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx index 0d37158f..debe4dc3 100644 --- a/components/LoginButton.tsx +++ b/components/LoginButton.tsx @@ -1,11 +1,10 @@ "use client"; -import { logout } from "actions/logout"; import { useIdentityData } from "./IdentityProvider"; import { Popover } from "./Popover"; import LoginForm from "app/login/LoginForm"; import { ButtonPrimary } from "./Buttons"; import { ActionButton } from "./ActionBar/ActionButton"; -import { AccountSmall } from "./Icons"; +import { AccountSmall } from "./Icons/AccountSmall"; export function LoginButton() { let identityData = useIdentityData(); diff --git a/components/Pages/index.tsx b/components/Pages/index.tsx index 9d95274a..eb32194f 100644 --- a/components/Pages/index.tsx +++ b/components/Pages/index.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useUIState } from "src/useUIState"; import { useEntitySetContext } from "../EntitySetProvider"; import { useSearchParams } from "next/navigation"; @@ -19,36 +19,22 @@ import { import { Media } from "../Media"; import { DesktopPageFooter } from "../DesktopFooter"; -import { ShareOptions } from "../ShareOptions"; import { ThemePopover } from "../ThemeManager/ThemeSetter"; -import { HomeButton } from "../HomeButton"; import { Canvas } from "../Canvas"; import { DraftPostOptions } from "../Blocks/MailboxBlock"; import { Blocks } from "components/Blocks"; import { MenuItem, Menu } from "../Layout"; -import { - MoreOptionsTiny, - CloseTiny, - PaintSmall, - ShareSmall, - UndoTiny, - RedoTiny, -} from "../Icons"; -import { HelpPopover } from "../HelpPopover"; import { scanIndex } from "src/replicache/utils"; import { PageThemeSetter } from "../ThemeManager/PageThemeSetter"; import { CardThemeProvider } from "../ThemeManager/ThemeProvider"; import { PageShareMenu } from "./PageShareMenu"; -import { Watermark } from "components/Watermark"; import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; -import { LoginButton } from "components/LoginButton"; import { useUndoState } from "src/undoManager"; -import { useIsMobile } from "src/hooks/isMobile"; -import { PublishToPublication } from "components/ShareOptions/PublicationOptions"; -import { ButtonPrimary } from "components/Buttons"; -import { Popover } from "components/Popover"; -import { InputWithLabel } from "components/Input"; import { usePublicationContext } from "components/Providers/PublicationContext"; +import { CloseTiny } from "components/Icons/CloseTiny"; +import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; +import { PaintSmall } from "components/Icons/PaintSmall"; +import { ShareSmall } from "components/Icons/ShareSmall"; export function Pages(props: { rootPage: string }) { let rootPage = useEntity(props.rootPage, "root/page")[0]; @@ -450,3 +436,40 @@ const blurPage = () => { selectedBlocks: [], })); }; +const UndoTiny = () => { + return ( + + + + ); +}; + +const RedoTiny = () => { + return ( + + + + ); +}; diff --git a/components/Popover.tsx b/components/Popover.tsx index c59eb46f..c45f7b7a 100644 --- a/components/Popover.tsx +++ b/components/Popover.tsx @@ -1,8 +1,8 @@ import * as RadixPopover from "@radix-ui/react-popover"; -import { PopoverArrow } from "./Icons"; import { theme } from "tailwind.config"; import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; import { createContext, useState } from "react"; +import { PopoverArrow } from "./Icons/PopoverArrow"; export const PopoverOpenContext = createContext(false); export const Popover = (props: { diff --git a/components/ShareOptions/DomainOptions.tsx b/components/ShareOptions/DomainOptions.tsx index ea2578bc..5b12b0ad 100644 --- a/components/ShareOptions/DomainOptions.tsx +++ b/components/ShareOptions/DomainOptions.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import { ButtonPrimary } from "components/Buttons"; -import { AddTiny } from "components/Icons"; import { useSmoker, useToaster } from "components/Toast"; import { Input, InputWithLabel } from "components/Input"; import useSWR from "swr"; @@ -13,6 +12,7 @@ import { usePublishLink } from "."; import { addDomainPath } from "actions/domains/addDomainPath"; import { useReplicache } from "src/replicache"; import { deleteDomain } from "actions/domains/deleteDomain"; +import { AddTiny } from "components/Icons/AddTiny"; type DomainMenuState = | { diff --git a/components/ShareOptions/index.tsx b/components/ShareOptions/index.tsx index e9177a08..52715cf8 100644 --- a/components/ShareOptions/index.tsx +++ b/components/ShareOptions/index.tsx @@ -1,5 +1,4 @@ import { useReplicache } from "src/replicache"; -import { ShareSmall } from "components/Icons"; import React, { useEffect, useState } from "react"; import { getShareLink } from "./getShareLink"; import { useEntitySetContext } from "components/EntitySetProvider"; @@ -12,6 +11,7 @@ import LoginForm from "app/login/LoginForm"; import { CustomDomainMenu } from "./DomainOptions"; import { useIdentityData } from "components/IdentityProvider"; import { useLeafletDomains } from "components/PageSWRDataProvider"; +import { ShareSmall } from "components/Icons/ShareSmall"; export type ShareMenuStates = "default" | "login" | "domain"; diff --git a/components/ThemeManager/PageThemeSetter.tsx b/components/ThemeManager/PageThemeSetter.tsx index 7afedef0..d813bb19 100644 --- a/components/ThemeManager/PageThemeSetter.tsx +++ b/components/ThemeManager/PageThemeSetter.tsx @@ -14,8 +14,9 @@ import { useMemo, useState } from "react"; import { CanvasBackgroundPattern } from "components/Canvas"; import { Replicache } from "replicache"; import { theme } from "tailwind.config"; -import { BlockImageSmall, PaintSmall } from "components/Icons"; import { ButtonPrimary } from "components/Buttons"; +import { BlockImageSmall } from "components/Icons/BlockImageSmall"; +import { PaintSmall } from "components/Icons/PaintSmall"; export const PageThemeSetter = (props: { entityID: string }) => { let { rep, rootEntity } = useReplicache(); diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx index 8725d4c6..cf2e8d64 100644 --- a/components/ThemeManager/ThemeSetter.tsx +++ b/components/ThemeManager/ThemeSetter.tsx @@ -17,14 +17,6 @@ import { } from "react-aria-components"; import { useEffect, useMemo, useState } from "react"; -import { - BlockImageSmall, - CheckboxChecked, - CheckboxEmpty, - CloseContrastSmall, - PaintSmall, - PopoverArrow, -} from "components/Icons"; import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; import { Replicache } from "replicache"; import { FilterAttributes } from "src/replicache/attributes"; @@ -39,6 +31,11 @@ import { isIOS, useViewportSize } from "@react-aria/utils"; import { onMouseDown } from "src/utils/iosInputMouseDown"; import { ActionButton } from "components/ActionBar/ActionButton"; import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { BlockImageSmall } from "components/Icons/BlockImageSmall"; +import { CheckboxChecked } from "components/Icons/CheckboxChecked"; +import { CheckboxEmpty } from "components/Icons/CheckboxEmpty"; +import { CloseContrastSmall } from "components/Icons/CloseContrastSmall"; +import { PaintSmall } from "components/Icons/PaintSmall"; export type pickers = | "null" diff --git a/components/Toast.tsx b/components/Toast.tsx index f1cd5180..5435781c 100644 --- a/components/Toast.tsx +++ b/components/Toast.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from "react"; -import { CloseTiny } from "./Icons"; +import { CloseTiny } from "./Icons/CloseTiny"; type Toast = { content: React.ReactNode; diff --git a/components/Toolbar/BlockToolbar.tsx b/components/Toolbar/BlockToolbar.tsx index d7bc9dd1..a7beb385 100644 --- a/components/Toolbar/BlockToolbar.tsx +++ b/components/Toolbar/BlockToolbar.tsx @@ -1,4 +1,3 @@ -import { DeleteSmall, MoveBlockDown, MoveBlockUp } from "components/Icons"; import { useEntity, useReplicache } from "src/replicache"; import { ToolbarButton } from "."; import { Separator, ShortcutKey } from "components/Layout"; @@ -8,6 +7,7 @@ import { useUIState } from "src/useUIState"; import { LockBlockButton } from "./LockBlockButton"; import { TextAlignmentButton } from "./TextAlignmentToolbar"; import { ImageFullBleedButton } from "./ImageToolbar"; +import { DeleteSmall } from "components/Icons/DeleteSmall"; export const BlockToolbar = (props: { setToolbarState: (state: "areYouSure" | "block" | "text-alignment") => void; @@ -184,3 +184,41 @@ const MoveBlockButtons = () => { ); }; + +const MoveBlockDown = () => { + return ( + + + + ); +}; + +const MoveBlockUp = () => { + return ( + + + + ); +}; diff --git a/components/Toolbar/HighlightToolbar.tsx b/components/Toolbar/HighlightToolbar.tsx index 92b8e5b0..84c8d0fd 100644 --- a/components/Toolbar/HighlightToolbar.tsx +++ b/components/Toolbar/HighlightToolbar.tsx @@ -20,16 +20,15 @@ import { useEffect, useMemo, useState } from "react"; import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; import { useParams } from "next/navigation"; import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark"; -import { - ArrowRightTiny, - HighlightSmall, - PaintSmall, - PopoverArrow, -} from "components/Icons"; + import { Separator, ShortcutKey } from "components/Layout"; import { isMac } from "@react-aria/utils"; import { ToolbarButton } from "."; import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider"; +import { Props } from "components/Icons/Props"; +import { PopoverArrow } from "components/Icons/PopoverArrow"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { PaintSmall } from "components/Icons/PaintSmall"; export const HighlightButton = (props: { lastUsedHighlight: string; @@ -193,7 +192,6 @@ export const HighlightColorButton = (props: { export const HighlightColorSettings = (props: { pageID: string }) => { let { rep, rootEntity } = useReplicache(); - let params = useParams(); let set = useMemo(() => { return setColorAttribute(rep, rootEntity); }, [rep, rootEntity]); @@ -212,7 +210,6 @@ export const HighlightColorSettings = (props: { pageID: string }) => { "theme/card-background-image-opacity", ); - let color = useEntity(rootEntity, "theme/highlight-1"); let highlight1Value = useColorAttribute(rootEntity, "theme/highlight-1"); let highlight2Value = useColorAttribute(rootEntity, "theme/highlight-2"); let highlight3Value = useColorAttribute(rootEntity, "theme/highlight-3"); @@ -364,3 +361,30 @@ export const HighlightColorSettings = (props: { pageID: string }) => { ); }; + +const HighlightSmall = (props: { highlightColor: string } & Props) => { + let { highlightColor, ...svgProps } = props; + return ( + + + + + ); +}; diff --git a/components/Toolbar/ImageToolbar.tsx b/components/Toolbar/ImageToolbar.tsx index 5c23dc9b..946f2551 100644 --- a/components/Toolbar/ImageToolbar.tsx +++ b/components/Toolbar/ImageToolbar.tsx @@ -1,11 +1,7 @@ -import { - ImageFullBleedOffSmall, - ImageFullBleedOnSmall, - LinkSmall, -} from "components/Icons"; import { ToolbarButton } from "."; import { useEntity, useReplicache } from "src/replicache"; import { useUIState } from "src/useUIState"; +import { Props } from "components/Icons/Props"; export const ImageFullBleedButton = (props: {}) => { let { rep } = useReplicache(); @@ -32,3 +28,42 @@ export const ImageFullBleedButton = (props: {}) => { ); }; + +const ImageFullBleedOffSmall = (props: Props) => { + return ( + + + + ); +}; +const ImageFullBleedOnSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/InlineLinkToolbar.tsx b/components/Toolbar/InlineLinkToolbar.tsx index ce4393ba..1713d332 100644 --- a/components/Toolbar/InlineLinkToolbar.tsx +++ b/components/Toolbar/InlineLinkToolbar.tsx @@ -2,7 +2,6 @@ import { schema } from "components/Blocks/TextBlock/schema"; import { EditorState, TextSelection } from "prosemirror-state"; import { useUIState } from "src/useUIState"; import { ToolbarButton } from "."; -import { CheckTiny, CloseTiny, LinkSmall } from "components/Icons"; import { useEffect, useState } from "react"; import { Separator } from "components/Layout"; import { MarkType } from "prosemirror-model"; @@ -10,6 +9,8 @@ import { setEditorState, useEditorStates } from "src/state/useEditorState"; import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark"; import { Input } from "components/Input"; import { useReplicache } from "src/replicache"; +import { CheckTiny } from "components/Icons/CheckTiny"; +import { LinkSmall } from "components/Icons/LinkSmall"; export function LinkButton(props: { setToolbarState: (s: "link") => void }) { let focusedBlock = useUIState((s) => s.focusedEntity); diff --git a/components/Toolbar/ListToolbar.tsx b/components/Toolbar/ListToolbar.tsx index 53b37a85..e01a8845 100644 --- a/components/Toolbar/ListToolbar.tsx +++ b/components/Toolbar/ListToolbar.tsx @@ -1,10 +1,3 @@ -import { - ArrowRightTiny, - ListCheckboxSmall, - ListIndentDecreaseSmall, - ListIndentIncreaseSmall, - ListUnorderedSmall, -} from "components/Icons"; import { Separator, ShortcutKey } from "components/Layout"; import { useBlocks } from "src/hooks/queries/useBlocks"; import { useEntity, useReplicache } from "src/replicache"; @@ -13,6 +6,8 @@ import { metaKey } from "src/utils/metaKey"; import { ToolbarButton } from "."; import { indent, outdent, outdentFull } from "src/utils/list-operations"; import { useEffect } from "react"; +import { Props } from "components/Icons/Props"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; export const ListButton = (props: { setToolbarState: (s: "list") => void }) => { let focusedBlock = useUIState((s) => s.focusedEntity); @@ -22,8 +17,6 @@ export const ListButton = (props: { setToolbarState: (s: "list") => void }) => { ); let block = siblings.find((s) => s.value === focusedBlock?.entityID); - let previousBlock = - siblings[siblings.findIndex((b) => b.value === focusedBlock?.entityID) - 1]; let { rep } = useReplicache(); @@ -169,6 +162,83 @@ export const ListToolbar = (props: { onClose: () => void }) => { ); }; -function setInitialRender(arg0: boolean) { - throw new Error("Function not implemented."); -} + +const ListUnorderedSmall = (props: Props) => { + return ( + + + + ); +}; + +const ListIndentIncreaseSmall = (props: Props) => { + return ( + + + + ); +}; + +const ListIndentDecreaseSmall = (props: Props) => { + return ( + + + + ); +}; + +const ListCheckboxSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/LockBlockButton.tsx b/components/Toolbar/LockBlockButton.tsx index f6ab48aa..3fdaa497 100644 --- a/components/Toolbar/LockBlockButton.tsx +++ b/components/Toolbar/LockBlockButton.tsx @@ -1,8 +1,9 @@ import { useUIState } from "src/useUIState"; import { ToolbarButton } from "."; import { useEntity, useReplicache } from "src/replicache"; -import { LockSmall, UnlockSmall } from "components/Icons"; + import { focusBlock } from "src/utils/focusBlock"; +import { Props } from "components/Icons/Props"; export function LockBlockButton() { let focusedBlock = useUIState((s) => s.focusedEntity); @@ -60,3 +61,43 @@ export function LockBlockButton() { ); } + +const LockSmall = (props: Props) => { + return ( + + + + ); +}; + +const UnlockSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/MultiSelectToolbar.tsx b/components/Toolbar/MultiSelectToolbar.tsx index 4b8f1e38..842db2f7 100644 --- a/components/Toolbar/MultiSelectToolbar.tsx +++ b/components/Toolbar/MultiSelectToolbar.tsx @@ -1,14 +1,12 @@ -import React, { useState } from "react"; import { useUIState } from "src/useUIState"; import { ReplicacheMutators, useReplicache } from "src/replicache"; import { ToolbarButton } from "./index"; -import { TrashSmall, CopySmall } from "components/Icons"; -import { AreYouSure } from "components/Blocks/DeleteBlock"; import { copySelection } from "src/utils/copySelection"; import { useSmoker } from "components/Toast"; import { getBlocksWithType } from "src/hooks/queries/useBlocks"; import { Replicache } from "replicache"; import { LockBlockButton } from "./LockBlockButton"; +import { Props } from "components/Icons/Props"; export const MultiselectToolbar = (props: { setToolbarState: (state: "areYouSure" | "multiselect") => void; @@ -71,3 +69,42 @@ async function getSortedSelection(rep: Replicache) { } }); } +const CopySmall = (props: Props) => { + return ( + + + + ); +}; + +const TrashSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/TextAlignmentToolbar.tsx b/components/Toolbar/TextAlignmentToolbar.tsx index b81c7757..1e4de72a 100644 --- a/components/Toolbar/TextAlignmentToolbar.tsx +++ b/components/Toolbar/TextAlignmentToolbar.tsx @@ -2,11 +2,7 @@ import { useUIState } from "src/useUIState"; import { ToolbarButton } from "."; import { useCallback } from "react"; import { useEntity, useReplicache } from "src/replicache"; -import { - AlignCenterSmall, - AlignLeftSmall, - AlignRightSmall, -} from "components/Icons"; +import { Props } from "components/Icons/Props"; export function TextAlignmentToolbar() { let focusedBlock = useUIState((s) => s.focusedEntity); @@ -73,3 +69,61 @@ export function TextAlignmentButton(props: { ); } + +export const AlignLeftSmall = (props: Props) => { + return ( + + + + ); +}; +export const AlignCenterSmall = (props: Props) => { + return ( + + + + ); +}; +export const AlignRightSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/TextBlockTypeToolbar.tsx b/components/Toolbar/TextBlockTypeToolbar.tsx index c0ecd498..2a872264 100644 --- a/components/Toolbar/TextBlockTypeToolbar.tsx +++ b/components/Toolbar/TextBlockTypeToolbar.tsx @@ -2,8 +2,8 @@ import { Header1Small, Header2Small, Header3Small, - TextSizeSmall, -} from "components/Icons"; +} from "components/Icons/BlockTextSmall"; +import { Props } from "components/Icons/Props"; import { ShortcutKey } from "components/Layout"; import { ToolbarButton } from "components/Toolbar"; import { TextSelection } from "prosemirror-state"; @@ -170,3 +170,23 @@ export function TextBlockTypeButton(props: { ); } + +const TextSizeSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/TextToolbar.tsx b/components/Toolbar/TextToolbar.tsx index e9caaf1d..75564393 100644 --- a/components/Toolbar/TextToolbar.tsx +++ b/components/Toolbar/TextToolbar.tsx @@ -1,5 +1,4 @@ import { isMac } from "@react-aria/utils"; -import { BoldSmall, ItalicSmall, StrikethroughSmall } from "components/Icons"; import { Separator, ShortcutKey } from "components/Layout"; import { metaKey } from "src/utils/metaKey"; import { LinkButton } from "./InlineLinkToolbar"; @@ -11,6 +10,7 @@ import { ToolbarTypes } from "."; import { schema } from "components/Blocks/TextBlock/schema"; import { TextAlignmentButton } from "./TextAlignmentToolbar"; import { LockBlockButton } from "./LockBlockButton"; +import { Props } from "components/Icons/Props"; export const TextToolbar = (props: { lastUsedHighlight: string; @@ -86,3 +86,60 @@ export const TextToolbar = (props: { ); }; + +const ItalicSmall = (props: Props) => { + return ( + + + + ); +}; + +const StrikethroughSmall = (props: Props) => { + return ( + + + + ); +}; +const BoldSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx index 7b95f71e..18e79d1f 100644 --- a/components/Toolbar/index.tsx +++ b/components/Toolbar/index.tsx @@ -1,7 +1,6 @@ "use client"; import React, { useEffect, useState } from "react"; -import { CloseTiny } from "components/Icons"; import { TextBlockTypeToolbar } from "./TextBlockTypeToolbar"; import { InlineLinkToolbar } from "./InlineLinkToolbar"; import { useEditorStates } from "src/state/useEditorState"; @@ -18,6 +17,7 @@ import { AreYouSure, deleteBlock } from "components/Blocks/DeleteBlock"; import { TooltipButton } from "components/Buttons"; import { TextAlignmentToolbar } from "./TextAlignmentToolbar"; import { useIsMobile } from "src/hooks/isMobile"; +import { CloseTiny } from "components/Icons/CloseTiny"; export type ToolbarTypes = | "areYouSure" diff --git a/components/Watermark.tsx b/components/Watermark.tsx index 75bf985c..535d0bf6 100644 --- a/components/Watermark.tsx +++ b/components/Watermark.tsx @@ -1,7 +1,6 @@ -import Link from "next/link"; -import { LogoSmall, LogoTiny } from "./Icons"; import { theme } from "tailwind.config"; import { useEntity, useReplicache } from "src/replicache"; +import { LogoSmall } from "./Icons/LogoSmall"; export const Watermark = (props: { mobile?: boolean }) => { let { rootEntity } = useReplicache(); -- 2.54.0