Merge branch 'preview'

pdelfan · Jan 23, 2024 · 1dabc17 · 1dabc17
2 parents 4ca07df + 5035c67
commit 1dabc17
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/components/dataDisplay/postEmbed/ImageEmbed.tsx b/src/components/dataDisplay/postEmbed/ImageEmbed.tsx
@@ -129,7 +129,7 @@ export default function ImageEmbed(props: Props) {
               alt={images[0].alt}
               width={images[0].aspectRatio?.width ?? 900}
               height={images[0].aspectRatio?.height ?? 900}
-              className="rounded-md max-h-96 object-cover cursor-pointer hover:brightness-90"
+              className="rounded-md max-h-96 w-full object-cover cursor-pointer hover:brightness-90"
               onClick={(e) => {
                 e.stopPropagation();
                 setShowImage(0);

diff --git a/src/components/feedback/altTag/AltTag.tsx b/src/components/feedback/altTag/AltTag.tsx
@@ -2,6 +2,9 @@ import Button from "@/components/actions/button/Button";
 import { useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { CgClose } from "react-icons/cg";
+import { useClipboard } from "use-clipboard-copy";
+import toast from "react-hot-toast";
+import { BiSolidCopy } from "react-icons/bi";
 
 interface Props {
   text: string;
@@ -10,6 +13,12 @@ interface Props {
 export default function AltTag(props: Props) {
   const { text } = props;
   const [showAlt, setShowAlt] = useState(false);
+  const clipboard = useClipboard({ copiedTimeout: 3500 });
+
+  const handleCopyAltText = () => {
+    clipboard.copy(text);
+    toast.success("Alt text copied to clipboard");
+  };
 
   const handleShowAlt = () => {
     setShowAlt(!showAlt);
@@ -46,16 +55,25 @@ export default function AltTag(props: Props) {
                 e.preventDefault();
                 handleCloseAlt();
               }}
+              className="m-3.5"
             >
               <Dialog.Close asChild>
                 <Button className="z-50 fixed left-3 top-3 p-3.5 bg-black/50 text-white rounded-full hover:bg-neutral-500/90">
                   <CgClose className="text-xl" />
                 </Button>
               </Dialog.Close>
-              <div className="cursor-text z-50 bg-black/60 m-3.5 max-w-xl max-h-[calc(100svh-10rem)] overflow-auto p-4  text-white rounded-xl">
-                <Dialog.Title className="text-xl font-semibold">
-                  Alternative text
-                </Dialog.Title>
+              <div className="cursor-text z-50 bg-black/60  max-w-xl max-h-[calc(100svh-10rem)] overflow-auto p-4  text-white rounded-xl">
+                <div className="flex flex-wrap gap-3 justify-between mb-4">
+                  <Dialog.Title className="text-xl font-semibold">
+                    Alternative text
+                  </Dialog.Title>
+                  <Button
+                    onClick={handleCopyAltText}
+                    className="bg-gray-200/20 p-2 rounded-lg hover:bg-gray-200/30"
+                  >
+                    <BiSolidCopy />
+                  </Button>
+                </div>
                 <Dialog.Description className="mt-2">{text}</Dialog.Description>
               </div>
             </Dialog.Content>

diff --git a/src/containers/FeedContainer.tsx b/src/containers/FeedContainer.tsx
@@ -47,6 +47,7 @@ export default function FeedContainer(props: Props) {
         }}
       />
       <ComposeButton mode="float" />
+      {isFetchingFeed && !isFetchingFeedNextPage && <FeedPostSkeleton />}
       {feedData &&
         contentFilter &&
         feedFilter &&
@@ -66,7 +67,6 @@ export default function FeedContainer(props: Props) {
               ))}
           </div>
         ))}
-      {isFetchingFeed && !isFetchingFeedNextPage && <FeedPostSkeleton />}
       {isFetchingFeedNextPage && <LoadingSpinner />}
       {feedError && (
         <FeedAlert variant="badResponse" message="Something went wrong" />