fix: increase default media size, use correct sizes for detail text +…

… preview skeletons
sanity-io · Nov 8, 2023 · 442991e · 442991e
1 parent 2b8f21c
commit 442991e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
@@ -3,7 +3,7 @@ import {PreviewLayoutKey} from './types'
 export const PREVIEW_MEDIA_SIZE: Record<PreviewLayoutKey, {width: number; height: number}> = {
   block: {width: 33, height: 33},
   blockImage: {width: 600, height: 400},
-  default: {width: 35, height: 35},
+  default: {width: 43, height: 43},
   detail: {width: 75, height: 75},
   inline: {width: 15, height: 15},
   media: {width: 160, height: 160},

diff --git a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
@@ -37,7 +37,7 @@ const Root = styled(Flex)`
   height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
 `
 
-const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)};
   width: 80%;
 `
@@ -75,7 +75,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
         <Stack
           data-testid="default-preview__heading"
           flex={1}
-          paddingLeft={media === false ? 1 : 2}
+          paddingLeft={1}
           paddingRight={status ? 0 : 1}
           space={2}
         >
@@ -103,7 +103,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
         className={styles?.heading}
         data-testid="default-preview__header"
         flex={1}
-        paddingLeft={media ? 2 : 1}
+        paddingLeft={media ? 3 : 1}
         paddingRight={status ? 0 : 1}
         space={2}
       >

diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
@@ -15,7 +15,7 @@ export const MediaSkeleton = styled(Skeleton).attrs({animated: true, radius: 2})
   height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
 `
 
-export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)}; /* 80% of 200px */
   width: 80%;
 `

diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
@@ -53,7 +53,7 @@ export function DetailPreview(props: DetailPreviewProps) {
       <RootFlex data-testid="detail-preview">
         {media !== false && <MediaSkeleton data-testid="detail-preview__media" />}
 
-        <Box flex={1} paddingLeft={media === false ? 1 : 2}>
+        <Box flex={1} paddingLeft={media === false ? 1 : 3}>
           <Flex align="center" data-testid="detail-preview__header">
             <Stack flex={1} space={2}>
               <TitleSkeleton />
@@ -79,10 +79,10 @@ export function DetailPreview(props: DetailPreviewProps) {
         <Media dimensions={mediaDimensions} layout="detail" media={media as any} />
       )}
 
-      <Box flex={1} paddingLeft={media === false ? 1 : 2}>
+      <Box flex={1} paddingLeft={media === false ? 1 : 3}>
         <Flex align="center" data-testid="detail-preview__header">
           <Stack flex={1} space={2}>
-            <Text textOverflow="ellipsis" style={{color: 'inherit'}}>
+            <Text textOverflow="ellipsis" size={1} style={{color: 'inherit'}} weight="medium">
               {title && renderPreviewNode(title, 'detail')}
               {!title && <>Untitled</>}
             </Text>