Make drop zone look more like UI design

This commit is contained in:
Mattias Granlund 2023-06-25 09:06:12 +03:00
parent 619384405f
commit e7902e310c

View File

@ -4,6 +4,7 @@
import type { DndEvent } from 'svelte-dnd-action/typings'; import type { DndEvent } from 'svelte-dnd-action/typings';
import { createBranch, createFile } from './helpers'; import { createBranch, createFile } from './helpers';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { Button } from '$lib/components';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let items: Branch[] = []; let items: Branch[] = [];
@ -33,7 +34,7 @@
<div <div
id="new-branch-dz" id="new-branch-dz"
class="ml-4 mt-16 flex h-40 items-center rounded-lg border border-dashed border-light-600 px-8 py-10" class="ml-4 mt-16 flex h-40 w-[22.5rem] shrink-0 items-center rounded-lg border border-dashed border-light-600 px-8 py-10"
use:dndzone={{ use:dndzone={{
items: items, items: items,
types: ['new-branch'], types: ['new-branch'],
@ -46,9 +47,10 @@
on:finalize={handleDndFinalize} on:finalize={handleDndFinalize}
> >
<div <div
class="flex w-64 items-center self-center p-8 text-center text-lg text-light-800 dark:text-dark-100" class="flex flex-col items-center gap-y-3 self-center p-8 text-center text-lg text-light-800 dark:text-dark-100"
> >
Drag changes here or click button to create new virtual branch <p>Drag changes or click button to create new virtual branch</p>
<Button color="purple">New virtual branch</Button>
</div> </div>
</div> </div>