From 83d83786af3b742143f64fcff099a9e3589d86d8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 6 Feb 2023 16:41:23 +0100
Subject: [PATCH 1/6] chore: update inputFile css

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 src/lib/elements/forms/inputFile.svelte       | 90 +++++++++++++------
 src/lib/layout/header.svelte                  |  2 +-
 src/lib/layout/unauthenticated.svelte         |  2 +-
 .../storage/bucket-[bucket]/create.svelte     |  7 +-
 6 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 071882cfc..e62b412ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "0.0.1",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/pink": "^0.0.3",
+                "@appwrite.io/pink": "^0.0.4",
                 "@aw-labs/appwrite-console": "^13.1.0",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.36.0",
@@ -146,9 +146,9 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.3",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.3.tgz",
-            "integrity": "sha512-hxLMLvtUGkurnKcdwRH36GyeNZelOPSl5qrniwWwGQbpO+S8SakjMNqL1AF/+4JnypfNZUzJNRGTo+VGbrwang==",
+            "version": "0.0.4",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.4.tgz",
+            "integrity": "sha512-pCXxBqSikG5PpBb2y84tTRH6cAMUYbROlQN8LuGoY2J+vTWMT+HQ7+RAAwRWU1Dlle4FgOFFCKmqU95g6X2a6g==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 02996ed90..5bcbe6ed6 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/pink": "^0.0.3",
+        "@appwrite.io/pink": "^0.0.4",
         "@aw-labs/appwrite-console": "^13.1.0",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 228758667..ebad300e1 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
-    import { Button } from '.';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
 
     export let label: string = null;
     export let files: FileList;
     export let list = new DataTransfer();
     export let allowedFileExtensions: string[] = [];
