feat: Update UI

frontend/src/components/gallery.tsx

@@ -410,7 +410,7 @@ function GalleryImage({ src, nfsw }: { src: string; nfsw: boolean }) {
       <img
         src={src}
         alt=""
-        className={`w-full h-full object-contain transition-all duration-300 ${!show ? "blur-xl" : ""}`}
+        className={`w-full h-full object-cover transition-all duration-300 ${!show ? "blur-xl" : ""}`}
       />
       {!show && (
         <>

frontend/src/pages/home_page.tsx

@@ -187,7 +187,7 @@ function PinnedResourcesCarousel({
         </div>
       </div>
       {resources.length > 1 && (
-        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
+        <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
           {resources.map((_, index) => (
             <button
               key={index}
@@ -232,7 +232,7 @@ function PinnedResourceItem({ resource }: { resource: Resource }) {
             />
           </figure>
         )}
-        <div className="p-4 absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent">
+        <div className="p-4 absolute bottom-2 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent">
           <h2 className="break-all card-title text-white">{resource.title}</h2>
         </div>
       </div>

frontend/src/pages/resource_details_page.tsx

@@ -909,12 +909,7 @@ function CloudflarePopup({ file }: { file: RFile }) {
           }}
         ></Turnstile>
       </div>
-      <p className={"text-xs text-base-content/80 m-2"}>
-        {t(
-          "Please check your network if the verification takes too long or the captcha does not appear.",
-        )}
-      </p>
-      {downloadToken && (
+      {downloadToken ? (
         <div className="p-2">
           <a
             href={network.getFileDownloadLink(file.id, downloadToken)}
@@ -928,7 +923,11 @@ function CloudflarePopup({ file }: { file: RFile }) {
             {t("Download")}
           </a>
         </div>
-      )}
+      ) : <p className={"text-xs text-base-content/80 m-2"}>
+        {t(
+          "Please check your network if the verification takes too long or the captcha does not appear.",
+        )}
+      </p>}
     </div>
   );
 }