Merge pull request #21 from MichalBryxi/fix/17/drop-zone-alignment

fix: Drop zone alignment

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,36 +18,40 @@ 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'
                   type='file'
                   {{queue.selectFile}}
                   class='hidden'
                 />
-              </Button>
-            </Instructions>
+              {{/if}}
+            </Button>
           </div>
-        {{/if}}
+        </div>
       </FileDropzone>
     {{/let}}
   </template>