diff --git a/packages/frontend/src/components/Chain/Chain.css b/packages/frontend/src/components/Chain/Chain.css index 5e68c8c..ac84ea7 100644 --- a/packages/frontend/src/components/Chain/Chain.css +++ b/packages/frontend/src/components/Chain/Chain.css @@ -85,11 +85,6 @@ font-family: monospace, sans-serif; } -.Chain-node-list th, .Chain-node-list td { - text-align: left; - padding: 0.35em 1em; -} - .Chain-settings { text-align: center; } diff --git a/packages/frontend/src/components/Node/Row.css b/packages/frontend/src/components/Node/Row.css index fbaf041..8a532a9 100644 --- a/packages/frontend/src/components/Node/Row.css +++ b/packages/frontend/src/components/Node/Row.css @@ -3,10 +3,24 @@ cursor: pointer; } +.Node-Row-Header th, .Node-Row td { + text-align: left; + padding: 0.35em 13px; +} + .Node-Row-synced { color: #fff; } +.Node-Row-pinned td:first-child { + border-left: 6px solid #d64ca8; + padding-left: 10px; +} + +.Node-Row-pinned.Node-Row-synced { + color: #d64ca8; +} + .Node-Row-validator { display: block; width: 16px; diff --git a/packages/frontend/src/components/Node/Row.tsx b/packages/frontend/src/components/Node/Row.tsx index 7438fff..fb40304 100644 --- a/packages/frontend/src/components/Node/Row.tsx +++ b/packages/frontend/src/components/Node/Row.tsx @@ -7,9 +7,6 @@ import { PersistentSet } from '../../persist'; import { SEMVER_PATTERN } from './'; import { Ago, Icon } from '../'; -import pinIcon from '../../icons/pin.svg'; -import pinOnIcon from '../../icons/check-square-solid.svg'; -import pinOffIcon from '../../icons/square-solid.svg'; import nodeIcon from '../../icons/server.svg'; import nodeValidatorIcon from '../../icons/shield.svg'; import nodeTypeIcon from '../../icons/terminal.svg'; @@ -45,12 +42,6 @@ interface Column { export default class Row extends React.Component { public static readonly columns: Column[] = [ - { - label: 'Pin to Top', - icon: pinIcon, - width: 16, - render: ({ pinned }) => - }, { label: 'Node', icon: nodeIcon, @@ -165,7 +156,7 @@ export default class Row extends React.Component { return ( - + { Row.columns .filter(({ setting }) => setting == null || settings[setting]) @@ -188,6 +179,10 @@ export default class Row extends React.Component { className += ' Node-Row-synced'; } + if (node.pinned) { + className += ' Node-Row-pinned'; + } + return ( {