layouting and small fix

src/Components/Profile/ProfileForm.tsx

@@ -164,7 +164,7 @@ export function ProfileForm() {
     <>
       <MapOverlayPage
         backdrop
-        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0'
+        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:@container tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0'
       >
         <form
           className='tw:h-full'

src/Components/Profile/Subcomponents/GalleryForm.tsx

@@ -1,8 +1,8 @@
-import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon'
 import TrashIcon from '@heroicons/react/24/solid/TrashIcon'
 import imageCompression from 'browser-image-compression'
 import { useState } from 'react'
 import { useDropzone } from 'react-dropzone'
+import { BiSolidImage } from 'react-icons/bi'
 
 import { useAppState } from '#components/AppShell/hooks/useAppState'
 import DialogModal from '#components/Templates/DialogModal'
@@ -92,13 +92,13 @@ export const GalleryForm = ({ state, setState }: Props) => {
 
   return (
     <>
-      <div className='tw:flex tw:flex-wrap tw:gap-4 tw:my-4'>
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
         {images.map((image, index) => (
           <div key={index} className='tw:relative'>
             <img
               src={image.src}
               alt={`Gallery image ${index + 1}`}
-              className={`tw:w-60 tw:h-60 tw:object-cover tw:rounded-lg ${
+              className={`tw:w-full tw:h-full tw:object-cover tw:rounded-lg ${
                 image.state === 'uploading' ? 'tw:opacity-50' : ''
               }`}
             />
@@ -107,7 +107,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
             )}
             {image.state === 'uploaded' && (
               <button
-                className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600'
+                className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer'
                 onClick={() => setImageSelectedToDelete(index)}
                 type='button'
               >
@@ -119,10 +119,13 @@ export const GalleryForm = ({ state, setState }: Props) => {
 
         <div
           {...getRootProps()}
-          className='tw:flex tw:center tw:w-60 tw:h-60 tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg'
+          className='custom-file-upload tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg tw:bg-base-200'
         >
           <input {...getInputProps()} />
-          <ArrowUpTrayIcon className='tw:h-8 tw:w-8 tw:m-auto' />
+          <div>
+            <BiSolidImage className='tw:h-16 tw:w-16 tw:m-auto tw:mb-2' />
+            <span className='tw:text-center'>Upload Image</span>
+          </div>
         </div>
       </div>
       <DialogModal
@@ -138,7 +141,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
               <label
                 className='tw:btn tw:mt-4 tw:btn-error'
                 onClick={() => {
-                  imageSelectedToDelete && removeImage(imageSelectedToDelete)
+                  if (imageSelectedToDelete !== null) {
+                    removeImage(imageSelectedToDelete)
+                  }
                   closeModal()
                 }}
               >

src/assets/css/custom-file-upload.css

@@ -14,5 +14,5 @@ input[type="file"] {
     transition: .5s ease;
     opacity: 0;
     position: absolute;
-    transform: translate(8px, 8px);
+    transform: translate(16px, 16px);
 }

src/assets/image-placeholder.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="_x32_" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<path class="st0" d="M99.281,399.469h320.094c6.172,0,11.844-3.422,14.719-8.875c2.844-5.469,2.438-12.078-1.063-17.141   l-69.156-100.094c-6.313-9.125-16.781-14.516-27.906-14.297s-21.406,5.969-27.375,15.359l-19.719,30.984l-54.828-79.359   c-6.313-9.172-16.797-14.531-27.922-14.328s-21.406,5.969-27.375,15.359L85.281,373.984c-3.25,5.109-3.469,11.578-0.531,16.875   C87.656,396.172,93.219,399.469,99.281,399.469z"/>
+	<path class="st0" d="M322.672,223.906c23.688,0,42.922-19.219,42.922-42.922c0-23.688-19.234-42.906-42.922-42.906   c-23.703,0-42.922,19.219-42.922,42.906C279.75,204.688,298.969,223.906,322.672,223.906z"/>
+	<path class="st0" d="M0,19.703v472.594h512v-25.313V19.703H0z M461.375,441.672H50.625V70.328h410.75V441.672z"/>
+</g>
+</svg>