[field] Various visual tweaks

sanity-io · Oct 6, 2020 · 6d93999 · 6d93999
1 parent 82e9eee
commit 6d93999
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 32 deletions.
diff --git a/packages/@sanity/field/src/diff/changes/FieldChange.css b/packages/@sanity/field/src/diff/changes/FieldChange.css
@@ -11,12 +11,12 @@
 }
 
 .header {
-  padding: 0 0 var(--small-padding);
+  padding: 0 0 var(--extra-small-padding);
 }
 
 .change {
   position: relative;
-  padding-left: var(--small-padding);
+  padding: var(--extra-small-padding) 0 0 var(--small-padding);
 
   @nest &::before {
     content: '';

diff --git a/packages/@sanity/field/src/diff/changes/GroupChange.css b/packages/@sanity/field/src/diff/changes/GroupChange.css
@@ -5,7 +5,7 @@
 
 .changeList {
   position: relative;
-  padding-left: var(--small-padding);
+  padding: var(--extra-small-padding) 0 0 var(--small-padding);
 
   @nest &::before {
     content: '';
@@ -28,7 +28,7 @@
 
 .changeHeader {
   display: flex;
-  margin: 0 0 var(--small-padding);
+  margin: 0 0 var(--extra-small-padding);
 }
 
 .revertChangesButtonContainer {

diff --git a/packages/@sanity/field/src/diff/components/Change.css b/packages/@sanity/field/src/diff/components/Change.css
@@ -1,13 +1,9 @@
 .from {
-  flex: 1;
-  min-width: 0;
   display: block;
   text-decoration: none;
 }
 
 .to {
-  flex: 1;
-  min-width: 0;
   display: block;
   text-decoration: none;
 }
diff --git a/packages/@sanity/field/src/diff/components/ChangeLayout.css b/packages/@sanity/field/src/diff/components/ChangeLayout.css
@@ -12,10 +12,17 @@
   }
 }
 
+.from,
+.to {
+  @nest .root[data-layout='grid'] & {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 .arrow {
   display: flex;
-  padding: 0 var(--small-padding);
-  flex: 0;
+  padding: 0 var(--extra-small-padding);
   align-items: center;
   font-size: var(--font-size-large);
   line-height: var(--line-height-large);

diff --git a/packages/@sanity/field/src/diff/components/ChangeLayout.tsx b/packages/@sanity/field/src/diff/components/ChangeLayout.tsx
@@ -18,9 +18,9 @@ export const ChangeArrow = () => (
 export function ChangeLayout({layout = 'inline', from, to, children}: ChangeLayoutProps) {
   return (
     <div className={styles.root} data-layout={layout}>
-      {from}
+      <div className={styles.from}>{from}</div>
       {from && to && <ChangeArrow />}
-      {to}
+      <div className={styles.to}>{to}</div>
       {children}
     </div>
   )

diff --git a/packages/@sanity/field/src/diff/components/MetaInfo.css b/packages/@sanity/field/src/diff/components/MetaInfo.css
@@ -1,19 +1,16 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
   padding: var(--small-padding);
   composes: small from 'part:@sanity/base/theme/typography/text-blocks-style';
-  display: grid;
-  grid-template-areas: 'icon meta';
-  grid-template-columns: auto 1fr;
+  display: flex;
+  align-items: center;
 }
 
 .info {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
-  line-height: 1.3;
   padding-left: var(--small-padding);
 }
 
@@ -22,10 +19,10 @@
 }
 
 .icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(var(--font-size-large) + 8px);
+  @nest & > svg {
+    display: block;
+    font-size: calc(35 / 16 * 1rem);
+  }
 }
 
 .iconRemoved {
@@ -34,9 +31,10 @@
 }
 
 .title {
-  font-size: inherit;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
   font-weight: 600;
-  margin: 0;
+  margin: -1px 0 0;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -46,3 +44,11 @@
   composes: title;
   composes: removed;
 }
+
+.children {
+  font-size: var(--font-size-tiny);
+  line-height: var(--line-height-tiny);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/packages/@sanity/field/src/diff/components/MetaInfo.tsx b/packages/@sanity/field/src/diff/components/MetaInfo.tsx
@@ -31,7 +31,7 @@ export function MetaInfo({
           {title}
         </h3>
         {action && <div>{action}</div>}
-        {children}
+        <div className={styles.children}>{children}</div>
       </div>
     </div>
   )

diff --git a/packages/@sanity/field/src/types/image/diff/ImageFieldDiff.css b/packages/@sanity/field/src/types/image/diff/ImageFieldDiff.css
@@ -1,7 +1,6 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  /*  */
 }
 
 .annotation {
@@ -11,7 +10,7 @@
 .imageDiff {
   @nest &[data-diff-layout='double'] {
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   }
 }
 

diff --git a/packages/@sanity/field/src/types/image/diff/ImagePreview.css b/packages/@sanity/field/src/types/image/diff/ImagePreview.css
@@ -1,14 +1,14 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  display: grid;
-  grid-template-areas: 'image' 'meta';
-  grid-template-rows: 1fr auto;
 }
 
 .header {
+  flex: 1;
+  min-height: 0;
   padding: var(--small-padding) var(--small-padding) 0;
 }