diff --git a/components.json b/components.json index b4b4758a..4398a0f7 100644 --- a/components.json +++ b/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", - "style": "new-york", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app.postcss", - "baseColor": "slate" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks" - }, - "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" } diff --git a/package.json b/package.json index ec779ea2..e2f3d211 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "devDependencies": { "@cypress/snapshot": "2.1.7", "@fortawesome/fontawesome-free": "^6.5.1", + "@iconify/json": "^2.2.315", "@sveltejs/adapter-static": "3.0.8", "@sveltejs/kit": "2.17.2", "@sveltejs/vite-plugin-svelte": "^4.0.0", @@ -74,6 +75,7 @@ "tailwindcss-animate": "^1.0.7", "tslib": "^2.6.2", "typescript": "^5.5.0", + "unplugin-icons": "^22.1.0", "vite": "^5.4.4", "vitest": "^2.1.4", "vitest-dom": "^0.1.1" diff --git a/src/app.postcss b/src/app.postcss index eed22e4b..bdafba24 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,9 +1,9 @@ @import '@fontsource-variable/recursive/crsv.css'; -@import '@fortawesome/fontawesome-free/css/all.min.css'; @tailwind base; @tailwind components; @tailwind utilities; + @layer base { :root { --background: 0 0% 100%; @@ -14,8 +14,8 @@ --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; - --secondary: 338 100% 44%; - --secondary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; @@ -36,7 +36,7 @@ --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 338 100% 44%; + --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 82f3ad16..cda87829 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -12,7 +12,11 @@ import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; import dayjs from 'dayjs'; import { toBase64 } from 'js-base64'; - import Separator from './ui/separator/separator.svelte'; + import CopyIcon from '~icons/fa-regular/copy'; + import ExternalLinkIcon from '~icons/fa6-solid/link'; + import ShareNodesIcon from '~icons/fa6-solid/share'; + import DownloadIcon from '~icons/material-symbols/download'; + import { Separator } from './ui/separator'; const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; @@ -191,17 +195,17 @@ ${svgString}`); {#snippet dualActionButton(text: string, download: (event: Event) => unknown, url?: string)}
{#if url} {/if}
{/snippet} - +
PNG size @@ -232,7 +236,7 @@ ${svgString}`); {#if krokiRendererUrl} {/if} @@ -240,7 +244,7 @@ ${svgString}`); {#if isClipboardAvailable()} {/if} {#if rendererUrl} diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index 8519aadb..5a9c8eb0 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -1,6 +1,6 @@ - {#if icon} - - {/if} + + {#if label} {label} {/if} diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index ff9ca6fd..b136aa6d 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -19,6 +19,7 @@ import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; import { onDestroy, onMount } from 'svelte'; + import ExclamationCircleIcon from '~icons/fa/exclamation-circle'; let divElement: HTMLDivElement | undefined = $state(); let editor: monaco.editor.IStandaloneCodeEditor | undefined; @@ -137,7 +138,7 @@ {#if $stateStore.error instanceof Error}
- +
diff --git a/src/lib/components/FloatingToolbar.svelte b/src/lib/components/FloatingToolbar.svelte index 5e7c63f4..efcf8fcc 100644 --- a/src/lib/components/FloatingToolbar.svelte +++ b/src/lib/components/FloatingToolbar.svelte @@ -8,6 +8,6 @@ let { children }: Props = $props(); -
+
{@render children()}
diff --git a/src/lib/components/History/History.svelte b/src/lib/components/History/History.svelte index 811b1668..64e80bad 100644 --- a/src/lib/components/History/History.svelte +++ b/src/lib/components/History/History.svelte @@ -10,6 +10,14 @@ import dayjsRelativeTime from 'dayjs/plugin/relativeTime'; import { onMount } from 'svelte'; import { get } from 'svelte/store'; + import GitAltIcon from '~icons/fa-brands/git-alt'; + import BookmarkIcon from '~icons/fa-regular/bookmark'; + import SaveIcon from '~icons/fa-regular/save'; + import DownloadIcon from '~icons/fa/download'; + import UploadIcon from '~icons/fa/upload'; + import HistoryIcon from '~icons/fa6-solid/history'; + import TrashAltIcon from '~icons/fa6-solid/trash-alt'; + import UndoIcon from '~icons/fa6-solid/undo'; import { addHistoryEntry, clearHistoryData, @@ -31,12 +39,12 @@ { id: 'manual', title: 'Saved', - icon: 'far fa-bookmark' + icon: BookmarkIcon }, { id: 'auto', title: 'Timeline', - icon: 'fas fa-history' + icon: HistoryIcon } ]); @@ -112,7 +120,7 @@ { id: 'loader', title: 'Revisions', - icon: 'fab fa-git-alt' + icon: GitAltIcon }, ...tabs ]; @@ -129,14 +137,14 @@ class="btn btn-secondary btn-xs w-12" onclick={stopPropagation(() => uploadHistory())} title="Upload history" - aria-label="Upload history"> + aria-label="Upload history"> {#if $historyStore.length > 0} + aria-label="Download history"> {/if} | + aria-label="Save current state"> {#if $historyModeStore !== 'loader'} + aria-label="Delete all saved states"> {/if}
{/snippet} @@ -161,7 +169,7 @@
  • -
    +
    {#if url}
    + >Restore {#if type !== 'loader'} + >Delete {/if}
    diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 99c4e78c..03abf091 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -16,6 +16,10 @@ import { MCBaseURL } from '$lib/util/util'; import { toggleMode } from 'mode-watcher'; import type { ComponentProps } from 'svelte'; + import GithubIcon from '~icons/fa-brands/github'; + import CloseIcon from '~icons/fa/close'; + import MoonIcon from '~icons/fa6-solid/moon'; + import SunIcon from '~icons/fa6-solid/sun'; import DropdownNavMenu from './DropdownNavMenu.svelte'; const { isEnabledMermaidChartLinks } = env; @@ -79,7 +83,7 @@ dismissPromotion(activePromotion?.id); activePromotion = undefined; }}> - + {/snippet}
    @@ -163,23 +167,22 @@