chore: improve contacts list ui

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx

@@ -5,6 +5,8 @@ import { TrustedContactInterface, classNames } from '@standardnotes/snjs'
 import EditContactModal from './EditContactModal'
 import { useCallback, useState } from 'react'
 import { useApplication } from '@/Components/ApplicationProvider'
+import { VisuallyHidden } from '@ariakit/react'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 type Props = {
   contact: TrustedContactInterface
@@ -30,9 +32,9 @@ const ContactItem = ({ contact }: Props) => {
         <EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
       </ModalOverlay>
 
-      <div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
+      <div className="flex items-start gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
-        <Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
+        <div className="grid grid-cols-[1fr,auto] grid-rows-2 place-items-center overflow-hidden [column-gap:0.875rem] [row-gap:0.25rem]">
-        <div className="flex flex-col gap-1 overflow-hidden py-1.5">
+          <Icon type="user" size="custom" className="h-5 w-5 flex-shrink-0" />
           <span
             className={classNames(
               'w-full overflow-hidden text-ellipsis text-base font-bold',
@@ -41,13 +43,25 @@ const ContactItem = ({ contact }: Props) => {
           >
             {contact.name}
           </span>
-
+          <span className="col-start-2 w-full overflow-hidden text-ellipsis text-sm brightness-75">
-          <span className="w-full overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
+            {collaborationID}
-
+          </span>
-          <div className="mt-1.5 flex flex-row">
+        </div>
-            <Button label="Edit" className="mr-3" onClick={() => setIsContactModalOpen(true)} />
+        <div className="flex gap-3">
-            {!contact.isMe && <Button label="Delete" className="mr-3" onClick={deleteContact} />}
+          <StyledTooltip label="Edit contact">
-          </div>
+            <Button className="!px-2 py-2" onClick={() => setIsContactModalOpen(true)}>
+              <VisuallyHidden>Edit</VisuallyHidden>
+              <Icon type="pencil-filled" size="medium" />
+            </Button>
+          </StyledTooltip>
+          {!contact.isMe && (
+            <StyledTooltip label="Delete contact">
+              <Button className="!px-2 py-2" onClick={deleteContact}>
+                <VisuallyHidden>Delete</VisuallyHidden>
+                <Icon type="trash-filled" className="text-danger" size="medium" />
+              </Button>
+            </StyledTooltip>
+          )}
         </div>
       </div>
     </>

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -1,6 +1,6 @@
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode, useState, useRef, useEffect } from 'react'
-import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
+import { Tooltip, TooltipAnchor, TooltipOptions, TooltipStoreProps, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
@@ -14,6 +14,7 @@ const StyledTooltip = ({
   showOnMobile = false,
   showOnHover = true,
   interactive = false,
+  type = 'label',
   ...props
 }: {
   children: ReactNode
@@ -22,6 +23,7 @@ const StyledTooltip = ({
   showOnMobile?: boolean
   showOnHover?: boolean
   interactive?: boolean
+  type?: TooltipStoreProps['type']
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
@@ -32,6 +34,7 @@ const StyledTooltip = ({
     skipTimeout: 0,
     open: forceOpen,
     animated: true,
+    type,
   })
 
   const anchorRef = useRef<HTMLElement>(null)
@@ -84,8 +87,8 @@ const StyledTooltip = ({
         autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
-          'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
+          'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow [backdrop-filter:var(--popover-backdrop-filter)] translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color]',
-          'opacity-60 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60 transition-opacity duration-75',
+          'opacity-60 transition-opacity duration-75 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60',
           'focus-visible:shadow-none focus-visible:outline-none',
           className,
         )}