ui cleanup

packages/interface/src/components/explorer/ExplorerTopBar.tsx

@@ -205,7 +205,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 		<>
 			<div
 				data-tauri-drag-region
-				className="flex h-[2.95rem] -mt-0.5 max-w z-10 pl-3 flex-shrink-0 items-center  dark:bg-gray-650 border-gray-100 dark:border-gray-800 !bg-opacity-80 backdrop-blur"
+				className="flex h-[2.95rem] -mt-0.5 max-w z-10 pl-3 flex-shrink-0 items-center dark:bg-gray-700 border-gray-100 !bg-opacity-80 backdrop-blur overflow-hidden rounded-tl-md"
 			>
 				<div className="flex ">
 					<Tooltip label="Navigate back">

packages/interface/src/components/explorer/FileItem.tsx

@@ -52,7 +52,7 @@ function FileItem({ data, selected, index, ...rest }: Props) {
 					<FileThumb
 						className={clsx(
 							'border-4 border-gray-250 shadow-md shadow-gray-750 object-cover max-w-full max-h-full w-auto overflow-hidden',
-							isVid && 'border-gray-950 border-x-0 border-y-[9px]'
+							isVid && 'border-gray-950 rounded border-x-0 border-y-[9px]'
 						)}
 						data={data}
 						kind={data.extension === 'zip' ? 'zip' : isVid ? 'video' : 'other'}

packages/interface/src/components/explorer/Inspector.tsx

@@ -47,7 +47,7 @@ export const Inspector = (props: Props) => {
 	});
 
 	return (
-		<div className="p-2 pr-1 w-full overflow-x-hidden custom-scroll inspector-scroll pb-[55px]">
+		<div className="pt-1 pl-1.5 pr-1 w-full overflow-x-hidden custom-scroll inspector-scroll pb-[55px]">
 			{!!props.data && (
 				<>
 					<div className="flex bg-black items-center justify-center w-full h-64 mb-[10px] overflow-hidden rounded-lg ">
@@ -58,13 +58,13 @@ export const Inspector = (props: Props) => {
 							data={props.data}
 						/>
 					</div>
-					<div className="flex flex-col w-full pt-0.5 pb-4 overflow-hidden bg-white rounded-lg shadow select-text dark:shadow-gray-700 dark:bg-gray-550 dark:bg-opacity-40">
-						<h3 className="pt-3 pl-3 text-base font-bold">
+					<div className="flex flex-col w-full pt-0.5 pb-1 overflow-hidden bg-white rounded-lg shadow select-text dark:shadow-gray-700 dark:bg-gray-550 dark:bg-opacity-40 border border-gray-550/70">
+						<h3 className="pt-2 pb-1 pl-3 text-base font-bold">
 							{props.data?.name}
 							{props.data?.extension && `.${props.data.extension}`}
 						</h3>
 						{objectData && (
-							<div className="flex flex-row m-3 space-x-2">
+							<div className="flex flex-row mt-1 mx-3 space-x-0.5">
 								<Tooltip label="Favorite">
 									<FavoriteButton data={objectData} />
 								</Tooltip>

packages/interface/src/components/explorer/inspector/Divider.tsx

@@ -1 +1 @@
-export const Divider = () => <div className="w-full my-1 h-[1px] bg-gray-100 dark:bg-gray-600" />;
+export const Divider = () => <div className="w-full my-1 h-[1px] bg-gray-100 dark:bg-gray-550" />;

packages/interface/src/components/key/KeyMounter.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, CategoryHeading, Input, Select, SelectOption } from '@sd/ui';
 import clsx from 'clsx';
 import { Eject, EjectSimple, Plus } from 'phosphor-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Toggle } from '../primitive';
 import { DefaultProps } from '../primitive/types';
@@ -21,6 +21,8 @@ import { Tooltip } from '../tooltip/Tooltip';
 import { Key } from './Key';
 
 export function KeyMounter() {
+	const ref = useRef<HTMLInputElement>(null);
+
 	const [showKey, setShowKey] = useState(false);
 	const [toggle, setToggle] = useState(false);
 
@@ -30,12 +32,21 @@ export function KeyMounter() {
 
 	const CurrentEyeIcon = showKey ? EyeSlashIcon : EyeIcon;
 
+	// this keeps the input focused when switching tabs
+	// feel free to replace with something cleaner
+	useEffect(() => {
+		setTimeout(() => {
+			ref.current?.focus();
+		});
+	}, []);
+
 	return (
 		<div className="p-3 pt-3 mb-1">
 			<CategoryHeading>Mount key</CategoryHeading>
 			<div className="flex space-x-2">
 				<div className="relative flex flex-grow">
 					<Input
+						ref={ref}
 						value={key}
 						onChange={(e) => setKey(e.target.value)}
 						autoFocus

packages/interface/src/components/layout/Sidebar.tsx

@@ -67,7 +67,7 @@ function LibraryScopedSection() {
 	return (
 		<>
 			<div>
-				<CategoryHeading>Locations</CategoryHeading>
+				<CategoryHeading className="mt-5">Locations</CategoryHeading>
 				{locations?.map((location) => {
 					return (
 						<div key={location.id} className="flex flex-row items-center">
@@ -131,7 +131,7 @@ function LibraryScopedSection() {
 			</div>
 			{tags?.length ? (
 				<div>
-					<CategoryHeading>Tags</CategoryHeading>
+					<CategoryHeading className="mt-5">Tags</CategoryHeading>
 					<div className="mb-2">
 						{tags?.slice(0, 6).map((tag, index) => (
 							<SidebarLink key={index} to={`tag/${tag.id}`} className="">

packages/interface/src/style.scss

@@ -29,7 +29,7 @@ body {
 		width: 8px;
 	}
 	&::-webkit-scrollbar-track {
-		@apply bg-[#00000006] dark:bg-[#00000030] mt-[53px] rounded-[6px];
+		@apply bg-[#00000006] dark:bg-[#00000000] mt-[53px] rounded-[6px];
 	}
 	&::-webkit-scrollbar-thumb {
 		@apply rounded-[6px] bg-gray-300 dark:bg-gray-550;