[desk-tool] add sparkline hover styling

sanity-io · Oct 6, 2020 · bce6e2c · bce6e2c
1 parent 4eba96d
commit bce6e2c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.css b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.css
@@ -11,11 +11,6 @@
 .status {
   display: flex;
   align-items: center;
-  color: var(--text-muted);
-
-  @nest &[data-history-state='active'] {
-    color: var(--gray-lighter);
-  }
 }
 
 .statusBadgesContainer {
@@ -38,7 +33,7 @@
   background: none;
   cursor: pointer;
   text-align: inherit;
-  padding: 4px;
+  padding: 0;
   margin: -5px 0 -4px -4px;
   outline: none;
   color: inherit;

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.tsx
@@ -23,7 +23,7 @@ export function DocumentStatusBar(props: Props) {
   const revision = historyController.revTime?.id || ''
   return (
     <div className={styles.root}>
-      <div className={styles.status} data-history-state={historyController.selectionState}>
+      <div className={styles.status}>
         <button
           className={styles.lastUpdatedButton}
           onClick={openHistory}

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.css b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.css
@@ -17,6 +17,33 @@
 .root {
   display: flex;
   align-items: center;
+  padding: 4px;
+  border-radius: var(--border-radius-medium);
+  padding-right: var(--small-padding);
+
+  @nest &[data-disabled='true'] {
+    @nest & .badge {
+      background: var(--gray-lightest);
+      color: var(--gray-lighter);
+    }
+  }
+
+  @nest &:hover:not([data-disabled='true']) {
+    background: var(--gray-lightest);
+
+    @nest & .badge {
+      border-color: var(--gray-lightest);
+
+      @nest &:not(:first-of-type) {
+        color: var(--gray-darkest);
+        background: var(--gray-lighter);
+      }
+    }
+
+    @nest & .statusDetails {
+      color: var(--gray-darkest);
+    }
+  }
 }
 
 .statusBadges {
@@ -31,13 +58,6 @@
   @nest & > div + div:not(:last-child) {
     margin-left: var(--small-padding);
   }
-
-  @nest &[data-disabled='true'] {
-    @nest & .badge {
-      background: var(--gray-lightest); /* TODO */
-      color: var(--gray-lighter); /* TODO */
-    }
-  }
 }
 
 .sparkline {
@@ -60,7 +80,7 @@
   background-color: var(--gray);
   border: 1px solid var(--white);
   color: var(--white);
-  border-radius: var(--size);
+  border-radius: calc(var(--size) * 2);
   height: var(--size);
   width: var(--size);
   z-index: 10;
@@ -106,6 +126,7 @@
 .statusDetails {
   white-space: nowrap;
   margin: -2px 0 -1px;
+  color: var(--text-muted);
 }
 
 .label {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.tsx
@@ -47,8 +47,8 @@ function DocumentStatusBarSparklineInner({states, disabled, lastUpdated}: Props)
   const lastState = states[states.length - 1]
   const syncState = timeline && useSyncState(timeline.publishedId)
   return (
-    <div className={styles.root}>
-      <div className={styles.statusBadges} data-disabled={disabled}>
+    <div className={styles.root} data-disabled={disabled}>
+      <div className={styles.statusBadges}>
         {states.map((badge, badgeIndex, arr) => {
           const showSyncIndicator = badgeIndex === arr.length - 1 && syncState.isSyncing
           const Icon = showSyncIndicator ? SyncIcon : badge.icon