mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
[ENG-1625] Spacedrop UI correct hover condition & spacing (#2127)
* improve spacedrop ui with correct hover & spacing * remove
This commit is contained in:
parent
6f27504e5f
commit
53713a9f59
|
@ -60,7 +60,7 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
const discoveredPeers = useDiscoveredPeers();
|
const discoveredPeers = useDiscoveredPeers();
|
||||||
const doSpacedrop = useBridgeMutation('p2p.spacedrop');
|
const doSpacedrop = useBridgeMutation('p2p.spacedrop');
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
// We keep track of how many instances of this component is rendering.
|
// We keep track of how many instances of this component is rendering.
|
||||||
// This is used by `SpacedropButton` to determine if the animation should stop.
|
// This is used by `SpacedropButton` to determine if the animation should stop.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -118,9 +118,11 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
|
||||||
{t("no_nodes_found")}
|
{t("no_nodes_found")}
|
||||||
</p>
|
</p>
|
||||||
</div>}
|
</div>}
|
||||||
|
<div className='flex flex-col space-y-2'>
|
||||||
{Array.from(discoveredPeers).map(([id, meta]) => (
|
{Array.from(discoveredPeers).map(([id, meta]) => (
|
||||||
<Node key={id} id={id} name={meta.name as HardwareModel} onDropped={onDropped} />
|
<Node key={id} id={id} name={meta.name as HardwareModel} onDropped={onDropped} />
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -148,8 +150,8 @@ function Node({
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'flex items-center justify-center gap-3 rounded-md border border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink',
|
'flex items-center justify-start gap-2 rounded-md border bg-app-darkBox px-3 py-2 font-medium text-ink',
|
||||||
state === 'hovered' ? 'border-solid border-accent-deep' : 'border-dashed'
|
state === 'hovered' ? 'border-solid border-accent-deep' : 'border-dashed border-app-line'
|
||||||
)}
|
)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!platform.openFilePickerDialog) {
|
if (!platform.openFilePickerDialog) {
|
||||||
|
|
Loading…
Reference in a new issue