Increase button visibility on alt/gallery/linkcard/upload

Author: pdelfan

src/components/dataDisplay/gallery/Gallery.tsx

@@ -43,7 +43,7 @@ export default function Gallery(props: Props) {
           break;
       }
     },
-    [handleBackward, handleForward],
+    [handleBackward, handleForward]
   );
 
   useEffect(() => {
@@ -64,7 +64,7 @@ export default function Gallery(props: Props) {
           className="z-50 w-full"
         >
           <Button
-            className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted fixed left-3 top-3 z-[70] rounded-full p-3.5"
+            className="text-skin-secondary bg-skin-secondary hover:bg-skin-base hover:text-skin-base fixed left-3 top-3 z-[70] rounded-full p-3.5 border border-skin-base"
             onClick={(e) => {
               e.stopPropagation();
               onClose();
@@ -74,24 +74,24 @@ export default function Gallery(props: Props) {
           </Button>
           {imageCount > 1 && currentIndex > 0 && (
             <Button
-              className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted fixed left-3 top-1/2 z-[70] rounded-full p-3.5"
+              className="text-skin-secondary bg-skin-secondary hover:bg-skin-base hover:text-skin-base fixed left-3 top-1/2 z-[70] rounded-full p-3.5 border border-skin-base"
               onClick={(e) => {
                 e.stopPropagation();
                 handleBackward();
               }}
             >
-              <BiLeftArrowAlt />
+              <BiLeftArrowAlt className="text-lg" />
             </Button>
           )}
           {imageCount > 1 && currentIndex < imageCount - 1 && (
             <Button
-              className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted fixed right-3 top-1/2 z-[70] rounded-full p-3.5"
+              className="text-skin-secondary bg-skin-secondary hover:bg-skin-base hover:text-skin-base fixed right-3 top-1/2 z-[70] rounded-full p-3.5 border border-skin-base"
               onClick={(e) => {
                 e.stopPropagation();
                 handleForward();
               }}
             >
-              <BiRightArrowAlt />
+              <BiRightArrowAlt className="text-lg" />
             </Button>
           )}
 

src/components/feedback/altTag/AltTag.tsx

@@ -36,7 +36,7 @@ export default function AltTag(props: Props) {
           e.preventDefault();
           handleShowAlt();
         }}
-        className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted absolute bottom-1.5 left-1.5 rounded-md px-2 py-0.5 text-xs font-semibold"
+        className="text-skin-secondary bg-skin-secondary hover:bg-skin-muted hover:text-skin-base absolute bottom-1.5 left-1.5 rounded-md px-2 py-0.5 text-xs font-semibold border border-skin-base"
       >
         ALT
       </Button>
@@ -58,11 +58,11 @@ export default function AltTag(props: Props) {
               className="m-3.5"
             >
               <Dialog.Close asChild>
-                <Button className="text-skin-inverted bg-skin-overlay hover:bg-skin-inverted fixed left-3 top-3 z-50 rounded-full p-3.5">
+                <Button className="text-skin-secondary bg-skin-secondary hover:bg-skin-muted hover:text-skin-base fixed left-3 top-3 z-50 rounded-full p-3.5 border border-skin-base">
                   <CgClose className="text-xl" />
                 </Button>
               </Dialog.Close>
-              <div className="text-skin-inverted bg-skin-overlay-muted z-50  max-h-[calc(100svh-10rem)] max-w-xl cursor-text overflow-auto rounded-xl p-4">
+              <div className="text-skin-inverted bg-skin-overlay-muted z-50 max-h-[calc(100svh-10rem)] max-w-xl cursor-text overflow-auto rounded-xl p-4">
                 <div className="mb-4 flex flex-wrap justify-between gap-3">
                   <Dialog.Title className="text-xl font-semibold text-white">
                     Alternative text

src/components/inputs/editor/LinkCard.tsx

@@ -45,7 +45,7 @@ export default function LinkCard(props: Props) {
 
   if (error) {
     return (
-      <div className="border-skin-base flex flex-wrap items-center justify-between w-full gap-3 rounded-2xl border p-3">
+      <div className="bg-skin-base border-skin-base flex flex-wrap items-center justify-between w-full gap-3 rounded-2xl border p-3">
         <div className="flex flex-col gap-3">
           <span className="text-skin-base w-fit shrink-0">
             Could not get info about this link
@@ -55,7 +55,7 @@ export default function LinkCard(props: Props) {
           </span>
         </div>
         <Button
-          className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted rounded-full p-1"
+          className="text-skin-secondary bg-skin-secondary hover:bg-skin-base hover:text-skin-base rounded-full p-2 border border-skin-base"
           onClick={(e) => {
             e.preventDefault();
             onRemoveLinkCard(link);
@@ -70,7 +70,7 @@ export default function LinkCard(props: Props) {
   return (
     <article className="bg-skin-base border-skin-base relative rounded-2xl border">
       <Button
-        className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted absolute left-0 top-0 z-50 m-2 rounded-full p-1"
+        className="text-skin-secondary bg-skin-secondary hover:bg-skin-base hover:text-skin-base absolute left-0 top-0 z-50 m-2 p-2 border border-skin-base rounded-full"
         onClick={(e) => {
           e.preventDefault();
           onRemoveLinkCard(link);

src/components/inputs/editor/UploadPreview.tsx

@@ -19,7 +19,7 @@ export default function UploadPreview(props: Props) {
 
   const handleRemove = (image: UploadImage) => {
     onUpdate((prev) =>
-      prev?.filter((prevImage) => prevImage.url !== image.url),
+      prev?.filter((prevImage) => prevImage.url !== image.url)
     );
   };
 
@@ -29,7 +29,7 @@ export default function UploadPreview(props: Props) {
         {images.map((image) => (
           <div key={image.url} className="animate-fade relative h-fit">
             <Button
-              className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted absolute top-0 m-2 rounded-full p-2"
+              className="text-skin-secondary bg-skin-secondary hover:bg-skin-muted border border-skin-base hover:text-skin-base absolute top-0 m-2 rounded-full p-2"
               onClick={(e) => {
                 e.preventDefault();
                 handleRemove(image);
@@ -40,16 +40,16 @@ export default function UploadPreview(props: Props) {
             <div className="absolute bottom-0 m-2">
               <Dialog.Root open={showAltTextModal}>
                 <Dialog.Trigger>
-                  <div
-                    className="text-skin-icon-inverted bg-skin-overlay hover:bg-skin-inverted hover:text-skin-inverted rounded-full px-3 py-2 text-sm font-medium"
+                  <Button
+                    className="text-skin-secondary bg-skin-secondary hover:bg-skin-muted border border-skin-base hover:text-skin-base rounded-full px-3 py-2 text-sm font-medium"
                     onClick={() => {
                       setSelectedImage(image);
                       setShowAltTextModal(true);
                       setAltText(image.altText ?? "");
                     }}
                   >
                     {image.altText ? "Edit alt text" : "Add alt text"}
-                  </div>
+                  </Button>
                 </Dialog.Trigger>
                 <Dialog.Portal>
                   <Dialog.Content>
@@ -61,7 +61,7 @@ export default function UploadPreview(props: Props) {
                             alt="Uploaded image"
                             width={200}
                             height={200}
-                            className="mx-auto max-h-80 rounded-xl object-cover md:max-w-xl"
+                            className="mx-auto max-h-80 rounded-xl object-cover md:max-w-xl border border-skin-base"
                           />
                           <div className="mx-auto mt-3 flex items-center gap-2 md:max-w-xl">
                             <PiWarningCircleFill className="text-skin-base shrink-0 text-2xl" />
@@ -103,8 +103,8 @@ export default function UploadPreview(props: Props) {
                                                 ? altText
                                                 : selectedImage.altText,
                                           })
-                                        : prevImage,
-                                    ),
+                                        : prevImage
+                                    )
                                   );
                                 }}
                                 className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
@@ -125,7 +125,7 @@ export default function UploadPreview(props: Props) {
               alt="Uploaded image"
               width={200}
               height={200}
-              className="aspect-square max-h-40 w-full rounded-xl object-cover"
+              className="aspect-square max-h-40 w-full rounded-xl object-cover border border-skin-base"
             />
           </div>
         ))}