design: fix user card

kawamataryo · Dec 1, 2024 · 0d88286 · 0d88286
1 parent fc33329
commit 0d88286
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 69 deletions.
diff --git a/src/lib/components/DetectedUserListItem.tsx b/src/lib/components/DetectedUserListItem.tsx
@@ -2,7 +2,7 @@ import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/
 import React from "react";
 import { match } from "ts-pattern";
 import type { BskyUser } from "~types";
-import { ACTION_MODE } from "../constants";
+import { ACTION_MODE, MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
 import DetectedUserSource from "./DetectedUserSource";
 import UserCard from "./UserCard";
 export type Props = {
@@ -100,18 +100,32 @@ const DetectedUserListItem = ({
     });
   };
 
+  const matchTypeColor = MATCH_TYPE_LABEL_AND_COLOR[user.matchType].color;
+
   return (
-    <div className="bg-base-100 w-full relative grid grid-cols-[22%_1fr] gap-5">
-      <DetectedUserSource user={user} />
-      <UserCard
-        user={user}
-        loading={loading}
-        actionBtnLabelAndClass={actionBtnLabelAndClass}
-        handleActionButtonClick={handleActionButtonClick}
-        setIsBtnHovered={setIsBtnHovered}
-        setIsJustClicked={setIsJustClicked}
-        handleReSearchClick={handleReSearchClick}
-      />
+    <div>
+      <div className={`w-full border-l-8 border-${matchTypeColor}`}>
+        <div
+          className={`w-full border-t border-gray-500 text-${matchTypeColor} grid grid-cols-[22%_1fr]`}
+        >
+          <div className="px-3 bg-slate-100 dark:bg-slate-800">
+            {MATCH_TYPE_LABEL_AND_COLOR[user.matchType].label}
+          </div>
+          <div className="px-3" />
+        </div>
+        <div className="bg-base-100 w-full relative grid grid-cols-[22%_1fr] gap-5">
+          <DetectedUserSource user={user} />
+          <UserCard
+            user={user}
+            loading={loading}
+            actionBtnLabelAndClass={actionBtnLabelAndClass}
+            handleActionButtonClick={handleActionButtonClick}
+            setIsBtnHovered={setIsBtnHovered}
+            setIsJustClicked={setIsJustClicked}
+            handleReSearchClick={handleReSearchClick}
+          />
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/lib/components/DetectedUserSource.tsx b/src/lib/components/DetectedUserSource.tsx
@@ -1,7 +1,5 @@
-import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import React from "react";
 import type { BskyUser } from "~types";
-import { MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
 import UserInfo from "./UserInfo";
 import UserProfile from "./UserProfile";
 
@@ -11,11 +9,7 @@ type DetectedUserSourceProps = {
 
 const DetectedUserSource = ({ user }: DetectedUserSourceProps) => (
   <div className="flex flex-row gap-2 bg-slate-100 dark:bg-slate-800 justify-between pr-2">
-    <div
-      className={`border-l-8 border-${
-        MATCH_TYPE_LABEL_AND_COLOR[user.matchType].color
-      } relative py-3 pl-4 pr-1 grid grid-cols-[50px_1fr]`}
-    >
+    <div className="relative py-3 pt-1 pl-4 pr-1 grid grid-cols-[50px_1fr]">
       <UserProfile
         avatar={user.originalAvatar}
         url={user.originalProfileLink}

diff --git a/src/lib/components/Sidebar.tsx b/src/lib/components/Sidebar.tsx
@@ -60,42 +60,39 @@ const Sidebar = ({
           <span className="text-2xl font-bold">Sky Follower Bridge</span>
         </a>
         <div className="divider" />
-        <div className="flex items-center gap-2 mb-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-5 h-5"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
-            />
-          </svg>
-
-          <p className="text-xl font-bold">Detected</p>
-        </div>
-        <div className="flex items-end mb mb-2">
-          <div className="flex gap-3 items-center justify-between">
-            <p className="font-bold text-2xl">{detectedCount}</p>
-            <p className="text-sm">users</p>
-          </div>
-        </div>
-        <div className="flex gap-2 flex-col">
-          {Object.keys(matchTypeStats).map((key) => (
-            <div
-              className={`badge badge-outline badge-${MATCH_TYPE_LABEL_AND_COLOR[key].color}`}
-              key={key}
-            >
-              {MATCH_TYPE_LABEL_AND_COLOR[key].label}:
-              <span className="font-bold text-sm ml-1">
-                {matchTypeStats[key]}
-              </span>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-figure">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block h-8 w-8 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                />
+              </svg>
+            </div>
+            <div className="stat-title text-lg text-base-content font-bold">
+              Detected users
+            </div>
+            <div className="stat-value text-base-content">{detectedCount}</div>
+            <div className="stat-desc">
+              Same handle name: {matchTypeStats[BSKY_USER_MATCH_TYPE.HANDLE]}
             </div>
-          ))}
+            <div className="stat-desc">
+              Same display name:{" "}
+              {matchTypeStats[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]}
+            </div>
+            <div className="stat-desc">
+              Included handle in description:{" "}
+              {matchTypeStats[BSKY_USER_MATCH_TYPE.DESCRIPTION]}
+            </div>
+          </div>
         </div>
         <div className="divider" />
         <div className="flex items-center gap-2 mb-2">

diff --git a/src/lib/components/UserCard.tsx b/src/lib/components/UserCard.tsx
@@ -53,7 +53,7 @@ const UserCard = ({
   handleReSearchClick,
 }: UserCardProps) => {
   return (
-    <div className="relative py-3 pl-0 pr-2 grid grid-cols-[50px_1fr]">
+    <div className="relative py-3 pt-1 pl-0 pr-2 grid grid-cols-[50px_1fr]">
       <UserProfile
         avatar={user.avatar}
         url={`https://bsky.app/profile/${user.handle}`}

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -78,7 +78,7 @@ export const MATCH_TYPE_LABEL_AND_COLOR = {
     color: "warning",
   },
   [BSKY_USER_MATCH_TYPE.DESCRIPTION]: {
-    label: "Included handle name in description",
+    label: "Included handle in description",
     color: "secondary",
   },
   [BSKY_USER_MATCH_TYPE.FOLLOWING]: {

diff --git a/src/options.tsx b/src/options.tsx
@@ -156,18 +156,16 @@ const Option = () => {
             <h2 className="text-lg font-bold text-center py-2">Source</h2>
             <h2 className="text-lg font-bold text-center py-2">Detected</h2>
           </div>
-          <div className="flex flex-col gap-4">
-            <div className="divide-y divide-gray-500">
-              {filteredUsers.map((user) => (
-                <DetectedUserListItem
-                  key={user.handle}
-                  user={user}
-                  clickAction={handleClickAction}
-                  actionMode={actionMode}
-                  reSearch={handleReSearch}
-                />
-              ))}
-            </div>
+          <div className="flex flex-col border-b-[1px] border-gray-500">
+            {filteredUsers.map((user) => (
+              <DetectedUserListItem
+                key={user.handle}
+                user={user}
+                clickAction={handleClickAction}
+                actionMode={actionMode}
+                reSearch={handleReSearch}
+              />
+            ))}
           </div>
         </div>
         <ReSearchModal

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
   ],
   safelist: [
     {
-      pattern: /(badge|border)-(info|warning|secondary|neutral|success)/,
+      pattern: /(badge|border|bg|text|border-b)-(info|warning|secondary|neutral|success)/,
     }
   ],
   daisyui: {