diff --git a/.editorconfig b/.editorconfig index 6c6e1ddc2..8549c42f9 100644 --- a/.editorconfig +++ b/.editorconfig @@ -82,3 +82,9 @@ indent_style = space [*.{ps1,psd1,psm1}] indent_size = 4 indent_style = space + +# Swift +# https://github.com/apple/swift-format/blob/main/Documentation/Configuration.md#example +[*.swift] +indent_size = 2 +indent_style = space diff --git a/apps/desktop/crates/macos/src-swift/window.swift b/apps/desktop/crates/macos/src-swift/window.swift index 9fcd4fe25..bfcb4a406 100644 --- a/apps/desktop/crates/macos/src-swift/window.swift +++ b/apps/desktop/crates/macos/src-swift/window.swift @@ -2,66 +2,76 @@ import AppKit @objc public enum AppThemeType: Int { - case light = 0; - case dark = 1; + case auto = -1 + case light = 0 + case dark = 1 } @_cdecl("lock_app_theme") public func lockAppTheme(themeType: AppThemeType) { - var theme: NSAppearance; - - switch themeType { - case .dark: - theme = NSAppearance(named: .darkAqua)!; - case .light: - theme = NSAppearance(named: .aqua)!; + var theme: NSAppearance? + switch themeType { + case .auto: + theme = nil + case .dark: + theme = NSAppearance(named: .darkAqua)! + case .light: + theme = NSAppearance(named: .aqua)! + } + + DispatchQueue.main.async { + NSApp.appearance = theme + + // Trigger a repaint of the window + if let window = NSApplication.shared.mainWindow { + window.invalidateShadow() + window.displayIfNeeded() } - - NSApp.appearance = theme; + } } @_cdecl("blur_window_background") public func blurWindowBackground(window: NSWindow) { - let windowContent = window.contentView!; - let blurryView = NSVisualEffectView(); + let windowContent = window.contentView! + let blurryView = NSVisualEffectView() - blurryView.material = .sidebar; - blurryView.state = .followsWindowActiveState; - blurryView.blendingMode = .behindWindow; - blurryView.wantsLayer = true; + blurryView.material = .sidebar + blurryView.state = .followsWindowActiveState + blurryView.blendingMode = .behindWindow + blurryView.wantsLayer = true - window.contentView = blurryView; - blurryView.addSubview(windowContent); + window.contentView = blurryView + blurryView.addSubview(windowContent) } func setInvisibleToolbar(windowPtr: NSWindow, hasToolbar: Bool) { - let window = windowPtr; - - if !hasToolbar { - window.toolbar = nil; - return; - } - - let toolbar = NSToolbar(identifier: "window_invisible_toolbar"); - - toolbar.showsBaselineSeparator = false; - window.toolbar = toolbar; + let window = windowPtr + + if !hasToolbar { + window.toolbar = nil + return + } + + let toolbar = NSToolbar(identifier: "window_invisible_toolbar") + + toolbar.showsBaselineSeparator = false + window.toolbar = toolbar } @_cdecl("set_titlebar_style") public func setTitlebarStyle(window: NSWindow, transparent: Bool, large: Bool) { - var styleMask = window.styleMask; - - if transparent && large { - styleMask.insert(.unifiedTitleAndToolbar); - } - - window.styleMask = styleMask; - - if large { - setInvisibleToolbar(windowPtr: window, hasToolbar: true); - } - - window.titleVisibility = transparent ? .hidden : .visible; - window.titlebarAppearsTransparent = transparent; + var styleMask = window.styleMask + + if transparent && large { + styleMask.insert(.unifiedTitleAndToolbar) + } + + window.styleMask = styleMask + + if large { + setInvisibleToolbar(windowPtr: window, hasToolbar: true) + } + + window.titleVisibility = transparent ? .hidden : .visible + window.titlebarAppearsTransparent = transparent } diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 80070a9a4..4902e288e 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -37,7 +37,7 @@ "react-devtools": "^4.27.2", "sass": "^1.55.0", "semver": "^7.5.0", - "typescript": "^4.8.4", + "typescript": "^5.0.4", "vite": "^4.0.4", "vite-plugin-svgr": "^2.2.1", "vite-tsconfig-paths": "^4.0.3" diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs index fb1b2f754..6b4e44b7f 100644 --- a/apps/desktop/src-tauri/src/main.rs +++ b/apps/desktop/src-tauri/src/main.rs @@ -17,6 +17,8 @@ use tracing::{debug, error}; #[cfg(target_os = "linux")] mod app_linux; +mod theme; + mod file; mod menu; @@ -161,7 +163,8 @@ async fn main() -> tauri::Result<()> { open_logs_dir, file::open_file_path, file::get_file_path_open_with_apps, - file::open_file_path_with + file::open_file_path_with, + theme::lock_app_theme ]) .build(tauri::generate_context!())?; diff --git a/apps/desktop/src-tauri/src/theme.rs b/apps/desktop/src-tauri/src/theme.rs new file mode 100644 index 000000000..d79ef31e3 --- /dev/null +++ b/apps/desktop/src-tauri/src/theme.rs @@ -0,0 +1,19 @@ +use serde::Deserialize; +use specta::Type; + +#[derive(Type, Deserialize, Clone, Copy, Debug)] +pub enum AppThemeType { + Auto = -1, + Light = 0, + Dark = 1, +} + +#[tauri::command(async)] +#[specta::specta] +pub async fn lock_app_theme(theme_type: AppThemeType) { + #[cfg(target_os = "macos")] + unsafe { + sd_desktop_macos::lock_app_theme(theme_type as isize); + } + // println!("Lock theme, type: {theme_type:?}") +} diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index bee433395..86ac1c2ad 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -20,6 +20,7 @@ import '@sd/ui/style'; import { appReady, getFilePathOpenWithApps, + lockAppTheme, openFilePath, openFilePathWith, openLogsDir @@ -80,7 +81,8 @@ const platform: Platform = { openLogsDir, openFilePath, getFilePathOpenWithApps, - openFilePathWith + openFilePathWith, + lockAppTheme }; const queryClient = new QueryClient(); diff --git a/apps/desktop/src/commands.ts b/apps/desktop/src/commands.ts index 5a7ad16f2..9184d74cf 100644 --- a/apps/desktop/src/commands.ts +++ b/apps/desktop/src/commands.ts @@ -34,5 +34,10 @@ export function openFilePathWith(library: string, id: number, withUrl: string) { return invoke()("open_file_path_with", { library,id,withUrl }) } +export function lockAppTheme(themeType: AppThemeType) { + return invoke()("lock_app_theme", { themeType }) +} + export type OpenWithApplication = { name: string; url: string } export type OpenFilePathResult = { t: "NoLibrary" } | { t: "NoFile" } | { t: "OpenError"; c: string } | { t: "AllGood" } +export type AppThemeType = "Auto" | "Light" | "Dark" diff --git a/apps/landing/src/env.ts b/apps/landing/src/env.ts index fc00ef86c..305b7adce 100644 --- a/apps/landing/src/env.ts +++ b/apps/landing/src/env.ts @@ -28,4 +28,4 @@ export const env = createEnv({ // In dev or in eslint disable checking. // Kinda sucks for in dev but you don't need the whole setup to change the docs. skipValidation: process.env.VERCEL !== '1' -}); \ No newline at end of file +}); diff --git a/apps/storybook/package.json b/apps/storybook/package.json index c25f36db3..6e1551fd8 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -28,7 +28,7 @@ "prop-types": "^15.8.1", "storybook": "^7.0.5", "tailwindcss": "^3.3.2", - "typescript": "^4.9.3", + "typescript": "^5.0.4", "vite": "^4.2.0" } } diff --git a/apps/web/package.json b/apps/web/package.json index 5f099d02a..30fa52d00 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -29,7 +29,7 @@ "autoprefixer": "^10.4.12", "postcss": "^8.4.17", "rollup-plugin-visualizer": "^5.9.0", - "typescript": "^4.8.4", + "typescript": "^5.0.4", "vite": "^4.0.4", "vite-plugin-html": "^3.2.0", "vite-plugin-svgr": "^2.2.1", diff --git a/interface/app/$libraryId/overview/Categories.tsx b/interface/app/$libraryId/overview/Categories.tsx index 3605988c9..0abae4b11 100644 --- a/interface/app/$libraryId/overview/Categories.tsx +++ b/interface/app/$libraryId/overview/Categories.tsx @@ -1,4 +1,8 @@ import { getIcon } from '@sd/assets/util'; +import clsx from 'clsx'; +import { motion } from 'framer-motion'; +import { ArrowLeft, ArrowRight } from 'phosphor-react'; +import { useEffect, useRef, useState } from 'react'; import { Category, useLibraryQuery } from '@sd/client'; import { useIsDark } from '~/hooks'; import CategoryButton from './CategoryButton'; @@ -27,24 +31,91 @@ const CategoryList = [ export const Categories = (props: { selected: Category; onSelectedChanged(c: Category): void }) => { const categories = useLibraryQuery(['categories.list']); const isDark = useIsDark(); + const [scroll, setScroll] = useState(0); + const ref = useRef(null); + const [lastCategoryVisible, setLastCategoryVisible] = useState(false); + + useEffect(() => { + const element = ref.current; + if (!element) return; + const handler = () => { + setScroll(element.scrollLeft); + }; + element.addEventListener('scroll', handler); + return () => { + element.removeEventListener('scroll', handler); + }; + }, []); + + const handleArrowOnClick = (direction: 'right' | 'left') => { + const element = ref.current; + if (!element) return; + + element.scrollTo({ + left: direction === 'left' ? element.scrollLeft + 200 : element.scrollLeft - 200, + behavior: 'smooth' + }); + }; + + const lastCategoryVisibleHandler = (index: number) => { + index === CategoryList.length - 1 && setLastCategoryVisible((prev) => !prev); + }; return ( -
- {categories.data && - CategoryList.map((category) => { - const iconString = IconForCategory[category] || 'Document'; - - return ( - props.onSelectedChanged(category)} - /> - ); - })} +
+
handleArrowOnClick('right')} + className={clsx( + scroll > 0 + ? 'cursor-pointer bg-app/50 opacity-100 hover:opacity-95' + : 'pointer-events-none', + 'sticky left-[43px] z-40 mt-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-app-line bg-app p-2 opacity-0 backdrop-blur-md transition-all duration-200' + )} + > + +
+
0 ? '10%' : '0%' + }, rgba(0, 0, 0, 1) ${lastCategoryVisible ? '95%' : '90%'}, transparent 95%)` + }} + > + {categories.data && + CategoryList.map((category, index) => { + const iconString = IconForCategory[category] || 'Document'; + return ( + lastCategoryVisibleHandler(index)} + onViewportLeave={() => lastCategoryVisibleHandler(index)} + viewport={{ root: ref, margin: '0 -120px 0 0' }} + className="min-w-fit" + key={category} + > + props.onSelectedChanged(category)} + /> + + ); + })} +
+
handleArrowOnClick('left')} + className={clsx( + lastCategoryVisible + ? 'pointer-events-none opacity-0 hover:opacity-0' + : 'hover:opacity-95', + 'sticky right-[45px] z-40 mt-4 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border border-app-line bg-app/50 p-2 backdrop-blur-md transition-all duration-200' + )} + > + +
); }; diff --git a/interface/app/$libraryId/settings/Setting.tsx b/interface/app/$libraryId/settings/Setting.tsx index fd2f81c8c..7f8a9fd0d 100644 --- a/interface/app/$libraryId/settings/Setting.tsx +++ b/interface/app/$libraryId/settings/Setting.tsx @@ -1,18 +1,28 @@ import clsx from 'clsx'; +import { Info } from 'phosphor-react'; import { PropsWithChildren } from 'react'; +import { Tooltip } from '@sd/ui'; interface Props { title: string; description?: string; mini?: boolean; className?: string; + toolTipLabel?: string | boolean; } export default ({ mini, ...props }: PropsWithChildren) => { return (
-

{props.title}

+
+

{props.title}

+ {props.toolTipLabel && ( + + + + )} +
{!!props.description && (

{props.description}

)} diff --git a/interface/app/$libraryId/settings/client/appearance.tsx b/interface/app/$libraryId/settings/client/appearance.tsx index 791e5b796..34ddc2488 100644 --- a/interface/app/$libraryId/settings/client/appearance.tsx +++ b/interface/app/$libraryId/settings/client/appearance.tsx @@ -1,11 +1,12 @@ import clsx from 'clsx'; -import { ArrowClockwise, CheckCircle } from 'phosphor-react'; -import { useEffect } from 'react'; +import { useMotionValueEvent, useScroll } from 'framer-motion'; +import { CheckCircle } from 'phosphor-react'; +import { useEffect, useRef } from 'react'; import { useState } from 'react'; import { getThemeStore, useThemeStore } from '@sd/client'; import { Themes } from '@sd/client'; -import { Button, Divider, Slider, forms } from '@sd/ui'; -import { InfoText } from '@sd/ui/src/forms'; +import { Button, Slider, forms } from '@sd/ui'; +import { usePlatform } from '~/util/Platform'; import { Heading } from '../Layout'; import Setting from '../Setting'; @@ -56,10 +57,20 @@ const themes: Theme[] = [ ]; export const Component = () => { + const { lockAppTheme } = usePlatform(); const themeStore = useThemeStore(); const [selectedTheme, setSelectedTheme] = useState( themeStore.syncThemeWithSystem === true ? 'system' : themeStore.theme ); + const themesRef = useRef(null); + const [themeScroll, setThemeScroll] = useState(0); + const { scrollX } = useScroll({ + container: themesRef + }); + useMotionValueEvent(scrollX, 'change', (latest) => { + setThemeScroll(latest); + }); + const form = useZodForm({ schema }); @@ -70,12 +81,15 @@ export const Component = () => { useEffect(() => { const subscription = form.watch(() => onSubmit()); - return () => subscription.unsubscribe(); + return () => { + subscription.unsubscribe(); + }; }, [form, onSubmit]); const themeSelectHandler = (theme: Theme['themeValue']) => { setSelectedTheme(theme); if (theme === 'system') { + lockAppTheme?.('Auto'); getThemeStore().syncThemeWithSystem = true; } else if (theme === 'vanilla') { getThemeStore().syncThemeWithSystem = false; @@ -96,7 +110,6 @@ export const Component = () => { document.documentElement.style.setProperty('--dark-hue', hue.toString()); } }; - return ( <>
@@ -106,19 +119,12 @@ export const Component = () => { rightArea={
} /> -
+
0 ? '2%' : '200' //Only show fade if scrolled + }) 0%, rgba(0, 0, 0, 1) 85%, transparent 100%)` + }} + ref={themesRef} + className="explorer-scroll relative mb-5 mt-8 flex h-[150px] gap-5 overflow-x-scroll pr-[20px] md:w-[300px] lg:w-full" + > {themes.map((theme, i) => { return (
themeSelectHandler(theme.themeValue)} className={clsx( selectedTheme !== theme.themeValue && 'opacity-70', - 'transition-all duration-200 hover:translate-y-[-3.5px]' + 'h-[100px] transition-all duration-200 hover:translate-y-[3.5px] lg:first:ml-0 ' )} key={i} > @@ -152,7 +166,15 @@ export const Component = () => { ); })}
- +
{
- {themeStore.theme === 'vanilla' && ( -

- Hue color changes visible in dark mode only -

- )} +
)}
-