+    export let maxSize: number = null;
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -13,9 +14,7 @@
     function dropHandler(ev: DragEvent) {
         hovering = false;
         if (ev.dataTransfer.items) {
-            // Use DataTransferItemList interface to access the file(s)
             for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                // If dropped items aren't files, reject them
                 if (ev.dataTransfer.items[i].kind === 'file') {
                     list.items.clear();
                     list.items.add(ev.dataTransfer.items[i].getAsFile());
@@ -28,6 +27,8 @@
     function dragOverHandler() {
         hovering = true;
     }
+
+    $: fileArray = files?.length ? Array.from(files) : [];
 </script>
 
 <input
@@ -42,42 +43,75 @@
         <p class="text">{label}</p>
     {/if}
     <div
-        class="card is-border-dashed is-no-shadow"
+        class="box is-border-dashed is-no-shadow u-padding-24"
+        style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
         class:is-hover-with-file={hovering}
         on:drop|preventDefault={dropHandler}
-        on:dragover|preventDefault={dragOverHandler}
+        on:dragover|preventDefault|stopPropagation={dragOverHandler}
         on:dragleave|preventDefault={() => (hovering = false)}>
-        <div class="u-flex u-main-center u-cross-center u-gap-32">
-            <div class="avatar is-size-large u-min-width-0">
-                <span class="icon-folder" aria-hidden="true" />
+        <div class="upload-file-box">
+            <div class="upload-file-box-image">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-min-width-0 u-text-center">
+                <h5 class="upload-file-box-title heading-level-7 u-inline">
+                    <span class="is-only-desktop">Drag and drop files here to upload</span>
+                    <span class="is-not-desktop">Upload a File</span>
+                </h5>
+                {#if allowedFileExtensions?.length}
+                    <button
+                        class="tooltip u-inline u-margin-inline-start-4"
+                        aria-label="variables info">
+                        <span class="icon-info" aria-hidden="true" />
+                        <span class="tooltip-popup" role="tooltip"
+                            >Only {allowedFileExtensions.join(', ')} accepted.</span>
+                    </button>
+                {/if}
+            </div>
+            <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
+                {#if maxSize}
+                    {@const readableMaxSize = humanFileSize(maxSize)}
+                    <p class="upload-file-box-info body-text-2 u-normal">
+                        Max file size: {readableMaxSize.value + readableMaxSize.unit}
+                    </p>
+                {/if}
+                <button
+                    class="button is-secondary is-full-width-mobile"
+                    type="button"
+                    on:click={() => input.click()}>
+                    <span class="text">Choose a file</span>
+                </button>
             </div>
-            <div class="u-grid u-gap-16 u-min-width-0">
-                <p>Drag and drop files here</p>
-                <div class="u-flex u-gap-8 u-min-width-0">
-                    <Button secondary on:click={() => input.click()}>
-                        <span class="icon-upload" aria-hidden="true" />
-                        <span class="text">Choose File</span>
-                    </Button>
 
-                    {#if files?.length}
-                        {@const fileName = files.item(0).name.split('.')}
-                        <div class="u-flex u-cross-center u-min-width-0">
-                            <Trim>{fileName[0]}</Trim>
-                            <span class="u-min-width-0 u-flex-shrink-0 u-margin-inline-end-16"
-                                >.{fileName[1]}</span>
+            {#if files?.length}
+                <ul class="upload-file-box-list u-min-width-0">
+                    {#each fileArray as file}
+                        {@const fileName = file.name.split('.')}
+                        {@const fileSize = humanFileSize(file.size)}
+                        <li class="u-flex u-cross-center u-min-width-0">
+                            <span class="icon-document" aria-hidden="true" />
+                            <span class="upload-file-box-name u-trim u-min-width-0">
+                                <Trim>{fileName[0]}</Trim>
+                            </span>
+                            <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">
+                                .{fileName[1]}
+                            </span>
+                            <span
+                                class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">
+                                {fileSize.value + fileSize.unit}
+                            </span>
                             <button
                                 on:click={() => (files = null)}
                                 type="button"
-                                class="button is-text is-only-icon"
-                                style="--button-size:1.5rem;"
+                                class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"
-                                title="Remove file">
+                                style="--button-size:1.5rem;">
                                 <span class="icon-x" aria-hidden="true" />
                             </button>
-                        </div>
-                    {/if}
-                </div>
-            </div>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
         </div>
     </div>
 </div>
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 4f6ce4dc0..f83de1b19 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -93,7 +93,7 @@
             <span class="text">Support</span>
         </a>
     </nav>
-    <nav class="u-flex u-height-100-percents u-sep-inline-start">
+    <nav class="u-flex u-height-100-percent u-sep-inline-start">
         {#if $user}
             <div class="drop-wrapper" class:is-open={showDropdown} bind:this={droplistElement}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index da3ee42dc..ba13c1248 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -67,7 +67,7 @@
         <div class="u-margin-block-start-40" />
     </section>
     <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
-        <div class="container u-flex u-flex-vertical u-cross-center u-height-100-percents">
+        <div class="container u-flex u-flex-vertical u-cross-center u-height-100-percent">
             <div class="u-margin-block-start-auto" />
 
             <div class="u-max-width-500 u-width-full-line">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index 55f542942..2ff68172d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -6,7 +6,6 @@
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
-    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Permissions } from '$lib/components/permissions';
     import { addNotification } from '$lib/stores/notifications';
     import { trackEvent } from '$lib/actions/analytics';
@@ -50,8 +49,10 @@
     <svelte:fragment slot="header">Create File</svelte:fragment>
     <FormList>
         <div>
-            <InputFile bind:files allowedFileExtensions={$bucket.allowedFileExtensions} />
-            <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
+            <InputFile
+                bind:files
+                allowedFileExtensions={$bucket.allowedFileExtensions}
+                maxSize={$bucket.maximumFileSize} />
         </div>
 
         {#if !showCustomId}

From 8e10a7c4be2d46f35358b6200e3132fe4f1e7dc9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 6 Feb 2023 17:05:49 +0100
Subject: [PATCH 2/6] fix: add correct drop effect

---
 src/lib/elements/forms/inputFile.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index ebad300e1..1ec81d9b4 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -12,6 +12,7 @@
     let hovering = false;
 
     function dropHandler(ev: DragEvent) {
+        ev.dataTransfer.dropEffect = 'move';
         hovering = false;
         if (ev.dataTransfer.items) {
             for (let i = 0; i < ev.dataTransfer.items.length; i++) {

From 449864d609382b911f7e36bb6e503903ee8fae2d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 7 Feb 2023 10:37:52 +0100
Subject: [PATCH 3/6] fix: rename drop-tabs to secondary-tabs

---
 src/lib/components/dropTabs.svelte            |  3 ---
 src/lib/components/dropTabsItem.svelte        |  9 --------
 src/lib/components/dropTabsLink.svelte        | 16 --------------
 src/lib/components/index.ts                   |  5 ++---
 src/lib/components/secondaryTabs.svelte       |  3 +++
 src/lib/components/secondaryTabsItem.svelte   | 22 +++++++++++++++++++
 src/lib/layout/usage.svelte                   | 18 +++++++--------
 .../usage/[[period]]/+page.svelte             | 18 +++++++--------
 tests/unit/components/dropTabsItem.test.ts    |  8 +++----
 9 files changed, 49 insertions(+), 53 deletions(-)
 delete mode 100644 src/lib/components/dropTabs.svelte
 delete mode 100644 src/lib/components/dropTabsItem.svelte
 delete mode 100644 src/lib/components/dropTabsLink.svelte
 create mode 100644 src/lib/components/secondaryTabs.svelte
 create mode 100644 src/lib/components/secondaryTabsItem.svelte

diff --git a/src/lib/components/dropTabs.svelte b/src/lib/components/dropTabs.svelte
deleted file mode 100644
index d2a425ec5..000000000
--- a/src/lib/components/dropTabs.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<ul class="drop-tabs">
-    <slot />
-</ul>
diff --git a/src/lib/components/dropTabsItem.svelte b/src/lib/components/dropTabsItem.svelte
deleted file mode 100644
index b7ebac26f..000000000
--- a/src/lib/components/dropTabsItem.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-    export let disabled = false;
-</script>
-
-<li class="drop-tabs-item">
-    <button class="drop-tabs-button" {disabled} on:click>
-        <span class="text"><slot /></span>
-    </button>
-</li>
diff --git a/src/lib/components/dropTabsLink.svelte b/src/lib/components/dropTabsLink.svelte
deleted file mode 100644
index 1b5ca8253..000000000
--- a/src/lib/components/dropTabsLink.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    export let href: string;
-    export let disabled = false;
-</script>
-
-<li class="drop-tabs-item">
-    {#if disabled}
-        <button class="drop-tabs-button" disabled>
-            <span class="text"><slot /></span>
-        </button>
-    {:else}
-        <a class="drop-tabs-button" {href}>
-            <span class="text"><slot /></span>
-        </a>
-    {/if}
-</li>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 9ee984091..54b2251a5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -20,9 +20,8 @@ export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
 export { default as CollapsibleItem } from './collapsibleItem.svelte';
-export { default as DropTabs } from './dropTabs.svelte';
-export { default as DropTabsItem } from './dropTabsItem.svelte';
-export { default as DropTabsLink } from './dropTabsLink.svelte';
+export { default as SecondaryTabs } from './secondaryTabs.svelte';
+export { default as SecondaryTabsItem } from './secondaryTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
 export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
diff --git a/src/lib/components/secondaryTabs.svelte b/src/lib/components/secondaryTabs.svelte
new file mode 100644
index 000000000..6dd4970ad
--- /dev/null
+++ b/src/lib/components/secondaryTabs.svelte
@@ -0,0 +1,3 @@
+<ul class="secondary-tabs">
+    <slot />
+</ul>
diff --git a/src/lib/components/secondaryTabsItem.svelte b/src/lib/components/secondaryTabsItem.svelte
new file mode 100644
index 000000000..1d46f462e
--- /dev/null
+++ b/src/lib/components/secondaryTabsItem.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    export let href: string;
+    export let disabled = false;
+</script>
+
+<li class="secondary-tabs-item">
+    {#if href}
+        {#if disabled}
+            <button class="secondary-tabs-button" disabled>
+                <span class="text"><slot /></span>
+            </button>
+        {:else}
+            <a class="secondary-tabs-button" {href}>
+                <span class="text"><slot /></span>
+            </a>
+        {/if}
+    {:else}
+        <button class="secondary-tabs-button" {disabled} on:click>
+            <span class="text"><slot /></span>
+        </button>
+    {/if}
+</li>
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index f46913608..dc97d6314 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -14,7 +14,7 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { BarChart, LineChart } from '$lib/charts';
-    import { Card, DropTabs, DropTabsLink, Heading, Tiles } from '$lib/components';
+    import { Card, SecondaryTabs, SecondaryTabsItem, Heading, Tiles } from '$lib/components';
     import { Colors } from '$lib/charts/config';
     import type { Models } from '@aw-labs/appwrite-console';
     import { page } from '$app/stores';
@@ -42,19 +42,19 @@
 <Container>
     <div class="u-flex u-main-space-between common-section">
         <Heading tag="h2" size="5">{title}</Heading>
-        <DropTabs>
-            <DropTabsLink href={`${path}/24h`} disabled={$page.params.period === '24h'}>
+        <SecondaryTabs>
+            <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
                 24h
-            </DropTabsLink>
-            <DropTabsLink
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
                 href={`${path}/30d`}
                 disabled={!$page.params.period || $page.params.period === '30d'}>
                 30d
-            </DropTabsLink>
-            <DropTabsLink href={`${path}/90d`} disabled={$page.params.period === '90d'}>
+            </SecondaryTabsItem>
+            <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
                 90d
-            </DropTabsLink>
-        </DropTabs>
+            </SecondaryTabsItem>
+        </SecondaryTabs>
     </div>
     <Card>
         {#if count}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index 628eaf11e..98d3effb8 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, DropListLink, DropTabs, Heading } from '$lib/components';
+    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
     import { last } from '$lib/layout/usage.svelte';
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
@@ -15,23 +15,23 @@
 <Container>
     <div class="u-flex u-main-space-between common-section">
         <Heading tag="h2" size="5">Functions</Heading>
-        <DropTabs>
-            <DropListLink
+        <SecondaryTabs>
+            <SecondaryTabsItem
                 href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
                 disabled={($page.params.period ?? '24h') === '24h'}>
                 24h
-            </DropListLink>
-            <DropListLink
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
                 href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/30d`}
                 disabled={$page.params.period === '30d'}>
                 30d
-            </DropListLink>
-            <DropListLink
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
                 href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/90d`}
                 disabled={$page.params.period === '90d'}>
                 90d
-            </DropListLink>
-        </DropTabs>
+            </SecondaryTabsItem>
+        </SecondaryTabs>
     </div>
     {#if count}
         <Card>
diff --git a/tests/unit/components/dropTabsItem.test.ts b/tests/unit/components/dropTabsItem.test.ts
index 87d1b4cbf..65de83fa4 100644
--- a/tests/unit/components/dropTabsItem.test.ts
+++ b/tests/unit/components/dropTabsItem.test.ts
@@ -1,22 +1,22 @@
 import '@testing-library/jest-dom';
 import { vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/svelte';
-import { DropTabsItem } from '../../../src/lib/components';
+import { SecondaryTabsItem } from '../../../src/lib/components';
 
 test('shows button', () => {
-    const { getByRole } = render(DropTabsItem);
+    const { getByRole } = render(SecondaryTabsItem);
 
     expect(getByRole('button')).toBeInTheDocument();
 });
 
 test('shows button - disabled', () => {
-    const { getByRole } = render(DropTabsItem, { disabled: true });
+    const { getByRole } = render(SecondaryTabsItem, { disabled: true });
 
     expect(getByRole('button')).toBeDisabled();
 });
 
 test('shows button - on:click', async () => {
-    const { getByRole, component } = render(DropTabsItem);
+    const { getByRole, component } = render(SecondaryTabsItem);
     const button = getByRole('button');
 
     const callback = vi.fn();

From 643a65ead9bbb2b470f8081e9c6a4fc5202b7a14 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 7 Feb 2023 17:59:15 +0100
Subject: [PATCH 4/6] fix: prevent defaul on dragenter

---
 src/lib/elements/forms/inputFile.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 1ec81d9b4..b35fd3de6 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -9,6 +9,7 @@
     export let maxSize: number = null;
 
     let input: HTMLInputElement;
+    let dropTarget: HTMLDivElement;
     let hovering = false;
 
     function dropHandler(ev: DragEvent) {
@@ -47,8 +48,10 @@
         class="box is-border-dashed is-no-shadow u-padding-24"
         style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
         class:is-hover-with-file={hovering}
+        bind:this={dropTarget}
         on:drop|preventDefault={dropHandler}
-        on:dragover|preventDefault|stopPropagation={dragOverHandler}
+        on:dragover|preventDefault={dragOverHandler}
+        on:dragenter|preventDefault
         on:dragleave|preventDefault={() => (hovering = false)}>
         <div class="upload-file-box">
             <div class="upload-file-box-image">

From d676d0d233ed075b15eec429bf0d993af9e329fa Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 8 Feb 2023 09:53:57 +0100
Subject: [PATCH 5/6] fix: add some  hover effect

---
 src/lib/elements/forms/inputFile.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index b35fd3de6..2e5ea41ad 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -9,7 +9,6 @@
     export let maxSize: number = null;
 
     let input: HTMLInputElement;
-    let dropTarget: HTMLDivElement;
     let hovering = false;
 
     function dropHandler(ev: DragEvent) {
@@ -45,10 +44,10 @@
         <p class="text">{label}</p>
     {/if}
     <div
-        class="box is-border-dashed is-no-shadow u-padding-24"
+        class="box  is-no-shadow u-padding-24"
         style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
+        class:is-border-dashed={!hovering}
         class:is-hover-with-file={hovering}
-        bind:this={dropTarget}
         on:drop|preventDefault={dropHandler}
         on:dragover|preventDefault={dragOverHandler}
         on:dragenter|preventDefault

From f4a5bbfb37813448c591e534e6dcaee49931ed44 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 8 Feb 2023 10:04:21 +0100
Subject: [PATCH 6/6] test: update tests

---
 tests/unit/components/dropTabsItem.test.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/tests/unit/components/dropTabsItem.test.ts b/tests/unit/components/dropTabsItem.test.ts
index 65de83fa4..ddd8130da 100644
--- a/tests/unit/components/dropTabsItem.test.ts
+++ b/tests/unit/components/dropTabsItem.test.ts
@@ -9,8 +9,14 @@ test('shows button', () => {
     expect(getByRole('button')).toBeInTheDocument();
 });
 
+test('shows link', () => {
+    render(SecondaryTabsItem, { href: 'https://www.appwrite.io' });
+    const href = document.querySelector('a');
+    expect(href).toBeInTheDocument();
+});
+
 test('shows button - disabled', () => {
-    const { getByRole } = render(SecondaryTabsItem, { disabled: true });
+    const { getByRole } = render(SecondaryTabsItem, { href: null, disabled: true });
 
     expect(getByRole('button')).toBeDisabled();
 });