From b7cce6eb7efc62e16f7ec78414d684d5feac0877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Mon, 20 Apr 2026 16:39:37 +0400
Subject: [PATCH] Improve dropzone styles

---
 app/components/place-photo-upload.gjs |  2 +-
 app/styles/app.css                    | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/components/place-photo-upload.gjs b/app/components/place-photo-upload.gjs
index 7f6df7a..8a45c7e 100644
--- a/app/components/place-photo-upload.gjs
+++ b/app/components/place-photo-upload.gjs
@@ -215,7 +215,7 @@ export default class PlacePhotoUpload extends Component {
         {{on "drop" this.handleDrop}}
       >
         <label for="photo-upload-input" class="dropzone-label">
-          <Icon @name="upload-cloud" @size={{48}} />
+          <Icon @name="upload-cloud" @size={{48}} @color="#ccc" />
           <p>Drag and drop photos here, or click to browse</p>
         </label>
         <input
diff --git a/app/styles/app.css b/app/styles/app.css
index 9389054..0ef1904 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -211,12 +211,12 @@ body {
 }
 
 .dropzone {
-  border: 2px dashed #3a4b5c;
+  border: 2px dashed #ccc;
   border-radius: 8px;
-  padding: 30px 20px;
+  padding: 2rem 1.5rem;
   text-align: center;
   transition: all 0.2s ease;
-  margin-bottom: 20px;
+  margin: 1.5rem 0 1rem 0;
   background-color: rgb(255 255 255 / 2%);
   cursor: pointer;
 }
@@ -230,14 +230,13 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 1rem;
   cursor: pointer;
-  color: #a0aec0;
+  color: #898989;
 }
 
 .dropzone-label p {
   margin: 0;
-  font-size: 1.1rem;
 }
 
 .file-input-hidden {
@@ -1563,9 +1562,9 @@ button.create-place {
   cursor: pointer;
 }
 
-/* Place Photo Upload */
 .place-photo-upload h2 {
   margin-top: 0;
+  font-size: 1.2rem;
 }
 
 .alert {