chore: some ui improve

Signed-off-by: Innei <i@innei.in>
MaxtuneLee · Aug 31, 2024 · d4581db · d4581db
1 parent 9c66b33
commit d4581db
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/src/renderer/src/modules/settings/modules/fonts.tsx b/src/renderer/src/modules/settings/modules/fonts.tsx
@@ -82,7 +82,7 @@ export const ContentFontSelector = () => {
         <SelectTrigger size="sm" className="w-48">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent className="h-64">
+        <SelectContent position="item-aligned">
           {isCustomFont && (
             <SelectItem value={readerFontFamily}>{readerFontFamily}</SelectItem>
           )}
@@ -127,7 +127,7 @@ export const UIFontSelector = () => {
         <SelectTrigger size="sm" className="w-48">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent className="h-64">
+        <SelectContent position="item-aligned">
           {isCustomFont && <SelectItem value={uiFont}>{uiFont}</SelectItem>}
           <SelectItem value={DEFAULT_FONT}>{DEFAULT_FONT}</SelectItem>
           {data.map(({ label, value }) => (

diff --git a/src/renderer/src/modules/settings/tabs/apperance.tsx b/src/renderer/src/modules/settings/tabs/apperance.tsx
@@ -107,6 +107,7 @@ const ShikiTheme = () => {
     <div className="mb-3 flex items-center justify-between">
       <span className="shrink-0 text-sm font-medium">Code highlight theme</span>
       <Select
+
         defaultValue="github-dark"
         value={codeHighlightTheme}
         onValueChange={(value) => {
@@ -116,7 +117,7 @@ const ShikiTheme = () => {
         <SelectTrigger size="sm" className="w-48">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent align="end" className="h-64">
+        <SelectContent position="item-aligned">
           {Object.keys(bundledThemes)?.map((theme) => (
             <SelectItem key={theme} value={theme}>
               {theme}
@@ -154,7 +155,7 @@ const TextSize = () => {
         <SelectTrigger size="sm" className="w-48 capitalize">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent position="item-aligned">
           {Object.entries(textSizeMap).map(([size, value]) => (
             <SelectItem
               className="capitalize"

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -5,6 +5,7 @@ import {
 } from "@renderer/components/ui/avatar"
 import { Button, MotionButtonBase } from "@renderer/components/ui/button"
 import { CopyButton } from "@renderer/components/ui/code-highlighter"
+import { LoadingCircle } from "@renderer/components/ui/loading"
 import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import {
   Table,
@@ -14,7 +15,12 @@ import {
   TableHeader,
   TableRow,
 } from "@renderer/components/ui/table"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
 import { useAuthQuery } from "@renderer/hooks/common"
 import { apiClient, getFetchErrorMessage } from "@renderer/lib/api-fetch"
 import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
@@ -58,11 +64,12 @@ export const SettingInvitations = () => {
             </MotionButtonBase>
           </TooltipTrigger>
 
-          <TooltipContent>
-            New invitation
-          </TooltipContent>
+          <TooltipContent>New invitation</TooltipContent>
         </Tooltip>
-        <ScrollArea.ScrollArea scrollbarClassName="w-1" rootClassName="flex grow">
+        <ScrollArea.ScrollArea
+          scrollbarClassName="w-1"
+          rootClassName="flex grow"
+        >
           {invitations.data?.length ? (
             <Table className="mt-4">
               <TableHeader className="border-b">
@@ -100,18 +107,31 @@ export const SettingInvitations = () => {
                     </TableCell>
                     <TableCell align="center" size="sm">
                       {row.users ? (
-                        <div
-                          onClick={() => {
-                            presentUserProfile(row.users?.id)
-                          }}
-                        >
-                          <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
-                            <AvatarImage src={row.users?.image || undefined} />
-                            <AvatarFallback>
-                              {row.users?.name?.slice(0, 2)}
-                            </AvatarFallback>
-                          </Avatar>
-                        </div>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <button
+                              type="button"
+                              className="cursor-pointer"
+                              onClick={() => {
+                                presentUserProfile(row.users?.id)
+                              }}
+                            >
+                              <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
+                                <AvatarImage
+                                  src={row.users?.image || undefined}
+                                />
+                                <AvatarFallback>
+                                  {row.users?.name?.slice(0, 2)}
+                                </AvatarFallback>
+                              </Avatar>
+                            </button>
+                          </TooltipTrigger>
+                          {row.users?.name && (
+                            <TooltipPortal>
+                              <TooltipContent>{row.users?.name}</TooltipContent>
+                            </TooltipPortal>
+                          )}
+                        </Tooltip>
                       ) : (
                         "Not used"
                       )}
@@ -120,21 +140,25 @@ export const SettingInvitations = () => {
                 ))}
               </TableBody>
             </Table>
-          ) : (
-            <div className="mt-36 w-full text-center text-sm text-zinc-400">
-              <p>No invitations</p>
+          ) : invitations.isLoading ?
+              (
+                <LoadingCircle size="large" className="center absolute inset-0" />
+              ) :
+              (
+                <div className="mt-36 w-full text-center text-sm text-zinc-400">
+                  <p>No invitations</p>
 
-              <div className="mt-6">
-                <Button
-                  onClick={() => {
-                    newInvitation.mutate()
-                  }}
-                >
-                  Create Invitation
-                </Button>
-              </div>
-            </div>
-          )}
+                  <div className="mt-6">
+                    <Button
+                      onClick={() => {
+                        newInvitation.mutate()
+                      }}
+                    >
+                      Create Invitation
+                    </Button>
+                  </div>
+                </div>
+              )}
         </ScrollArea.ScrollArea>
       </div>
     </>