v0.1.1

CHANGELOG.md

@@ -5,8 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.1.1] - 2024-10-06
 
-## [1.0.0-alpha.6] - 2024-09-27
+### Added
+- Added tooltips over avatars https://github.com/chingu-x/chingu-dashboard/issues/221
+
+### Fixed
+- Fixed text truncation and spacing issues in features widget on dashboard page https://github.com/chingu-x/chingu-dashboard/issues/256
+
+## [0.1.0-alpha.6] - 2024-09-27
 
 ### Added
 - Added po and sm forms for the weekly checkin for the appropriate teams https://github.com/chingu-x/chingu-dashboard/issues/216
@@ -18,15 +25,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Fixed
 
-## [1.0.0-alpha.5] - 2024-09-19
+## [0.1.0-alpha.5] - 2024-09-19
 
 ### Added
 
 
 ### Changed
 - Made meeting link optional https://github.com/chingu-x/chingu-dashboard/issues/237
 
-## [1.0.0-alpha.4] - 2024-09-10
+## [0.1.0-alpha.4] - 2024-09-10
 
 ### Added
 
@@ -40,7 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Fixed issue with meeting notes section becoming scrollable instead of expanding when saved https://github.com/chingu-x/chingu-dashboard/issues/248
 
 
-## [1.0.0-alpha.3] - 2024-09-05
+## [0.1.0-alpha.3] - 2024-09-05
 
 ### Added
 - Added 404 page https://github.com/chingu-x/chingu-dashboard/issues/205
@@ -55,7 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Fixed overflow issue with features description in the list https://github.com/chingu-x/chingu-dashboard/issues/222
 - Fixed an issue with selecting team members in checkboxes https://github.com/chingu-x/chingu-dashboard/issues/230
 
-## [1.0.0-alpha.2] - 2024-08-28
+## [0.1.0-alpha.2] - 2024-08-28
 
 ### Added
 - Added version to image in avatar component
@@ -64,7 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Fixed
 
-## [1.0.0-alpha.1] - 2024-08-26
+## [0.1.0-alpha.1] - 2024-08-26
 
 ### Added
 

src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx

