mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-19 14:08:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

further tweaking

Browse Source
This commit is contained in:
Jamie Pine
2022-10-22 07:01:59 -07:00
parent 53caf144e3
commit df8564b024
11 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/desktop/src-tauri/src/main.rs
View File

@@ -59,9 +59,9 @@ async fn main() -> Result<(), Box<dyn Error>> {
#[cfg(target_os = "macos")]
{
use macos::{lock_app_theme, AppThemeType};
// use macos::{lock_app_theme, AppThemeType};
lock_app_theme(AppThemeType::Dark as _);
// lock_app_theme(AppThemeType::Dark as _);
}
app.windows().iter().for_each(|(_, window)| {

2
apps/desktop/src/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="vanilla-dark">
<html lang="en" class="vanilla-theme">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />

2
apps/web/src/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="vanilla-light">
<html class="vanilla-theme">
<head>
<meta charset="utf-8" />
<title>Spacedrive</title>

8
packages/interface/src/App.tsx
View File

@@ -23,7 +23,13 @@ export default function SpacedriveInterface() {
<QueryClientProvider client={queryClient} contextSharing={true}>
{/* The `context={defaultContext}` part is required for this to work on Windows. Why, idk, don't question it */}
{import.meta.env.DEV && (
<ReactQueryDevtools position="bottom-right" context={defaultContext} />
<ReactQueryDevtools
position="bottom-right"
context={defaultContext}
toggleButtonProps={{
className: 'opacity-0'
}}
/>
)}
<MemoryRouter>
<AppRouterWrapper />

2
packages/interface/src/AppLayout.tsx
View File

@@ -32,7 +32,7 @@ export function AppLayout() {
>
<Sidebar />
<div className="relative flex w-full">
<Suspense>
<Suspense fallback="LOADING">
<Outlet />
</Suspense>
</div>

1
packages/interface/src/components/key/KeyMounter.tsx
View File

@@ -77,6 +77,7 @@ export function KeyMounter() {
<span className="text-xs font-bold">Hashing</span>
<Select className="mt-2" onChange={setHashingAlgo} value={hashingAlgo}>
<SelectOption value="Argon2id">Argon2id</SelectOption>
<SelectOption value="Bcrypt">Bcrypt</SelectOption>
</Select>
</div>
</div>

63
packages/interface/src/components/layout/Sidebar.tsx
View File

@@ -172,8 +172,8 @@ export function Sidebar() {
return (
<div
className={clsx(
'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full px-2.5 overflow-x-hidden overflow-y-scroll border-r border-sidebar-divider no-scrollbar bg-sidebar'
// macOnly(os, 'bg-opacity-[0.85]')
'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full px-2.5 overflow-x-hidden overflow-y-scroll border-r border-sidebar-divider no-scrollbar bg-sidebar',
macOnly(os, 'bg-opacity-[0.80]')
)}
>
<WindowControls />
@@ -242,35 +242,38 @@ export function Sidebar() {
{library && <RunningJobsWidget />}
<div className="fixed bottom-[2px] left-[2px] w-full h-20 rounded-[8px] bg-gradient-to-t from-sidebar via-sidebar to-transparent" />
{/* <div className="fixed w-[174px] bottom-[2px] left-[2px] h-20 rounded-[8px] bg-gradient-to-t from-sidebar-box/90 via-sidebar-box/50 to-transparent" /> */}
<div className="fixed bottom-0 mt-2 mb-3">
<NavLink to="/settings/general">
{({ isActive }) => (
<Button forIcon className={clsx('hover:!bg-opacity-20')}>
<CogIcon className="w-5 h-5" />
</Button>
)}
</NavLink>
<OverlayPanel
className="focus:outline-none"
transformOrigin="bottom left"
disabled={!library}
trigger={
<Button
forIcon
className={clsx(
'!outline-none hover:!bg-opacity-20 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<CheckCircle className="w-5 h-5" />
</Button>
}
>
<div className="block w-[500px] h-96">
<JobsManager />
</div>
</OverlayPanel>
<div className="fixed bottom-0 flex flex-col mt-2 mb-3">
<div className="flex flex-row">
<NavLink to="/settings/general">
{({ isActive }) => (
<Button forIcon className={clsx('hover:!bg-opacity-20')}>
<CogIcon className="w-5 h-5 mt-[1px]" />
</Button>
)}
</NavLink>
<OverlayPanel
className="focus:outline-none"
transformOrigin="bottom left"
disabled={!library}
trigger={
<Button
forIcon
className={clsx(
'!outline-none hover:!bg-opacity-20 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<CheckCircle className="w-5 h-5" />
</Button>
}
>
<div className="block w-[500px] h-96">
<JobsManager />
</div>
</OverlayPanel>
</div>
<span className="w-full ml-1 mt-1 text-[7pt] text-ink-faint/50">Development Build</span>
</div>
</div>
);

0
packages/interface/src/hooks/useMediaQuery.ts Normal file
View File

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

@@ -12,7 +12,7 @@ const MENU_CLASSES = `
flex flex-col
min-w-[8rem] px-1 py-0.5
text-left text-sm text-menu-ink
bg-menu border-menu-border backdrop-blur
bg-menu border-menu-border
border border-transparent
shadow-md shadow-menu-shade/20
select-none cursor-default rounded-md

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

@@ -53,7 +53,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) {
className={clsx(
'relative flex items-center pl-6 px-1 py-0.5 pr-4 text-xs',
'rounded font-sm cursor-pointer select-none text-ink',
'focus:outline-none radix-disabled:opacity-50 radix-state-checked:bg-accent'
'focus:outline-none radix-disabled:opacity-50 hover:bg-accent '
)}
value={props.value}
>

31
packages/ui/style/colors.scss
View File

@@ -1,6 +1,6 @@
.vanilla-light {
@media (prefers-color-scheme: light) {
.vanilla-theme {
// global
--color-black: 0, 0%, 0%;
--color-white: 0, 0%, 100%;
@@ -18,7 +18,7 @@
--color-sidebar-line: 230, 10%, 85%;
--color-sidebar-divider: 230, 15%, 93%;
--color-sidebar-button: 230, 15%, 100%;
--color-sidebar-selected: 230, 10%, 90%;
--color-sidebar-selected: 230, 10%, 80%;
--color-sidebar-separator: 230, 15%, 100%;
--color-sidebar-shade: 230, 15%, 100%;
@@ -35,7 +35,6 @@
--color-app-hover: 230, 5%, 100%;
--color-app-shade: 230, 15%, 50%;
--color-app-frame: 0, 0%, 100%;
// menu
--color-menu: 230, 16%, 14%;
--color-menu-line: 230, 5%, 18%;
@@ -45,9 +44,10 @@
--color-menu-selected: 230, 5%, 30%;
--color-menu-shade: 230, 5%, 0%;
}
}
.vanilla-dark {
@media (prefers-color-scheme: dark) {
.vanilla-theme {
// global
--color-black: 0, 0%, 0%;
--color-white: 0, 0%, 100%;
@@ -81,15 +81,14 @@
--color-app-hover: 230, 15%, 20%;
--color-app-shade: 230, 15%, 0%;
--color-app-frame: 230, 15%, 25%;
// menu
--color-menu: 230, 16%, 14%;
--color-menu-line: 230, 5%, 18%;
--color-menu-ink: 230, 5%, 100%;
--color-menu-faint: 230, 5%, 80%;
--color-menu-hover: 230, 5%, 30%;
--color-menu-selected: 230, 5%, 30%;
--color-menu-shade: 230, 5%, 0%;
// menu
--color-menu: 230, 16%, 7%;
--color-menu-line: 230, 5%, 18%;
--color-menu-ink: 230, 5%, 100%;
--color-menu-faint: 230, 5%, 80%;
--color-menu-hover: 230, 5%, 30%;
--color-menu-selected: 230, 5%, 30%;
--color-menu-shade: 230, 5%, 0%;
}
}
// ruby: 295