mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
Utku
GitHub
parent
54a2eee827
commit
86c47dde4a
|
|
@ -23,5 +23,5 @@ module.exports = {
|
|||
importOrderParserPlugins: ['importAssertions', 'typescript', 'jsx'],
|
||||
pluginSearchDirs: false,
|
||||
plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
|
||||
tailwindConfig: 'packages/ui/tailwind.config.js'
|
||||
tailwindConfig: './packages/ui/tailwind.config.js'
|
||||
};
|
||||
|
|
|
|||
140
.vscode/launch.json
vendored
140
.vscode/launch.json
vendored
|
|
@ -1,80 +1,62 @@
|
|||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Development Debug",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"build",
|
||||
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
|
||||
"--no-default-features"
|
||||
],
|
||||
"problemMatcher": "$rustc",
|
||||
},
|
||||
"sourceLanguages": [
|
||||
"rust"
|
||||
],
|
||||
"preLaunchTask": "ui:dev"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Production Debug",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"build",
|
||||
"--release",
|
||||
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml"
|
||||
],
|
||||
"problemMatcher": "$rustc",
|
||||
},
|
||||
"sourceLanguages": [
|
||||
"rust"
|
||||
],
|
||||
"preLaunchTask": "ui:build"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Debug unit tests in library 'sd-core'",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"test",
|
||||
"--no-run",
|
||||
"--lib",
|
||||
"--package=sd-core"
|
||||
],
|
||||
"filter": {
|
||||
"name": "sd-core",
|
||||
"kind": "lib"
|
||||
}
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Debug unit tests in library 'sd-crypto'",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"test",
|
||||
"--no-run",
|
||||
"--lib",
|
||||
"--package=sd-crypto"
|
||||
],
|
||||
"filter": {
|
||||
"name": "sd-crypto",
|
||||
"kind": "lib"
|
||||
}
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
]
|
||||
}
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Development Debug",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"build",
|
||||
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
|
||||
"--no-default-features"
|
||||
],
|
||||
"problemMatcher": "$rustc"
|
||||
},
|
||||
"sourceLanguages": ["rust"],
|
||||
"preLaunchTask": "ui:dev"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Production Debug",
|
||||
"cargo": {
|
||||
"args": ["build", "--release", "--manifest-path=./apps/desktop/src-tauri/Cargo.toml"],
|
||||
"problemMatcher": "$rustc"
|
||||
},
|
||||
"sourceLanguages": ["rust"],
|
||||
"preLaunchTask": "ui:build"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Debug unit tests in library 'sd-core'",
|
||||
"cargo": {
|
||||
"args": ["test", "--no-run", "--lib", "--package=sd-core"],
|
||||
"filter": {
|
||||
"name": "sd-core",
|
||||
"kind": "lib"
|
||||
}
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Debug unit tests in library 'sd-crypto'",
|
||||
"cargo": {
|
||||
"args": ["test", "--no-run", "--lib", "--package=sd-crypto"],
|
||||
"filter": {
|
||||
"name": "sd-crypto",
|
||||
"kind": "lib"
|
||||
}
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
55
.vscode/tasks.json
vendored
55
.vscode/tasks.json
vendored
|
|
@ -4,28 +4,20 @@
|
|||
{
|
||||
"type": "cargo",
|
||||
"command": "clippy",
|
||||
"problemMatcher": [
|
||||
"$rustc"
|
||||
],
|
||||
"problemMatcher": ["$rustc"],
|
||||
"group": {
|
||||
"kind": "build",
|
||||
"isDefault": true
|
||||
},
|
||||
"label": "rust: cargo clippy",
|
||||
"args": [
|
||||
"--all-targets",
|
||||
"--all-features",
|
||||
"--all"
|
||||
]
|
||||
"args": ["--all-targets", "--all-features", "--all"]
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "prep",
|
||||
"label": "pnpm: prep",
|
||||
"group": "none",
|
||||
"problemMatcher": [
|
||||
"$rustc"
|
||||
]
|
||||
"problemMatcher": ["$rustc"]
|
||||
},
|
||||
{
|
||||
"type": "shell",
|
||||
|
|
@ -40,12 +32,7 @@
|
|||
},
|
||||
"isBackground": true,
|
||||
"command": "pnpm",
|
||||
"args": [
|
||||
"desktop",
|
||||
"vite",
|
||||
"--clearScreen=false",
|
||||
"--mode=development"
|
||||
],
|
||||
"args": ["desktop", "vite", "--clearScreen=false", "--mode=development"],
|
||||
"runOptions": {
|
||||
"instanceLimit": 1
|
||||
}
|
||||
|
|
@ -55,49 +42,31 @@
|
|||
"label": "ui:build",
|
||||
"problemMatcher": "$tsc",
|
||||
"command": "pnpm",
|
||||
"args": [
|
||||
"desktop",
|
||||
"vite",
|
||||
"build"
|
||||
]
|
||||
"args": ["desktop", "vite", "build"]
|
||||
},
|
||||
{
|
||||
"type": "cargo",
|
||||
"command": "run",
|
||||
"args": [
|
||||
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
|
||||
"--no-default-features"
|
||||
],
|
||||
"args": ["--manifest-path=./apps/desktop/src-tauri/Cargo.toml", "--no-default-features"],
|
||||
"env": {
|
||||
"RUST_BACKTRACE": "short"
|
||||
},
|
||||
"problemMatcher": [
|
||||
"$rustc"
|
||||
],
|
||||
"problemMatcher": ["$rustc"],
|
||||
"group": "build",
|
||||
"label": "rust: run spacedrive",
|
||||
"dependsOn": [
|
||||
"ui:dev"
|
||||
]
|
||||
"dependsOn": ["ui:dev"]
|
||||
},
|
||||
{
|
||||
"type": "cargo",
|
||||
"command": "run",
|
||||
"args": [
|
||||
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
|
||||
"--release"
|
||||
],
|
||||
"args": ["--manifest-path=./apps/desktop/src-tauri/Cargo.toml", "--release"],
|
||||
"env": {
|
||||
"RUST_BACKTRACE": "short"
|
||||
},
|
||||
"problemMatcher": [
|
||||
"$rustc"
|
||||
],
|
||||
"problemMatcher": ["$rustc"],
|
||||
"group": "build",
|
||||
"label": "rust: run spacedrive release",
|
||||
"dependsOn": [
|
||||
"ui:build"
|
||||
]
|
||||
"dependsOn": ["ui:build"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const AppEmbed = () => {
|
|||
<div className="relative z-30 mx-6 mt-8 h-[255px] px-1 sm:mt-16 sm:h-[428px] md:h-[428px] lg:h-[628px]">
|
||||
<div
|
||||
className={clsx(
|
||||
'border-gray-550 relative m-auto h-full max-w-7xl rounded-lg border opacity-0 transition-opacity',
|
||||
'relative m-auto h-full max-w-7xl rounded-lg border border-gray-550 opacity-0 transition-opacity',
|
||||
renderBloom && '!opacity-100',
|
||||
renderImage && 'border-none bg-transparent'
|
||||
)}
|
||||
|
|
@ -78,7 +78,7 @@ const AppEmbed = () => {
|
|||
ref={iFrame}
|
||||
referrerPolicy="origin-when-cross-origin"
|
||||
className={clsx(
|
||||
'shadow-iframe inset-center bg-gray-850 z-30 h-full w-full rounded-lg',
|
||||
'shadow-iframe inset-center z-30 h-full w-full rounded-lg bg-gray-850',
|
||||
iFrameAppReady ? 'fade-in-app-embed opacity-100' : 'ml-[-10000px] opacity-0'
|
||||
)}
|
||||
src={`${
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function DocsLayout(props: Props) {
|
|||
pageWrapId="page-container"
|
||||
className="shadow-2xl shadow-black"
|
||||
>
|
||||
<div className="custom-scroll doc-sidebar-scroll bg-gray-650 visible h-screen overflow-x-hidden px-7 pb-20 pt-7 sm:invisible">
|
||||
<div className="custom-scroll doc-sidebar-scroll visible h-screen overflow-x-hidden bg-gray-650 px-7 pb-20 pt-7 sm:invisible">
|
||||
<Button
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
className="-ml-0.5 mb-3 !border-none !px-1"
|
||||
|
|
|
|||
|
|
@ -57,14 +57,14 @@ export default function DocsSidebar(props: Props) {
|
|||
<li
|
||||
className={clsx(
|
||||
'flex border-l border-gray-600',
|
||||
active && 'border-primary border-l-2'
|
||||
active && 'border-l-2 border-primary'
|
||||
)}
|
||||
key={page.title}
|
||||
>
|
||||
<a
|
||||
href={`/docs/${page.url}`}
|
||||
className={clsx(
|
||||
'text-gray-350 w-full rounded px-3 py-1 text-[14px] font-normal no-underline hover:text-gray-50',
|
||||
'w-full rounded px-3 py-1 text-[14px] font-normal text-gray-350 no-underline hover:text-gray-50',
|
||||
active && '!font-medium !text-white '
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
|
|||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer id="footer" className="border-gray-550 bg-gray-850 z-50 w-screen border-t pt-3">
|
||||
<footer id="footer" className="z-50 w-screen border-t border-gray-550 bg-gray-850 pt-3">
|
||||
<div className="min-h-64 m-auto grid max-w-[100rem] grid-cols-2 gap-6 p-8 pt-10 pb-20 text-white sm:grid-cols-2 lg:grid-cols-6">
|
||||
<div className="col-span-2">
|
||||
<img src={AppLogo} className="mb-5 h-10 w-10" />
|
||||
|
||||
<h3 className="mb-1 text-xl font-bold">Spacedrive</h3>
|
||||
<p className="text-gray-350 text-sm">
|
||||
<p className="text-sm text-gray-350">
|
||||
© Copyright {new Date().getFullYear()} Spacedrive Technology Inc.
|
||||
</p>
|
||||
<div className="mt-6 mb-10 flex flex-row space-x-3">
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export function HomeCTA() {
|
|||
useWorker
|
||||
zIndex={-1}
|
||||
/> */}
|
||||
<div className="animation-delay-2 fade-in z-30 flex h-10 flex-row items-center space-x-4">
|
||||
<div className="animation-delay-2 z-30 flex h-10 flex-row items-center space-x-4 fade-in">
|
||||
{!showWaitlistInput ? (
|
||||
<>
|
||||
<Button
|
||||
|
|
@ -166,7 +166,7 @@ export function HomeCTA() {
|
|||
)}
|
||||
</div>
|
||||
<p
|
||||
className={clsx('animation-delay-3 fade-in text-gray-450 z-30 px-6 text-center text-sm', {
|
||||
className={clsx('animation-delay-3 z-30 px-6 text-center text-sm text-gray-450 fade-in', {
|
||||
'mt-10': waitlistError,
|
||||
'mt-3': !waitlistError
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default function NavBar() {
|
|||
<div className="relative inline">
|
||||
<NavLink link="/careers">Careers</NavLink>
|
||||
{positions.length > 0 ? (
|
||||
<span className="bg-primary/80 absolute -top-1 -right-2 rounded-md px-[5px] text-xs">
|
||||
<span className="absolute -top-1 -right-2 rounded-md bg-primary/80 px-[5px] text-xs">
|
||||
{` ${positions.length} `}
|
||||
</span>
|
||||
) : null}
|
||||
|
|
@ -118,7 +118,7 @@ export default function NavBar() {
|
|||
<Dropdown.Item icon={Academia} {...link('/careers')}>
|
||||
Careers
|
||||
{positions.length > 0 ? (
|
||||
<span className="bg-primary ml-2 rounded-md px-[5px] py-px text-xs">
|
||||
<span className="ml-2 rounded-md bg-primary px-[5px] py-px text-xs">
|
||||
{positions.length}
|
||||
</span>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
|
|||
return (
|
||||
<aside
|
||||
onClick={() => (window.location.href = href)}
|
||||
className="fade-in-whats-new hover:border-gray-550 hover:bg-gray-750 z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800/50 px-5 py-1.5 text-xs transition sm:w-auto sm:text-base"
|
||||
className="fade-in-whats-new z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800/50 px-5 py-1.5 text-xs transition hover:border-gray-550 hover:bg-gray-750 sm:w-auto sm:text-base"
|
||||
>
|
||||
<strong className="text-gray-350 truncate font-semibold">{headline}</strong>
|
||||
<strong className="truncate font-semibold text-gray-350">{headline}</strong>
|
||||
<div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" />
|
||||
<a
|
||||
href={href}
|
||||
className="font-regular from-primary-400 decoration-primary-600 shrink-0 bg-gradient-to-r to-blue-600 bg-clip-text text-transparent"
|
||||
className="font-regular shrink-0 bg-gradient-to-r from-primary-400 to-blue-600 bg-clip-text text-transparent decoration-primary-600"
|
||||
>
|
||||
{link} <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export function TeamMember(props: TeamMemberProps) {
|
|||
{props.role}
|
||||
</p>
|
||||
{props.investmentRound && (
|
||||
<p className="text-gray-450 my-0 text-sm font-semibold">{props.investmentRound}</p>
|
||||
<p className="my-0 text-sm font-semibold text-gray-450">{props.investmentRound}</p>
|
||||
)}
|
||||
<div className="mt-auto flex flex-row space-x-2">
|
||||
{props.socials?.twitter && (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* eslint-disable tailwindcss/classnames-order */
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { BlogTag } from '../../components/BlogTag';
|
||||
import { BlogPosts } from './api';
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ function Page() {
|
|||
<h1 className="fade-in-heading mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-5xl">
|
||||
Build the future of files.
|
||||
</h1>
|
||||
<div className="fade-in animation-delay-1 z-30 flex flex-col items-center">
|
||||
<p className="text-gray-350 z-40 text-center text-lg">
|
||||
<div className="animation-delay-1 z-30 flex flex-col items-center fade-in">
|
||||
<p className="z-40 text-center text-lg text-gray-350">
|
||||
Spacedrive is redefining the way we think about our personal data, building a open
|
||||
ecosystem to help preserve your digital legacy and make cross-platform file management a
|
||||
breeze.
|
||||
|
|
@ -129,11 +129,11 @@ function Page() {
|
|||
{values.map((value, index) => (
|
||||
<div
|
||||
key={value.title + index}
|
||||
className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10"
|
||||
className="flex flex-col rounded-md border border-gray-500 bg-gray-550/50 p-10"
|
||||
>
|
||||
<value.icon className="text-[32px]" weight="bold" />
|
||||
<h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3>
|
||||
<p className="text-gray-350 mt-1 mb-0">{value.desc}</p>
|
||||
<p className="mt-1 mb-0 text-gray-350">{value.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -147,7 +147,7 @@ function Page() {
|
|||
<div
|
||||
key={value.title + index}
|
||||
style={{ backgroundColor: value.color + '10', borderColor: value.color + '30' }}
|
||||
className="bg-gray-550/30 flex flex-col rounded-md border p-8"
|
||||
className="flex flex-col rounded-md border bg-gray-550/30 p-8"
|
||||
>
|
||||
<value.icon className="text-[32px]" weight="bold" color={value.color} />
|
||||
<h3 className="mt-4 mb-1">{value.title}</h3>
|
||||
|
|
@ -162,14 +162,14 @@ function Page() {
|
|||
<p className="mt-2 mb-4">If any open positions suit you, apply now!</p>
|
||||
<div className="mt-5 grid w-full grid-cols-1 gap-4">
|
||||
{positions.length === 0 ? (
|
||||
<p className="text-gray-350 m-0 text-center">
|
||||
<p className="m-0 text-center text-gray-350">
|
||||
There are no positions open at this time. Please check back later!
|
||||
</p>
|
||||
) : (
|
||||
positions.map((value, index) => (
|
||||
<div
|
||||
key={value.name + index}
|
||||
className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10"
|
||||
className="flex flex-col rounded-md border border-gray-500 bg-gray-550/50 p-10"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
<h3 className="m-0 text-2xl leading-tight">{value.name}</h3>
|
||||
|
|
@ -184,7 +184,7 @@ function Page() {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-350 mt-3 mb-0">{value.description}</p>
|
||||
<p className="mt-3 mb-0 text-gray-350">{value.description}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { SingleDocResponse } from './api';
|
|||
|
||||
function BottomCard(props: PropsWithChildren) {
|
||||
return (
|
||||
<div className="hover:border-primary hover:!text-primary hover:shadow-primary/10 group flex flex-row items-center rounded-lg border border-gray-700 p-4 text-sm !text-gray-200 transition-all duration-200 hover:translate-y-[-2px] hover:shadow-xl">
|
||||
<div className="group flex flex-row items-center rounded-lg border border-gray-700 p-4 text-sm !text-gray-200 transition-all duration-200 hover:translate-y-[-2px] hover:border-primary hover:!text-primary hover:shadow-xl hover:shadow-primary/10">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -31,7 +31,7 @@ function Page({ doc, navigation, nextDoc }: SingleDocResponse) {
|
|||
|
||||
<DocsLayout doc={doc} navigation={navigation}>
|
||||
<Markdown classNames="sm:mt-[105px] mt-6 min-h-screen ">
|
||||
<h5 className="text-primary mb-2 text-sm font-semibold lg:min-w-[700px]">
|
||||
<h5 className="mb-2 text-sm font-semibold text-primary lg:min-w-[700px]">
|
||||
{doc.categoryName}
|
||||
</h5>
|
||||
<div dangerouslySetInnerHTML={{ __html: doc?.html as string }} />
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function Page({ navigation }: { navigation: DocsNavigation }) {
|
|||
need to get started with Spacedrive.
|
||||
</p>
|
||||
<a
|
||||
className="text-primary-600 hover:text-primary-500 transition"
|
||||
className="text-primary-600 transition hover:text-primary-500"
|
||||
href="/docs/product/getting-started/introduction"
|
||||
>
|
||||
Get Started →
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function Section(props: SectionProps = { orientation: 'left' }) {
|
|||
<div className="px-4 py-10 sm:px-10">
|
||||
{props.heading && <h1 className="text-2xl font-black sm:text-4xl">{props.heading}</h1>}
|
||||
{props.description && (
|
||||
<p className="text-md text-gray-450 mt-5 sm:text-xl">{props.description}</p>
|
||||
<p className="text-md mt-5 text-gray-450 sm:text-xl">{props.description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -119,7 +119,7 @@ function Page() {
|
|||
<h1 className="fade-in-heading z-30 mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-6xl">
|
||||
A file explorer from the future.
|
||||
</h1>
|
||||
<p className="animation-delay-1 fade-in-heading text-md leading-2 text-gray-450 z-30 mt-1 mb-8 max-w-4xl text-center lg:text-lg lg:leading-8">
|
||||
<p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mt-1 mb-8 max-w-4xl text-center text-gray-450 lg:text-lg lg:leading-8">
|
||||
Combine your drives and clouds into one database that you can organize and explore from any
|
||||
device.
|
||||
<br />
|
||||
|
|
@ -141,7 +141,7 @@ function Page() {
|
|||
<br />
|
||||
<br />
|
||||
<a
|
||||
className="text-primary-600 hover:text-primary-500 transition"
|
||||
className="text-primary-600 transition hover:text-primary-500"
|
||||
href="/docs/product/getting-started/introduction"
|
||||
>
|
||||
Find out more →
|
||||
|
|
|
|||
|
|
@ -152,14 +152,14 @@ function Page() {
|
|||
<div
|
||||
className={
|
||||
'flex h-full w-full ' +
|
||||
(item.completed ? 'bg-primary-500 z-10' : 'bg-gray-550')
|
||||
(item.completed ? 'z-10 bg-primary-500' : 'bg-gray-550')
|
||||
}
|
||||
>
|
||||
{item?.when !== undefined ? (
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute z-20 mt-5 h-4 w-4 -translate-y-1/2 -translate-x-1/4 rounded-full border-2 border-gray-200 group-first:mt-0 group-first:self-start lg:mt-0',
|
||||
items[i - 1]?.completed || i === 0 ? 'bg-primary-500 z-10' : 'bg-gray-550'
|
||||
items[i - 1]?.completed || i === 0 ? 'z-10 bg-primary-500' : 'bg-gray-550'
|
||||
)}
|
||||
>
|
||||
‍
|
||||
|
|
@ -182,7 +182,7 @@ function Page() {
|
|||
</>
|
||||
))}
|
||||
</section>
|
||||
<section className="bg-gray-850 space-y-2 rounded-xl p-8">
|
||||
<section className="space-y-2 rounded-xl bg-gray-850 p-8">
|
||||
<h2 className="my-1">That's not all.</h2>
|
||||
<p>
|
||||
We're always open to ideas and feedback over{' '}
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ html {
|
|||
}
|
||||
|
||||
.slot-block {
|
||||
@apply bg-app-box border-app-line mb-2 rounded border-l-4 py-3 px-4;
|
||||
@apply mb-2 rounded border-l-4 border-app-line bg-app-box py-3 px-4;
|
||||
}
|
||||
.slot-block.note {
|
||||
@apply border-yellow-400 bg-yellow-300/20;
|
||||
|
|
@ -243,6 +243,6 @@ html {
|
|||
@apply my-[10px] rounded-[6px] bg-[#00000006] dark:bg-[#00000030];
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-app-selected rounded-[6px];
|
||||
@apply rounded-[6px] bg-app-selected;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
window.global = window;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -29,17 +29,17 @@ export function ErrorPage({
|
|||
<div
|
||||
data-tauri-drag-region
|
||||
role="alert"
|
||||
className="border-app-divider bg-app flex h-screen w-screen flex-col items-center justify-center rounded-lg border p-4"
|
||||
className="flex h-screen w-screen flex-col items-center justify-center rounded-lg border border-app-divider bg-app p-4"
|
||||
>
|
||||
<p className="text-ink-faint m-3 text-sm font-bold">APP CRASHED</p>
|
||||
<h1 className="text-ink text-2xl font-bold">We're past the event horizon...</h1>
|
||||
<pre className="text-ink m-2">Error: {message}</pre>
|
||||
<p className="m-3 text-sm font-bold text-ink-faint">APP CRASHED</p>
|
||||
<h1 className="text-2xl font-bold text-ink">We're past the event horizon...</h1>
|
||||
<pre className="m-2 text-ink">Error: {message}</pre>
|
||||
{debug.enabled && (
|
||||
<pre className="text-ink-dull m-2 text-sm">
|
||||
<pre className="m-2 text-sm text-ink-dull">
|
||||
Check the console (CMD/CTRL + OPTION + i) for stack trace.
|
||||
</pre>
|
||||
)}
|
||||
<div className="text-ink flex flex-row space-x-2">
|
||||
<div className="flex flex-row space-x-2 text-ink">
|
||||
{reloadBtn && (
|
||||
<Button variant="accent" className="mt-2" onClick={reloadBtn}>
|
||||
Reload
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ export const Component = () => {
|
|||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="bg-app/80 w-full">
|
||||
<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"
|
||||
>
|
||||
<p className="text-ink-faint m-3 text-sm font-semibold uppercase">Error: 404</p>
|
||||
<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>
|
||||
<p className="text-ink-dull mt-2 text-sm">
|
||||
<p className="mt-2 text-sm text-ink-dull">
|
||||
Its likely that this page has not been built yet, if so we're on it!
|
||||
</p>
|
||||
<div className="flex flex-row space-x-2">
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default (props: Props) => {
|
|||
/>
|
||||
<span className="ml-3 mt-0.5 text-xs font-medium">Automatically mount key</span>
|
||||
<Tooltip label="The key linked with the file will be automatically mounted">
|
||||
<Info className="text-ink-faint ml-1.5 mt-0.5 h-4 w-4" />
|
||||
<Info className="ml-1.5 mt-0.5 h-4 w-4 text-ink-faint" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -145,7 +145,7 @@ export default (props: Props) => {
|
|||
/>
|
||||
<span className="ml-3 mt-0.5 text-xs font-medium">Save to Key Manager</span>
|
||||
<Tooltip label="This key will be saved to the key manager">
|
||||
<Info className="text-ink-faint ml-1.5 mt-0.5 h-4 w-4" />
|
||||
<Info className="ml-1.5 mt-0.5 h-4 w-4 text-ink-faint" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -198,9 +198,8 @@ export default (props: TopBarProps) => {
|
|||
<>
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
// eslint-disable-next-line tailwindcss/no-contradicting-classname
|
||||
className={clsx(
|
||||
'max-w bg-app duration-250 z-20 flex h-[46px] shrink-0 items-center overflow-hidden border-b border-transparent pl-3 transition-[background-color] transition-[border-color] ease-out',
|
||||
'max-w duration-250 z-20 flex h-[46px] shrink-0 items-center overflow-hidden border-b border-transparent bg-app pl-3 transition-[background-color] transition-[border-color] ease-out',
|
||||
props.showSeparator && 'top-bar-blur !bg-app/90'
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const KeyDropdown = ({
|
|||
'flex flex-col',
|
||||
'z-50 m-2 space-y-1 px-4 py-2',
|
||||
'cursor-default select-none rounded-lg',
|
||||
'text-ink text-left text-sm',
|
||||
'text-left text-sm text-ink',
|
||||
'bg-app-overlay/80 backdrop-blur',
|
||||
// 'border border-app-overlay',
|
||||
'shadow-2xl shadow-black/60 ',
|
||||
|
|
@ -96,7 +96,7 @@ export const Key = ({ data }: { data: Key }) => {
|
|||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'shadow-app-shade/10 bg-app-box flex items-center justify-between rounded-lg px-2 py-1.5 text-sm shadow-lg'
|
||||
'flex items-center justify-between rounded-lg bg-app-box px-2 py-1.5 text-sm shadow-lg shadow-app-shade/10'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
|
@ -124,19 +124,19 @@ export const Key = ({ data }: { data: Key }) => {
|
|||
{data.stats ? (
|
||||
<div className="mt-[1px] flex flex-row space-x-3">
|
||||
{data.stats.objectCount && (
|
||||
<div className="text-ink-dull text-[8pt] font-medium opacity-30">
|
||||
<div className="text-[8pt] font-medium text-ink-dull opacity-30">
|
||||
{data.stats.objectCount} Objects
|
||||
</div>
|
||||
)}
|
||||
{data.stats.containerCount && (
|
||||
<div className="text-ink-dull text-[8pt] font-medium opacity-30">
|
||||
<div className="text-[8pt] font-medium text-ink-dull opacity-30">
|
||||
{data.stats.containerCount} Containers
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
!data.mounted && (
|
||||
<div className="text-ink-dull text-[8pt] font-medium opacity-30">
|
||||
<div className="text-[8pt] font-medium text-ink-dull opacity-30">
|
||||
{data.queue.has(data.id) ? 'Key mounting...' : 'Key not mounted'}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -147,14 +147,14 @@ export const Key = ({ data }: { data: Key }) => {
|
|||
{data.mounted && (
|
||||
<Tooltip label="Browse files">
|
||||
<Button size="icon">
|
||||
<Eye className="text-ink-faint h-4 w-4" />
|
||||
<Eye className="h-4 w-4 text-ink-faint" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<KeyDropdown
|
||||
trigger={
|
||||
<Button size="icon">
|
||||
<DotsThree className="text-ink-faint h-4 w-4" />
|
||||
<DotsThree className="h-4 w-4 text-ink-faint" />
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
|
|
@ -220,7 +220,7 @@ export const KeyDropdownItem = (props: {
|
|||
}) => {
|
||||
return (
|
||||
<DropdownMenu.DropdownMenuItem
|
||||
className="text-menu-ink !cursor-default select-none py-0.5 focus:outline-none active:opacity-80"
|
||||
className="!cursor-default select-none py-0.5 text-menu-ink focus:outline-none active:opacity-80"
|
||||
onClick={props.onClick}
|
||||
hidden={props.hidden}
|
||||
>
|
||||
|
|
@ -231,7 +231,7 @@ export const KeyDropdownItem = (props: {
|
|||
|
||||
export const DummyKey = (props: { text: string }) => {
|
||||
return (
|
||||
<div className="shadow-app-shade/10 bg-app-box flex items-center justify-between rounded-lg p-2 py-1.5 text-sm shadow-lg">
|
||||
<div className="flex items-center justify-between rounded-lg bg-app-box p-2 py-1.5 text-sm shadow-lg shadow-app-shade/10">
|
||||
<div className="flex items-center">
|
||||
<KeyIcon className="ml-1 mr-3 h-5 w-5 text-gray-400/80" />
|
||||
<div className="flex flex-col ">
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default () => {
|
|||
</div>
|
||||
<span className="ml-3 text-xs font-medium">Sync with Library</span>
|
||||
<Tooltip label="This key will be registered with all devices running your Library">
|
||||
<Info className="text-ink-faint ml-1.5 h-4 w-4" />
|
||||
<Info className="ml-1.5 h-4 w-4 text-ink-faint" />
|
||||
</Tooltip>
|
||||
<div className="grow" />
|
||||
<div className="space-x-2">
|
||||
|
|
@ -93,7 +93,7 @@ export default () => {
|
|||
</div>
|
||||
<span className="ml-3 text-xs font-medium">Automount</span>
|
||||
<Tooltip label="This key will be automatically mounted every time you unlock the key manager">
|
||||
<Info className="text-ink-faint ml-1.5 h-4 w-4" />
|
||||
<Info className="ml-1.5 h-4 w-4 text-ink-faint" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const Unlocked = () => {
|
|||
variant="subtle"
|
||||
className="text-ink-faint"
|
||||
>
|
||||
<Lock className="text-ink-faint h-4 w-4" />
|
||||
<Lock className="h-4 w-4 text-ink-faint" />
|
||||
</Button>
|
||||
<ButtonLink
|
||||
to={`/${library.uuid}/settings/library/keys`}
|
||||
|
|
@ -47,7 +47,7 @@ const Unlocked = () => {
|
|||
variant="subtle"
|
||||
className="text-ink-faint"
|
||||
>
|
||||
<Gear className="text-ink-faint h-4 w-4" />
|
||||
<Gear className="h-4 w-4 text-ink-faint" />
|
||||
</ButtonLink>
|
||||
</Tabs.List>
|
||||
</div>
|
||||
|
|
@ -75,7 +75,7 @@ const Keys = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-app-line flex w-full rounded-b-md border-t p-2">
|
||||
<div className="flex w-full rounded-b-md border-t border-app-line p-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="gray"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default () => {
|
|||
<Popover
|
||||
className="p-4 focus:outline-none"
|
||||
trigger={
|
||||
<h1 className="text-ink-faint/50 ml-1 w-full text-[7pt]">
|
||||
<h1 className="ml-1 w-full text-[7pt] text-ink-faint/50">
|
||||
v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
|
||||
</h1>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export function JobsManager() {
|
|||
|
||||
return (
|
||||
<div className="h-full overflow-hidden pb-10">
|
||||
<div className="border-app-line/50 bg-app-button/70 z-20 flex h-10 w-full items-center rounded-t-md border-b px-2">
|
||||
<div className="z-20 flex h-10 w-full items-center rounded-t-md border-b border-app-line/50 bg-app-button/70 px-2">
|
||||
<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
|
||||
<div className="grow" />
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ export function JobsManager() {
|
|||
<Job key={job.id} job={job} />
|
||||
))}
|
||||
{jobs.data?.length === 0 && runningJobs.data?.length === 0 && (
|
||||
<div className="text-ink-dull flex h-32 items-center justify-center">No jobs.</div>
|
||||
<div className="flex h-32 items-center justify-center text-ink-dull">No jobs.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,8 +141,7 @@ function Job({ job }: { job: JobReport }) {
|
|||
const isRunning = job.status === 'Running';
|
||||
return (
|
||||
// Do we actually need bg-opacity-60 here? Where is the bg?
|
||||
// eslint-disable-next-line tailwindcss/migration-from-tailwind-2
|
||||
<div className="border-app-line/50 flex items-center border-b bg-opacity-60 p-2 pl-4">
|
||||
<div className="flex items-center border-b border-app-line/50 bg-opacity-60 p-2 pl-4">
|
||||
<Tooltip label={job.status}>
|
||||
<niceData.icon className={clsx('mr-3 h-5 w-5')} />
|
||||
</Tooltip>
|
||||
|
|
@ -155,7 +154,7 @@ function Job({ job }: { job: JobReport }) {
|
|||
<ProgressBar value={job.completed_task_count} total={job.task_count} />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-ink-faint flex items-center truncate">
|
||||
<div className="flex items-center truncate text-ink-faint">
|
||||
<span className="text-xs">
|
||||
{isRunning ? 'Elapsed' : job.status === 'Failed' ? 'Failed after' : 'Took'}{' '}
|
||||
{job.seconds_elapsed
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ export default () => {
|
|||
<Dropdown.Button
|
||||
variant="gray"
|
||||
className={clsx(
|
||||
`text-ink w-full`,
|
||||
`w-full text-ink`,
|
||||
// these classname overrides are messy
|
||||
// but they work
|
||||
`!bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line ring-offset-sidebar`,
|
||||
`!border-sidebar-line/50 !bg-sidebar-box ring-offset-sidebar active:!border-sidebar-line active:!bg-sidebar-button ui-open:!border-sidebar-line ui-open:!bg-sidebar-button`,
|
||||
(library === null || libraries.isLoading) && '!text-ink-faint'
|
||||
)}
|
||||
>
|
||||
|
|
@ -27,7 +27,7 @@ export default () => {
|
|||
}
|
||||
// we override the sidebar dropdown item's hover styles
|
||||
// because the dark style clashes with the sidebar
|
||||
className="dark:bg-sidebar-box dark:border-sidebar-line dark:divide-menu-selected/30 data-[side=bottom]:slide-in-from-top-2 mt-1 shadow-none"
|
||||
className="mt-1 shadow-none data-[side=bottom]:slide-in-from-top-2 dark:divide-menu-selected/30 dark:border-sidebar-line dark:bg-sidebar-box"
|
||||
alignToTrigger
|
||||
>
|
||||
{libraries.data?.map((lib) => (
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default () => {
|
|||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'border-sidebar-divider bg-sidebar relative flex min-h-full w-44 shrink-0 grow-0 flex-col space-y-2 border-r px-2.5 pb-2',
|
||||
'relative flex min-h-full w-44 shrink-0 grow-0 flex-col space-y-2 border-r border-sidebar-divider bg-sidebar px-2.5 pb-2',
|
||||
macOnly(os, 'bg-opacity-[0.65]')
|
||||
)}
|
||||
>
|
||||
|
|
@ -121,9 +121,9 @@ const LibrarySection = () => {
|
|||
})}
|
||||
{(locations.data?.length || 0) < 4 && (
|
||||
<AddLocationButton
|
||||
className="border-sidebar-line hover:border-sidebar-selected cursor-normal
|
||||
text-ink-faint mt-1 w-full rounded border border-dashed px-2 py-1
|
||||
text-center text-xs font-medium transition"
|
||||
className="cursor-normal mt-1 w-full
|
||||
rounded border border-dashed border-sidebar-line px-2 py-1 text-center text-xs
|
||||
font-medium text-ink-faint transition hover:border-sidebar-selected"
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
|
|
@ -246,7 +246,7 @@ const Footer = () => {
|
|||
<Button
|
||||
size="icon"
|
||||
variant="subtle"
|
||||
className="radix-state-open:bg-sidebar-selected/50 text-ink-faint ring-offset-sidebar"
|
||||
className="text-ink-faint ring-offset-sidebar radix-state-open:bg-sidebar-selected/50"
|
||||
disabled={!library}
|
||||
>
|
||||
{library && (
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export default () => {
|
|||
'radix-state-closed:animate-toast-hide',
|
||||
'radix-swipe-end:animate-toast-swipe-out',
|
||||
'translate-x-radix-toast-swipe-move-x',
|
||||
'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
|
||||
'focus-visible:ring-accent/75 border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring'
|
||||
'radix-swipe-cancel:ease-[ease] radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200',
|
||||
'border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring focus-visible:ring-accent/75'
|
||||
)}
|
||||
>
|
||||
<div className="flex">
|
||||
|
|
@ -44,7 +44,7 @@ export default () => {
|
|||
{toast.actionButton && (
|
||||
<ToastPrimitive.Action
|
||||
altText="view now"
|
||||
className="text-accent focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring"
|
||||
className="flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-accent hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring focus-visible:ring-accent/75"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toast.actionButton?.onClick();
|
||||
|
|
@ -56,7 +56,7 @@ export default () => {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex h-0 flex-1">
|
||||
<ToastPrimitive.Close className="text-ink-faint focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring">
|
||||
<ToastPrimitive.Close className="flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-ink-faint hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring focus-visible:ring-accent/75">
|
||||
Dismiss
|
||||
</ToastPrimitive.Close>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default [
|
|||
{ path: 'spaces', lazy: () => import('./spaces') },
|
||||
{ path: 'debug', lazy: () => import('./debug') },
|
||||
{ path: 'spacedrop', lazy: () => import('./spacedrop') },
|
||||
{ path: 'sync', lazy: () => import("./sync") }
|
||||
{ path: 'sync', lazy: () => import('./sync') }
|
||||
]
|
||||
},
|
||||
{ path: 'location/:id', lazy: () => import('./location/$id') },
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const Component = () => {
|
|||
useEffect(() => {
|
||||
explorerState.locationId = location_id;
|
||||
if (location_id !== null) quickRescan.mutate({ location_id, sub_path: path });
|
||||
}, [location_id, path]);
|
||||
}, [explorerState, location_id, path, quickRescan]);
|
||||
|
||||
if (location_id === null) throw new Error(`location_id is null!`);
|
||||
|
||||
|
|
|
|||
|
|
@ -144,10 +144,10 @@ interface CategoryButtonProps {
|
|||
function CategoryButton({ category, icon: Icon }: CategoryButtonProps) {
|
||||
return (
|
||||
<Card className="items-center !px-3">
|
||||
<Icon weight="fill" className="text-ink-dull mr-3 h-6 w-6 opacity-20" />
|
||||
<Icon weight="fill" className="mr-3 h-6 w-6 text-ink-dull opacity-20" />
|
||||
<div>
|
||||
<h2 className="text-sm font-medium">{category}</h2>
|
||||
<p className="text-ink-faint text-xs">23,324 items</p>
|
||||
<p className="text-xs text-ink-faint">23,324 items</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export const Heading = (props: HeaderProps) => {
|
|||
<p className="mt-1 text-sm text-gray-400">{props.description}</p>
|
||||
</div>
|
||||
{props.rightArea}
|
||||
<hr className="border-gray-550 mt-4" />
|
||||
<hr className="mt-4 border-gray-550" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const BackButton = () => {
|
|||
return (
|
||||
<Button variant="outline" size="icon" onClick={() => navigate(-1)}>
|
||||
<div className="flex h-4 w-4 justify-center">
|
||||
<CaretLeft weight="bold" className="text-ink-dull w-[12px] " aria-hidden="true" />
|
||||
<CaretLeft weight="bold" className="w-[12px] text-ink-dull " aria-hidden="true" />
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default () => {
|
|||
const os = useOperatingSystem();
|
||||
|
||||
return (
|
||||
<div className="border-app-line/50 custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r pb-5">
|
||||
<div className="custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r border-app-line/50 pb-5">
|
||||
{os !== 'browser' ? (
|
||||
<div data-tauri-drag-region className="h-5 w-full" />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const Component = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-app-line mt-2 mb-4" />
|
||||
<hr className="mt-2 mb-4 border-app-line" />
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="flex flex-col">
|
||||
<NodeSettingLabel>Node Name</NodeSettingLabel>
|
||||
|
|
@ -50,7 +50,7 @@ export const Component = () => {
|
|||
</div>
|
||||
<div className="mt-5 flex items-center space-x-3">
|
||||
<Switch size="sm" checked />
|
||||
<span className="text-ink-dull text-sm font-medium">Run daemon when app closed</span>
|
||||
<span className="text-sm font-medium text-ink-dull">Run daemon when app closed</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div
|
||||
|
|
@ -59,7 +59,7 @@ export const Component = () => {
|
|||
platform.openLink(node.data.data_path);
|
||||
}
|
||||
}}
|
||||
className="text-ink-faint text-sm font-medium"
|
||||
className="text-sm font-medium text-ink-faint"
|
||||
>
|
||||
<b className="mr-2 inline truncate">
|
||||
<Database className="mr-1 mt-[-2px] inline h-4 w-4" /> Data Folder
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const KeyMounterDropdown = ({
|
|||
'flex flex-col',
|
||||
'z-50 m-2 space-y-1',
|
||||
'cursor-default select-none rounded-lg',
|
||||
'text-ink text-left text-sm',
|
||||
'text-left text-sm text-ink',
|
||||
'bg-app-overlay/80 backdrop-blur',
|
||||
// 'border border-app-overlay',
|
||||
'shadow-2xl shadow-black/60 ',
|
||||
|
|
@ -138,7 +138,7 @@ export const Component = () => {
|
|||
</Button>
|
||||
{!enterSkManually && (
|
||||
<div className="relative flex grow">
|
||||
<p className="text-accent mt-2" onClick={() => setEnterSkManually(true)}>
|
||||
<p className="mt-2 text-accent" onClick={() => setEnterSkManually(true)}>
|
||||
or enter secret key manually
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -162,12 +162,12 @@ export const Component = () => {
|
|||
variant="subtle"
|
||||
className="text-ink-faint"
|
||||
>
|
||||
<Lock className="text-ink-faint h-4 w-4" />
|
||||
<Lock className="h-4 w-4 text-ink-faint" />
|
||||
</Button>
|
||||
<KeyMounterDropdown
|
||||
trigger={
|
||||
<Button size="icon" variant="subtle" className="text-ink-faint">
|
||||
<Plus className="text-ink-faint h-4 w-4" />
|
||||
<Plus className="h-4 w-4 text-ink-faint" />
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ export default ({ location }: Props) => {
|
|||
<Folder size={30} className="mr-3" />
|
||||
<div className="grid min-w-[110px] grid-cols-1">
|
||||
<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
|
||||
<p className="text-ink-dull mt-0.5 select-text truncate text-sm">
|
||||
<span className="bg-app-selected mr-1 rounded py-[1px] px-1">{location.node.name}</span>
|
||||
<p className="mt-0.5 select-text truncate text-sm text-ink-dull">
|
||||
<span className="mr-1 rounded bg-app-selected py-[1px] px-1">{location.node.name}</span>
|
||||
{location.path}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -49,7 +49,7 @@ export default ({ location }: Props) => {
|
|||
className="pointer-events-none flex !py-1.5 !px-2"
|
||||
>
|
||||
<div className={clsx('h-2 w-2 rounded-full', online ? 'bg-green-500' : 'bg-red-500')} />
|
||||
<span className="text-ink-dull ml-1.5 text-xs">{online ? 'Online' : 'Offline'}</span>
|
||||
<span className="ml-1.5 text-xs text-ink-dull">{online ? 'Online' : 'Offline'}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="gray"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default (props: Props) => (
|
|||
{props.library.config.name}
|
||||
{props.current && <Pill>Current</Pill>}
|
||||
</h3>
|
||||
<p className="text-ink-dull mt-0.5 text-xs">{props.library.uuid}</p>
|
||||
<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<Button className="!p-1.5" variant="gray">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export const Component = () => {
|
|||
<div className="mt-1 flex flex-col">
|
||||
<Input className="grow" disabled defaultValue="https://p2p.spacedrive.com" />
|
||||
<div className="mt-1 flex justify-end">
|
||||
<a className="text-accent hover:text-accent p-1 text-sm font-bold">Change</a>
|
||||
<a className="p-1 text-sm font-bold text-accent hover:text-accent">Change</a>
|
||||
</div>
|
||||
</div>
|
||||
</Setting>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ export const Component = () => {
|
|||
<h1 className="text-2xl font-bold">
|
||||
Spacedrive {os !== 'unknown' && <>for {currentPlatformNiceName}</>}
|
||||
</h1>
|
||||
<span className="text-ink-dull mt-1 text-sm">The file manager from the future.</span>
|
||||
<span className="text-ink-faint/80 mt-1 text-xs">
|
||||
<span className="mt-1 text-sm text-ink-dull">The file manager from the future.</span>
|
||||
<span className="mt-1 text-xs text-ink-faint/80">
|
||||
v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,13 +52,13 @@ function DropItem(props: DropItemProps) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={clsx(classes.honeycombItem, 'bg-app-box/20 hover:bg-app-box/50 overflow-hidden')}
|
||||
className={clsx(classes.honeycombItem, 'overflow-hidden bg-app-box/20 hover:bg-app-box/50')}
|
||||
>
|
||||
<div className="group relative flex h-full w-full flex-col items-center justify-center ">
|
||||
{/* <SubtleButtonContainer className="absolute left-[12px] top-[55px]">
|
||||
<SubtleButton icon={Star} />
|
||||
</SubtleButtonContainer> */}
|
||||
<div className="bg-app-button h-14 w-14 rounded-full">{icon}</div>
|
||||
<div className="h-14 w-14 rounded-full bg-app-button">{icon}</div>
|
||||
<SubtleButtonContainer className="absolute right-[12px] top-[55px] rotate-90">
|
||||
<SubtleButton />
|
||||
</SubtleButtonContainer>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const Component = () => {
|
|||
<div
|
||||
className={clsx(
|
||||
macOnly(os, 'bg-opacity-[0.75]'),
|
||||
'bg-sidebar text-ink flex h-screen flex-col'
|
||||
'flex h-screen flex-col bg-sidebar text-ink'
|
||||
)}
|
||||
>
|
||||
<DragRegion className="z-50 h-9" />
|
||||
|
|
@ -48,7 +48,7 @@ export const Component = () => {
|
|||
<Progress />
|
||||
</div>
|
||||
<div className="flex justify-center p-4">
|
||||
<p className="text-ink-dull text-xs opacity-50">© 2022 Spacedrive Technology Inc.</p>
|
||||
<p className="text-xs text-ink-dull opacity-50">© 2022 Spacedrive Technology Inc.</p>
|
||||
</div>
|
||||
<div className="absolute -z-10">
|
||||
<div className="relative h-screen w-screen">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default function OnboardingProgress() {
|
|||
disabled={!obStore.unlockedScreens.includes(path)}
|
||||
onClick={() => navigate(`/onboarding/${path}`)}
|
||||
className={clsx(
|
||||
'hover:bg-ink h-2 w-2 rounded-full transition disabled:opacity-10',
|
||||
'h-2 w-2 rounded-full transition hover:bg-ink disabled:opacity-10',
|
||||
currentScreenKey === path ? 'bg-ink' : 'bg-ink-faint'
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default function OnboardingNewLibrary() {
|
|||
<Button onClick={handleImport} variant="accent" size="sm">
|
||||
Import
|
||||
</Button>
|
||||
<span className="text-ink-faint px-2 text-xs font-bold">OR</span>
|
||||
<span className="px-2 text-xs font-bold text-ink-faint">OR</span>
|
||||
<Button onClick={() => setImportMode(false)} variant="outline" size="sm">
|
||||
Create new library
|
||||
</Button>
|
||||
|
|
@ -74,7 +74,7 @@ export default function OnboardingNewLibrary() {
|
|||
<Button type="submit" variant="accent" size="sm">
|
||||
New library
|
||||
</Button>
|
||||
<span className="text-ink-faint px-2 text-xs font-bold">OR</span>
|
||||
<span className="px-2 text-xs font-bold text-ink-faint">OR</span>
|
||||
<Button onClick={() => setImportMode(true)} variant="outline" size="sm">
|
||||
Import library
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default function OnboardingPrivacy() {
|
|||
{shareTelemetry.options.map(({ value, heading, description }) => (
|
||||
<RadioGroup.Item key={value} value={value}>
|
||||
<h1 className="font-bold">{heading}</h1>
|
||||
<p className="text-ink-faint text-sm">{description}</p>
|
||||
<p className="text-sm text-ink-faint">{description}</p>
|
||||
</RadioGroup.Item>
|
||||
))}
|
||||
</RadioGroup.Root>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default function OnboardingStart() {
|
|||
<OnboardingContainer>
|
||||
<OnboardingImg src={AppLogo} className="mb-8 h-36 w-36 shrink-0" />
|
||||
|
||||
<h1 className="text-ink mb-2 text-center text-4xl font-bold">
|
||||
<h1 className="mb-2 text-center text-4xl font-bold text-ink">
|
||||
The file explorer from the future.
|
||||
</h1>
|
||||
<OnboardingDescription>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ body {
|
|||
@apply rounded-[6px] bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-app-box rounded-[6px];
|
||||
@apply rounded-[6px] bg-app-box;
|
||||
}
|
||||
}
|
||||
.page-scroll {
|
||||
|
|
@ -73,7 +73,7 @@ body {
|
|||
@apply my-[10px] rounded-[6px] bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-app-box rounded-[6px];
|
||||
@apply rounded-[6px] bg-app-box;
|
||||
}
|
||||
}
|
||||
.inspector-scroll {
|
||||
|
|
@ -86,7 +86,7 @@ body {
|
|||
@apply my-[8px] bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-app/70 rounded-[6px] opacity-0;
|
||||
@apply rounded-[6px] bg-app/70 opacity-0;
|
||||
}
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const PasswordMeter = (props: PasswordMeterProps) => {
|
|||
{scoreText}
|
||||
</span>
|
||||
<div className="flex grow">
|
||||
<div className="bg-app-box/50 mt-2 w-full rounded-full">
|
||||
<div className="mt-2 w-full rounded-full bg-app-box/50">
|
||||
<div
|
||||
style={{
|
||||
width: `${score !== 0 ? score * 25 : 12.5}%`
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const useScrolled = (ref: React.RefObject<HTMLDivElement>, y = 1) => {
|
|||
onScroll();
|
||||
ref.current?.addEventListener('scroll', onScroll);
|
||||
() => ref.current?.removeEventListener('scroll', onScroll);
|
||||
}, [ref.current, y]);
|
||||
}, [ref, y]);
|
||||
|
||||
return { isScrolled };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@
|
|||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
||||
"cspell": "^6.12.0",
|
||||
"markdown-link-check": "^3.10.3",
|
||||
"prettier": "^2.8.4",
|
||||
"prettier-plugin-tailwindcss": "^0.2.5",
|
||||
"prettier": "^2.8.7",
|
||||
"prettier-plugin-tailwindcss": "^0.2.6",
|
||||
"rimraf": "^4.1.1",
|
||||
"turbo": "^1.5.5",
|
||||
"turbo-ignore": "^0.3.0",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ module.exports = {
|
|||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:tailwindcss/recommended',
|
||||
'prettier',
|
||||
'turbo'
|
||||
],
|
||||
|
|
@ -33,19 +32,12 @@ module.exports = {
|
|||
'@typescript-eslint/no-empty-interface': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'no-control-regex': 'off',
|
||||
'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
|
||||
'tailwindcss/no-custom-classname': 'off',
|
||||
'tailwindcss/no-contradicting-classname': 'warn'
|
||||
'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs']
|
||||
},
|
||||
ignorePatterns: ['dist', '**/*.js', '**/*.json', 'node_modules'],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect'
|
||||
},
|
||||
tailwindcss: {
|
||||
config: 'packages/ui/style/tailwind.js',
|
||||
callees: ['classnames', 'clsx', 'ctl', 'cva', 'tw', `twStyle`],
|
||||
tags: ['tw', 'twStyle']
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
extends: [require.resolve('./base.js')],
|
||||
extends: [require.resolve('./base.js'), 'plugin:tailwindcss/recommended'],
|
||||
env: {
|
||||
'react-native/react-native': true
|
||||
},
|
||||
|
|
@ -22,11 +22,15 @@ module.exports = {
|
|||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
'tailwindcss/no-custom-classname': 'off',
|
||||
'tailwindcss/no-contradicting-classname': 'warn'
|
||||
},
|
||||
settings: {
|
||||
tailwindcss: {
|
||||
config: 'apps/mobile/tailwind.config.js'
|
||||
config: './apps/mobile/tailwind.config.js',
|
||||
callees: ['classnames', 'clsx', 'ctl', 'cva', 'tw', `twStyle`],
|
||||
tags: ['tw', 'twStyle']
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
"eslint-react.js"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.51.0",
|
||||
"@typescript-eslint/parser": "^5.51.0",
|
||||
"eslint": "^8.33.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-config-turbo": "^0.0.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||
"@typescript-eslint/parser": "^5.57.0",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-config-turbo": "^1.8.8",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-tailwindcss": "^3.8.3",
|
||||
"eslint-plugin-tailwindcss": "^3.10.3",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-svgr": "^2.2.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
|
|||
export const RadixCheckbox = (props: RadixCheckboxProps) => (
|
||||
<div className="align-center flex">
|
||||
<Checkbox.Root
|
||||
className="bg-app-button flex h-[17px] w-[17px] shrink-0 rounded-md"
|
||||
className="flex h-[17px] w-[17px] shrink-0 rounded-md bg-app-button"
|
||||
id={props.name}
|
||||
{...props}
|
||||
>
|
||||
<Checkbox.Indicator className="bg-accent flex h-[17px] w-[17px] items-center justify-center rounded-md">
|
||||
<Checkbox.Indicator className="flex h-[17px] w-[17px] items-center justify-center rounded-md bg-accent">
|
||||
<Check weight="bold" />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Root>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ const ItemInternals = ({ icon, label, rightArrow, keybind, iconProps }: ContextM
|
|||
{label && <span className="flex-1 truncate">{label}</span>}
|
||||
|
||||
{keybind && (
|
||||
<span className="text-menu-faint group-radix-highlighted:text-white text-xs font-medium">
|
||||
<span className="text-xs font-medium text-menu-faint group-radix-highlighted:text-white">
|
||||
{keybind}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ export function Dialog<S extends FieldValues>({
|
|||
<DialogPrimitive.Portal forceMount>
|
||||
<DialogPrimitive.Overlay asChild forceMount>
|
||||
<animated.div
|
||||
className="z-49 bg-app/50 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl"
|
||||
className="z-49 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl bg-app/50"
|
||||
style={{
|
||||
opacity: styles.opacity
|
||||
}}
|
||||
|
|
@ -166,18 +166,18 @@ export function Dialog<S extends FieldValues>({
|
|||
dialog.onSubmit?.();
|
||||
setOpen(false);
|
||||
}}
|
||||
className="bg-app-box border-app-line text-ink shadow-app-shade !pointer-events-auto min-w-[300px] max-w-[400px] rounded-md border"
|
||||
className="!pointer-events-auto min-w-[300px] max-w-[400px] rounded-md border border-app-line bg-app-box text-ink shadow-app-shade"
|
||||
>
|
||||
<div className="p-5">
|
||||
<DialogPrimitive.Title className="mb-2 font-bold">
|
||||
{props.title}
|
||||
</DialogPrimitive.Title>
|
||||
<DialogPrimitive.Description className="text-ink-dull text-sm">
|
||||
<DialogPrimitive.Description className="text-sm text-ink-dull">
|
||||
{props.description}
|
||||
</DialogPrimitive.Description>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className="bg-app-selected border-app-line flex flex-row justify-end space-x-2 border-t p-3">
|
||||
<div className="flex flex-row justify-end space-x-2 border-t border-app-line bg-app-selected p-3">
|
||||
{form.formState.isSubmitting && <Loader />}
|
||||
<div className="grow" />
|
||||
<DialogPrimitive.Close asChild>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export const Button = forwardRef<HTMLButtonElement, UI.ButtonProps>(
|
|||
{children}
|
||||
<span className="grow" />
|
||||
<CaretDown
|
||||
className="text-ink-dull group-radix-state-open:rotate-180 group-radix-state-open:translate-y-[-1px] ui-open:rotate-180 ui-open:translate-y-[-1px] ml-2 w-[12px] shrink-0 translate-y-[1px] transition-transform"
|
||||
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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</UI.Button>
|
||||
|
|
@ -100,7 +100,7 @@ export const Root = (props: PropsWithChildren<DropdownRootProps>) => {
|
|||
>
|
||||
<Menu.Items
|
||||
className={clsx(
|
||||
'divide-menu-line shadow-menu-shade/30 bg-menu border-menu-line text-menu-ink absolute top-full z-50 w-full min-w-fit divide-y rounded-md border shadow-xl focus:outline-none',
|
||||
'absolute top-full z-50 w-full min-w-fit divide-y divide-menu-line rounded-md border border-menu-line bg-menu text-menu-ink shadow-xl shadow-menu-shade/30 focus:outline-none',
|
||||
props.itemsClassName,
|
||||
{ 'left-0': props.align === 'left' },
|
||||
{ 'right-0': props.align === 'right' }
|
||||
|
|
|
|||
|
|
@ -37,9 +37,12 @@ const Root = ({
|
|||
}: PropsWithChildren<DropdownMenuProps>) => {
|
||||
const [width, setWidth] = useState<number>();
|
||||
|
||||
const measureRef = useCallback((ref: HTMLButtonElement | null) => {
|
||||
alignToTrigger && ref && setWidth(ref.getBoundingClientRect().width);
|
||||
}, []);
|
||||
const measureRef = useCallback(
|
||||
(ref: HTMLButtonElement | null) => {
|
||||
alignToTrigger && ref && setWidth(ref.getBoundingClientRect().width);
|
||||
},
|
||||
[alignToTrigger]
|
||||
);
|
||||
|
||||
return (
|
||||
<RadixDM.Root>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|||
|
||||
<input
|
||||
className={clsx(
|
||||
'placeholder:text-ink-faint flex-1 truncate border-none bg-transparent px-3 text-sm outline-none',
|
||||
'flex-1 truncate border-none bg-transparent px-3 text-sm outline-none placeholder:text-ink-faint',
|
||||
(right || (icon && iconPosition === 'right')) && 'pr-0',
|
||||
icon && iconPosition === 'left' && 'pl-0'
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ export const Popover = ({ trigger, children, disabled, className, ...props }: Pr
|
|||
'flex flex-col',
|
||||
'z-50 m-2 min-w-[11rem]',
|
||||
'cursor-default select-none rounded-lg',
|
||||
'text-ink text-left text-sm',
|
||||
'text-left text-sm text-ink',
|
||||
'bg-app-overlay',
|
||||
'border-app-line border',
|
||||
'border border-app-line',
|
||||
'shadow-2xl',
|
||||
'animate-in fade-in',
|
||||
className
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const ProgressBar = memo((props: ProgressBarProps) => {
|
|||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
style={{ width: `${percentage}%` }}
|
||||
className="bg-accent h-full duration-300 ease-in-out "
|
||||
className="h-full bg-accent duration-300 ease-in-out "
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ export const Root = forwardRef<HTMLDivElement, RootProps>(
|
|||
export interface ItemProps extends RadioGroup.RadioGroupItemProps {}
|
||||
export const Item = ({ children, ...props }: ItemProps) => {
|
||||
return (
|
||||
<div className="border-app-line bg-app-box/50 flex max-w-sm space-x-2 rounded-md border px-4 py-3">
|
||||
<div className="flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3">
|
||||
<RadioGroup.Item
|
||||
id={'radio' + props.value}
|
||||
className={cx(
|
||||
'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-transparent',
|
||||
'radix-state-checked:bg-accent',
|
||||
'radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900',
|
||||
'focus-visible:ring-accent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
|
||||
'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'
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ export function Select(props: PropsWithChildren<SelectProps>) {
|
|||
>
|
||||
<SelectPrimitive.Trigger
|
||||
className={clsx(
|
||||
'bg-app-box inline-flex items-center border py-0.5 pl-2',
|
||||
'border-app-line shadow-app-shade/10 rounded-md shadow outline-none',
|
||||
'inline-flex items-center border bg-app-box py-0.5 pl-2',
|
||||
'rounded-md border-app-line shadow shadow-app-shade/10 outline-none',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
|
|
@ -32,12 +32,12 @@ export function Select(props: PropsWithChildren<SelectProps>) {
|
|||
</span>
|
||||
|
||||
<SelectPrimitive.Icon>
|
||||
<ChevronDouble className="text-ink-dull mr-0.5 h-3 w-3" />
|
||||
<ChevronDouble className="mr-0.5 h-3 w-3 text-ink-dull" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
|
||||
<SelectPrimitive.Portal className="relative">
|
||||
<SelectPrimitive.Content className="bg-app-box border-app-line shadow-app-shade/20 absolute z-50 w-full rounded-md border p-1 shadow-2xl ">
|
||||
<SelectPrimitive.Content className="absolute z-50 w-full rounded-md border border-app-line bg-app-box p-1 shadow-2xl shadow-app-shade/20 ">
|
||||
<SelectPrimitive.ScrollUpButton className="hidden ">
|
||||
<CaretDown />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
|
|
@ -54,8 +54,8 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) {
|
|||
<SelectPrimitive.Item
|
||||
className={clsx(
|
||||
'relative flex items-center px-1 py-0.5 pl-6 pr-4 text-xs',
|
||||
'font-sm text-ink cursor-pointer select-none rounded',
|
||||
'radix-disabled:opacity-50 hover:bg-accent hover:text-white focus:outline-none '
|
||||
'font-sm cursor-pointer select-none rounded text-ink',
|
||||
'hover:bg-accent hover:text-white focus:outline-none radix-disabled:opacity-50 '
|
||||
)}
|
||||
value={props.value}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export const Slider = (props: SliderPrimitive.SliderProps) => (
|
|||
{...props}
|
||||
className={clsx('relative flex h-6 w-full select-none items-center', props.className)}
|
||||
>
|
||||
<SliderPrimitive.Track className="bg-app-box relative h-2 grow rounded-full outline-none">
|
||||
<SliderPrimitive.Range className="bg-accent absolute h-full rounded-full outline-none" />
|
||||
<SliderPrimitive.Track className="relative h-2 grow rounded-full bg-app-box outline-none">
|
||||
<SliderPrimitive.Range className="absolute h-full rounded-full bg-accent outline-none" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb
|
||||
className="bg-accent ring-accent/30 z-50 block h-5 w-5 rounded-full font-bold shadow-lg shadow-black/20 outline-none transition focus:ring-4"
|
||||
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"
|
||||
data-tip="1.0"
|
||||
/>
|
||||
</SliderPrimitive.Root>
|
||||
|
|
|
|||
746
pnpm-lock.yaml
746
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue