Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 12:13:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make eslint happy (#2198)

Browse source 
* eslint maxing

* @sd/ui too
This commit is contained in:
Utku 2024-03-12 16:41:41 -04:00 committed by GitHub
parent 4b74c0af04
commit d60789e588
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
71 changed files with 107 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/mobile/src/components/overview/OverviewStats.tsx
View file

@ -31,7 +31,7 @@ const StatItem = ({ title, bytes, isLoading, style }: StatItemProps) => {
return (
<View
style={twStyle(
'border-app-line/50 bg-app-box/50 flex flex-col items-center justify-center rounded-md border p-2',
'flex flex-col items-center justify-center rounded-md border border-app-line/50 bg-app-box/50 p-2',
style,
{
hidden: isLoading

2
apps/mobile/src/components/primitive/Button.tsx
View file

@ -13,7 +13,7 @@ const button = cva(['items-center justify-center rounded-md border shadow-sm'],
accent: ['border-accent-deep bg-accent shadow-md shadow-app-shade/10'],
outline: ['border-sidebar-line/60 bg-mobile-screen'],
transparent: ['border-0 bg-mobile-screen shadow-none'],
dashed: ['border-dashed border border-app-line bg-transparent']
dashed: ['border border-dashed border-app-line bg-transparent']
},
size: {
default: ['py-1.5', 'px-3'],

2
interface/app/$libraryId/404.tsx
View file

@ -11,7 +11,7 @@ export const Component = () => {
<div className="w-full bg-app/80">
<div
role="alert"
className="flex h-full w-full flex-col items-center justify-center rounded-lg p-4"
className="flex size-full flex-col items-center justify-center rounded-lg p-4"
>
<p className="m-3 text-sm font-semibold uppercase text-ink-faint">Error: 404</p>
<h1 className="text-4xl font-bold">There's nothing here.</h1>

4
interface/app/$libraryId/Explorer/ContextMenu/AssignTagMenuItems.tsx
View file

@ -155,7 +155,7 @@ const Tags = ({ items, parentRef }: Props & { parentRef: RefObject<HTMLDivElemen
{sortedTags.length > 0 ? (
<div
ref={parentRef}
className="h-full w-full overflow-auto"
className="size-full overflow-auto"
style={{ maxHeight: `400px` }}
>
<div
@ -234,7 +234,7 @@ const Tags = ({ items, parentRef }: Props & { parentRef: RefObject<HTMLDivElemen
}}
>
<div
className="mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border"
className="mr-0.5 size-[15px] shrink-0 rounded-full border"
style={{
backgroundColor:
objectsWithTag &&

8
interface/app/$libraryId/Explorer/DismissibleNotice.tsx
View file

@ -10,14 +10,14 @@ import { useExplorerContext } from './Context';
const MediaViewIcon = () => {
return (
<div className="relative ml-3 mr-10 h-14 w-14 shrink-0">
<div className="relative ml-3 mr-10 size-14 shrink-0">
<Icon
name="Image"
className="absolute -top-1 left-6 h-14 w-14 rotate-6 overflow-hidden"
className="absolute -top-1 left-6 size-14 rotate-6 overflow-hidden"
/>
<Icon
name="Video"
className="absolute top-2 z-10 h-14 w-14 -rotate-6 overflow-hidden"
className="absolute top-2 z-10 size-14 -rotate-6 overflow-hidden"
/>
</div>
);
@ -25,7 +25,7 @@ const MediaViewIcon = () => {
const CollectionIcon = () => {
return (
<div className="ml-3 mr-4 h-14 w-14 shrink-0">
<div className="ml-3 mr-4 size-14 shrink-0">
<Icon name="Collection" />
</div>
);

4
interface/app/$libraryId/Explorer/FilePath/Original.tsx
View file

@ -82,7 +82,7 @@ const TEXT_RENDERER: OriginalRenderer = (props) => (
onLoad={props.onLoad}
onError={props.onError}
className={clsx(
'textviewer-scroll h-full w-full overflow-y-auto whitespace-pre-wrap break-words px-4 font-mono',
'textviewer-scroll size-full overflow-y-auto whitespace-pre-wrap break-words px-4 font-mono',
!props.mediaControls ? 'overflow-hidden' : 'overflow-auto',
props.className,
props.frame && [props.frameClassName, '!bg-none p-2']
@ -112,7 +112,7 @@ const ORIGINAL_RENDERERS: {
src={props.src}
onLoad={props.onLoad}
onError={props.onError}
className={clsx('h-full w-full', props.className, props.frame && props.frameClassName)}
className={clsx('size-full', props.className, props.frame && props.frameClassName)}
crossOrigin="anonymous" // Here it is ok, because it is not a react attr
/>
),

2
interface/app/$libraryId/Explorer/FilePath/Thumb.tsx
View file

@ -200,7 +200,7 @@ export const FileThumb = forwardRef<HTMLImageElement, ThumbProps>((props, ref) =
className={clsx(
'relative flex shrink-0 items-center justify-center',
// !loaded && 'invisible',
!props.size && 'h-full w-full',
!props.size && 'size-full',
props.cover && 'overflow-hidden',
props.className
)}

2
interface/app/$libraryId/Explorer/Inspector/FavoriteButton.tsx
View file

@ -30,7 +30,7 @@ export default function FavoriteButton(props: Props) {
return (
<Button onClick={toggleFavorite} size="icon">
<Heart weight={favorite ? 'fill' : 'regular'} className="h-[18px] w-[18px]" />
<Heart weight={favorite ? 'fill' : 'regular'} className="size-[18px]" />
</Button>
);
}

4
interface/app/$libraryId/Explorer/Inspector/index.tsx
View file

@ -291,12 +291,12 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
<Tooltip label={t('encrypt')}>
<Button size="icon">
<Lock className="h-[18px] w-[18px]" />
<Lock className="size-[18px]" />
</Button>
</Tooltip>
<Tooltip label={t('share')}>
<Button size="icon">
<Link className="h-[18px] w-[18px]" />
<Link className="size-[18px]" />
</Button>
</Tooltip>
</div>

2
interface/app/$libraryId/Explorer/QuickPreview/ImageSlider.tsx
View file

@ -98,7 +98,7 @@ const Image = memo(({ item, active }: { item: ExplorerItem; active: boolean }) =
<div
onClick={() => explorer.resetSelectedItems([item])}
className={clsx(
'relative h-full w-full rounded-md border bg-app-lightBox/20',
'relative size-full rounded-md border bg-app-lightBox/20',
explorer.selectedItems.size > 1 && !selected && 'opacity-25',
selected ? 'border-2 border-accent' : 'border-1 border-white/5',
selected && !active && 'border-white/5'

2
interface/app/$libraryId/Explorer/View/Grid/Item.tsx
View file

@ -46,7 +46,7 @@ export const GridItem = ({ children, item, index, ...props }: Props) => {
<div
{...props}
{...attributes}
className="h-full w-full"
className="size-full"
// Prevent explorer view onMouseDown event from
// being executed and resetting the selection
onMouseDown={(e) => {

2
interface/app/$libraryId/Explorer/View/GridView/Item/index.tsx
View file

@ -35,7 +35,7 @@ export const GridViewItem = memo((props: GridViewItemProps) => {
return (
<GridViewItemContext.Provider value={props}>
<ViewItem data={props.data} className={clsx('h-full w-full', isHidden && 'opacity-50')}>
<ViewItem data={props.data} className={clsx('size-full', isHidden && 'opacity-50')}>
<ExplorerDroppable
droppable={{
data: { type: 'explorer-item', data: props.data },

2
interface/app/$libraryId/Explorer/View/MediaView/Item.tsx
View file

@ -21,7 +21,7 @@ export const MediaViewItem = memo(({ data, selected, cut, cover }: Props) => {
<ViewItem
data={data}
className={clsx(
'group relative h-full w-full border-2 hover:bg-app-selectedItem',
'group relative size-full border-2 hover:bg-app-selectedItem',
selected ? 'border-accent bg-app-selectedItem' : 'border-transparent'
)}
>

2
interface/app/$libraryId/Explorer/View/index.tsx
View file

@ -146,7 +146,7 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
explorer.selectedItems.size !== 0 && explorer.resetSelectedItems();
}}
>
<div ref={setDroppableRef} className="h-full w-full">
<div ref={setDroppableRef} className="size-full">
{explorer.items === null || (explorer.items && explorer.items.length > 0) ? (
<>
{layoutMode === 'grid' && <GridView />}

4
interface/app/$libraryId/Layout/Sidebar/JobManager/IsRunningJob.tsx
View file

@ -5,8 +5,8 @@ import { useLibraryQuery } from '~/../packages/client/src';
export default () => {
const { data: isActive } = useLibraryQuery(['jobs.isActive']);
return isActive ? (
<Loader className="h-[20px] w-[20px]" />
<Loader className="size-[20px]" />
) : (
<CheckCircle className="h-5 w-5" />
<CheckCircle className="size-5" />
);
};

8
interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx
View file

@ -207,7 +207,7 @@ function Options({
variant="outline"
>
<Tooltip label={t('resume')}>
<Play className="h-4 w-4 cursor-pointer" />
<Play className="size-4 cursor-pointer" />
</Tooltip>
</Button>
)}
@ -218,7 +218,7 @@ function Options({
button={
<Tooltip label={t('actions')}>
<Button className="!px-1" variant="outline">
<DotsThreeVertical className="h-4 w-4 cursor-pointer" />
<DotsThreeVertical className="size-4 cursor-pointer" />
</Button>
</Tooltip>
}
@ -255,7 +255,7 @@ function Options({
size="icon"
variant="outline"
>
<Pause className="h-4 w-4 cursor-pointer" />
<Pause className="size-4 cursor-pointer" />
</Button>
</Tooltip>
<Tooltip label={t('stop')}>
@ -267,7 +267,7 @@ function Options({
size="icon"
variant="outline"
>
<Stop className="h-4 w-4 cursor-pointer" />
<Stop className="size-4 cursor-pointer" />
</Button>
</Tooltip>
</>

8
interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx
View file

@ -87,12 +87,12 @@ export function JobManager() {
<PopoverClose asChild>
<Check
onClick={clearAllJobsHandler}
className="h-3 w-3 transition-opacity duration-300 hover:opacity-70"
className="size-3 transition-opacity duration-300 hover:opacity-70"
color={isDark ? 'white' : 'black'}
/>
</PopoverClose>
<X
className="h-3 w-3 transition-opacity hover:opacity-70"
className="size-3 transition-opacity hover:opacity-70"
onClick={() => setToggleConfirmation((t) => !t)}
/>
</div>
@ -103,14 +103,14 @@ export function JobManager() {
size="icon"
>
<Tooltip label={t('clear_finished_jobs')}>
<Trash className="h-4 w-4" />
<Trash className="size-4" />
</Tooltip>
</Button>
)}
<PopoverClose asChild>
<Button className="opacity-70" size="icon">
<Tooltip label={t('close')}>
<X className="h-4 w-4" />
<X className="size-4" />
</Tooltip>
</Button>
</PopoverClose>

2
interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Footer.tsx
View file

@ -57,7 +57,7 @@ export default () => {
label={t('settings')}
keybinds={[symbols.Shift.icon, symbols.Meta.icon, 'T']}
>
<Gear className="h-5 w-5" />
<Gear className="size-5" />
</Tooltip>
</ButtonLink>
<JobManagerContextProvider>

2
interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Icon.tsx
View file

@ -1,5 +1,5 @@
import clsx from 'clsx';
export default ({ component: Icon, ...props }: any) => (
<Icon weight="bold" {...props} className={clsx('mr-2 h-4 w-4', props.className)} />
<Icon weight="bold" {...props} className={clsx('mr-2 size-4', props.className)} />
);

2
interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
View file

@ -15,7 +15,7 @@ export default function DevicesSection() {
<Section name={t('devices')}>
{node && (
<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
<Icon name="Laptop" className="mr-1 h-5 w-5" />
<Icon name="Laptop" className="mr-1 size-5" />
<span className="truncate">{node.name}</span>
</SidebarLink>
)}

2
interface/app/$libraryId/Layout/Sidebar/sections/Local/index.tsx
View file

@ -22,7 +22,7 @@ const EjectButton = ({ className }: { className?: string }) => (
variant="subtle"
onClick={() => toast.info('Eject button coming soon')}
>
<EjectSimple weight="fill" size={18} className="h-3 w-3 opacity-70" />
<EjectSimple weight="fill" size={18} className="size-3 opacity-70" />
</Button>
);

2
interface/app/$libraryId/Layout/Sidebar/sections/Locations/index.tsx
View file

@ -77,7 +77,7 @@ const Location = ({ location, online }: { location: LocationType; online: boolea
<Icon name="Folder" size={18} />
<div
className={clsx(
'absolute bottom-0.5 right-0 h-1.5 w-1.5 rounded-full',
'absolute bottom-0.5 right-0 size-1.5 rounded-full',
online ? 'bg-green-500' : 'bg-red-500'
)}
/>

2
interface/app/$libraryId/Layout/Sidebar/sections/Tags/index.tsx
View file

@ -61,7 +61,7 @@ const Tag = ({ tag }: { tag: Tag }) => {
)}
>
<div
className="h-[12px] w-[12px] shrink-0 rounded-full"
className="size-[12px] shrink-0 rounded-full"
style={{ backgroundColor: tag.color || '#efefef' }}
/>
<span className="ml-1.5 truncate text-sm">{tag.name}</span>

2
interface/app/$libraryId/TopBar/TopBarButton.tsx
View file

@ -45,7 +45,7 @@ export default forwardRef<HTMLButtonElement, TopBarButtonProps>(
>
{props.children}
{checkIcon && active && (
<Check className="absolute right-2 m-0.5 h-5 w-5 text-ink-dull" />
<Check className="absolute right-2 m-0.5 size-5 text-ink-dull" />
)}
</Button>
);

2
interface/app/$libraryId/debug/actors.tsx
View file

@ -18,7 +18,7 @@ export const Component = () => {
}, [data]);
return (
<div className="h-full w-full">
<div className="size-full">
<table>
<tr>
<th>Name</th>

2
interface/app/$libraryId/debug/cloud.tsx
View file

@ -18,7 +18,7 @@ export const Component = () => {
};
return (
<div className="flex h-full w-full flex-col items-start p-4">{authSensitiveChild()}</div>
<div className="flex size-full flex-col items-start p-4">{authSensitiveChild()}</div>
);
};

2
interface/app/$libraryId/debug/dnd.tsx
View file

@ -30,5 +30,5 @@ export function DragAndDropDebug() {
};
}, [platform, ref]);
return <div ref={ref} className="absolute z-[500] hidden h-10 w-10 bg-red-500"></div>;
return <div ref={ref} className="absolute z-[500] hidden size-10 bg-red-500"></div>;
}

2
interface/app/$libraryId/location/$id.tsx
View file

@ -161,7 +161,7 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
</TopBarPortal>
</SearchContextProvider>
{isLocationIndexing ? (
<div className="flex h-full w-full items-center justify-center">
<div className="flex size-full items-center justify-center">
<Loader />
</div>
) : !preferences.isLoading ? (

2
interface/app/$libraryId/location/LocationOptions.tsx
View file

@ -55,7 +55,7 @@ export default function LocationOptions({ location, path }: { location: Location
popover={usePopover()}
trigger={
<Button className="!p-[5px]" variant="subtle">
<Ellipsis className="h-3 w-3" />
<Ellipsis className="size-3" />
</Button>
}
>

2
interface/app/$libraryId/overview/FileKindStats.tsx
View file

@ -80,7 +80,7 @@ const KindItem = ({ kind, name, icon, items, selected, onClick, disabled }: Kind
disabled && 'cursor-not-allowed opacity-30'
)}
>
<Icon name={icon as any} className="mr-3 h-12 w-12" />
<Icon name={icon as any} className="mr-3 size-12" />
<div className="pr-5">
<h2 className="text-sm font-medium">{name}</h2>
{items !== undefined && (

4
interface/app/$libraryId/overview/Layout/HorizontalScroll.tsx
View file

@ -66,7 +66,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
onClick={() => handleArrowOnClick('right')}
className={clsx('left-3', scroll === 0 && 'pointer-events-none opacity-0')}
>
<ArrowLeft weight="bold" className="h-4 w-4 text-ink" />
<ArrowLeft weight="bold" className="size-4 text-ink" />
</ArrowButton>
<div
ref={ref}
@ -88,7 +88,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
onClick={() => handleArrowOnClick('left')}
className={clsx('right-3', lastItemVisible && 'pointer-events-none opacity-0')}
>
<ArrowRight weight="bold" className="h-4 w-4 text-ink" />
<ArrowRight weight="bold" className="size-4 text-ink" />
</ArrowButton>
)}
</div>

2
interface/app/$libraryId/overview/LibraryStats.tsx
View file

@ -63,7 +63,7 @@ const StatItem = (props: StatItemProps) => {
<Tooltip label={props.info}>
<Info
weight="fill"
className="-mt-0.5 ml-1 inline h-3 w-3 text-ink-faint opacity-0 transition-opacity group-hover/stat:opacity-70"
className="-mt-0.5 ml-1 inline size-3 text-ink-faint opacity-0 transition-opacity group-hover/stat:opacity-70"
/>
</Tooltip>
)}

2
interface/app/$libraryId/overview/LocationCard.tsx
View file

@ -37,7 +37,7 @@ const LocationCard = ({ icon, name, connectionType, ...stats }: LocationCardProp
<Pill className="uppercase">{connectionType || 'Local'}</Pill>
<div className="grow" />
<Button size="icon" variant="outline">
<Ellipsis className="h-3 w-3 opacity-50" />
<Ellipsis className="size-3 opacity-50" />
</Button>
</div>
</Card>

2
interface/app/$libraryId/saved-search/$id.tsx
View file

@ -92,7 +92,7 @@ export const Component = () => {
<Explorer
emptyNotice={
<EmptyNotice
icon={<img className="h-32 w-32" src={getIcon(iconNames.FolderNoSpace)} />}
icon={<img className="size-32" src={getIcon(iconNames.FolderNoSpace)} />}
message={
search.search
? `No results found for "${search.search}"`

10
interface/app/$libraryId/search/AppliedFilters.tsx
View file

@ -24,7 +24,7 @@ export const CloseTab = forwardRef<HTMLDivElement, { onClick: () => void }>(({ o
className="flex h-full items-center rounded-r border-l border-app-darkerBox/70 px-1.5 py-0.5 text-sm hover:bg-app-lightBox/30"
onClick={onClick}
>
<RenderIcon className="h-3 w-3" icon={X} />
<RenderIcon className="size-3" icon={X} />
</div>
);
});
@ -37,7 +37,7 @@ export const AppliedFilters = ({ allowRemove = true }: { allowRemove?: boolean }
{search.search && (
<FilterContainer>
<StaticSection>
<RenderIcon className="h-4 w-4" icon={MagnifyingGlass} />
<RenderIcon className="size-4" icon={MagnifyingGlass} />
<FilterText>{search.search}</FilterText>
</StaticSection>
{allowRemove && <CloseTab onClick={() => search.setSearch('')} />}
@ -89,7 +89,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
return (
<FilterContainer>
<StaticSection>
<RenderIcon className="h-4 w-4" icon={filter.icon} />
<RenderIcon className="size-4" icon={filter.icon} />
<FilterText>{filter.name}</FilterText>
</StaticSection>
<InteractiveSection className="border-l">
@ -103,7 +103,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
{activeOptions && (
<>
{activeOptions.length === 1 ? (
<RenderIcon className="h-4 w-4" icon={activeOptions[0]!.icon} />
<RenderIcon className="size-4" icon={activeOptions[0]!.icon} />
) : (
<div className="relative flex gap-0.5 self-center">
{activeOptions.map((option, index) => (
@ -113,7 +113,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
zIndex: activeOptions.length - index
}}
>
<RenderIcon className="h-4 w-4" icon={option.icon} />
<RenderIcon className="size-4" icon={option.icon} />
</div>
))}
</div>

2
interface/app/$libraryId/search/SearchOptions.tsx
View file

@ -163,7 +163,7 @@ const SearchResults = memo(
<div className="mr-4 flex flex-row items-center gap-2.5">
<div className="flex items-center gap-1">
<RenderIcon
className="h-[13px] w-[13px] opacity-80"
className="size-[13px] opacity-80"
icon={filter.icon}
/>
<span className="text-xs text-ink-dull opacity-80">

2
interface/app/$libraryId/search/util.tsx
View file

@ -36,7 +36,7 @@ export const RenderIcon = ({
if (typeof icon === 'string' && icon.startsWith('#')) {
return (
<div
className={clsx('mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border', className)}
className={clsx('mr-0.5 size-[15px] shrink-0 rounded-full border', className)}
style={{
backgroundColor: icon ? icon : 'transparent',
borderColor: icon || '#efefef'

2
interface/app/$libraryId/settings/ModalLayout.tsx
View file

@ -37,7 +37,7 @@ const BackButton = () => {
return (
<Button variant="outline" size="icon" onClick={() => navigate(-1)}>
<div className="flex h-4 w-4 justify-center">
<div className="flex size-4 justify-center">
<CaretLeft weight="bold" className="w-[12px] text-ink-dull " aria-hidden="true" />
</div>
</Button>

2
interface/app/$libraryId/settings/OverviewLayout.tsx
View file

@ -1,7 +1,7 @@
import { Outlet } from 'react-router';
export const Component = () => (
<div className="custom-scroll page-scroll relative flex h-full max-h-screen w-full grow-0 pt-6">
<div className="custom-scroll page-scroll relative flex size-full max-h-screen grow-0 pt-6">
<div className="flex w-full max-w-4xl flex-col space-y-6 px-12 pb-5 pt-2">
<Outlet />
<div className="block h-4 shrink-0" />

4
interface/app/$libraryId/settings/client/account.tsx
View file

@ -43,8 +43,8 @@ const Profile = ({ email, authStore }: { email?: string; authStore: { status: st
<Card className="relative flex w-full flex-col items-center justify-center !p-6 lg:max-w-[320px]">
<AuthRequiredOverlay />
<div
className="flex h-[90px] w-[90px] items-center justify-center
rounded-full border border-app-line bg-app-input"
className="flex size-[90px] items-center justify-center rounded-full
border border-app-line bg-app-input"
>
<User weight="fill" className="mx-auto text-4xl text-ink-faint" />
</div>

2
interface/app/$libraryId/settings/client/backups.tsx
View file

@ -53,7 +53,7 @@ export const Component = () => {
{backups.data?.backups.map((backup) => (
<Card key={backup.id} className="hover:bg-app-box/70">
<Database className="mr-3 h-10 w-10 self-center" />
<Database className="mr-3 size-10 self-center" />
<div className="grid min-w-[110px] grid-cols-1">
<h1 className="truncate pt-0.5 text-sm font-semibold">
{dayjs(backup.timestamp).toString()}

2
interface/app/$libraryId/settings/client/general.tsx
View file

@ -141,7 +141,7 @@ export const Component = () => {
<hr className="mb-4 mt-2 flex w-full border-app-line" />
<div className="flex w-full items-center gap-5">
<Icon name="Laptop" className="mt-2 h-14 w-14" />
<Icon name="Laptop" className="mt-2 size-14" />
<div className="flex flex-col">
<NodeSettingLabel>{t('node_name')}</NodeSettingLabel>
<Input

8
interface/app/$libraryId/settings/library/locations/$id.tsx
View file

@ -98,7 +98,7 @@ const EditLocationForm = () => {
const { t } = useLocale();
return (
<Form form={form} onSubmit={onSubmit} className="h-full w-full">
<Form form={form} onSubmit={onSubmit} className="size-full">
<ModalLayout
title={t('edit_location')}
topRight={
@ -200,7 +200,7 @@ const EditLocationForm = () => {
size="sm"
variant="outline"
>
<ArrowsClockwise className="-mt-0.5 mr-1.5 inline h-4 w-4" />
<ArrowsClockwise className="-mt-0.5 mr-1.5 inline size-4" />
{t('full_reindex')}
</Button>
</div>
@ -213,7 +213,7 @@ const EditLocationForm = () => {
size="sm"
variant="outline"
>
<Archive className="-mt-0.5 mr-1.5 inline h-4 w-4" />
<Archive className="-mt-0.5 mr-1.5 inline size-4" />
{t('archive')}
</Button>
</div>
@ -236,7 +236,7 @@ const EditLocationForm = () => {
));
}}
>
<Trash className="-mt-0.5 mr-1.5 inline h-4 w-4" />
<Trash className="-mt-0.5 mr-1.5 inline size-4" />
{t('delete')}
</Button>
</div>

2
interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx
View file

@ -71,7 +71,7 @@ export const AddLocationButton = ({
{...props}
>
{path ? (
<div className="flex h-full w-full flex-row items-end whitespace-nowrap font-mono text-sm">
<div className="flex size-full flex-row items-end whitespace-nowrap font-mono text-sm">
<FolderSimplePlus size={22} className="shrink-0" />
<div className="ml-1 overflow-hidden">
<motion.span

2
interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/RulesForm.tsx
View file

@ -252,7 +252,7 @@ const RulesForm = ({ onSubmitted }: Props) => {
/>
{index !== 0 && (
<Button
className="flex h-[32px] w-[32px] items-center justify-self-end"
className="flex size-[32px] items-center justify-self-end"
variant="gray"
onClick={() => remove(index)}
>

2
interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
View file

@ -84,7 +84,7 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
disableDelete || 'border-red-500 bg-red-500'
)}
>
<Trash className="-mt-0.5 mr-1.5 inline h-4 w-4" />
<Trash className="-mt-0.5 mr-1.5 inline size-4" />
Delete
</Button>
<Button

8
interface/app/$libraryId/settings/library/locations/ListItem.tsx
View file

@ -39,7 +39,7 @@ export default ({ location }: Props) => {
navigate(`${location.id}`);
}}
>
<Icon size={24} name="Folder" className="mr-3 h-10 w-10 self-center" />
<Icon size={24} name="Folder" className="mr-3 size-10 self-center" />
<div className="grid min-w-[110px] grid-cols-1">
<h1 className="truncate pt-0.5 text-sm font-semibold">{location.name}</h1>
@ -74,7 +74,7 @@ export default ({ location }: Props) => {
>
<div
className={clsx(
'h-2 w-2 rounded-full',
'size-2 rounded-full',
online ? 'bg-green-500' : 'bg-red-500'
)}
/>
@ -110,7 +110,7 @@ export default ({ location }: Props) => {
}}
>
<Tooltip label={t('delete_location')}>
<Trash className="h-4 w-4" />
<Trash className="size-4" />
</Tooltip>
</Button>
<Button
@ -123,7 +123,7 @@ export default ({ location }: Props) => {
}}
>
<Tooltip label={t('rescan_location')}>
<Repeat className="h-4 w-4" />
<Repeat className="size-4" />
</Tooltip>
</Button>
{/* <Button variant="gray" className="!p-1.5">

2
interface/app/$libraryId/settings/library/saved-searches/index.tsx
View file

@ -105,7 +105,7 @@ function EditForm({ savedSearch, onDelete }: { savedSearch: SavedSearch; onDelet
}}
>
<Tooltip label={t('delete_tag')}>
<Trash className="h-4 w-4" />
<Trash className="size-4" />
</Tooltip>
</Button>
</div>

2
interface/app/$libraryId/settings/library/tags/EditForm.tsx
View file

@ -67,7 +67,7 @@ export default ({ tag, onDelete }: Props) => {
}
>
<Tooltip label={t('delete_tag')}>
<Trash className="h-4 w-4" />
<Trash className="size-4" />
</Tooltip>
</Button>
</div>

4
interface/app/$libraryId/settings/node/libraries/ListItem.tsx
View file

@ -41,7 +41,7 @@ export default (props: Props) => {
variant="gray"
>
<Tooltip label={t('edit_library')}>
<Pencil className="h-4 w-4" />
<Pencil className="size-4" />
</Tooltip>
</ButtonLink>
<Button
@ -54,7 +54,7 @@ export default (props: Props) => {
}}
>
<Tooltip label={t('delete_library')}>
<Trash className="h-4 w-4" />
<Trash className="size-4" />
</Tooltip>
</Button>
</div>

8
interface/app/$libraryId/settings/resources/about.tsx
View file

@ -22,7 +22,7 @@ export const Component = () => {
<div className="flex flex-row items-center">
<img
src={AppLogo}
className="mr-8 h-[88px] w-[88px]"
className="mr-8 size-[88px]"
draggable="false"
onClick={onClick}
/>
@ -46,7 +46,7 @@ export const Component = () => {
className="flex w-fit gap-2"
variant="gray"
>
<Discord className="h-4 w-4 fill-ink" />
<Discord className="size-4 fill-ink" />
{t('join_discord')}
</Button>
<Button
@ -55,7 +55,7 @@ export const Component = () => {
className="flex w-fit gap-2"
variant="accent"
>
<Github className="h-4 w-4 fill-white" />
<Github className="size-4 fill-white" />
{t('star_on_github')}
</Button>
<Button
@ -65,7 +65,7 @@ export const Component = () => {
className="flex w-fit gap-1"
variant="accent"
>
<Globe className="h-4 w-4" />
<Globe className="size-4" />
{t('website')}
</Button>
</div>

2
interface/app/$libraryId/tag/$id.tsx
View file

@ -66,7 +66,7 @@ export function Component() {
left={
<div className="flex flex-row items-center gap-2">
<div
className="h-[14px] w-[14px] shrink-0 rounded-full"
className="size-[14px] shrink-0 rounded-full"
style={{ backgroundColor: tag!.color || '#efefef' }}
/>
<span className="truncate text-sm font-medium">{tag?.name}</span>

2
interface/app/onboarding/Progress.tsx
View file

@ -40,7 +40,7 @@ export default function OnboardingProgress() {
disabled={!obStore.unlockedScreens.includes(path)}
onClick={() => navigate(path, { replace: true })}
className={clsx(
'h-2 w-2 rounded-full transition hover:bg-ink disabled:opacity-10',
'size-2 rounded-full transition hover:bg-ink disabled:opacity-10',
currentScreen === path ? 'bg-ink' : 'bg-ink-faint'
)}
/>

4
interface/app/onboarding/alpha.tsx
View file

@ -22,7 +22,7 @@ export default function OnboardingAlpha() {
/>
<div className="relative z-10 flex flex-col gap-5">
<div className="mb-5 flex w-full items-center justify-center gap-2">
<img src={AppLogo} alt="Spacedrive" className="h-8 w-8" />
<img src={AppLogo} alt="Spacedrive" className="size-8" />
<h1 className="text-[25px] font-semibold">Spacedrive</h1>
</div>
<h1 className="text-[40px] font-bold">{t('alpha_release_title')}</h1>
@ -35,7 +35,7 @@ export default function OnboardingAlpha() {
className="flex gap-2"
variant="gray"
>
<Discord className="h-4 w-4 fill-ink" />
<Discord className="size-4 fill-ink" />
{t('join_discord')}
</Button>
<ButtonLink to="../new-library" replace variant="accent">

2
interface/app/onboarding/locations.tsx
View file

@ -36,7 +36,7 @@ const LocationIcon = (props: { location: SystemLocation; active?: boolean }) =>
const LocationIcon = icons[props.location];
return (
<div className="absolute -bottom-9 -right-9 h-28 w-28">
<div className="absolute -bottom-9 -right-9 size-28">
<Icon name="Folder" />
<LocationIcon
weight="fill"

2
interface/components/AlertDialog.tsx
View file

@ -42,7 +42,7 @@ const AlertDialog = (props: Props) => {
}}
size="icon"
>
<Clipboard className="h-4 w-4" />
<Clipboard className="size-4" />
</Button>
}
/>

2
interface/components/ColorPicker.tsx
View file

@ -15,7 +15,7 @@ export const ColorPicker = <T extends FieldValues>({ className, ...props }: Prop
popover={usePopover()}
trigger={
<div
className={clsx('h-4 w-4 rounded-full shadow', className)}
className={clsx('size-4 rounded-full shadow', className)}
style={{ backgroundColor: field.value }}
/>
}

2
interface/components/Loader.tsx
View file

@ -15,7 +15,7 @@ export function Loader({ className }: Props) {
strokeOpacity={4}
strokeWidth={5}
speed={1}
className={clsx('h-7 w-7', className)}
className={clsx('size-7', className)}
/>
);
}

2
interface/components/MultiCheckbox.tsx
View file

@ -80,7 +80,7 @@ export default ({ items, headerArea }: SelectorProps) => {
>
{item.color && (
<div
className="mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border"
className="mr-0.5 size-[15px] shrink-0 rounded-full border"
style={{
backgroundColor: item.selected
? item.color

2
interface/components/SubtleButton.tsx
View file

@ -7,7 +7,7 @@ export const SubtleButton = (props: { icon?: React.FC }) => {
return (
<Button className="!p-[5px]" variant="subtle">
{/* @ts-expect-error */}
<Icon weight="bold" className="h-3 w-3" />
<Icon weight="bold" className="size-3" />
</Button>
);
};

2
interface/components/TrafficLights.tsx
View file

@ -55,7 +55,7 @@ function TrafficLight(props: TrafficLightProps) {
<div
onClick={onClick}
className={clsx(
'box-content flex h-[12px] w-[12px] items-center justify-center rounded-full border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F]',
'box-content flex size-[12px] items-center justify-center rounded-full border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F]',
{
'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-300':
type === 'close' && colorful,

6
packages/ui/src/CheckBox.tsx
View file

@ -8,7 +8,7 @@ import { ComponentProps, forwardRef } from 'react';
const styles = cva(
[
'form-check-input float-left mr-2 mt-1 h-4 w-4 appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200',
'form-check-input float-left mr-2 mt-1 size-4 appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200',
'checked:border-accent checked:bg-accent checked:hover:bg-accent/80 focus:outline-none'
],
{ variants: {} }
@ -31,8 +31,8 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
export const RadixCheckbox = ({ className, labelClassName, ...props }: RadixCheckboxProps) => (
<div className={clsx('flex items-center', className)}>
<Checkbox.Root
className="flex h-[17px] w-[17px] shrink-0 items-center justify-center
rounded-[4px] border border-gray-300/10 bg-app-selected radix-state-checked:bg-accent"
className="flex size-[17px] shrink-0 items-center justify-center rounded-[4px]
border border-gray-300/10 bg-app-selected radix-state-checked:bg-accent"
id={props.name}
{...props}
>

2
packages/ui/src/ContextMenu.tsx
View file

@ -156,7 +156,7 @@ const CheckboxItem = ({
return (
<RadixCM.CheckboxItem className={contextMenuItemClassNames} {...props}>
<ContextMenuDivItem variant={variant} className={className}>
<span className="flex h-3.5 w-3.5 items-center justify-center">
<span className="flex size-3.5 items-center justify-center">
<RadixCM.ItemIndicator>
<Check weight="bold" />
</RadixCM.ItemIndicator>

2
packages/ui/src/Dropdown.tsx
View file

@ -28,7 +28,7 @@ const itemStyles = cva(
}
);
const itemIconStyles = cva('mr-2 h-4 w-4', {
const itemIconStyles = cva('mr-2 size-4', {
variants: {}
});

2
packages/ui/src/Input.tsx
View file

@ -175,7 +175,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, Props>((props, ref) =>
size="icon"
className={clsx(props.buttonClassnames)}
>
<CurrentEyeIcon className="!pointer-events-none h-4 w-4" />
<CurrentEyeIcon className="!pointer-events-none size-4" />
</Button>
}
/>

2
packages/ui/src/Loader.tsx
View file

@ -8,7 +8,7 @@ export function Loader(props: { className?: string }) {
strokeOpacity={4}
strokeWidth={5}
speed={1}
className={clsx('h-7 w-7', props.className)}
className={clsx('size-7', props.className)}
/>
);
}

4
packages/ui/src/RadioGroup.tsx
View file

@ -32,7 +32,7 @@ export const Item = ({ children, ...props }: ItemProps) => {
<RadioGroup.Item
id={'radio' + props.value}
className={clsx(
'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-app-line',
'peer relative mr-1 mt-1 size-4 flex-shrink-0 rounded-full border border-app-line',
'radix-state-checked:bg-accent',
'radix-state-unchecked:bg-app-input',
'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
@ -40,7 +40,7 @@ export const Item = ({ children, ...props }: ItemProps) => {
{...props}
>
<RadioGroup.Indicator className="leading-0 absolute inset-0 flex items-center justify-center">
<div className="h-1.5 w-1.5 rounded-full bg-white"></div>
<div className="size-1.5 rounded-full bg-white"></div>
</RadioGroup.Indicator>
</RadioGroup.Item>
<label className="" htmlFor={'radio' + props.value}>

2
packages/ui/src/Select.tsx
View file

@ -87,7 +87,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string; default?:
>
<RS.ItemText>{props.children}</RS.ItemText>
<RS.ItemIndicator className="absolute left-1 inline-flex items-center">
<Check className="h-4 w-4" />
<Check className="size-4" />
</RS.ItemIndicator>
</RS.Item>
);

2
packages/ui/src/Slider.tsx
View file

@ -12,7 +12,7 @@ export const Slider = (props: SliderPrimitive.SliderProps) => (
<SliderPrimitive.Range className="absolute h-full rounded-full bg-accent outline-none" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb
className="z-50 block h-5 w-5 rounded-full bg-accent font-bold shadow-lg shadow-black/20 outline-none ring-accent/30 transition focus:ring-4"
className="z-50 block size-5 rounded-full bg-accent font-bold shadow-lg shadow-black/20 outline-none ring-accent/30 transition focus:ring-4"
data-tip="1.0"
/>
</SliderPrimitive.Root>

8
packages/ui/src/Switch.tsx
View file

@ -30,13 +30,13 @@ const switchStyles = cva(
}
);
const thumbStyles = cva(
['inline-block h-4 w-4 transition', 'rounded-full bg-white', 'shadow-sm shadow-app-shade/40'],
['inline-block size-4 transition', 'rounded-full bg-white', 'shadow-sm shadow-app-shade/40'],
{
variants: {
size: {
sm: 'h-[12px] w-[12px] radix-state-checked:translate-x-[14px]',
md: 'h-[19px] w-[19px] radix-state-checked:translate-x-[20px]',
lg: 'h-6 w-6 radix-state-checked:translate-x-[23px]'
sm: 'size-[12px] radix-state-checked:translate-x-[14px]',
md: 'size-[19px] radix-state-checked:translate-x-[20px]',
lg: 'size-6 radix-state-checked:translate-x-[23px]'
}
},
defaultVariants: {

2
packages/ui/src/forms/Form.tsx
View file

@ -88,7 +88,7 @@ export const ErrorMessage = ({ name, variant, className }: ErrorMessageProps) =>
const message = error?.message;
return typeof message === 'string' ? (
<animated.div style={styles} className={errorStyles({ variant, className })}>
<Warning className="h-4 w-4" />
<Warning className="size-4" />
<p>{message}</p>
</animated.div>
) : null;