Merge branch 'dev' into fix/fix-active-states-for-nav-btns

chingu-x · Sep 2, 2024 · 047f491 · 047f491
2 parents 5234548 + 3c12077
commit 047f491
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 60 deletions.
diff --git a/public/img/error_dark.png b/public/img/error_dark.png
diff --git a/public/img/error_light.png b/public/img/error_light.png
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
 import Badge from "@/components/badge/Badge";
 import { useAppDispatch } from "@/store/hooks";
@@ -21,7 +21,6 @@ function ResourceItem({
   userAvatarUrl,
 }: ResourceItemProps) {
   const dispatch = useAppDispatch();
-  const [widgetHovered, setWidgetHovered] = useState<boolean>(false);
 
   const openViewModal = (event: React.MouseEvent) => {
     event.stopPropagation();
@@ -40,17 +39,15 @@ function ResourceItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
+      aria-label="open resource details"
       key={title}
-      className="mb-4 flex h-[79px] w-full cursor-pointer items-center justify-between rounded-lg bg-base-200 p-4 hover:shadow-md"
+      className="group mb-4 flex w-full cursor-pointer items-center justify-between gap-x-4 rounded-lg bg-base-200 hover:shadow-md"
       onClick={openViewModal}
-      onMouseEnter={() => setWidgetHovered(true)}
-      onMouseLeave={() => setWidgetHovered(false)}
     >
-      <div className="flex max-w-[400px] flex-col">
-        <p className="mb-1 w-[300px] truncate text-base font-semibold max-[1469px]:w-full max-[1200px]:w-56">
-          {title}
-        </p>
+      <div className="flex flex-col p-4">
+        <p className="mb-1 text-left text-base font-semibold">{title}</p>
         <div className="flex">
           <p className="mr-2 text-base font-medium">Shared by</p>
           <Badge
@@ -61,12 +58,8 @@ function ResourceItem({
           />
         </div>
       </div>
-      <ArrowTopRightOnSquareIcon
-        className={`mr-3 h-6 w-6 text-base-300 ${
-          widgetHovered ? "stroke-base-300" : ""
-        }`}
-      />
-    </div>
+      <ArrowTopRightOnSquareIcon className="m-7 h-6 w-6 shrink-0 text-base-300 group-hover:stroke-base-300" />
+    </button>
   );
 }
 

diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx
@@ -64,34 +64,34 @@ export default function ResourceCard({
   };
 
   return (
-    <div className="group flex w-full items-center rounded-xl border border-base-200 bg-base-200 p-2 shadow-sm transition-all hover:border-base-100 hover:shadow-md [&>*]:cursor-pointer">
-      <ArrowTopRightOnSquareIcon
+    <div className="group relative flex w-full flex-nowrap items-center gap-x-2 rounded-xl border border-base-200 bg-base-200 shadow-sm transition-all hover:border-base-100 hover:shadow-md xl:gap-x-6">
+      <button
+        type="button"
+        aria-label="open resource details"
         onClick={openViewModal}
-        className="ml-2 mr-4 h-8 w-8 stroke-1 transition-all group-hover:stroke-2"
-      />
-      <div
-        onClick={openViewModal}
-        className="flex w-full flex-col justify-center overflow-hidden p-2"
+        className="before:absolute before:left-0 before:top-0 before:h-full before:w-full before:content-['']"
       >
-        <h1 className="w-1/2 truncate text-xl font-bold">{title}</h1>
-        <div className="mt-2 flex [&>*]:mr-8">
-          <div className="flex items-center gap-x-2">
+        <ArrowTopRightOnSquareIcon className="mx-6 h-8 w-8 stroke-1 transition-all group-hover:stroke-2" />
+      </button>
+      <div className="my-2 flex w-full flex-col justify-center overflow-hidden p-2">
+        <h2 className="text-xl font-semibold text-base-300">{title}</h2>
+        <div className="mt-2 flex">
+          <div className="flex items-center gap-x-2 border-r border-r-base-100 pr-4 xl:pr-8">
             <p>Shared by</p>
             <Badge title={user.firstName} avatarUrlImage={user.avatar} />
           </div>
-          <div className="h-5 w-1 border border-y-0 border-l-0 border-r-neutral-content"></div>
-          <div className="text-neutral-focus">Added {date}</div>
+          <div className="pl-4 text-neutral-focus xl:pl-8">Added {date}</div>
         </div>
       </div>
-      {userId === currentUserId ? (
+      {userId === currentUserId && (
         <IconButton
-          className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-base-100"
+          className="z-10 mx-6"
           onClick={openDeleteModal}
           ariaLabel="delete"
         >
-          <TrashIcon className="h-6 w-6" />
+          <TrashIcon />
         </IconButton>
-      ) : null}
+      )}
     </div>
   );
 }
diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceInput.tsx
@@ -70,23 +70,20 @@ export default function ResourceInput() {
       className="flex w-full items-center rounded-xl bg-base-200 p-1 shadow-lg"
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div className="m-4 flex w-3/4 flex-col">
+      <div className="mx-4 mb-1 mt-3 flex w-3/4 flex-col">
         <TextInput
           id="url"
           placeholder="Paste your resource link here."
           ariaLabel="link"
-          errorMessage={
-            errors.url?.type === "invalid_string"
-              ? "Must start with https://"
-              : ""
-          }
+          errorMessage={errors.url?.message}
           {...register("url")}
           inputGroupContent={<LinkIcon />}
         />
         <TextInput
           id="title"
           placeholder="Name your resource here."
           ariaLabel="resource name"
+          errorMessage={errors.title?.message}
           {...register("title")}
         />
       </div>

diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourcesContainer.tsx
@@ -49,21 +49,23 @@ export default function ResourcesContainer({ data }: ResourceContainerProps) {
           isDisabled={!voyageResources?.length}
         />
       </div>
-      {formattedResources?.length ? (
-        formattedResources.map((item) => (
-          <ResourceCard
-            key={item.id}
-            resourceId={item.id}
-            title={item.title}
-            user={item.addedBy.member}
-            date={item.date}
-            userId={item.addedBy.member.id}
-            url={item.url}
-          />
-        ))
-      ) : (
-        <EmptyBanner />
-      )}
+      <div className="flex flex-col gap-y-6">
+        {formattedResources?.length ? (
+          formattedResources.map((item) => (
+            <ResourceCard
+              key={item.id}
+              resourceId={item.id}
+              title={item.title}
+              user={item.addedBy.member}
+              date={item.date}
+              userId={item.addedBy.member.id}
+              url={item.url}
+            />
+          ))
+        ) : (
+          <EmptyBanner />
+        )}
+      </div>
     </>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import ErrorComponent from "@/components/Error";
+
+function NotFoundPage() {
+  return (
+    <div className="flex h-screen flex-col items-start justify-center">
+      <ErrorComponent message="This page could not be found" />
+    </div>
+  );
+}
+
+export default NotFoundPage;
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
@@ -7,6 +7,7 @@ import Button from "./Button";
 
 import routePaths from "@/utils/routePaths";
 import { type ErrorType } from "@/utils/error";
+import Banner from "@/components/banner/Banner";
 
 interface ErrorProps {
   message: string;
@@ -30,18 +31,30 @@ export default function ErrorComponent({
   }
 
   return (
-    <div className="mx-auto mt-2 flex w-full max-w-[600px] flex-col items-center justify-center gap-y-5">
-      <h1 className="text-xl font-semibold capitalize">Error</h1>
-      <p className="font-medium">The following error occured:</p>
-      <div className="flex w-full flex-col gap-y-2 rounded-lg bg-error-content/50 px-6 py-4 text-center font-semibold uppercase">
-        <p>{errorType ? errorType : ""}</p>
-        <p>{message}.</p>
+    <div className="mx-auto flex h-[calc(100vh-155px)] w-full max-w-[628px] flex-col items-center justify-center gap-y-6">
+      <Banner
+        imageLight="/img/error_light.png"
+        imageDark="/img/error_dark.png"
+        alt="error_banner"
+        height="h-[315px]"
+        width="w-[484px]"
+      />
+      <div className="flex flex-col items-center gap-y-8">
+        <h1 className="text-3xl font-semibold uppercase text-primary">Error</h1>
+        <span className="text-lg font-medium text-base-300">
+          The following error occurred:
+        </span>
+        <div className="flex flex-col items-center gap-y-2 text-lg font-medium uppercase text-base-300">
+          <h2>{errorType ? errorType : ""}</h2>
+          <span>{message}.</span>
+        </div>
       </div>
       <div className="flex w-full gap-x-10">
         <Button
           className="w-full"
           variant="neutral"
           type="button"
+          size="lg"
           onClick={handleResetAndRefresh}
         >
           Try again
@@ -50,6 +63,7 @@ export default function ErrorComponent({
           <Button
             className="w-full"
             type="button"
+            size="lg"
             onClick={() => router.push(routePaths.signIn())}
           >
             Log in
@@ -58,6 +72,7 @@ export default function ErrorComponent({
           <Button
             className="w-full"
             type="button"
+            size="lg"
             onClick={() => router.push(routePaths.dashboardPage())}
           >
             Return to dashboard

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -16,7 +16,7 @@ export default function IconButton({
     <button
       type="button"
       className={cn(
-        "flex h-10 w-10 items-center justify-center rounded-full px-2 hover:bg-base-300/25 [&>*]:h-5 [&>*]:w-5 [&>*]:stroke-[1.5px] [&>*]:text-base-300",
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-full p-2 hover:bg-base-300/25 [&>*]:h-5 [&>*]:w-5 [&>*]:stroke-[1.5px] [&>*]:text-base-300",
         className,
       )}
       aria-label={ariaLabel}