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

various style fixes

Browse source
This commit is contained in:
Jamie Pine 2022-10-23 18:09:15 -07:00
parent 58a591655a
commit 838bae14b0
13 changed files with 47 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/landing/src/components/NavBar.tsx
View file

@ -89,7 +89,7 @@ export default function NavBar() {
<div className="flex-1 lg:hidden" />
<Dropdown.Root
button={
<Button className="ml-[140px] hover:!bg-transparent" forIcon>
<Button className="ml-[140px] hover:!bg-transparent" size="icon">
<DotsThreeVertical weight="bold" className="w-6 h-6 " />
</Button>
}

8
packages/interface/src/components/explorer/Inspector.tsx
View file

@ -58,7 +58,7 @@ export const Inspector = (props: Props) => {
>
{!!props.data && (
<>
<div className="flex bg-black items-center justify-center w-full h-64 mb-[10px] overflow-hidden rounded-lg ">
<div className="flex bg-sidebar items-center justify-center w-full h-64 mb-[10px] overflow-hidden rounded-lg ">
<FileThumb
iconClassNames="mx-10"
size={230}
@ -67,7 +67,7 @@ export const Inspector = (props: Props) => {
data={props.data}
/>
</div>
<div className="flex flex-col w-full pt-0.5 pb-1 overflow-hidden bg-app-box rounded-lg shadow select-text shadow-app-shade/10 border border-app-line">
<div className="flex flex-col w-full pt-0.5 pb-1 overflow-hidden bg-app-box rounded-lg select-text shadow-app-shade/10 border border-app-line">
<h3 className="pt-2 pb-1 pl-3 text-base font-bold">
{props.data?.name}
{props.data?.extension && `.${props.data.extension}`}
@ -78,12 +78,12 @@ export const Inspector = (props: Props) => {
<FavoriteButton data={objectData} />
</Tooltip>
<Tooltip label="Share">
<Button size="sm" forIcon>
<Button size="icon">
<ShareIcon className="w-[18px] h-[18px]" />
</Button>
</Tooltip>
<Tooltip label="Link">
<Button size="sm" forIcon>
<Button size="icon">
<Link className="w-[18px] h-[18px]" />
</Button>
</Tooltip>

8
packages/interface/src/components/jobs/JobManager.tsx
View file

@ -68,7 +68,7 @@ export function JobsManager() {
<HeaderContainer>
<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
<div className="flex-grow" />
<Button forIcon>
<Button size="icon">
<EllipsisHorizontalIcon className="w-5" />
</Button>
</HeaderContainer>
@ -127,16 +127,16 @@ function Job({ job }: { job: JobReport }) {
<div className="flex-grow" />
<div className="flex flex-row space-x-2 ml-7">
{job.status === 'Running' && (
<Button forIcon>
<Button size="icon">
<Pause className="w-4" />
</Button>
)}
{job.status === 'Failed' && (
<Button forIcon>
<Button size="icon">
<ArrowsClockwise className="w-4" />
</Button>
)}
<Button forIcon>
<Button size="icon">
<XMarkIcon className="w-4" />
</Button>
</div>

4
packages/interface/src/components/key/Key.tsx
View file

@ -68,12 +68,12 @@ export const Key: React.FC<{ data: Key; index: number }> = ({ data, index }) =>
<div className="space-x-1">
{data.mounted && (
<Tooltip label="Browse files">
<Button forIcon>
<Button size="icon">
<EyeIcon className="w-4 h-4 text-ink-faint" />
</Button>
</Tooltip>
)}
<Button forIcon>
<Button size="icon">
<EllipsisVerticalIcon className="w-4 h-4 text-ink-faint" />
</Button>
</div>

2
packages/interface/src/components/key/KeyMounter.tsx
View file

@ -42,7 +42,7 @@ export function KeyMounter() {
/>
<Button
onClick={() => setShowKey(!showKey)}
forIcon
size="icon"
className="border-none absolute right-[5px] top-[5px]"
>
<CurrentEyeIcon className="w-4 h-4" />

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

@ -8,7 +8,7 @@ import {
useLibraryQuery,
usePlatform
} from '@sd/client';
import { Button, CategoryHeading, Dropdown, OverlayPanel, cva, tw } from '@sd/ui';
import { Button, ButtonLink, CategoryHeading, Dropdown, OverlayPanel, cva, tw } from '@sd/ui';
import clsx from 'clsx';
import { CheckCircle, CirclesFour, Planet, ShareNetwork } from 'phosphor-react';
import React, { PropsWithChildren } from 'react';
@ -20,8 +20,6 @@ import { Folder } from '../icons/Folder';
import { JobsManager } from '../jobs/JobManager';
import { MacTrafficLights } from '../os/TrafficLights';
const DropdownItem = tw(Dropdown.Item)`hover:bg-sidebar-selected`;
export function Sidebar() {
const os = useOperatingSystem();
const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
@ -58,25 +56,28 @@ export function Sidebar() {
>
<Dropdown.Section>
{libraries?.map((lib) => (
<DropdownItem
<Dropdown.Item
selected={lib.uuid === library?.uuid}
key={lib.uuid}
onClick={() => switchLibrary(lib.uuid)}
>
{lib.config.name}
</DropdownItem>
</Dropdown.Item>
))}
</Dropdown.Section>
<Dropdown.Section>
<DropdownItem icon={CogIcon} to="settings/library">
<Dropdown.Item icon={CogIcon} to="settings/library">
Library Settings
</DropdownItem>
</Dropdown.Item>
<CreateLibraryDialog>
<DropdownItem icon={PlusIcon}>Add Library</DropdownItem>
<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
</CreateLibraryDialog>
<DropdownItem icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
<Dropdown.Item
icon={LockClosedIcon}
onClick={() => alert('TODO: Not implemented yet!')}
>
Lock
</DropdownItem>
</Dropdown.Item>
</Dropdown.Section>
</Dropdown.Root>
<div className="pt-1">
@ -100,27 +101,24 @@ export function Sidebar() {
<div className="flex flex-col mb-3 px-2.5">
<div className="flex flex-row">
<NavLink to="/settings/general">
<Button forIcon className={clsx('hover:!bg-opacity-20')}>
<CogIcon className="w-5 h-5 mt-[1px]" />
</Button>
</NavLink>
<ButtonLink to="/settings/general" size="icon" variant="outline">
<CogIcon className="w-5 h-5" />
</ButtonLink>
<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'
)}
size="icon"
variant="outline"
className="radix-state-open:bg-sidebar-selected/50"
>
<CheckCircle className="w-5 h-5" />
</Button>
}
>
<div className="block w-[500px] h-96">
<div className="block w-[430px] h-96">
<JobsManager />
</div>
</OverlayPanel>

2
packages/interface/src/components/primitive/InputContainer.tsx
View file

@ -12,7 +12,7 @@ interface InputContainerProps extends DefaultProps<HTMLDivElement> {
export function InputContainer({ mini, ...props }: PropsWithChildren<InputContainerProps>) {
return (
<div className="flex flex-row">
<div className={clsx('flex flex-col w-full', !mini && 'pb-6', props.className)} {...props}>
<div {...props} className={clsx('flex flex-col w-full', !mini && 'pb-6', props.className)}>
<h3 className="mb-1 text-sm font-medium text-gray-700 dark:text-gray-100">{props.title}</h3>
{!!props.description && <p className="mb-2 text-sm text-gray-400 ">{props.description}</p>}
{!mini && props.children}

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

@ -5,7 +5,7 @@ import { Database } from 'phosphor-react';
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-app-button`;
const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-app-selected`;
const NodeSettingLabel = tw.div`mb-1 text-xs font-medium`;
export default function GeneralSettings() {
@ -23,9 +23,9 @@ export default function GeneralSettings() {
<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>
<div className="grid grid-cols-2 gap-1">
<div className="flex flex-row space-x-1">
<NodePill>0 Peers</NodePill>
<NodePill className="bg-accent">Running</NodePill>
<NodePill className="text-white !bg-accent">Running</NodePill>
</div>
</div>

4
packages/interface/src/screens/settings/node/LibrariesSettings.tsx
View file

@ -27,11 +27,11 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
<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">
<ButtonLink forIcon to="/settings/library" variant="gray">
<ButtonLink size="icon" to="/settings/library" variant="gray">
<PencilIcon className="w-4 h-4" />
</ButtonLink>
<DeleteLibraryDialog libraryUuid={props.library.uuid}>
<Button forIcon variant="gray">
<Button size="icon" variant="gray">
<TrashIcon className="w-4 h-4" />
</Button>
</DeleteLibraryDialog>

14
packages/ui/src/Button.tsx
View file

@ -22,19 +22,17 @@ type Button = {
const hasHref = (props: ButtonProps | LinkButtonProps): props is LinkButtonProps => 'href' in props;
const styles = cva(
'border rounded-md items-center transition-colors duration-100 cursor-default disabled:opacity-50 disabled:cursor-not-allowed',
'border rounded-md items-center transition-colors duration-100 cursor-default disabled:opacity-50',
{
variants: {
pressEffect: {
true: 'active:translate-y-[1px]'
},
loading: {
true: 'opacity-70'
},
forIcon: {
true: '!px-1'
disabled: {
true: 'opacity-70 pointer-events-none cursor-not-allowed'
},
size: {
icon: '!p-1',
md: 'py-1 px-3 text-md font-medium',
sm: 'py-1 px-2 text-sm font-medium'
},
@ -64,8 +62,8 @@ const styles = cva(
export const Button = forwardRef<
HTMLButtonElement | HTMLAnchorElement,
ButtonProps | LinkButtonProps
>(({ className, ..._props }, ref) => {
className = cx(styles(_props), className);
>(({ className, ...props }, ref) => {
className = cx(styles(props), className);
return hasHref(props) ? (
<a {...props} ref={ref as any} className={cx(className, 'no-underline inline-block')} />
) : (

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

@ -65,12 +65,7 @@ export function Dialog(props: DialogProps) {
{props.loading && <Loader />}
<div className="flex-grow" />
<DialogPrimitive.Close asChild>
<Button
loading={props.loading}
disabled={props.loading}
size="sm"
variant="gray"
>
<Button disabled={props.loading} size="sm" variant="gray">
Close
</Button>
</DialogPrimitive.Close>
@ -78,7 +73,6 @@ export function Dialog(props: DialogProps) {
onClick={props.ctaAction}
type="submit"
size="sm"
loading={props.loading}
disabled={props.loading || props.submitDisabled}
variant={props.ctaDanger ? 'colored' : 'accent'}
className={clsx(props.ctaDanger && 'bg-red-500 border-red-500')}

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

@ -16,8 +16,8 @@ const itemStyles = cva(
variants: {
selected: {
true: 'bg-accent hover:!bg-accent text-white',
undefined: 'hover:bg-menu-hover/50',
false: 'hover:bg-menu-hover/50'
undefined: 'hover:bg-menu-hover',
false: 'hover:bg-menu-hover'
},
active: {
true: ''

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

@ -39,7 +39,7 @@
--color-menu-line: var(--dark-hue), 5%, 18%;
--color-menu-ink: var(--dark-hue), 5%, 100%;
--color-menu-faint: var(--dark-hue), 5%, 80%;
--color-menu-hover: var(--dark-hue), 5%, 30%;
--color-menu-hover: var(--dark-hue), 15%, 30%;
--color-menu-selected: var(--dark-hue), 5%, 30%;
--color-menu-shade: var(--dark-hue), 5%, 0%;
}
@ -85,7 +85,7 @@
--color-menu-line: var(--light-hue), 5%, 18%;
--color-menu-ink: var(--light-hue), 5%, 100%;
--color-menu-faint: var(--light-hue), 5%, 80%;
--color-menu-hover: var(--light-hue), 5%, 30%;
--color-menu-hover: var(--light-hue), 15%, 20%;
--color-menu-selected: var(--light-hue), 5%, 30%;
--color-menu-shade: var(--light-hue), 5%, 0%;
}