ux/views: the {sync} badge on the {viz} data viewer {tab} now uses an…

… {eye} as its shape
aivazis · Jan 9, 2022 · 8980e2e · 8980e2e
1 parent 9f46cb3
commit 8980e2e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/ux/client/views/viz/styles.js b/ux/client/views/viz/styles.js
@@ -343,9 +343,14 @@ const sync = {
     icon: {
         stroke: wheel.gray.flour,
     },
+    // and its detailing
+    decoration: {
+        stroke: wheel.gray.flour,
+    },
 
     // highlight when the cursor hovers over it
     available: {
+        // for the shape
         shape: {
             // full intensity
             strokeOpacity: 1.0,
@@ -354,6 +359,7 @@ const sync = {
 
     // restyle when turned on
     engaged: {
+        // for the container
         shape: {
             // full intensity
             strokeOpacity: 1.0,
@@ -362,6 +368,11 @@ const sync = {
         icon: {
             stroke: theme.page.name,
         },
+        // and its detailing
+        decoration: {
+            fill: theme.page.name,
+            stroke: theme.page.name,
+        },
     },
 }
 

diff --git a/ux/client/views/viz/sync.js b/ux/client/views/viz/sync.js
@@ -9,7 +9,7 @@ import React from 'react'
 
 // project
 // shapes
-import { Locked } from '~/shapes'
+import { Eye as Shape } from '~/shapes'
 // widgets
 import { Badge } from '~/widgets'
 
@@ -56,12 +56,19 @@ export const Sync = ({ viewport }) => {
             // and the state dependent enhancements
             ...syncStyle[state]?.icon,
         },
+        // and its details
+        decoration: {
+            // the base style
+            ...syncStyle.decoration,
+            // and the state dependent enhancements
+            ...syncStyle[state]?.decoration,
+        },
     }
 
     // render
     return (
-        <Badge size={10} state={state} behaviors={behaviors} style={syncStyle} >
-            <Locked style={shapeStyle} />
+        <Badge size={16} state={state} behaviors={behaviors} style={syncStyle} >
+            <Shape style={shapeStyle} />
         </Badge >
     )
 }