fix: shadows

app/admin/page.tsx

@@ -37,8 +37,8 @@ function PageComponent() {
   return (
     
     <div className="w-full text-white flex justify-center items-center animate-in">
-        <div className="w-2/3 rounded-md bg-primary p-12 mt-32">
+        <div className="w-2/3 rounded-md bg-primary p-12 mt-32 shadow-lg">
-          <div className="w-1/2 rounded-md bg-primary-dark p-12">
+          <div className="w-1/2 rounded-md bg-primary-dark p-12 shadow-lg">
             <input type="text" className="mb-4 mr-2 rounded-md bg-primary p-2 w-full text-white" placeholder="Search all users by email" />
             <div className="w-full h-96 overflow-y-scroll no-scrollbar">
             <table className="w-full">

app/gallery/admin/create/page.tsx

@@ -44,20 +44,20 @@ function PageComponent() {
 
     return (
         <div className="w-full text-white flex justify-center items-center animate-in">
-            <div className="w-1/2 rounded-md bg-primary p-12 mt-32">
+            <div className="w-1/2 rounded-md bg-primary p-12 mt-32 shadow-lg">
                 <div className="w-full flex">
                     <input
                         type="text"
-                        className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
+                        className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg"
                         placeholder="Gallery Name"
                     />
                     <div className="w-1/4">
-                        <button  onClick={() => window.location.href = "/gallery/admin"}  className="w-full bg-error hover:bg-error-light text-white rounded-md p-2">
+                        <button  onClick={() => window.location.href = "/gallery/admin"}  className="w-full bg-error hover:bg-error-light text-white rounded-md p-2 shadow-lg">
                             Back
                         </button>
                     </div>
                     <div className="w-1/4">
-                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2">
+                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg    ">
                             Create Gallery
                         </button>
                     </div>

app/gallery/admin/page.tsx

@@ -44,15 +44,15 @@ function PageComponent() {
 
     return (
         <div className="w-full h-1/2 text-white flex justify-center items-center animate-in">
-        <div className="w-full lg:w-1/3 rounded-md bg-primary p-12 m-1 mt-32">
+        <div className="w-full lg:w-1/3 rounded-md bg-primary p-12 m-1 mt-32 shadow-lg">
             <div className="w-full flex">
-                <input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white" placeholder="Tag Name" />
+                <input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" />
-                <button  className="ml-2 w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
+                <button  className="ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
                     Create
                 </button>
             </div>
             <div className="w-full flex">
-                <input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" />
+                <input type="text" className="mb-8 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" />
             </div>
             <div className="w-full h-96 overflow-y-scroll no-scrollbar">
             <table className="w-full">
@@ -67,7 +67,7 @@ function PageComponent() {
                         <tr key={item.name} className="animate-in">
                             <td className="px-4 py-2">{item.name}</td>
                             <td className="px-4 py-2">
-                                <button  className="bg-error hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
+                                <button  className="bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
                                     <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                 </svg>  
@@ -80,13 +80,13 @@ function PageComponent() {
             </table>
             </div>
         </div>
-        <div className="w-full lg:w-1/2 rounded-md bg-primary p-12 m-1 mt-32">
+        <div className="w-full lg:w-1/2 rounded-md bg-primary p-12 m-1 mt-32 shadow-lg">
             <div className="w-full flex">
                 <SearchInput placeholderTags={[
                     { value: "tags", label: "❗️ click here to add tags to search" }
                 ]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
             
-                <a href="/gallery/admin/create" className="ml-2 max-h-14 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
+                <a href="/gallery/admin/create" className="ml-2 shadow-lg max-h-14 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
                     Create
                 </a>
             </div>
@@ -107,7 +107,7 @@ function PageComponent() {
                             <td className="px-4 py-2">{item.imageCount}</td>
                             <td className="px-4 py-2">{item.tier.replace("Tier","")}</td>
                             <td className="px-4 py-2">
-                                <a href="/gallery/admin/view" className="bg-secondary hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
+                                <a href="/gallery/admin/view" className="bg-secondary shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
                                     <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                                 </svg>

app/gallery/admin/view/page.tsx

@@ -14,7 +14,7 @@ function PageComponent() {
 
     return (
         <div className="w-full text-white flex justify-center items-center animate-in">
-            <div className="w-full lg:w-1/2 rounded-md bg-primary p-12 mt-32">
+            <div className="w-full lg:w-1/2 rounded-md bg-primary p-12 mt-32 shadow-lg  ">
                 <div className="w-full flex pb-48">
                 <GalleryThumbnail id={"Test Gallery"} columns={3} onSelect={function (id: string, columns: number): void {
                 } } title={""} subscription={""} tags={[]} showNsfw={false} nsfw={false} ></GalleryThumbnail>
@@ -54,19 +54,19 @@ function PageComponent() {
                         />
                     </div>
                     <div className="w-1/2">
-                        <select className="mb-2 rounded-md bg-secondary p-2 w-full text-white">
+                        <select className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white">
                             <option value="" disabled selected> </option>
                             {filePreviews.map((preview, index) => (
                                 <option key={index} value={preview}>{`Thumbnail ${index}`}</option>
                             ))}
                         </select>
-                        <select className="mb-2 mr-2 rounded-md bg-secondary p-2 w-full text-white">
+                        <select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
                             <option value="" disabled selected>Select New Tier</option>
                             {filePreviews.map((preview, index) => (
                                 <option key={index} value={preview}>{`Thumbnail ${index}`}</option>
                             ))}
                         </select>
-                        <select className="mb-2 mr-2 rounded-md bg-secondary p-2 w-full text-white">
+                        <select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
                             <option value="" disabled selected>Select New Thumbnail</option>
                             {filePreviews.map((preview, index) => (
                                 <option key={index} value={preview}>{`Thumbnail ${index}`}</option>

components/neroshitron/gallery_thumbnail.tsx

@@ -46,7 +46,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
                 {!isLoading ? (
                     <>
                         <img
-                            className={`aspect-content rounded-3xl`}
+                            className={`aspect-content rounded-3xl  shadow-lg`}
                             src={thumbnailUrl}
                             alt=""
                             onClick={openGallery}

components/neroshitron/navigation_bar.tsx

@@ -39,7 +39,7 @@ console.log(currentPage)
 
   return (
     <div className="flex justify-center items-center pt-2 ">
-      <nav className="w-auto bg-primary-dark bg-opacity-40  flex justify-center z-10 h-16 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
+      <nav className="w-auto bg-primary-dark bg-opacity-40  flex justify-center z-10 h-16 animate-in rounded-md  shadow-lg" style={{ backdropFilter: 'blur(10px)' }}>
         <div className="w-auto flex justify-between items-center p-3 text-sm">
           <div className="flex items-center gap-2 z-10">