From 8bfa9f8da8e6ef0ab35f5e339017d0e45cd1379a Mon Sep 17 00:00:00 2001
From: StarHeartHunt <starheart233@gmail.com>
Date: Sun, 7 Apr 2024 11:03:22 +0800
Subject: [PATCH 1/3] :memo: use low saturation colors instead

---
 website/src/components/Resource/Card/index.tsx       |  2 +-
 website/src/components/Resource/Card/styles.css      |  4 ++--
 website/src/components/Resource/DetailCard/index.tsx | 10 +++-------
 .../src/components/Resource/ValidStatus/index.tsx    | 12 ++++++------
 website/tailwind.config.js                           |  1 +
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
index 1e3127075df2..fb94e629cfc7 100644
--- a/website/src/components/Resource/Card/index.tsx
+++ b/website/src/components/Resource/Card/index.tsx
@@ -40,7 +40,7 @@ export default function ResourceCard({
   return (
     <div className={clsx("resource-card-container", className)}>
       <div className="resource-card-header">
-        <div className="resource-card-header-title flex items-center">
+        <div className="resource-card-header-title">
           {resource.name}
           {resource.is_official && (
             <FontAwesomeIcon
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
index 4b52b38e9457..1a91cfeb7a1f 100644
--- a/website/src/components/Resource/Card/styles.css
+++ b/website/src/components/Resource/Card/styles.css
@@ -10,11 +10,11 @@
     @apply flex items-center w-full text-lg font-medium;
 
     &-title {
-      @apply grow text-left truncate;
+      @apply grow justify-start truncate flex items-center;
     }
 
     &-check {
-      @apply ml-2 text-success/90 fill-current;
+      @apply ml-2 text-green-600 dark:text-green-400 fill-current;
     }
 
     &-expand {
diff --git a/website/src/components/Resource/DetailCard/index.tsx b/website/src/components/Resource/DetailCard/index.tsx
index eab738095a37..7431cf373c4d 100644
--- a/website/src/components/Resource/DetailCard/index.tsx
+++ b/website/src/components/Resource/DetailCard/index.tsx
@@ -114,7 +114,7 @@ export default function ResourceDetailCard({ resource }: Props) {
           <span className="detail-card-title-main flex items-center gap-x-1">
             {resource.name}
             {resource.is_official && (
-              <div className="rounded-md text-sm bg-success/10 text-success px-1 py-0.5">
+              <div className="rounded-md text-sm bg-green-400/10 text-green-600 px-1 py-0.5">
                 官方
               </div>
             )}
@@ -189,9 +189,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               href={homepageLink}
               target="_blank"
               rel="noreferrer"
-              className={
-                homepageLink ? "hover:underline hover:text-primary" : undefined
-              }
+              className={homepageLink && "hover:underline hover:text-primary"}
             >
               {moduleName}
             </a>
@@ -204,9 +202,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               target="_blank"
               rel="noreferrer"
               className={
-                pypiProjectLink
-                  ? "hover:underline hover:text-primary"
-                  : undefined
+                pypiProjectLink && "hover:underline hover:text-primary"
               }
             >
               {projectLink}
diff --git a/website/src/components/Resource/ValidStatus/index.tsx b/website/src/components/Resource/ValidStatus/index.tsx
index c5fd8cd2df0c..5ef068ea400f 100644
--- a/website/src/components/Resource/ValidStatus/index.tsx
+++ b/website/src/components/Resource/ValidStatus/index.tsx
@@ -60,12 +60,12 @@ export default function ValidDisplay({
             "rounded-md text-sm flex items-center gap-x-1 px-2 py-1 whitespace-nowrap":
               !simple,
             "ml-2": simple,
-            "bg-success/10": !simple && isValid,
-            "text-success/90": isValid,
-            "bg-error/10": !simple && isInvalid,
-            "text-error/90": isInvalid,
-            "bg-info/10": !simple && isSkip,
-            "text-info/90": isSkip,
+            "bg-green-400/10": !simple && isValid,
+            "text-green-600 dark:text-green-400": isValid,
+            "bg-red-400/10": !simple && isInvalid,
+            "text-red-600 dark:text-red-400": isInvalid,
+            "bg-blue-400/10": !simple && isSkip,
+            "text-blue-600 dark:text-blue-400": isSkip,
           })}
         >
           <FontAwesomeIcon icon={validIcons[validStatus]} />
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index e5b9a6c5dfc0..64ae91c540cc 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -17,6 +17,7 @@ function excludeThemeColor(theme, exclude) {
 }
 
 module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
   daisyui: {
     themes: [
       {

From c317788414b9e9a7282a8e75020ae947db775503 Mon Sep 17 00:00:00 2001
From: StarHeartHunt <starheart233@gmail.com>
Date: Sun, 7 Apr 2024 14:14:28 +0800
Subject: [PATCH 2/3] :memo: ellipsis & tooltip for long plugin name and tweak
 icon margins

---
 website/src/components/Resource/Card/index.tsx        | 7 +++++--
 website/src/components/Resource/Card/styles.css       | 8 ++++++--
 website/src/components/Resource/ValidStatus/index.tsx | 1 -
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
index fb94e629cfc7..4e520a2be2d2 100644
--- a/website/src/components/Resource/Card/index.tsx
+++ b/website/src/components/Resource/Card/index.tsx
@@ -39,9 +39,11 @@ export default function ResourceCard({
 
   return (
     <div className={clsx("resource-card-container", className)}>
-      <div className="resource-card-header">
+      <div className="resource-card-header" data-tip={resource.name}>
         <div className="resource-card-header-title">
-          {resource.name}
+          <div className="resource-card-header-text">
+            <span>{resource.name}</span>
+          </div>
           {resource.is_official && (
             <FontAwesomeIcon
               className="resource-card-header-check"
@@ -49,6 +51,7 @@ export default function ResourceCard({
             />
           )}
           <ValidStatus
+            className="mx-2"
             resource={resource}
             validLink={registryLink as string}
             simple
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
index 1a91cfeb7a1f..63be33c2af9c 100644
--- a/website/src/components/Resource/Card/styles.css
+++ b/website/src/components/Resource/Card/styles.css
@@ -7,10 +7,14 @@
   }
 
   &-header {
-    @apply flex items-center w-full text-lg font-medium;
+    @apply flex items-center w-full text-lg font-medium tooltip;
 
     &-title {
-      @apply grow justify-start truncate flex items-center;
+      @apply truncate grow justify-start flex items-center;
+    }
+
+    &-text {
+      @apply truncate flex-initial cursor-help;
     }
 
     &-check {
diff --git a/website/src/components/Resource/ValidStatus/index.tsx b/website/src/components/Resource/ValidStatus/index.tsx
index 5ef068ea400f..52149a666386 100644
--- a/website/src/components/Resource/ValidStatus/index.tsx
+++ b/website/src/components/Resource/ValidStatus/index.tsx
@@ -59,7 +59,6 @@ export default function ValidDisplay({
           className={clsx({
             "rounded-md text-sm flex items-center gap-x-1 px-2 py-1 whitespace-nowrap":
               !simple,
-            "ml-2": simple,
             "bg-green-400/10": !simple && isValid,
             "text-green-600 dark:text-green-400": isValid,
             "bg-red-400/10": !simple && isInvalid,

From 9e893345589dc5bdd9396926d954ba42251164b4 Mon Sep 17 00:00:00 2001
From: StarHeartHunt <starheart233@gmail.com>
Date: Sun, 7 Apr 2024 16:39:42 +0800
Subject: [PATCH 3/3] :memo: make tooltip hover on center of title

---
 website/src/components/Resource/Card/index.tsx  | 6 +++---
 website/src/components/Resource/Card/styles.css | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
index 4e520a2be2d2..5a990d48d0bd 100644
--- a/website/src/components/Resource/Card/index.tsx
+++ b/website/src/components/Resource/Card/index.tsx
@@ -39,10 +39,10 @@ export default function ResourceCard({
 
   return (
     <div className={clsx("resource-card-container", className)}>
-      <div className="resource-card-header" data-tip={resource.name}>
+      <div className="resource-card-header">
         <div className="resource-card-header-title">
-          <div className="resource-card-header-text">
-            <span>{resource.name}</span>
+          <div className="resource-card-header-text" data-tip={resource.name}>
+            <div className="truncate min-w-0">{resource.name}</div>
           </div>
           {resource.is_official && (
             <FontAwesomeIcon
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
index 63be33c2af9c..4615e4780d84 100644
--- a/website/src/components/Resource/Card/styles.css
+++ b/website/src/components/Resource/Card/styles.css
@@ -7,14 +7,14 @@
   }
 
   &-header {
-    @apply flex items-center w-full text-lg font-medium tooltip;
+    @apply min-w-0 flex items-center w-full text-lg font-medium;
 
     &-title {
-      @apply truncate grow justify-start flex items-center;
+      @apply min-w-0 grow justify-start flex items-center flex-initial;
     }
 
     &-text {
-      @apply truncate flex-initial cursor-help;
+      @apply min-w-0 cursor-help tooltip;
     }
 
     &-check {