{props.themeName}

+

{props.themeName}

); } @@ -232,15 +250,11 @@ function Theme(props: ThemeProps) { function SystemTheme(props: ThemeProps) { return (
-
+
-
+
{props.isSelected && ( diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx index 949ba22e6..e132c8cef 100644 --- a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx +++ b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; -import { useCallback, useEffect, useMemo } from 'react'; +import { CaretDown } from 'phosphor-react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Controller, get } from 'react-hook-form'; import { useDebouncedCallback } from 'use-debounce'; import { @@ -65,6 +66,7 @@ export const AddLocationDialog = ({ const relinkLocation = useLibraryMutation('locations.relink'); const listIndexerRules = useLibraryQuery(['locations.indexer_rules.list']); const addLocationToLibrary = useLibraryMutation('locations.addLibrary'); + const [toggleSettings, setToggleSettings] = useState(false); // This is required because indexRules is undefined on first render const indexerRulesIds = useMemo( @@ -147,6 +149,7 @@ export const AddLocationDialog = ({ [form] ); + // eslint-disable-next-line react-hooks/exhaustive-deps useCallbackToWatchForm( useDebouncedCallback(async (values, { name }) => { if (name === 'path') { @@ -222,19 +225,37 @@ export const AddLocationDialog = ({ - ( - +
setToggleSettings((t) => !t)} + className="flex items-center justify-between px-3 py-2" + > +

Advanced settings

+ +
+ {toggleSettings && ( +
+ ( + + )} + control={form.control} + /> +
)} - control={form.control} - /> +
); }; diff --git a/interface/app/$libraryId/settings/library/locations/ListItem.tsx b/interface/app/$libraryId/settings/library/locations/ListItem.tsx index 8c13cfca1..15fd00973 100644 --- a/interface/app/$libraryId/settings/library/locations/ListItem.tsx +++ b/interface/app/$libraryId/settings/library/locations/ListItem.tsx @@ -29,7 +29,7 @@ export default ({ location }: Props) => { navigate(`${location.id}`); }} > - +

