From ff52d5f9129857a9e572c57f3ffbac6458a74de4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 16 Dec 2024 11:23:21 +0100
Subject: [PATCH] fix: Drop zone alignment

---
 app/components/open-to/files/upload/index.gjs | 47 ++++++++++---------
 .../open-to/files/upload/instructions.gjs     | 11 -----
 2 files changed, 25 insertions(+), 33 deletions(-)
 delete mode 100644 app/components/open-to/files/upload/instructions.gjs

diff --git a/app/components/open-to/files/upload/index.gjs b/app/components/open-to/files/upload/index.gjs
index a358b49..9140ddd 100644
--- a/app/components/open-to/files/upload/index.gjs
+++ b/app/components/open-to/files/upload/index.gjs
@@ -3,7 +3,6 @@ import FileDropzone from 'ember-file-upload/components/file-dropzone';
 import fileQueue from 'ember-file-upload/helpers/file-queue';
 import { t } from 'ember-intl';
 import Avatar from '../../../avatar';
-import Instructions from './instructions';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { Button } from '@frontile/buttons';
@@ -19,25 +18,29 @@ export default class OpenToFilesUpload extends Component {
     {{#let (fileQueue onFileAdded=this.uploadPhoto) as |queue|}}
       <FileDropzone @queue={{queue}} class='' as |dropzone|>
 
-        {{#if dropzone.active}}
-          <Instructions>
-            <span
-              class='text-xl font-black shadow-md text-white bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% px-6 py-2 rounded-lg'
-            >
-              {{t 'drag-and-drop.drop-now'}}
-            </span>
-          </Instructions>
-        {{else}}
-          <div class='relative w-full aspect-square'>
-            <div class='absolute top-0 left-0 w-full aspect-square'>
-              <Avatar
-                class='border-dashed border-4 border-slate-400'
-                @file='/images/unicorn.webp'
-              />
-            </div>
+        <div class='relative w-full aspect-square'>
+          <div class='absolute top-0 left-0 w-full aspect-square'>
+            <Avatar
+              class='border-dashed border-4
+                {{if dropzone.active "border-emerald-500" "border-slate-400"}}'
+              @file='/images/unicorn.webp'
+            />
+          </div>
 
-            <Instructions>
-              <Button @intent='primary' {{on 'click' this.toggleFileSelector}}>
+          <div
+            class='relative top-0 left-0 w-full aspect-square text-center flex justify-center items-center'
+          >
+            <Button
+              @intent='primary'
+              {{on 'click' this.toggleFileSelector}}
+              class='{{if
+                  dropzone.active
+                  "bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"
+                }}'
+            >
+              {{#if dropzone.active}}
+                {{t 'drag-and-drop.drop-now'}}
+              {{else}}
                 {{t 'drag-and-drop.instructions'}}
                 <input
                   id='file-input'
@@ -45,10 +48,10 @@ export default class OpenToFilesUpload extends Component {
                   {{queue.selectFile}}
                   class='hidden'
                 />
-              </Button>
-            </Instructions>
+              {{/if}}
+            </Button>
           </div>
-        {{/if}}
+        </div>
       </FileDropzone>
     {{/let}}
   </template>
diff --git a/app/components/open-to/files/upload/instructions.gjs b/app/components/open-to/files/upload/instructions.gjs
deleted file mode 100644
index e377946..0000000
--- a/app/components/open-to/files/upload/instructions.gjs
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class OpenToFilesUploadInstructions extends Component {
-  <template>
-    <div
-      class='absolute top-0 left-0 w-full aspect-square text-center flex justify-center items-center'
-    >
-      {{yield}}
-    </div>
-  </template>
-}