From 7f671bb70985aac4b73b3cb6d225d1d412dacef6 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Sat, 13 Jan 2024 17:25:17 +0800
Subject: [PATCH] ui improve

---
 .../components/recordings/recording-card.tsx  | 22 ++++++++++++++-----
 enjoy/src/renderer/pages/community.tsx        |  4 ++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/enjoy/src/renderer/components/recordings/recording-card.tsx b/enjoy/src/renderer/components/recordings/recording-card.tsx
index d6d067f3..d910cd57 100644
--- a/enjoy/src/renderer/components/recordings/recording-card.tsx
+++ b/enjoy/src/renderer/components/recordings/recording-card.tsx
@@ -19,10 +19,10 @@ import {
   useToast,
 } from "@renderer/components/ui";
 import {
-  ChevronDownIcon,
+  MoreHorizontalIcon,
   Trash2Icon,
-  InfoIcon,
   Share2Icon,
+  GaugeCircleIcon,
 } from "lucide-react";
 import { formatDateTime, secondsToTimestamp } from "@renderer/lib/utils";
 import { t } from "i18next";
@@ -91,12 +91,15 @@ export const RecordingCard = (props: {
 
           <div className="flex items-center justify-end space-x-2">
             <Button
+              data-tooltip-id="global-tooltip"
+              data-tooltip-content={t("pronunciationAssessment")}
+              data-tooltip-place="bottom"
               onClick={onSelect}
               variant="ghost"
               size="sm"
               className="p-1 h-6"
             >
-              <InfoIcon
+              <GaugeCircleIcon
                 className={`w-4 h-4
                     ${
                       recording.pronunciationAssessment
@@ -115,7 +118,14 @@ export const RecordingCard = (props: {
 
             <AlertDialog>
               <AlertDialogTrigger asChild>
-                <Button variant="ghost" size="sm" className="p-1 h-6">
+                <Button
+                  data-tooltip-id="global-tooltip"
+                  data-tooltip-content={t("share")}
+                  data-tooltip-place="bottom"
+                  variant="ghost"
+                  size="sm"
+                  className="p-1 h-6"
+                >
                   <Share2Icon className="w-4 h-4 text-muted-foreground" />
                 </Button>
               </AlertDialogTrigger>
@@ -128,7 +138,7 @@ export const RecordingCard = (props: {
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                   <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-                  <AlertDialogAction>
+                  <AlertDialogAction asChild>
                     <Button onClick={handleShare}>{t("share")}</Button>
                   </AlertDialogAction>
                 </AlertDialogFooter>
@@ -137,7 +147,7 @@ export const RecordingCard = (props: {
 
             <DropdownMenu>
               <DropdownMenuTrigger>
-                <ChevronDownIcon className="w-4 h-4 text-muted-foreground" />
+                <MoreHorizontalIcon className="w-4 h-4 text-muted-foreground" />
               </DropdownMenuTrigger>
 
               <DropdownMenuContent>
diff --git a/enjoy/src/renderer/pages/community.tsx b/enjoy/src/renderer/pages/community.tsx
index 393d4e5d..3bf4c2f2 100644
--- a/enjoy/src/renderer/pages/community.tsx
+++ b/enjoy/src/renderer/pages/community.tsx
@@ -15,7 +15,7 @@ export default () => {
 
   return (
     <div className="bg-muted h-full px-4 lg:px-8 py-6">
-      <div className="max-w-screen-md mx-auto">
+      <div className="max-w-screen-md mx-auto mb-6">
         <div className="flex space-x-1 items-center mb-4">
           <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
             <ChevronLeftIcon className="w-5 h-5" />
@@ -24,7 +24,7 @@ export default () => {
         </div>
 
         <Tabs defaultValue="square">
-          <TabsList className="mb-6">
+          <TabsList className="mb-4">
             <TabsTrigger value="square">{t("square")}</TabsTrigger>
             <TabsTrigger
               value="rankings"