{location.name}

diff --git a/interface/app/onboarding/Layout.tsx b/interface/app/onboarding/Layout.tsx index ebcc71f2e..fbbb4b371 100644 --- a/interface/app/onboarding/Layout.tsx +++ b/interface/app/onboarding/Layout.tsx @@ -53,7 +53,7 @@ export const Component = () => { )} > -

+
diff --git a/interface/app/onboarding/alpha.tsx b/interface/app/onboarding/alpha.tsx index a2a977cc5..313a9a1e1 100644 --- a/interface/app/onboarding/alpha.tsx +++ b/interface/app/onboarding/alpha.tsx @@ -10,40 +10,46 @@ export default function OnboardingAlpha() { const platform = usePlatform(); return ( - Alpha Background -
-
- Spacedrive -

Spacedrive

-
-

Alpha Release

-

- We are delighted to announce the release of Spacedrive's alpha version, - showcasing exciting new features. As with any initial release, this version may - contain some bugs. We cannot guarantee that your data will stay intact. We - kindly request your assistance in reporting any issues you encounter on our - Discord channel. Your valuable feedback will greatly contribute to enhancing the - user experience. -

-
- - +
+ Alpha Background +
+
+ Spacedrive +

Spacedrive

+
+

Alpha Release

+

+ We are delighted to announce the release of Spacedrive's alpha version, + showcasing exciting new features. As with any initial release, this version + may contain some bugs. We cannot guarantee that your data will stay intact. + We kindly request your assistance in reporting any issues you encounter on + our Discord channel. Your valuable feedback will greatly contribute to + enhancing the user experience. +

+
+ + +
diff --git a/interface/hooks/useTheme.ts b/interface/hooks/useTheme.ts index 29604806a..3026f15f3 100644 --- a/interface/hooks/useTheme.ts +++ b/interface/hooks/useTheme.ts @@ -1,13 +1,16 @@ import { useThemeStore, getThemeStore } from '@sd/client'; import { useEffect } from 'react'; +import { usePlatform } from '..'; export function useTheme() { const themeStore = useThemeStore(); + const { lockAppTheme } = usePlatform(); const systemTheme = window.matchMedia('(prefers-color-scheme: dark)'); useEffect(() => { const handleThemeChange = () => { if (themeStore.syncThemeWithSystem) { + lockAppTheme?.('Auto'); if (systemTheme.matches) { document.documentElement.classList.remove('vanilla-theme'); document.documentElement.style.setProperty('--dark-hue', getThemeStore().hueValue.toString()); @@ -21,20 +24,21 @@ export function useTheme() { if (themeStore.theme === 'dark') { document.documentElement.classList.remove('vanilla-theme'); document.documentElement.style.setProperty('--dark-hue', getThemeStore().hueValue.toString()); + lockAppTheme?.('Dark'); } else if (themeStore.theme === 'vanilla') { document.documentElement.classList.add('vanilla-theme'); document.documentElement.style.setProperty('--light-hue', getThemeStore().hueValue.toString()); - + lockAppTheme?.('Light'); } } }; - handleThemeChange(); + handleThemeChange(); systemTheme.addEventListener('change', handleThemeChange); return () => { systemTheme.removeEventListener('change', handleThemeChange); }; - }, [themeStore, systemTheme]); + }, [themeStore, lockAppTheme, systemTheme]); } diff --git a/interface/util/Platform.tsx b/interface/util/Platform.tsx index 430d85c59..13cfc444e 100644 --- a/interface/util/Platform.tsx +++ b/interface/util/Platform.tsx @@ -26,6 +26,7 @@ export type Platform = { openFilePath?(library: string, id: number): any; getFilePathOpenWithApps?(library: string, id: number): any; openFilePathWith?(library: string, id: number, appUrl: string): any; + lockAppTheme?(themeType: 'Auto' | 'Light' | 'Dark'): any; }; // Keep this private and use through helpers below diff --git a/package.json b/package.json index a2532dfd5..6e7a2ced4 100644 --- a/package.json +++ b/package.json @@ -31,19 +31,19 @@ } }, "devDependencies": { - "@babel/plugin-syntax-import-assertions": "^7.20.0", + "@babel/plugin-syntax-import-assertions": "^7.22.5", "@cspell/dict-rust": "^2.0.1", "@cspell/dict-typescript": "^2.0.2", - "@storybook/react-vite": "^7.0.5", + "@storybook/react-vite": "^7.0.20", "@trivago/prettier-plugin-sort-imports": "^4.1.1", - "cspell": "^6.12.0", - "prettier": "^2.8.7", - "prettier-plugin-tailwindcss": "^0.2.6", + "cspell": "^6.31.1", + "prettier": "^2.8.8", + "prettier-plugin-tailwindcss": "^0.2.8", "rimraf": "^4.4.1", - "turbo": "^1.9.9", + "turbo": "^1.10.2", "turbo-ignore": "^0.3.0", - "typescript": "^4.9.4", - "vite": "^4.3.8" + "typescript": "^5.0.4", + "vite": "^4.3.9" }, "overrides": { "vite-plugin-svgr": "https://github.com/spacedriveapp/vite-plugin-svgr#cb4195b69849429cdb18d1f12381676bf9196a84", diff --git a/packages/client/package.json b/packages/client/package.json index c6d4a5b01..3b2fecb52 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -29,7 +29,7 @@ "@types/react": "^18.0.21", "scripts": "*", "tsconfig": "*", - "typescript": "^4.8.4" + "typescript": "^5.0.4" }, "peerDependencies": { "react": "^18.2.0" diff --git a/packages/ui/package.json b/packages/ui/package.json index ed1cd8d9f..5a029ef86 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -24,9 +24,9 @@ "@hookform/resolvers": "^3.1.0", "@radix-ui/react-checkbox": "^1.0.3", "@radix-ui/react-context-menu": "^1.0.0", - "@radix-ui/react-dialog": "^1.0.0", + "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^1.0.0", - "@radix-ui/react-popover": "^1.0.3", + "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-radio-group": "^1.1.0", "@radix-ui/react-select": "^1.1.2", "@radix-ui/react-switch": "^1.0.1", diff --git a/packages/ui/src/ProgressBar.tsx b/packages/ui/src/ProgressBar.tsx index e488d6906..373e48a7d 100644 --- a/packages/ui/src/ProgressBar.tsx +++ b/packages/ui/src/ProgressBar.tsx @@ -12,7 +12,7 @@ export const ProgressBar = memo((props: ProgressBarProps) => { return ( - + {label} diff --git a/packages/ui/src/forms/Form.tsx b/packages/ui/src/forms/Form.tsx index db81833b2..7702b17f6 100644 --- a/packages/ui/src/forms/Form.tsx +++ b/packages/ui/src/forms/Form.tsx @@ -1,7 +1,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { animated, useTransition } from '@react-spring/web'; import { VariantProps, cva } from 'class-variance-authority'; -import clsx from 'clsx'; +import { Warning } from 'phosphor-react'; import { ComponentProps } from 'react'; import { FieldErrors, @@ -69,13 +69,13 @@ export const useZodForm = {transitions((styles, error) => { const message = error?.message; return typeof message === 'string' ? ( - - {message} - + + +

{message}

+ ) : null; })} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80ebcb9ca..d21b199c4 100644 Binary files a/pnpm-lock.yaml and b/pnpm-lock.yaml differ