Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 20:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

morpe stuf

Browse source
This commit is contained in:
Jamie Pine 2022-10-22 00:02:35 -07:00
parent da344f954c
commit 0f6b4206be
6 changed files with 78 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/interface/src/components/explorer/ExplorerTopBar.tsx
View file

@ -59,19 +59,13 @@ const topBarButtonStyle = cva(
const TOP_BAR_ICON_STYLE = 'm-0.5 w-5 h-5 text-ink-dull';
const TopBarButton = forwardRef<HTMLButtonElement, TopBarButtonProps>(
({ rounding, active, className, ...props }, ref) => {
return (
<Button
{...props}
ref={ref}
className={clsx(topBarButtonStyle({ rounding, active }), className)}
>
{props.children}
</Button>
);
}
);
const TopBarButton = forwardRef<HTMLButtonElement, TopBarButtonProps>((props, ref) => {
return (
<Button {...props} ref={ref} className={clsx(topBarButtonStyle(props), props.className)}>
{props.children}
</Button>
);
});
const SearchBar = forwardRef<HTMLInputElement, DefaultProps>((props, forwardedRef) => {
const {

2
packages/interface/src/components/layout/Card.tsx
View file

@ -5,7 +5,7 @@ export default function Card(props: PropsWithChildren<{ className?: string }>) {
return (
<div
className={clsx(
'flex w-full px-4 py-2 border border-gray-500 rounded-lg bg-gray-550',
'flex w-full px-4 py-2 border border-app-line rounded-lg bg-app-box',
props.className
)}
>

38
packages/interface/src/components/layout/Sidebar.tsx
View file

@ -25,21 +25,34 @@ const sidebarItemClass = cva(
{
variants: {
isActive: {
true: 'bg-sidebar-selected/60'
true: 'bg-sidebar-selected text-ink',
false: 'text-ink-dull'
},
isTransparent: {
true: 'bg-opacity-90',
false: ''
}
}
}
);
export const SidebarLink = (props: PropsWithChildren<NavLinkProps>) => (
<NavLink {...props}>
{({ isActive }) => (
<span className={clsx(sidebarItemClass({ isActive }), props.className)}>
{props.children}
</span>
)}
</NavLink>
);
export const SidebarLink = (props: PropsWithChildren<NavLinkProps>) => {
const os = useOperatingSystem();
return (
<NavLink {...props}>
{({ isActive }) => (
<span
className={clsx(
sidebarItemClass({ isActive, isTransparent: os === 'macOS' }),
props.className
)}
>
{props.children}
</span>
)}
</NavLink>
);
};
const Icon = ({ component: Icon, ...props }: any) => (
<Icon weight="bold" {...props} className={clsx('w-4 h-4 mr-2', props.className)} />
@ -68,7 +81,6 @@ function WindowControls() {
const SidebarCategoryHeading = tw(CategoryHeading)`mt-5 mb-1 ml-1`;
function LibraryScopedSection() {
const os = useOperatingSystem();
const platform = usePlatform();
const { data: locations } = useLibraryQuery(['locations.list'], { keepPreviousData: true });
const { data: tags } = useLibraryQuery(['tags.list'], { keepPreviousData: true });
@ -160,8 +172,8 @@ export function Sidebar() {
return (
<div
className={clsx(
'flex 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/100',
macOnly(os, 'bg-sidebar/80')
'flex 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-90')
)}
>
<WindowControls />

2
packages/interface/src/components/settings/SettingsSidebar.tsx
View file

@ -15,7 +15,7 @@ import { SettingsHeading, SettingsIcon } from './SettingsHeader';
export const SettingsSidebar = () => {
return (
<div className="h-full border-r max-w-[200px] flex-shrink-0 border-gray-100 w-60 dark:border-gray-550">
<div className="h-full border-r max-w-[200px] flex-shrink-0 border-app-line w-60">
<div data-tauri-drag-region className="w-full h-7" />
<div className="px-4 py-2.5">
<SettingsHeading className="!mt-0">Client</SettingsHeading>

12
packages/interface/src/screens/settings/client/GeneralSettings.tsx
View file

@ -6,8 +6,8 @@ import Card from '../../../components/layout/Card';
import { SettingsContainer } from '../../../components/settings/SettingsContainer';
import { SettingsHeader } from '../../../components/settings/SettingsHeader';
const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-gray-500`;
const NodeSettingLabel = tw.div`mb-1 text-xs font-medium text-gray-700 dark:text-gray-100`;
const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-app-button`;
const NodeSettingLabel = tw.div`mb-1 text-xs font-medium`;
export default function GeneralSettings() {
const { data: node } = useBridgeQuery(['getNode']);
@ -20,7 +20,7 @@ export default function GeneralSettings() {
title="General Settings"
description="General settings related to this client."
/>
<Card className="px-5 dark:bg-gray-600">
<Card className="px-5">
<div className="flex flex-col w-full my-2">
<div className="flex flex-row items-center justify-between">
<span className="font-semibold">Connected Node</span>
@ -30,7 +30,7 @@ export default function GeneralSettings() {
</div>
</div>
<hr className="mt-2 mb-4 border-gray-500 " />
<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>
@ -43,7 +43,7 @@ export default function GeneralSettings() {
</div>
<div className="flex items-center mt-5 space-x-3">
<Switch size="sm" checked />
<span className="text-sm text-gray-200">Run daemon when app closed</span>
<span className="text-sm text-ink-dull">Run daemon when app closed</span>
</div>
<div className="mt-3">
<div
@ -52,7 +52,7 @@ export default function GeneralSettings() {
platform.openLink(node.data_path);
}
}}
className="text-xs font-medium leading-relaxed text-gray-700 dark:text-gray-400"
className="text-xs font-medium leading-relaxed text-ink-faint"
>
<b className="inline mr-2 truncate ">
<Database className="inline w-4 h-4 mr-1 -mt-[2px]" /> Data Folder

41
packages/ui/style/colors.scss
View file

@ -54,13 +54,13 @@
--color-sidebar-box: 230, 15%, 13%;
--color-sidebar-line: 230, 15%, 23%;
--color-sidebar-divider: 230, 15%, 17%;
--color-sidebar-button: 230, 15%, 17%;
--color-sidebar-selected: 230, 15%, 22%;
--color-sidebar-button: 230, 15%, 18%;
--color-sidebar-selected: 230, 15%, 14%;
--color-sidebar-separator: 230, 15%, 23%;
--color-sidebar-shade: 230, 15%, 23%;
// main
--color-app: 230, 15%, 13%;
--color-app-box: 230, 15%, 20%;
--color-app-box: 230, 15%, 18%;
--color-app-overlay: 230, 15%, 14%;
--color-app-input: 230, 15%, 20%;
--color-app-focus: 230, 15%, 10%;
@ -72,3 +72,38 @@
--color-app-shade: 230, 15%, 0%;
}
.vanilla-ruby {
// global
--color-black: 0, 0%, 0%;
--color-white: 0, 0%, 100%;
// accent theme colors
--color-accent: 208, 100%, 57%;
--color-accent-faint: 208, 100%, 67%;
--color-accent-deep: 208, 100%, 47%;
// text
--color-ink: 295, 0%, 100%;
--color-ink-dull: 295, 10%, 70%;
--color-ink-faint: 295, 10%, 55%;
// sidebar
--color-sidebar: 295, 15%, 7%;
--color-sidebar-box: 295, 15%, 13%;
--color-sidebar-line: 295, 15%, 23%;
--color-sidebar-divider: 295, 15%, 17%;
--color-sidebar-button: 295, 15%, 17%;
--color-sidebar-selected: 295, 15%, 22%;
--color-sidebar-separator: 295, 15%, 23%;
--color-sidebar-shade: 295, 15%, 23%;
// main
--color-app: 295, 15%, 13%;
--color-app-box: 295, 15%, 18%;
--color-app-overlay: 295, 15%, 14%;
--color-app-input: 295, 15%, 20%;
--color-app-focus: 295, 15%, 10%;
--color-app-line: 295, 15%, 26%;
--color-app-button: 295, 15%, 23%;
--color-app-divider: 295, 15%, 5%;
--color-app-selected: 295, 15%, 23%;
--color-app-hover: 295, 15%, 20%;
--color-app-shade: 295, 15%, 0%;
}