update/UI to warm tone

docs/apply/index.html

@@ -29,8 +29,12 @@ <h1 class="pb-4 text-lg font-semibold">Apply to Open Gallery</h1>
                 <input type="url" id="portfolio" name="portfolio" class="mt-1 mb-1 block w-full border border-gray-300 rounded-md p-2">
             </div>
             <div>
-                <label for="image_links" class="block text-sm font-medium">Image Links</label>
-                <textarea id="image_links" name="image_links" rows="4" class="mt-1 mb-1 block w-full border border-gray-300 rounded-md p-2 placeholder:text-gray-500 placeholder:italic" placeholder="Google Drive, Instagram, etc."></textarea>
+                <label for="image_files" class="block text-sm font-medium">Upload Files</label>
+                <input type="file" id="image_files" name="image_files" multiple class="mt-1 mb-1 block w-full border border-gray-300 rounded-md p-2">
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Preview</p>
+                <div id="image-preview" class="flex flex-wrap gap-2"></div>
             </div>
             <div class="hidden">
                 <label for="website">Website</label>

docs/apply/script.js

@@ -1,3 +1,53 @@
+const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
+
+function showThumbnailPreview(files) {
+    const previewContainer = document.getElementById('image-preview');
+    previewContainer.innerHTML = ''; 
+    validateImages(files);
+
+    for (const file of files) {
+        if (!file.type.startsWith('image/')) continue;
+
+        const img = document.createElement('img');
+        img.classList.add('w-24', 'h-24', 'object-cover', 'rounded-md', 'border', 'border-gray-300');
+        img.file = file;
+        previewContainer.appendChild(img);
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            img.src = e.target.result;
+        }
+        reader.readAsDataURL(file);
+    }
+}
+
+
+function validateImages(files) {
+    if (files.length === 0 || files.length > 5) {
+        showToast('Upload at least one image and no more than five.');
+        return false;
+    }
+
+    for(const file of files){
+        if(!allowedTypes.includes(file.type)) {
+            showToast(`${file.name} must be JPG, PNG or WEBP.`);
+            return false;
+        }
+
+        if(file.size > 5 * 1024 * 1024) {
+            showToast(`${file.name} file must be less than 5MB.`);
+            return false;
+        }
+    }
+    return true;
+}
+
+function resetForm(form) {
+    form.reset();
+    document.getElementById('image_files').value = '';
+    document.getElementById('image-preview').innerHTML = '';
+}
+
 function showToast(message) {
     const toast = document.getElementById('toast');
     toast.textContent = message;
@@ -7,37 +57,53 @@ function showToast(message) {
     }, 3000);
 }
 
+document.getElementById('image_files').addEventListener('change', function(e) {
+    if (e.target.files.length > 0) {
+        showThumbnailPreview(e.target.files);
+    }
+});
+
 document.getElementById('application-form').addEventListener('submit', async function(e){
     e.preventDefault();
 
+    const uploadedFiles = e.target.image_files.files;
+    if(!validateImages(uploadedFiles)) {
+        return;
+    }
     const form = e.target;
     const url = 'https://open-gallery-backend-fqg5epekaah2e9da.centralus-01.azurewebsites.net/api/artist-application';
-    const payload = {
+    const artistPayload = {
         name: form.name.value.trim(),
         email: form.email.value.trim(),
         location: form.location.value.trim(),
         portfolio: form.portfolio.value.trim(),
-        image_links: form.image_links.value.trim(),
         website: form.website.value.trim()
     }
-    console.log('Submitting application:', payload);
+
     try {
-        const response = await fetch(url, {
+        const applicationResponse = await fetch(url, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify(payload)
+            body: JSON.stringify(artistPayload)
         });
 
-        if (!response.ok) {
-            const errorText = await response.text();
+        if(!applicationResponse.ok) {
+            const errorText = await applicationResponse.text();
+            resetForm(form);
             showToast(errorText);
-        } else {
-            showToast('Application submitted successfully');
-            form.reset();
+            return;
         }
+
+        const { applicationId } = await applicationResponse.json();
+        await uploadToBlobStorage(applicationId, uploadedFiles);
+
+        // finalize application with backend
+
+        showToast('Application submitted successfully!');
+        resetForm(form);
     } catch (error) {
-        showToast('Application failed... please try again later');
+        showToast('Application failed. Please try again later');
     }
 })

docs/index.html

@@ -74,6 +74,9 @@ <h1>Welcome to Open Gallery</h1>
                 Privacy Policy
             </a>
         </div>
+        <div class="button-group-2">
+
+        </div>
     </div>
 </body>
 </html>

src/components/buttons/ExploreButton.tsx

@@ -10,6 +10,6 @@ export default function ExploreButton({url}:ExploreProps) {
     }
 
     return (
-        <SmartButton variant='bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow' text="Explore" onClick={handleExplore} />
+        <SmartButton variant='bg-[#ECEFF3] hover:bg-[#E1E6ED] text-[#2F3640] font-semibold py-2 px-4 border border-[#D6DCE3] rounded shadow' text="🧭 Explore" onClick={handleExplore} />
     );
 }

src/components/buttons/FavoriteButton.tsx

@@ -12,6 +12,6 @@ export default function FavoriteButton({onFavorite, asset}:FavoriteButtonProps)
     }
 
     return (
-        <SmartButton variant="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" text="Favorite" onClick={handleRefresh} />
+        <SmartButton variant="bg-[#ECEFF3] hover:bg-[#E1E6ED] text-[#2F3640] font-semibold py-2 px-4 border border-[#D6DCE3] rounded shadow" text="❤ Favorite" onClick={handleRefresh} />
     )
 }

