diff --git a/ux/client/views/viz/styles.js b/ux/client/views/viz/styles.js index c9d52274..e7650a9c 100644 --- 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 index cef54cbc..acb9484e 100644 --- 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 ( - - + + ) }