mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
Fix all the weird eslint warnings (#2245)
* actually fix the weird lint errors * Prettier auto-format --------- Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com> Co-authored-by: Vítor Vasconcellos <vasconcellos.dev@gmail.com>
This commit is contained in:
Utku
GitHub
parent
6277c8cb5f
commit
9a1cdf1dca
8
.github/actions/publish-artifacts/index.ts
vendored
8
.github/actions/publish-artifacts/index.ts
vendored
|
|
@ -7,7 +7,7 @@ type OS = 'darwin' | 'windows' | 'linux';
|
|||
type Arch = 'x64' | 'arm64';
|
||||
type TargetConfig = { bundle: string; ext: string };
|
||||
type BuildTarget = {
|
||||
updater: { bundle: string; bundleExt: string; archiveExt: string; };
|
||||
updater: { bundle: string; bundleExt: string; archiveExt: string };
|
||||
standalone: Array<TargetConfig>;
|
||||
};
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ const OS_TARGETS = {
|
|||
linux: {
|
||||
updater: {
|
||||
bundle: 'appimage',
|
||||
bundleExt: "AppImage",
|
||||
bundleExt: 'AppImage',
|
||||
archiveExt: 'tar.gz'
|
||||
},
|
||||
standalone: [
|
||||
|
|
@ -57,8 +57,8 @@ async function globFiles(pattern: string) {
|
|||
return await globber.glob();
|
||||
}
|
||||
|
||||
async function uploadUpdater({ bundle, bundleExt, archiveExt }: BuildTarget["updater"]) {
|
||||
const fullExt = `${bundleExt}.${archiveExt}`
|
||||
async function uploadUpdater({ bundle, bundleExt, archiveExt }: BuildTarget['updater']) {
|
||||
const fullExt = `${bundleExt}.${archiveExt}`;
|
||||
const files = await globFiles(`${BUNDLE_DIR}/${bundle}/*.${fullExt}*`);
|
||||
|
||||
const updaterPath = files.find((file) => file.endsWith(fullExt));
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function DockerDialog({
|
|||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-app/80 backdrop-blur-sm radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-open:animate-in radix-state-open:fade-in-0" />
|
||||
<Dialog.Content className="fixed left-[50%] top-[50%] z-50 w-[500px] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
|
||||
<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[500px] translate-x-[-1/2] translate-y-[-1/2] overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
|
||||
<div className="p-3 pt-0">
|
||||
<h2 className="py-2 text-center text-lg font-semibold text-ink">Docker</h2>
|
||||
{/* Link */}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export function Platform({ platform, ...props }: ComponentProps<'a'> & PlatformP
|
|||
<Tooltip label={platform.name}>
|
||||
<Outer {...props}>
|
||||
<Icon
|
||||
className={`h-[24px] w-[24px] text-white ${
|
||||
className={`size-[24px] text-white ${
|
||||
platform.disabled ? 'opacity-20' : 'opacity-90'
|
||||
}`}
|
||||
weight="fill"
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export async function Footer() {
|
|||
/>
|
||||
<div className="m-auto grid min-h-64 max-w-[100rem] grid-cols-2 gap-6 p-8 pb-20 pt-10 text-white sm:grid-cols-2 lg:grid-cols-6">
|
||||
<div className="col-span-2">
|
||||
<Image alt="Spacedrive logo" src={Logo} className="mb-5 h-10 w-10" />
|
||||
<Image alt="Spacedrive logo" src={Logo} className="mb-5 size-10" />
|
||||
|
||||
<h1 className="mb-1 text-xl font-bold">Spacedrive</h1>
|
||||
<p className="text-sm text-gray-350 opacity-50">
|
||||
|
|
@ -38,31 +38,31 @@ export async function Footer() {
|
|||
</p>
|
||||
<div className="mb-10 mt-12 flex flex-row space-x-3">
|
||||
<FooterLink link="https://x.com/spacedriveapp">
|
||||
<Twitter className="h-6 w-6" />
|
||||
<Twitter className="size-6" />
|
||||
</FooterLink>
|
||||
<FooterLink aria-label="discord" link="https://discord.gg/gTaF2Z44f5">
|
||||
<Discord className="h-6 w-6" />
|
||||
<Discord className="size-6" />
|
||||
</FooterLink>
|
||||
<FooterLink
|
||||
aria-label="instagram"
|
||||
link="https://instagram.com/spacedriveapp"
|
||||
>
|
||||
<Instagram className="h-6 w-6" />
|
||||
<Instagram className="size-6" />
|
||||
</FooterLink>
|
||||
<FooterLink aria-label="github" link="https://github.com/spacedriveapp">
|
||||
<Github className="h-6 w-6" />
|
||||
<Github className="size-6" />
|
||||
</FooterLink>
|
||||
<FooterLink
|
||||
aria-label="open collective"
|
||||
link="https://opencollective.com/spacedrive"
|
||||
>
|
||||
<Opencollective className="h-6 w-6" />
|
||||
<Opencollective className="size-6" />
|
||||
</FooterLink>
|
||||
<FooterLink
|
||||
aria-label="twitch stream"
|
||||
link="https://twitch.tv/jamiepinelive"
|
||||
>
|
||||
<Twitch className="h-6 w-6" />
|
||||
<Twitch className="size-6" />
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,8 +141,8 @@ export async function Footer() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="absolute top-0 flex h-1 w-full flex-row items-center justify-center opacity-100">
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function MobileDropdown() {
|
|||
<Dropdown.Root
|
||||
button={
|
||||
<Button aria-label="mobile-menu" className="hover:!bg-transparent" size="icon">
|
||||
<DotsThreeVertical weight="bold" className="h-6 w-6 " />
|
||||
<DotsThreeVertical weight="bold" className="size-6 " />
|
||||
</Button>
|
||||
}
|
||||
className="right-4 top-2 block text-white lg:hidden"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export function NavBar() {
|
|||
<div className="navbar-blur fixed z-[55] h-16 w-full !bg-black/10 px-2 transition">
|
||||
<div className="relative m-auto flex h-full max-w-[100rem] items-center p-5">
|
||||
<Link href="/" className="absolute flex flex-row items-center">
|
||||
<Image alt="Spacedrive logo" src={Logo} className="z-30 mr-3 h-8 w-8" />
|
||||
<Image alt="Spacedrive logo" src={Logo} className="z-30 mr-3 size-8" />
|
||||
<h3 className="text-xl font-bold text-white">Spacedrive</h3>
|
||||
</Link>
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ export function NavBar() {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Discord className="h-6 w-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
<Discord className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
</Link>
|
||||
<Link
|
||||
aria-label="github"
|
||||
|
|
@ -48,13 +48,13 @@ export function NavBar() {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Github className="h-6 w-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
<Github className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-0 flex h-1 w-full flex-row items-center justify-center pt-4 opacity-100">
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function NewBanner(props: NewBannerProps) {
|
|||
<Newspaper weight="fill" className="text-white " size={20} />
|
||||
<p className="font-regular truncate text-white">{headline}</p>
|
||||
</div>
|
||||
<div role="separator" className="h-22 mx-4 w-[1px] bg-zinc-700/70" />
|
||||
<div role="separator" className="h-22 mx-4 w-px bg-zinc-700/70" />
|
||||
<span className="font-regular shrink-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent decoration-primary-600">
|
||||
{link} <span aria-hidden="true">→</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export function Breadcrumbs() {
|
|||
<div className="flex flex-row items-center gap-1">
|
||||
{slug.map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
{index > 0 && <CaretRight className="h-4 w-4" />}
|
||||
{index > 0 && <CaretRight className="size-4" />}
|
||||
<span className="px-1 text-sm">{toTitleCase(item)}</span>
|
||||
</Fragment>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export function OpenMobileSidebarButton() {
|
|||
|
||||
return (
|
||||
<Button className="ml-1 !border-none !px-2" onClick={() => menu.setOpen((o) => !o)}>
|
||||
<List weight="bold" className="h-6 w-6" />
|
||||
<List weight="bold" className="size-6" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ export function MobileSidebarWrapper({ children }: PropsWithChildren) {
|
|||
onClick={() => menu.setOpen((o) => !o)}
|
||||
className="-ml-0.5 mb-3 !border-none !px-1"
|
||||
>
|
||||
<X weight="bold" className="h-6 w-6" />
|
||||
<X weight="bold" className="size-6" />
|
||||
</Button>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export async function Sidebar() {
|
|||
slug={section.slug}
|
||||
>
|
||||
<div className="mr-4 rounded-lg border-t border-gray-400/20 bg-gray-500 p-1">
|
||||
<Icon weight="bold" className="h-4 w-4 text-white opacity-80" />
|
||||
<Icon weight="bold" className="size-4 text-white opacity-80" />
|
||||
</div>
|
||||
{toTitleCase(section.slug)}
|
||||
</SectionLink>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function NotFound() {
|
|||
<Markdown classNames="flex w-full justify-center">
|
||||
<div className="m-auto flex flex-col items-center ">
|
||||
<div className="h-32" />
|
||||
<SmileyXEyes className="mb-3 h-44 w-44" />
|
||||
<SmileyXEyes className="mb-3 size-44" />
|
||||
<h1 className="mb-2 text-center">
|
||||
In the quantum realm this page potentially exists.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -103,14 +103,14 @@ const PackageCard = ({ features, name, price, toggle, subTitle }: Props) => {
|
|||
<p className="text-md mb-4 uppercase text-[#A7ADD2]">{name}</p>
|
||||
{price && (
|
||||
<>
|
||||
<p className="text-2xl font-bold leading-[1] text-white">
|
||||
<p className="text-2xl font-bold leading-none text-white">
|
||||
${toggle ? price.yearly : price.monthly}
|
||||
</p>
|
||||
<p className="text-md text-[#A7ADD2]">per {duration}</p>
|
||||
</>
|
||||
)}
|
||||
{subTitle && (
|
||||
<p className="text-2xl font-bold leading-[1] text-white">{subTitle}</p>
|
||||
<p className="text-2xl font-bold leading-none text-white">{subTitle}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,7 +128,7 @@ const PackageCard = ({ features, name, price, toggle, subTitle }: Props) => {
|
|||
)}
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center justify-center gap-2.5">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full border border-[#353252] bg-[#2A2741]">
|
||||
<div className="flex size-5 items-center justify-center rounded-full border border-[#353252] bg-[#2A2741]">
|
||||
<Check weight="bold" size={12} color="white" />
|
||||
</div>
|
||||
<p className="text-sm text-white">{feature}</p>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function Page() {
|
|||
{items.map((item, i) => (
|
||||
<Fragment key={i}>
|
||||
{/* Using span so i can use the group-last-of-type selector */}
|
||||
<span className="group flex max-w-[10rem] items-start justify-end gap-4 first:items-start">
|
||||
<span className="group flex max-w-40 items-start justify-end gap-4 first:items-start">
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-col items-end',
|
||||
|
|
|
|||
|
|
@ -76,32 +76,32 @@ export function TeamMember(props: TeamMemberProps) {
|
|||
<div className="mt-3 flex flex-row space-x-2">
|
||||
{props.socials?.twitter && (
|
||||
<Link href={props.socials.twitter}>
|
||||
<Twitter className="h-[20px] w-[20px]" />
|
||||
<Twitter className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
{props.socials?.github && (
|
||||
<Link href={props.socials.github}>
|
||||
<Github className="h-[20px] w-[20px]" />
|
||||
<Github className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
{props.socials?.gitlab && (
|
||||
<Link href={props.socials.gitlab}>
|
||||
<Gitlab className="h-[20px] w-[20px]" />
|
||||
<Gitlab className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
{props.socials?.twitch && (
|
||||
<Link href={props.socials.twitch}>
|
||||
<Twitch className="h-[20px] w-[20px]" />
|
||||
<Twitch className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
{props.socials?.dribbble && (
|
||||
<Link href={props.socials.dribbble}>
|
||||
<Dribbble className="h-[20px] w-[20px]" />
|
||||
<Dribbble className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
{props.socials?.website && (
|
||||
<Link href={props.socials.website}>
|
||||
<Website className="h-[20px] w-[20px]" />
|
||||
<Website className="size-[20px]" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const BentoBoxes = () => {
|
|||
lg:grid lg:grid-cols-6"
|
||||
>
|
||||
<BentoBox colSpan={4} className="p-6" bgUrl="images/bento/encrypt-bg.webp">
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
<div className="relative z-20">
|
||||
<Heading>Encryption</Heading>
|
||||
<Text className="mx-auto max-w-[417px]">
|
||||
|
|
@ -64,7 +64,7 @@ const BentoBoxes = () => {
|
|||
unauthorized access and guaranteed protection.
|
||||
</Text>
|
||||
</div>
|
||||
<div className="flex h-[80%] w-auto items-start justify-center">
|
||||
<div className="flex h-4/5 w-auto items-start justify-center">
|
||||
<Image
|
||||
className="mx-auto"
|
||||
alt="Encryption"
|
||||
|
|
@ -77,7 +77,7 @@ const BentoBoxes = () => {
|
|||
</div>
|
||||
</BentoBox>
|
||||
<BentoBox colSpan={2} className="p-6">
|
||||
<div className="flex h-[75%] w-auto items-center justify-center">
|
||||
<div className="flex h-3/4 w-auto items-center justify-center">
|
||||
<Image
|
||||
className="mx-auto mt-3 brightness-125"
|
||||
alt="Powerful tags"
|
||||
|
|
@ -88,9 +88,9 @@ const BentoBoxes = () => {
|
|||
src="/images/bento/tags.webp"
|
||||
/>
|
||||
</div>
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
|
||||
<div className="relative z-[40] mt-2 md:mt-7">
|
||||
<div className="relative z-40 mt-2 md:mt-7">
|
||||
<Heading>Powerful tags</Heading>
|
||||
<Text>
|
||||
Create and apply tags to your files and folders, and instantly locate
|
||||
|
|
@ -105,8 +105,8 @@ const BentoBoxes = () => {
|
|||
Easily find your files and folders through our search
|
||||
</Text>
|
||||
</div>
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="flex h-[80%] w-auto items-start justify-center">
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
<div className="flex h-4/5 w-auto items-start justify-center">
|
||||
<Image
|
||||
className="mx-auto brightness-110"
|
||||
alt="Search"
|
||||
|
|
@ -119,8 +119,8 @@ const BentoBoxes = () => {
|
|||
</div>
|
||||
</BentoBox>
|
||||
<BentoBox colSpan={2} className="p-6">
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="flex h-[80%] w-auto items-center justify-center">
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
<div className="flex h-4/5 w-auto items-center justify-center">
|
||||
<Image
|
||||
className="mx-auto brightness-125"
|
||||
alt="Library"
|
||||
|
|
@ -143,8 +143,8 @@ const BentoBoxes = () => {
|
|||
Send files to other devices quickly and easily
|
||||
</Text>
|
||||
</div>
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="flex h-[80%] w-auto items-center justify-center">
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
<div className="flex h-4/5 w-auto items-center justify-center">
|
||||
<div
|
||||
style={
|
||||
{
|
||||
|
|
@ -211,7 +211,7 @@ const BentoBoxes = () => {
|
|||
Windows, macOS, Linux, iOS, Android, and the web. Spacedrive is everywhere.
|
||||
</Text>
|
||||
</div>
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
|
||||
<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 size-full" />
|
||||
</BentoBox>
|
||||
</MagicContainer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default function NavBar() {
|
|||
<div className="navbar-blur fixed z-[55] h-16 w-full !bg-black/10 px-2 transition">
|
||||
<div className="relative m-auto flex h-full max-w-[100rem] items-center p-5">
|
||||
<Link href="/" className="absolute flex flex-row items-center">
|
||||
<Image alt="Spacedrive logo" src={Logo} className="z-30 mr-3 h-8 w-8" />
|
||||
<Image alt="Spacedrive logo" src={Logo} className="z-30 mr-3 size-8" />
|
||||
<h3 className="text-xl font-bold text-white">Spacedrive</h3>
|
||||
</Link>
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ export default function NavBar() {
|
|||
className="ml-[140px] hover:!bg-transparent"
|
||||
size="icon"
|
||||
>
|
||||
<DotsThreeVertical weight="bold" className="h-6 w-6 " />
|
||||
<DotsThreeVertical weight="bold" className="size-6 " />
|
||||
</Button>
|
||||
}
|
||||
className="right-4 top-2 block h-6 w-44 text-white lg:hidden"
|
||||
|
|
@ -145,7 +145,7 @@ export default function NavBar() {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Discord className="h-6 w-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
<Discord className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
</Link>
|
||||
<Link
|
||||
aria-label="github"
|
||||
|
|
@ -153,13 +153,13 @@ export default function NavBar() {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Github className="h-6 w-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
<Github className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-0 flex h-1 w-full flex-row items-center justify-center pt-4 opacity-100">
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
|
||||
<div className="h-px w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
|
|||
<Newspaper weight="fill" className="text-white " size={20} />
|
||||
<p className="font-regular truncate text-white">{headline}</p>
|
||||
</div>
|
||||
<div role="separator" className="h-22 mx-4 w-[1px] bg-zinc-700/70" />
|
||||
<div role="separator" className="h-22 mx-4 w-px bg-zinc-700/70" />
|
||||
<Link
|
||||
href={href}
|
||||
className="font-regular shrink-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent decoration-primary-600"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const WormHole = () => {
|
|||
className="absolute top-[-150px] w-full max-w-[450px] rotate-[300deg] sm:top-[-200px]
|
||||
sm:max-w-[500px] md:top-[-200px] lg:top-auto lg:mr-[250px] lg:max-w-full lg:rotate-0"
|
||||
>
|
||||
<div className="absolute left-[200px] top-[50px] z-10 h-full w-full">
|
||||
<div className="absolute left-[200px] top-[50px] z-10 size-full">
|
||||
<Image
|
||||
width={30}
|
||||
height={45}
|
||||
|
|
@ -24,7 +24,7 @@ const WormHole = () => {
|
|||
src="/images/icons/heart.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute left-[200px] top-[50px] z-10 h-full w-full">
|
||||
<div className="absolute left-[200px] top-[50px] z-10 size-full">
|
||||
<Image
|
||||
width={40}
|
||||
height={45}
|
||||
|
|
@ -36,8 +36,8 @@ const WormHole = () => {
|
|||
</div>
|
||||
<div
|
||||
className="absolute top-[-100px] z-10
|
||||
h-full w-full
|
||||
sm:left-[200px] sm:top-[10px]"
|
||||
size-full sm:left-[200px]
|
||||
sm:top-[10px]"
|
||||
>
|
||||
<Image
|
||||
width={40}
|
||||
|
|
@ -50,8 +50,8 @@ const WormHole = () => {
|
|||
</div>
|
||||
<div
|
||||
className="absolute left-[120px] top-[-50px]
|
||||
z-10 h-full w-full
|
||||
sm:left-[200px] sm:top-[-10px]"
|
||||
z-10 size-full sm:left-[200px]
|
||||
sm:top-[-10px]"
|
||||
>
|
||||
<Image
|
||||
width={40}
|
||||
|
|
@ -63,8 +63,8 @@ const WormHole = () => {
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
className="absolute left-[200px] top-[350px] z-10 h-full
|
||||
w-full lg:left-[200px] lg:top-[300px]"
|
||||
className="absolute left-[200px] top-[350px] z-10 size-full
|
||||
lg:left-[200px] lg:top-[300px]"
|
||||
>
|
||||
<Image
|
||||
width={40}
|
||||
|
|
@ -75,7 +75,7 @@ const WormHole = () => {
|
|||
src="/images/icons/video.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute left-[200px] top-[150px] z-10 h-full w-full">
|
||||
<div className="absolute left-[200px] top-[150px] z-10 size-full">
|
||||
<Image
|
||||
width={40}
|
||||
height={45}
|
||||
|
|
@ -85,7 +85,7 @@ const WormHole = () => {
|
|||
src="/images/icons/application.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute left-[120px] top-[50px] z-10 h-full w-full lg:left-[200px] lg:top-[120px]">
|
||||
<div className="absolute left-[120px] top-[50px] z-10 size-full lg:left-[200px] lg:top-[120px]">
|
||||
<Image
|
||||
width={40}
|
||||
height={45}
|
||||
|
|
@ -95,7 +95,7 @@ const WormHole = () => {
|
|||
src="/images/icons/collection.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute left-[120px] top-[50px] z-10 h-full w-full sm:left-[200px] sm:top-[300px] lg:left-[200px] lg:top-[420px]">
|
||||
<div className="absolute left-[120px] top-[50px] z-10 size-full sm:left-[200px] sm:top-[300px] lg:left-[200px] lg:top-[420px]">
|
||||
<Image
|
||||
width={40}
|
||||
height={45}
|
||||
|
|
@ -108,7 +108,7 @@ const WormHole = () => {
|
|||
<div
|
||||
className="absolute
|
||||
left-[60px] top-[-190px]
|
||||
z-10 h-full w-full sm:left-[50px] sm:top-[50px] lg:left-[200px] lg:top-[490px]"
|
||||
z-10 size-full sm:left-[50px] sm:top-[50px] lg:left-[200px] lg:top-[490px]"
|
||||
>
|
||||
<Image
|
||||
width={40}
|
||||
|
|
@ -121,7 +121,7 @@ const WormHole = () => {
|
|||
</div>
|
||||
<div
|
||||
className="absolute left-[120px] top-[50px]
|
||||
z-10 h-full w-full md:left-[200px] md:top-[350px]"
|
||||
z-10 size-full md:left-[200px] md:top-[350px]"
|
||||
>
|
||||
<Image
|
||||
width={40}
|
||||
|
|
@ -132,7 +132,7 @@ const WormHole = () => {
|
|||
src="/images/icons/database.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute left-[100px] top-[-200px] z-10 h-full w-full sm:left-[150px] sm:top-[50px]">
|
||||
<div className="absolute left-[100px] top-[-200px] z-10 size-full sm:left-[150px] sm:top-[50px]">
|
||||
<Image
|
||||
width={40}
|
||||
height={45}
|
||||
|
|
@ -153,7 +153,7 @@ const WormHole = () => {
|
|||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'worm-hole-border-gradient relative top-[100px] z-[20] flex w-full max-w-[500px] flex-col rounded-lg',
|
||||
'worm-hole-border-gradient relative top-[100px] z-20 flex w-full max-w-[500px] flex-col rounded-lg',
|
||||
'items-center justify-center gap-2 bg-gradient-to-r from-[#080710]/0 to-[#080710]/50 p-8 backdrop-blur-sm'
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default function Notice({ text, type, title }: NoticeProps) {
|
|||
)}
|
||||
>
|
||||
<div className="flex flex-row items-center gap-x-1">
|
||||
<Icon className="my-0 h-5 w-5 text-white" />
|
||||
<Icon className="my-0 size-5 text-white" />
|
||||
<h5 className="m-0 text-sm font-bold uppercase text-white">{title || type}</h5>
|
||||
</div>
|
||||
<p className="mx-0 my-1 mb-0 text-white">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export const ProgressBar = memo((props: ProgressBarProps) => {
|
|||
return (
|
||||
<View style={tw`h-1 overflow-hidden rounded-full bg-app-button`}>
|
||||
<MotiView
|
||||
style={tw`h-full w-[50%] bg-accent`}
|
||||
style={tw`h-full w-1/2 bg-accent`}
|
||||
from={{ left: '-50%' }}
|
||||
animate={{ left: '100%' }}
|
||||
transition={{ type: 'timing', duration: 1500, loop: true }}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const Job = ({ progress, message, error }: JobProps) => {
|
|||
backgroundColor={tw.color('ink-light/5')}
|
||||
>
|
||||
{(fill) => (
|
||||
<View style={tw`flex-row items-end gap-[1px]`}>
|
||||
<View style={tw`flex-row items-end gap-px`}>
|
||||
<Text style={tw`text-lg font-bold text-white`}>
|
||||
{error ? '0' : fill.toFixed(0)}
|
||||
</Text>
|
||||
|
|
@ -79,7 +79,7 @@ const Job = ({ progress, message, error }: JobProps) => {
|
|||
</View>
|
||||
)}
|
||||
</AnimatedCircularProgress>
|
||||
<Text style={tw`w-[60%] text-sm leading-5 text-ink-dull`}>{message}</Text>
|
||||
<Text style={tw`w-3/5 text-sm leading-5 text-ink-dull`}>{message}</Text>
|
||||
</View>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const ListLocation = ({ location, modalRef }: ListLocationProps) => {
|
|||
)}
|
||||
>
|
||||
<Card style={tw`h-auto flex-row justify-between gap-3 border-0 p-3`}>
|
||||
<View style={tw`w-[50%] flex-row items-center gap-2`}>
|
||||
<View style={tw`w-1/2 flex-row items-center gap-2`}>
|
||||
<View style={tw`relative`}>
|
||||
<FolderIcon size={38} />
|
||||
<View
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { ClassInput } from 'twrnc/dist/esm/types';
|
|||
import { byteSize, Statistics, StatisticsResponse, useLibraryContext } from '@sd/client';
|
||||
import useCounter from '~/hooks/useCounter';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
|
||||
import Card from '../layout/Card';
|
||||
|
||||
const StatItemNames: Partial<Record<keyof Statistics, string>> = {
|
||||
|
|
@ -31,13 +32,9 @@ const StatItem = ({ title, bytes, isLoading, style }: StatItemProps) => {
|
|||
|
||||
return (
|
||||
<Card
|
||||
style={twStyle(
|
||||
'flex flex-col items-center justify-center p-2',
|
||||
style,
|
||||
{
|
||||
style={twStyle('flex flex-col items-center justify-center p-2', style, {
|
||||
hidden: isLoading
|
||||
}
|
||||
)}
|
||||
})}
|
||||
>
|
||||
<Text style={tw`text-sm font-bold text-zinc-400`}>{title}</Text>
|
||||
<View style={tw`mt-1 flex-row items-baseline`}>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
|
|||
style={tw`flex h-10 flex-row items-center gap-1.5 border-t border-app-cardborder px-2`}
|
||||
>
|
||||
<View
|
||||
style={tw`rounded border border-app-lightborder bg-app-highlight px-1.5 py-[1px]`}
|
||||
style={tw`rounded border border-app-lightborder bg-app-highlight px-1.5 py-px`}
|
||||
>
|
||||
<Text style={tw`text-xs font-medium uppercase text-ink-dull`}>
|
||||
{connectionType || 'Local'}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const InfoPill = (props: Props) => {
|
|||
return (
|
||||
<View
|
||||
style={twStyle(
|
||||
'rounded-md border border-transparent bg-app-highlight px-[6px] py-[1px] shadow shadow-app-shade/5',
|
||||
'rounded-md border border-transparent bg-app-highlight px-[6px] py-px shadow shadow-app-shade/5',
|
||||
props.containerStyle
|
||||
)}
|
||||
>
|
||||
|
|
@ -27,7 +27,7 @@ export function PlaceholderPill(props: Props) {
|
|||
return (
|
||||
<View
|
||||
style={twStyle(
|
||||
'rounded-md border border-dashed border-app-highlight bg-transparent px-[6px] py-[1px] shadow shadow-app-shade/10',
|
||||
'rounded-md border border-dashed border-app-highlight bg-transparent px-[6px] py-px shadow shadow-app-shade/10',
|
||||
props.containerStyle
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ type SwitchContainerProps = { title: string; description?: string } & SwitchProp
|
|||
export const SwitchContainer: FC<SwitchContainerProps> = ({ title, description, ...props }) => {
|
||||
return (
|
||||
<View style={tw`flex flex-row items-center justify-between pb-6`}>
|
||||
<View style={tw`w-[80%]`}>
|
||||
<View style={tw`w-4/5`}>
|
||||
<Text style={tw`text-sm font-medium text-ink`}>{title}</Text>
|
||||
{description && <Text style={tw`mt-2 text-sm text-ink-dull`}>{description}</Text>}
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const SettingsToggle = ({ title, description, onEnabledChange, control, name }:
|
|||
|
||||
return (
|
||||
<View style={tw`flex-row items-center justify-between`}>
|
||||
<View style={tw`w-[75%]`}>
|
||||
<View style={tw`w-3/4`}>
|
||||
<Text style={tw`text-sm font-medium text-ink`}>{title}</Text>
|
||||
{description && <Text style={tw`mt-1 text-xs text-ink-dull`}>{description}</Text>}
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default function LocationsScreen({ viewStyle }: Props) {
|
|||
return (
|
||||
<ScreenContainer scrollview={false} style={tw`relative px-6 py-0`}>
|
||||
<Pressable
|
||||
style={tw`absolute z-10 items-center justify-center w-12 h-12 rounded-full bottom-7 right-7 bg-accent`}
|
||||
style={tw`absolute bottom-7 right-7 z-10 h-12 w-12 items-center justify-center rounded-full bg-accent`}
|
||||
onPress={() => {
|
||||
modalRef.current?.present();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { useNavigation, useRoute } from '@react-navigation/native';
|
||||
import { AppLogo, BloomOne } from '@sd/assets/images';
|
||||
import { SdMobIntro } from '@sd/assets/videos';
|
||||
import { useOnboardingStore } from '@sd/client';
|
||||
import { ResizeMode, Video } from 'expo-av';
|
||||
import { MotiView } from 'moti';
|
||||
import { CaretLeft } from 'phosphor-react-native';
|
||||
|
|
@ -9,6 +8,7 @@ import { useEffect } from 'react';
|
|||
import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native';
|
||||
import Animated from 'react-native-reanimated';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useOnboardingStore } from '@sd/client';
|
||||
import { FadeInUpAnimation, LogoAnimation } from '~/components/animation/layout';
|
||||
import { AnimatedButton } from '~/components/primitive/Button';
|
||||
import { styled, tw, twStyle } from '~/lib/tailwind';
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function Theme(props: ThemeProps) {
|
|||
<View
|
||||
style={twStyle(
|
||||
{ backgroundColor: props.insideColor, borderColor: props.highlightColor },
|
||||
'absolute bottom-[-1px] right-[-1px] h-[60px] w-[75px] rounded-tl-xl border'
|
||||
'absolute -bottom-px -right-px h-[60px] w-[75px] rounded-tl-xl border'
|
||||
)}
|
||||
>
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -15,10 +15,7 @@ const MediaViewIcon = () => {
|
|||
name="Image"
|
||||
className="absolute -top-1 left-6 size-14 rotate-6 overflow-hidden"
|
||||
/>
|
||||
<Icon
|
||||
name="Video"
|
||||
className="absolute top-2 z-10 size-14 -rotate-6 overflow-hidden"
|
||||
/>
|
||||
<Icon name="Video" className="absolute top-2 z-10 size-14 -rotate-6 overflow-hidden" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export const DragOverlay = memo(() => {
|
|||
size={32}
|
||||
frame
|
||||
frameClassName={clsx(
|
||||
'!border-[1px] shadow-md',
|
||||
'!border-DEFAULT shadow-md',
|
||||
isDark ? 'shadow-app-shade/50' : 'shadow-app-shade/25'
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ const Thumbnails = ({ items }: { items: ExplorerItem[] }) => {
|
|||
className={clsx(
|
||||
thumbs.length > 1 && '!absolute',
|
||||
i === 0 && thumbs.length > 1 && 'z-30 !h-[76%] !w-[76%]',
|
||||
i === 1 && 'z-20 !h-[80%] !w-[80%] rotate-[-5deg]',
|
||||
i === 1 && 'z-20 !h-4/5 !w-4/5 rotate-[-5deg]',
|
||||
i === 2 && 'z-10 !h-[84%] !w-[84%] rotate-[7deg]'
|
||||
)}
|
||||
childClassName={(type) =>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const useExplorerTopBarOptions = () => {
|
|||
icon: (
|
||||
<SidebarSimple
|
||||
weight={showInspector ? 'fill' : 'regular'}
|
||||
className={clsx(TOP_BAR_ICON_STYLE, 'scale-x-[-1]')}
|
||||
className={clsx(TOP_BAR_ICON_STYLE, '-scale-x-100')}
|
||||
/>
|
||||
),
|
||||
individual: true,
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ const ItemSize = () => {
|
|||
if (!showSize) return null;
|
||||
|
||||
return (
|
||||
<div className="truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull">
|
||||
<div className="truncate rounded-md px-1.5 py-px text-center text-tiny text-ink-dull">
|
||||
{`${bytes}`}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -162,9 +162,7 @@ function LabelItemCount({ data }: { data: Extract<ExplorerItem, { type: 'Label'
|
|||
{
|
||||
filters: [
|
||||
{
|
||||
object: { labels: { in: [data.item.id]
|
||||
}
|
||||
}
|
||||
object: { labels: { in: [data.item.id] } }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -173,7 +171,7 @@ function LabelItemCount({ data }: { data: Extract<ExplorerItem, { type: 'Label'
|
|||
if (count.data === undefined) return;
|
||||
|
||||
return (
|
||||
<div className="truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull">
|
||||
<div className="truncate rounded-md px-1.5 py-px text-center text-tiny text-ink-dull">
|
||||
{t('item_with_count', { count: count.data })}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
[id^='headlessui-dialog-panel-'] > div.flex-1.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
@apply bg-app-explorerScrollbar w-10 rounded-full #{!important};
|
||||
@apply w-10 rounded-full bg-app-explorerScrollbar #{!important};
|
||||
}
|
||||
|
||||
.command-palette-content ul a {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,5 @@ import { useLibraryQuery } from '~/../packages/client/src';
|
|||
|
||||
export default () => {
|
||||
const { data: isActive } = useLibraryQuery(['jobs.isActive']);
|
||||
return isActive ? (
|
||||
<Loader className="size-[20px]" />
|
||||
) : (
|
||||
<CheckCircle className="size-5" />
|
||||
);
|
||||
return isActive ? <Loader className="size-[20px]" /> : <CheckCircle className="size-5" />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import { Gear } from '@phosphor-icons/react';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { JobManagerContextProvider, LibraryContextProvider, useClientContext, useDebugState, useLibrarySubscription } from '@sd/client';
|
||||
import {
|
||||
JobManagerContextProvider,
|
||||
LibraryContextProvider,
|
||||
useClientContext,
|
||||
useDebugState,
|
||||
useLibrarySubscription
|
||||
} from '@sd/client';
|
||||
import { Button, ButtonLink, Popover, Tooltip, usePopover } from '@sd/ui';
|
||||
import { useKeysMatcher, useLocale, useShortcut } from '~/hooks';
|
||||
import { usePlatform } from '~/util/Platform';
|
||||
|
|
@ -8,7 +15,6 @@ import { usePlatform } from '~/util/Platform';
|
|||
import DebugPopover from '../DebugPopover';
|
||||
import { IsRunningJob, JobManager } from '../JobManager';
|
||||
import FeedbackButton from './FeedbackButton';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default () => {
|
||||
const { library } = useClientContext();
|
||||
|
|
@ -45,7 +51,11 @@ export default () => {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
{library && <LibraryContextProvider library={library}><SyncStatusIndicator/></LibraryContextProvider>}
|
||||
{library && (
|
||||
<LibraryContextProvider library={library}>
|
||||
<SyncStatusIndicator />
|
||||
</LibraryContextProvider>
|
||||
)}
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex">
|
||||
<ButtonLink
|
||||
|
|
@ -101,9 +111,9 @@ export default () => {
|
|||
function SyncStatusIndicator() {
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
|
||||
useLibrarySubscription(["sync.active"], {
|
||||
useLibrarySubscription(['sync.active'], {
|
||||
onData: setSyncing
|
||||
})
|
||||
});
|
||||
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export interface TopBarButtonProps {
|
|||
}
|
||||
|
||||
const topBarButtonStyle = cva(
|
||||
'text-md relative mr-[1px] flex border-none !p-0.5 font-medium text-ink outline-none transition-colors duration-100 hover:bg-app-selected hover:text-ink radix-state-open:bg-app-selected',
|
||||
'text-md relative mr-px flex border-none !p-0.5 font-medium text-ink outline-none transition-colors duration-100 hover:bg-app-selected hover:text-ink radix-state-open:bg-app-selected',
|
||||
{
|
||||
variants: {
|
||||
active: {
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ function Tabs() {
|
|||
else if (e.button === 1) removeTab(index);
|
||||
}}
|
||||
className={clsx(
|
||||
'duration-[50ms] group relative flex h-full min-w-[10rem] shrink-0 flex-row items-center justify-center px-8 text-center',
|
||||
'duration-[50ms] group relative flex h-full min-w-40 shrink-0 flex-row items-center justify-center px-8 text-center',
|
||||
ctx.tabIndex === index
|
||||
? 'text-ink'
|
||||
: 'top-bar-blur border-t border-sidebar-divider bg-sidebar/30 text-ink-faint/60 transition-colors hover:bg-app/50'
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@ export const Component = () => {
|
|||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex size-full flex-col items-start p-4">{authSensitiveChild()}</div>
|
||||
);
|
||||
return <div className="flex size-full flex-col items-start p-4">{authSensitiveChild()}</div>;
|
||||
};
|
||||
|
||||
function Authenticated() {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const EphemeralNotice = ({ path }: { path: string }) => {
|
|||
<Dialog.Root open={!dismissed}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-app/80 backdrop-blur-sm radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-open:animate-in radix-state-open:fade-in-0" />
|
||||
<Dialog.Content className="fixed left-[50%] top-[50%] z-50 w-96 translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
|
||||
<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-96 -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
|
||||
<div className="relative flex aspect-video overflow-hidden border-b border-app-line/50 bg-gradient-to-b from-app-darkBox to-app to-80% pl-5 pt-5">
|
||||
<div
|
||||
className={clsx(
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
|
|||
center={<SearchBar />}
|
||||
left={
|
||||
<div className="flex items-center gap-2">
|
||||
<Folder size={22} className="mt-[-1px]" />
|
||||
<Folder size={22} className="-mt-px" />
|
||||
<span className="truncate text-sm font-medium">{title}</span>
|
||||
<LocationOfflineInfo location={location} />
|
||||
<LocationOptions location={location} path={path || ''} />
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const Component = () => {
|
|||
<TopBarPortal
|
||||
left={
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon name="Laptop" size={24} className="mt-[-1px]" />
|
||||
<Icon name="Laptop" size={24} className="-mt-px" />
|
||||
<span className="truncate text-sm font-medium">{title}</span>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const OverviewSection = ({
|
|||
{/* {title && <div className="mx-7 mb-3 h-[1px] w-full bg-app-line/50" />} */}
|
||||
|
||||
<HorizontalScroll>{children}</HorizontalScroll>
|
||||
<div className="my-2 h-[1px] w-full " />
|
||||
<div className="my-2 h-px w-full " />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -170,11 +170,7 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
|
|||
});
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
className="w-[75%]"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
<Input className="w-3/4" value={value} onChange={(e) => setValue(e.target.value)} />
|
||||
<Button
|
||||
disabled={value.length === 0 || allFiltersKeys.has(key)}
|
||||
variant="accent"
|
||||
|
|
@ -490,7 +486,7 @@ export const filterRegistry = [
|
|||
empty={() => (
|
||||
<div className="flex flex-col items-center justify-center gap-2 p-2">
|
||||
<SDIcon name="Tags" size={32} />
|
||||
<p className="w-[80%] text-center text-xs text-ink-dull">
|
||||
<p className="w-4/5 text-center text-xs text-ink-dull">
|
||||
You have not created any tags
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -280,10 +280,10 @@ function SystemTheme(props: ThemeProps) {
|
|||
return (
|
||||
<div className="w-[150px]">
|
||||
<div className="relative flex h-[90px]">
|
||||
<div className="relative h-full w-[50%] grow overflow-hidden rounded-l-lg bg-black">
|
||||
<div className="relative h-full w-1/2 grow overflow-hidden rounded-l-lg bg-black">
|
||||
<Theme className="rounded-r-none" {...themes[1]!} />
|
||||
</div>
|
||||
<div className={clsx('relative h-full w-[50%] grow overflow-hidden rounded-r-lg')}>
|
||||
<div className={clsx('relative h-full w-1/2 grow overflow-hidden rounded-r-lg')}>
|
||||
<Theme className="rounded-l-none" {...themes[0]!} />
|
||||
</div>
|
||||
{props.isSelected && (
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const Component = () => {
|
|||
<>
|
||||
<Heading title="Saved Searches" description="Manage your saved searches." />
|
||||
<div className="flex flex-col gap-4 lg:flex-row">
|
||||
<Card className="flex min-w-[14rem] flex-col gap-2 !px-2">
|
||||
<Card className="flex min-w-56 flex-col gap-2 !px-2">
|
||||
{savedSearches.data?.map((search) => (
|
||||
<button
|
||||
onClick={() => setSelectedSearchId(search.id)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable solid/reactivity */
|
||||
/** @jsxImportSource solid-js */
|
||||
|
||||
import { createSignal } from 'solid-js';
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default function OnboardingLocations() {
|
|||
<Icon
|
||||
name="Folder"
|
||||
size={46}
|
||||
className="relative left-[-25px] z-[0] brightness-[0.6]"
|
||||
className="relative left-[-25px] z-0 brightness-[0.6]"
|
||||
/>
|
||||
</div>
|
||||
<OnboardingTitle>{t('add_locations')}</OnboardingTitle>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import {
|
||||
createElement,
|
||||
createContext as createReactContext,
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface ContextMenuProps extends RadixCM.MenuContentProps {
|
|||
|
||||
export const contextMenuClassNames = clsx(
|
||||
'z-50 max-h-[calc(100vh-20px)] overflow-y-auto',
|
||||
'my-2 min-w-[12rem] max-w-[16rem] py-0.5',
|
||||
'my-2 min-w-48 max-w-64 py-0.5',
|
||||
'cool-shadow bg-menu',
|
||||
'border border-menu-line',
|
||||
'cursor-default select-none rounded-md',
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ export function Dialog<S extends FieldValues>({
|
|||
show ? (
|
||||
<RDialog.Portal forceMount>
|
||||
<AnimatedDialogOverlay
|
||||
className="z-49 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl bg-app/50"
|
||||
className="z-49 fixed inset-0 m-px grid place-items-center overflow-y-auto rounded-xl bg-app/50"
|
||||
style={{
|
||||
opacity: styles.opacity
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const Button = forwardRef<HTMLButtonElement, UI.ButtonProps>(
|
|||
{children}
|
||||
<span className="grow" />
|
||||
<CaretDown
|
||||
className="ml-2 w-[12px] shrink-0 translate-y-[1px] text-ink-dull transition-transform ui-open:translate-y-[-1px] ui-open:rotate-180 group-radix-state-open:translate-y-[-1px] group-radix-state-open:rotate-180"
|
||||
className="ml-2 w-[12px] shrink-0 translate-y-px text-ink-dull transition-transform ui-open:-translate-y-px ui-open:rotate-180 group-radix-state-open:-translate-y-px group-radix-state-open:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</UI.Button>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const Popover = ({ popover, trigger, children, disabled, className, ...pr
|
|||
onCloseAutoFocus={(event) => event.preventDefault()}
|
||||
className={clsx(
|
||||
'flex flex-col',
|
||||
'z-50 m-2 min-w-[11rem]',
|
||||
'z-50 m-2 min-w-44',
|
||||
'cursor-default select-none rounded-lg',
|
||||
'text-left text-sm text-ink',
|
||||
'bg-app-overlay',
|
||||
|
|
|
|||
Loading…
Reference in a new issue