From 94898bf4bc9a71342d24bf055ac35eab73b1a3d5 Mon Sep 17 00:00:00 2001
From: Mason McElvain <52104630+masonmcelvain@users.noreply.github.com>
Date: Sun, 15 Oct 2023 14:59:27 -0700
Subject: [PATCH 1/3] feat(images): use tailwind

---
 src/components/CardImage.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/CardImage.tsx b/src/components/CardImage.tsx
index 79e48fee..43d7980e 100644
--- a/src/components/CardImage.tsx
+++ b/src/components/CardImage.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
-import { Icon, Image } from "@chakra-ui/react";
+import { Image } from "react-feather";
 import { LinkData } from "@models/link-state";
-import { Image as FeatherImageIcon } from "react-feather";
 
 type CardImageProps = {
    linkData: LinkData;
@@ -9,8 +8,8 @@ type CardImageProps = {
 export default function CardImage({ linkData }: CardImageProps) {
    const { name, imageUrl } = linkData;
    return imageUrl ? (
-      <Image src={imageUrl} alt={name} w={8} />
+      <img src={imageUrl} alt={name} className="w-8" />
    ) : (
-      <Icon as={FeatherImageIcon} w={8} h={8} opacity="0.5" />
+      <Image className="h-8 w-8 opacity-50" />
    );
 }

From fd326cc6b922afdb16f6d7f1ecd162202401f5e2 Mon Sep 17 00:00:00 2001
From: Mason McElvain <52104630+masonmcelvain@users.noreply.github.com>
Date: Sun, 15 Oct 2023 15:22:00 -0700
Subject: [PATCH 2/3] fix(style): simplify card text hover styles

---
 src/components/Card.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 01316c10..3bd3961a 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,4 +1,4 @@
-import { Button, Text, useBoolean, VStack } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import { LinkData } from "@models/link-state";
 import * as React from "react";
 import { useDrag } from "react-dnd";
@@ -19,7 +19,6 @@ type CardProps = {
 export function Card({ linkData, isInEditMode, onClick }: CardProps) {
    const { id, name, url } = linkData;
    const item: CardDragItem = { id };
-   const [isMouseOver, setIsMouseOver] = useBoolean();
    const [{ isDragEventInProgress }, drag] = useDrag(
       () => ({
          type: DragItemTypes.CARD,
@@ -42,6 +41,7 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
 
    return (
       <Button
+         className="group"
          pos="absolute"
          top={0}
          as="a"
@@ -59,25 +59,17 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
          alignItems="center"
          justifyContent="flex-start"
          gridRowGap={2}
-         onMouseEnter={setIsMouseOver.on}
-         onMouseLeave={setIsMouseOver.off}
          disabled={isInEditMode}
          ref={drag}
          transform="translate(0, 0)" // Prevents React DnD background color bug
          {...conditionalButtonProps}
       >
-         <VStack w="full">
+         <div className="flex w-full flex-col items-center justify-center space-y-2">
             <CardImage linkData={linkData} />
-            <Text
-               align="center"
-               fontSize="sm"
-               maxW="full"
-               whiteSpace="normal"
-               isTruncated={!isMouseOver}
-            >
+            <p className="max-w-full truncate text-center text-sm group-hover:overflow-visible group-hover:whitespace-normal">
                {name}
-            </Text>
-         </VStack>
+            </p>
+         </div>
       </Button>
    );
 }

From 43789095c44cf058950ea6b0415dc66b02952e99 Mon Sep 17 00:00:00 2001
From: Mason McElvain <52104630+masonmcelvain@users.noreply.github.com>
Date: Thu, 23 Nov 2023 08:32:49 -0800
Subject: [PATCH 3/3] feat(card): use tailwind

---
 src/components/Card.tsx | 49 ++++++++++++++---------------------------
 src/components/Cell.tsx |  4 ++--
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 3bd3961a..c69c52bb 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@chakra-ui/react";
 import { LinkData } from "@models/link-state";
 import * as React from "react";
 import { useDrag } from "react-dnd";
@@ -31,45 +30,29 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
       [id],
    );
 
-   const conditionalButtonProps = isDragEventInProgress
-      ? {
-           _hover: {},
-           _active: {},
-           _focus: {},
-        }
-      : {};
-
+   const dragPseudo = isDragEventInProgress
+      ? ""
+      : "hover:bg-white hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring focus-visible:ring-blue-500/50 active:bg-white active:bg-opacity-[.16] dark:hover:bg-[#EDF2F7] dark:active:bg-[#E2E8F0]";
+   const dragTruncate = isDragEventInProgress
+      ? ""
+      : "group-hover:overflow-visible group-hover:whitespace-normal";
    return (
-      <Button
-         className="group"
-         pos="absolute"
-         top={0}
-         as="a"
-         target="_self"
-         href={url.toString()}
-         onClick={onClick}
-         variant="ghost"
-         w="92%"
-         minH="92%"
-         h="max-content"
-         pt={4}
-         px={1}
-         display="flex"
-         flexDir="column"
-         alignItems="center"
-         justifyContent="flex-start"
-         gridRowGap={2}
-         disabled={isInEditMode}
+      <a
          ref={drag}
-         transform="translate(0, 0)" // Prevents React DnD background color bug
-         {...conditionalButtonProps}
+         className={`group absolute flex h-max min-h-[92%] w-11/12 translate-x-0 translate-y-0 cursor-pointer items-center justify-start rounded-md px-1 pt-4 transition duration-150 ${dragPseudo}`}
+         tabIndex={0}
+         onClick={onClick}
+         aria-disabled={isInEditMode}
+         href={url}
       >
          <div className="flex w-full flex-col items-center justify-center space-y-2">
             <CardImage linkData={linkData} />
-            <p className="max-w-full truncate text-center text-sm group-hover:overflow-visible group-hover:whitespace-normal">
+            <p
+               className={`max-w-full truncate text-center text-sm ${dragTruncate}`}
+            >
                {name}
             </p>
          </div>
-      </Button>
+      </a>
    );
 }
diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
index 8be94579..18f99c1e 100644
--- a/src/components/Cell.tsx
+++ b/src/components/Cell.tsx
@@ -45,7 +45,7 @@ export default function Cell({
 
    const onClick = React.useCallback(
       (event: React.MouseEvent | KeyboardEvent) => {
-         if (!link?.url) return;
+         if (isInEditMode || !link?.url) return;
          if (event.ctrlKey) {
             event.preventDefault();
             openInNewTab(link.url);
@@ -53,7 +53,7 @@ export default function Cell({
             navigateCurrentTab(link.url);
          }
       },
-      [link?.url],
+      [isInEditMode, link?.url],
    );
    const onKeyDown = React.useCallback(
       (event: KeyboardEvent) => {