@@ -50,18 +50,18 @@ function DashboardWidget({
       >
         <div className="inline-flex max-w-[100px] items-start text-neutral-focus">
           <p
-            className={`relative inline-block text-[13px] font-semibold ${
+            className={`relative inline-block font-semibold ${
               isWidgetClickable
                 ? "cursor-pointer text-primary"
                 : "text-neutral-focus"
             }`}
           >
             {headerTitle}
-            {isWidgetClickable ? (
-              <div className="absolute right-[-15px] top-[4px]">
-                <ChevronDoubleRightIcon className="ml-1 w-3" />
+            {isWidgetClickable && (
+              <div className="absolute right-0 top-1/2 translate-x-[110%] translate-y-[-45%]">
+                <ChevronDoubleRightIcon className="h-3 w-3" />
               </div>
-            ) : null}
+            )}
           </p>
         </div>
 

src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx

@@ -5,16 +5,14 @@ interface FeaturesStateContentProps {
 }
 function FeaturesStateContent({ contentObject }: FeaturesStateContentProps) {
   return (
-    <div className="mt-4 flex h-full flex-col justify-center">
-      <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
+    <div className="mt-4 flex h-full flex-col justify-start">
+      <div className="flex max-h-[200px] w-full flex-col gap-y-3 overflow-auto pr-3">
         {contentObject?.map((item) => (
           <div
             key={item}
-            className="mb-3 flex h-[35px] items-center truncate rounded-lg bg-base-200 px-3 py-2"
+            className="flex items-center rounded-lg bg-base-200 px-3 py-2"
           >
-            <p className="w-40 truncate max-[1469px]:w-[300px] max-[1200px]:w-full">
-              {item}
-            </p>
+            <p className="w-full break-words font-semibold">{item}</p>
           </div>
         ))}
       </div>

src/app/(main)/my-voyage/[teamId]/ideation/components/VoteCard.tsx

@@ -17,6 +17,7 @@ import {
 import { onOpenModal } from "@/store/features/modal/modalSlice";
 import AvatarGroup from "@/components/avatar/AvatarGroup";
 import Avatar from "@/components/avatar/Avatar";
+import Tooltip from "@/components/Tooltip";
 
 interface VoteCardProps {
   projectIdeaId: number;
@@ -33,6 +34,7 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
   const { isOpen } = useModal();
   const dispatch = useAppDispatch();
   const [voteChanged, setVoteChanged] = useState<boolean>(false);
+  const [tooltipHovered, setTooltipHovered] = useState<string>("");
 
   const {
     runAction: addIdeationVoteAction,
@@ -131,12 +133,28 @@ function VoteCard({ projectIdeaId, users, className }: VoteCardProps) {
         }`}</h2>
         <AvatarGroup>
           {users.map((user) => (
-            <Avatar
-              width={24}
-              height={24}
-              key={user.id}
-              image={user.votedBy.member.avatar}
-            />
+            <Tooltip
+              key={user.votedBy.member.id}
+              content={`${user.votedBy.member.firstName}`}
+              customClassName="text-xs font-medium w-fit"
+              position="bottom"
+              tooltipWidth="small"
+              isDisplay={tooltipHovered === user.votedBy.member.id}
+              hovered={tooltipHovered === user.votedBy.member.id}
+            >
+              <Avatar
+                customClassName="border border-base-content"
+                width={24}
+                height={24}
+                image={user.votedBy.member.avatar}
+                onMouseEnter={() => {
+                  setTooltipHovered(user.votedBy.member.id);
+                }}
+                onMouseLeave={() => {
+                  setTooltipHovered("");
+                }}
+              />
+            </Tooltip>
           ))}
         </AvatarGroup>
         <Button

src/app/(main)/my-voyage/[teamId]/tech-stack/components/TechStackCard.tsx

@@ -25,6 +25,7 @@ import { onOpenModal } from "@/store/features/modal/modalSlice";
 import Spinner from "@/components/Spinner";
 import { getCurrentVoyageTeam } from "@/utils/getCurrentVoyageTeam";
 import { validateTextInput } from "@/utils/form/validateInput";
+import Tooltip from "@/components/Tooltip";
 
 interface TechStackCardProps {
   title: string;
@@ -52,6 +53,8 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
   const [isInput, setIsInput] = useState(false);
   const [editItemId, setEditItemId] = useState(-1);
   const [isDuplicate, setIsDuplicate] = useState(false);
+  const [tooltipHovered, setTooltipHovered] = useState<string>("");
+
   const inputRef = useRef<HTMLFormElement>(null);
   const editRef = useRef<HTMLFormElement>(null);
   const items = data.map((item) => item.name.toLowerCase());
@@ -269,12 +272,35 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
                     <div className="col-span-2 ml-8 bg-base-200">
                       <AvatarGroup>
                         {element.teamTechStackItemVotes.map((vote) => (
-                          <Avatar
+                          <Tooltip
                             key={vote.votedBy.member.id}
-                            image={vote.votedBy.member.avatar}
-                            width={24}
-                            height={24}
-                          />
+                            content={`${vote.votedBy.member.firstName}`}
+                            customClassName="text-xs font-medium w-fit"
+                            position="bottom"
+                            tooltipWidth="small"
+                            isDisplay={
+                              tooltipHovered ===
+                              element.id + vote.votedBy.member.id
+                            }
+                            hovered={
+                              tooltipHovered ===
+                              element.id + vote.votedBy.member.id
+                            }
+                          >
+                            <Avatar
+                              image={vote.votedBy.member.avatar}
+                              width={24}
+                              height={24}
+                              onMouseEnter={() => {
+                                setTooltipHovered(
+                                  element.id + vote.votedBy.member.id,
+                                );
+                              }}
+                              onMouseLeave={() => {
+                                setTooltipHovered("");
+                              }}
+                            />
+                          </Tooltip>
                         ))}
                       </AvatarGroup>
                     </div>

src/components/Tooltip.tsx

@@ -14,6 +14,7 @@ export interface TooltipProps {
   tooltipWidth: TooltipWidth;
   isDisplay: boolean;
   hovered: boolean;
+  customClassName?: string;
 }
 
 export default function Tooltip({
@@ -24,6 +25,7 @@ export default function Tooltip({
   tooltipWidth,
   isDisplay,
   hovered,
+  customClassName,
 }: TooltipProps) {
   let nonSupportTextWidth;
 
@@ -40,11 +42,11 @@ export default function Tooltip({
       {children}
       <div
         className={cn(
-          "absolute z-[2] break-all shadow-md transition duration-300 ease-in-out",
+          "absolute z-[2] break-all shadow-lg transition duration-300 ease-in-out",
           supportText ? "text-left" : "text-center",
           (!hovered || !isDisplay) && "hidden",
           supportText ? "w-[320px]" : nonSupportTextWidth,
-          "rounded-lg bg-base-100 px-3 py-2 text-base-300 after:absolute after:border-8 after:border-solid after:border-base-100 after:content-['']",
+          "rounded-lg bg-base-200 px-3 py-2 text-base-300 after:absolute after:border-8 after:border-solid after:border-base-200 after:content-['']",
           position === "top" || position === "bottom"
             ? "-translate-x-1/2 after:left-1/2 after:-translate-x-1/2 after:border-x-transparent"
             : "-translate-y-1/2 after:top-1/2 after:-translate-y-1/2 after:border-y-transparent",
@@ -56,9 +58,15 @@ export default function Tooltip({
             "left-full top-1/2 translate-x-3 after:right-full after:border-l-transparent",
           position === "left" &&
             "right-full top-1/2 -translate-x-3 after:left-full after:border-r-transparent",
+          customClassName,
         )}
       >
-        <div className={`${supportText && "mb-2"}`}>{content}</div>
+        <div
+          className={`${supportText && "mb-2"}`}
+          style={{ textWrap: "nowrap" }}
+        >
+          {content}
+        </div>
         {supportText && <div>{supportText}</div>}
       </div>
     </div>

src/components/avatar/Avatar.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from "@testing-library/react";
 import Avatar from "@/components/avatar/Avatar";
 
+const imageUrl =
+  "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
+
 describe("Avatar Component", () => {
   it("renders image correctly", () => {
-    const imageUrl =
-      "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
-
     render(<Avatar width={24} height={24} image={imageUrl} />);
 
     const image = screen.getByRole("img", { name: /avatar/i });
@@ -14,9 +14,6 @@ describe("Avatar Component", () => {
   });
 
   it("should have correct image url", () => {
-    const imageUrl =
-      "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
-
     render(<Avatar width={24} height={24} image={imageUrl} />);
 
     const image: HTMLImageElement = screen.getByRole("img", {
@@ -25,4 +22,18 @@ describe("Avatar Component", () => {
 
     expect(image.src).toContain(encodeURIComponent(`${imageUrl}&v=1.2`));
   });
+
+  it("handles transparent avatars", () => {
+    render(<Avatar width={24} height={24} image={imageUrl} />);
+
+    const image: HTMLImageElement = screen.getByRole("img", {
+      name: /avatar/i,
+    });
+
+    const hasBgClass = Array.from(image.classList).some((className) =>
+      /^bg-.+/.test(className),
+    );
+
+    expect(hasBgClass).toBe(true);
+  });
 });

src/components/avatar/Avatar.tsx

@@ -7,20 +7,26 @@ interface AvatarProps {
   customClassName?: string;
   width: number;
   height: number;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
 }
 
 export default function Avatar({
   image,
   customClassName,
   width = 24,
   height = 24,
+  onMouseEnter,
+  onMouseLeave,
 }: AvatarProps) {
   return (
     <div
       className={cn(
-        "shrink-1 cursor-pointer overflow-hidden rounded-full border border-neutral px-0",
+        "shrink-1 cursor-pointer overflow-hidden rounded-full px-0",
         customClassName,
       )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <Image
         alt="avatar"
@@ -31,6 +37,7 @@ export default function Avatar({
         }
         width={width}
         height={height}
+        className={cn("bg-base-200")}
       />
     </div>
   );