src/components/buttons/Refresh.tsx

@@ -10,6 +10,6 @@ export default function RefreshButton({onRefresh}: RefreshButtonProps) {
     }
 
     return (
-        <SmartButton variant="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" text="Refresh" onClick={handleRefresh} />
+        <SmartButton variant="bg-[#ECEFF3] hover:bg-[#E1E6ED] text-[#2F3640] font-semibold py-2 px-4 border border-[#D6DCE3] rounded shadow" text="↻ Refresh" onClick={handleRefresh} />
     )
 }

src/components/image/Display.tsx

@@ -4,7 +4,7 @@ interface ImageProps {
 
 export default function Display({imageUrl}:ImageProps) {    
     return (
-        <div className="w-[320px] h-[320px] sm:w-[400px] sm:h-[400px] md:w-[500px] md:h-[500px] flex items-center justify-center bg-gray-100 rounded-xl shadow-sm overflow-hidden">
+        <div className="w-[320px] h-[320px] sm:w-[400px] sm:h-[400px] md:w-[500px] md:h-[500px] flex items-center justify-center bg-[#EDEBE4] rounded-xl shadow-sm overflow-hidden">
             <img
                 src={imageUrl}
                 className="object-contain w-full h-full"

src/components/placard/Placard.tsx

@@ -4,11 +4,11 @@ import { PlacardProps, ColorDot } from "./type";
 export default function Placard({title, artist, location, description, colors}:PlacardProps) {
     return (
         <div className="space-y-2 mb-4">
-            <p className="text-lg font-semibold">{title}</p>
-            <p className='font-sans'>{artist}</p>
-            <p className='font-sans'>{location}</p>
+            <p className="text-2xl font-semibold">{title}</p>
+            <p className='text-lg font-[500] font-sans'>{artist}</p>
+            <p className='text-base font-[400] font-sans'>{location}</p>
             <p 
-                className='font-sans' 
+                className='text-base font-[400] font-sans' 
                 dangerouslySetInnerHTML={{ __html:(description) }}
             />
             <ColorPalette profile={colors.profile} palette={colors.palette}/>

src/components/presentation/Presentation.tsx

@@ -77,15 +77,15 @@ export default function Presentation() {
     if (!asset) {
         return (
             <div className='flex items-center gap-8'>
-                <p>Loading...</p>;
+                <p>Loading...</p>
             </div>
         )
     }
 
     const hasDescription = asset.description.length !== 0;
     const src = sanitizeURL(asset.image_url?.trim()) ? asset.image_url : placeholder
     return (
-        <div className='flex min-h-screen bg-white relative'>
+        <div className='flex min-h-screen bg-[#F8F7F2] relative'>
             <Sidebar currentAssetID={asset.id} favoritesList={favorites} onRemoveFavorite={handleRemove}/>
             <div className="flex flex-1 ml-[225px] items-center justify-center">
                 <AnimatePresence mode="wait">
@@ -114,7 +114,7 @@ export default function Presentation() {
                     )}
                 </AnimatePresence>
             </div>
-            <div className="absolute bottom-10 left-1/2 -translate-x-1/2 w-[60%] md:w-[55%] lg:w-[30%] flex justify-center items-center space-x-8 bg-gray-50 shadow-sm rounded-xl px-6 py-3">
+            <div className="absolute bottom-10 left-1/2 -translate-x-1/2 w-[60%] md:w-[55%] lg:w-[30%] flex justify-center items-center space-x-8 bg-gray-50 shadow-md rounded-xl px-6 py-3">
                 <Refresh onRefresh={handleRefresh} />
                 <Favorite onFavorite={addFavorite} asset={asset} />
                 <Explore  url={sanitizeText(asset.museum_url)}/>

src/components/sidebar/Sidebar.tsx

@@ -22,7 +22,7 @@ export default function Sidebar({currentAssetID, favoritesList, onRemoveFavorite
   return (
     <div className="fixed top-0 left-0">
       <motion.nav 
-        className="absolute top-0 left-0 h-screen border-r border-slate-200 bg-slate-50 shadow-lg p-2 overflow-auto"
+        className="absolute top-0 left-0 h-screen border-r border-slate-200 bg-[#F2F0E8] shadow-lg p-2 overflow-auto"
         style={{
           width: open ? "225px" : 'fit-content'
         }}