chore: update resource dashboard style (#1362)

web/src/components/ResourceCard.tsx

@@ -75,18 +75,15 @@ const ResourceCard = ({ resource, handlecheckClick, handleUncheckClick }: Resour
 
   return (
     <div className="resource-card">
-      <div className="btns-container">
+      <div className="w-full p-2 flex flex-row justify-between items-center absolute top-0 left-0">
         <div onClick={() => handleSelectBtnClick()}>
-          {isSelected ? (
-            <Icon.CheckCircle2 className="m-2 text-gray-500 hover:text-black absolute top-1" />
-          ) : (
-            <Icon.Circle className="resource-checkbox" />
-          )}
+          {isSelected ? <Icon.CheckCircle2 className="resource-checkbox !flex" /> : <Icon.Circle className="resource-checkbox" />}
         </div>
 
         <Dropdown
           className="more-action-btn"
           actionsClassName="!w-28"
+          trigger={<Icon.MoreVertical className="w-4 h-auto hover:opacity-80 cursor-pointer" />}
           actions={
             <>
               <button
@@ -117,12 +114,12 @@ const ResourceCard = ({ resource, handlecheckClick, handleUncheckClick }: Resour
           }
         />
       </div>
-      <div className="p-5">
+      <div className="w-full flex flex-row justify-center items-center pb-2 pt-4 px-2">
         <ResourceCover resource={resource} />
       </div>
-      <div>
-        <div className="text-base overflow-x-auto whitespace-nowrap text-center">{resource.filename}</div>
-        <div className="text-sm text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
+      <div className="w-full flex flex-col justify-start items-center px-1 select-none">
+        <div className="w-full text-base overflow-x-auto whitespace-nowrap text-center text-ellipsis truncate">{resource.filename}</div>
+        <div className="text-xs text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
       </div>
     </div>
   );

web/src/components/ResourceCover.tsx

@@ -6,8 +6,31 @@ interface ResourceCoverProps {
   resource: Resource;
 }
 
+const getResourceType = (resource: Resource) => {
+  if (resource.type.startsWith("image")) {
+    return "image/*";
+  } else if (resource.type.startsWith("video")) {
+    return "video/*";
+  } else if (resource.type.startsWith("audio")) {
+    return "audio/*";
+  } else if (resource.type.startsWith("text")) {
+    return "text/*";
+  } else if (resource.type.startsWith("application/epub+zip")) {
+    return "application/epub+zip";
+  } else if (resource.type.startsWith("application/pdf")) {
+    return "application/pdf";
+  } else if (resource.type.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document")) {
+    return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+  } else if (resource.type.startsWith("application/msword")) {
+    return "application/msword";
+  } else {
+    return "application/octet-stream";
+  }
+};
+
 const ResourceCover = ({ resource }: ResourceCoverProps) => {
-  switch (resource.type) {
+  const resourceType = getResourceType(resource);
+  switch (resourceType) {
     case "image/*":
       return <Icon.FileImage className="resource-cover" />;
     case "video/*":

web/src/components/ResourceSearchBar.tsx

@@ -23,7 +23,7 @@ const ResourceSearchBar = ({ setQuery }: ResourceSearchBarProps) => {
   );
 
   return (
-    <div className="w-4/12">
+    <div className="w-44 sm:w-52">
       <div className="w-full h-9 flex flex-row justify-start items-center py-2 px-3 rounded-md bg-gray-200 dark:bg-zinc-800">
         <Icon.Search className="w-4 h-auto opacity-30 dark:text-gray-200" />
         <input

web/src/less/resource-card.less

@@ -1,25 +1,25 @@
-.resource-card{
-  @apply flex flex-col relative justify-start hover:bg-slate-200 dark:hover:bg-slate-600 w-full m-4 rounded-md;
+.resource-card {
+  @apply w-full p-2 relative flex flex-col justify-start hover:shadow hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md;
 
   &:hover {
     .resource-checkbox {
-      @apply flex m-2 text-gray-500 absolute top-1 hover:text-black;
+      @apply flex hover:text-black;
     }
-    .more-action-btn{
-      @apply flex absolute right-0 top-1;
+    .more-action-btn {
+      @apply flex;
     }
   }
 
-  .resource-checkbox{
-    @apply hidden hover:flex ;
+  .resource-checkbox {
+    @apply hidden w-4 h-auto cursor-pointer hover:flex;
   }
 
-  .more-action-btn{
-    @apply hidden m-2;
+  .more-action-btn {
+    @apply hidden;
     &:hover {
       & + .more-action-btns-wrapper {
         display: flex;
       }
-    }  
+    }
   }
 }

web/src/less/resource-cover.less

@@ -1,3 +1,3 @@
-.resource-cover{
-  @apply w-full h-full ml-auto mr-auto mt-5 opacity-60;
-}
+.resource-cover {
+  @apply w-20 h-auto ml-auto mr-auto opacity-40;
+}

web/src/pages/ResourcesDashboard.tsx

@@ -95,54 +95,53 @@ const ResourcesDashboard = () => {
   };
 
   return (
-    <section className="w-full min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="w-full max-w-2xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
         <div className="relative w-full flex flex-row justify-between items-center">
-          <p className="px-2 py-1 flex flex-row justify-start items-center select-none rounded">
+          <p className="flex flex-row justify-start items-center select-none rounded">
             <Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
           </p>
           <ResourceSearchBar setQuery={setQueryText} />
         </div>
-        <div className=" flex flex-col justify-start items-start w-full">
-          <div className="w-full flex flex-row  justify-end items-center">
-            <div className="flex flex-row justify-start items-center space-x-2"></div>
-            <div className="m-2">
-              {isVisiable && (
-                <Button onClick={() => handleDeleteSelectedBtnClick()} color="danger" title={t("resources.delete-selected-resources")}>
-                  <Icon.Trash2 className="w-4 h-auto" />
-                </Button>
-              )}
-            </div>
-
-            <div className="m-2">
-              <Button onClick={() => showCreateResourceDialog({})} title={t("common.create")}>
-                <Icon.Plus className="w-4 h-auto" />
+        <div className="w-full flex flex-row justify-end items-center space-x-2 mt-3">
+          {isVisiable && (
+            <Button onClick={() => handleDeleteSelectedBtnClick()} color="danger">
+              <Icon.Trash2 className="w-4 h-auto" />
+            </Button>
+          )}
+          <Button onClick={() => showCreateResourceDialog({})}>
+            <Icon.Plus className="w-4 h-auto" />
+          </Button>
+          <Dropdown
+            className="drop-shadow-none"
+            actionsClassName="!w-28 rounded-lg drop-shadow-md	dark:bg-zinc-800"
+            positionClassName="mt-2 top-full right-0"
+            trigger={
+              <Button variant="outlined">
+                <Icon.MoreVertical className="w-4 h-auto" />
               </Button>
-            </div>
-
-            <Dropdown
-              className="drop-shadow-none m-2 "
-              actionsClassName="!w-28 rounded-lg drop-shadow-md	dark:bg-zinc-800"
-              positionClassName="mt-2 top-full right-0"
-              actions={
-                <>
-                  <button
-                    className="w-full content-center text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                    onClick={handleDeleteUnusedResourcesBtnClick}
-                  >
-                    {t("resources.clear")}
-                  </button>
-                </>
-              }
-            />
-          </div>
+            }
+            actions={
+              <>
+                <button
+                  className="w-full flex flex-row justify-start items-center content-center text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                  onClick={handleDeleteUnusedResourcesBtnClick}
+                >
+                  <Icon.Trash2 className="w-4 h-auto mr-2" />
+                  {t("resources.clear")}
+                </button>
+              </>
+            }
+          />
+        </div>
+        <div className="w-full flex flex-col justify-start items-start mt-4 mb-6">
           {loadingState.isLoading ? (
-            <div className="flex flex-col justify-center items-center w-full h-32">
+            <div className="w-full h-32 flex flex-col justify-center items-center">
               <p className="w-full text-center text-base my-6 mt-8">{t("resources.fetching-data")}</p>
             </div>
           ) : (
-            <div className="w-full h-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
+            <div className="w-full h-full grid grid-cols-2 md:grid-cols-4 md:px-6 gap-6">
               {resources.length === 0 ? (
                 <p className="w-full text-center text-base my-6 mt-8">{t("resources.no-resources")}</p>
               ) : (