diff --git a/packages/frontend/src/components/Chains.css b/packages/frontend/src/components/Chains.css index 5bb7fcc..02fa93e 100644 --- a/packages/frontend/src/components/Chains.css +++ b/packages/frontend/src/components/Chains.css @@ -24,6 +24,26 @@ position: relative; } +.Chains-fork-me { + display: block; + padding: 0; + margin: 0; + position: absolute; + right: 6px; + top: 6px; +} + +.Chains-fork-me .Icon { + font-size: 24px; + margin: 0; + height: 24px; + width: 24px; + background: #fff; + border: 2px solid #fff; + border-radius: 24px; + color: #555; +} + .Chains-node-count { padding: 0.2em 0.5em; border-radius: 0.3em; diff --git a/packages/frontend/src/components/Chains.tsx b/packages/frontend/src/components/Chains.tsx index 503120e..0b782fe 100644 --- a/packages/frontend/src/components/Chains.tsx +++ b/packages/frontend/src/components/Chains.tsx @@ -4,6 +4,7 @@ import { Icon } from './Icon'; import { Types, Maybe } from '@dotstats/common'; import chainIcon from '../icons/link.svg'; +import githubIcon from '../icons/mark-github.svg'; import './Chains.css'; interface ChainData { @@ -27,6 +28,9 @@ export class Chains extends React.Component { { this.chains.map((chain) => this.renderChain(chain)) } + + + ); }