[field] Update annotation tooltip CSS

sanity-io · Oct 6, 2020 · bfbf279 · bfbf279
1 parent af3a1a2
commit bfbf279
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltipContent.css b/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltipContent.css
@@ -1,16 +1,11 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  padding: var(--extra-small-padding) var(--extra-small-padding) var(--small-padding)
-    var(--small-padding);
-  font-size: var(--font-size-base);
-  font-weight: normal;
-  font-style: normal;
-  color: var(--text-color);
+  padding: calc(var(--medium-padding) - var(--extra-small-padding));
 }
 
 .annotation {
-  padding: var(--extra-small-padding) 0;
+  padding: calc(var(--medium-padding) - var(--extra-small-padding)) 0 0;
   display: flex;
   align-items: center;
 }
@@ -19,35 +14,40 @@
   border-radius: calc(23px / 2); /* 23px = avatar size */
   display: flex;
   align-items: center;
-  padding-right: var(--small-padding);
+  padding-right: calc(var(--medium-padding) - var(--extra-small-padding));
 }
 
 .avatarContainer {
   display: block;
-  margin-right: var(--extra-small-padding);
 }
 
 .displayName {
   display: block;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
-  margin-top: -1px;
+  margin: -2px 0 -1px calc(var(--extra-small-padding) + 2px);
 }
 
 .loadingText {
   color: var(--text-muted);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  margin-top: -2px 0 -1px;
 }
 
 .timeAgo {
-  margin: 0 var(--small-padding) 0 auto;
+  margin-left: auto;
   padding-left: var(--small-padding);
   font-size: var(--font-size-small);
   color: var(--text-muted);
+  margin-top: -2px 0 -1px;
 }
 
 .description {
   color: var(--text-muted);
   font-size: var(--font-size-xsmall--uppercase);
+  line-height: var(--line-height-xsmall--uppercase);
   text-transform: uppercase;
   font-weight: 600;
+  margin: -3px 0 -2px;
 }
diff --git a/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltipContent.tsx b/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltipContent.tsx
@@ -1,23 +1,21 @@
 import React from 'react'
 import {useUser, useTimeAgo} from '@sanity/base/hooks'
 import {UserAvatar} from '@sanity/base/components'
+import {useUserColorManager} from '@sanity/base/user-color'
 import {AnnotationDetails} from '../../types'
 import styles from './DiffAnnotationTooltipContent.css'
+import {getAnnotationColor} from './helpers'
 
 export function DiffAnnotationTooltipContent({
   annotations,
   description = 'Changed by'
 }: {
   annotations: AnnotationDetails[]
-  description?: React.ReactNode | string
+  description?: React.ReactNode
 }): React.ReactElement {
   return (
     <div className={styles.root}>
-      {typeof description === 'string' ? (
-        <span className={styles.description}>{description}</span>
-      ) : (
-        description
-      )}
+      <div className={styles.description}>{description}</div>
 
       {annotations.map(annotation => (
         <AnnotationItem key={annotation.author} annotation={annotation} />
@@ -28,7 +26,9 @@ export function DiffAnnotationTooltipContent({
 
 function AnnotationItem({annotation}: {annotation: AnnotationDetails}) {
   const {author, timestamp} = annotation
+  const userColorManager = useUserColorManager()
   const {error, value: user} = useUser(author)
+  const color = getAnnotationColor(userColorManager, annotation)
   const timeAgo = useTimeAgo(timestamp, {minimal: true})
 
   // @todo handle?
@@ -38,7 +38,7 @@ function AnnotationItem({annotation}: {annotation: AnnotationDetails}) {
 
   return (
     <div className={styles.annotation}>
-      <div className={styles.user}>
+      <div className={styles.user} style={{backgroundColor: color.background, color: color.text}}>
         <span className={styles.avatarContainer}>
           <UserAvatar userId={author} />
         </span>