diff --git a/src/components/Web3message.module.scss b/src/components/Web3message.module.scss new file mode 100644 index 0000000..0067977 --- /dev/null +++ b/src/components/Web3message.module.scss @@ -0,0 +1,44 @@ +@import '../styles/variables'; + +.message { + margin-bottom: $spacer; + color: $brand-grey-light; + padding-left: 1.5rem; + position: relative; +} + +// default: red square +.indicator { + display: inline-block; + width: $font-size-small; + height: $font-size-small; + background: $red; + margin-right: $spacer / 8; + position: absolute; + left: 0; + top: .3rem; +} + +// yellow triangle +.indicatorCloseEnough { + composes: indicator; + background: none; + width: 0; + height: 0; + border-left: $font-size-small / 1.75 solid transparent; + border-right: $font-size-small / 1.75 solid transparent; + border-bottom: $font-size-small solid $yellow; +} + +// green circle +.indicatorActive { + composes: indicator; + border-radius: 50%; + background: $green; +} + +.account { + font-family: $font-family-monospace; + display: inline-block; + margin-left: $spacer / 8; +} diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx new file mode 100644 index 0000000..ddb1d7a --- /dev/null +++ b/src/components/Web3message.tsx @@ -0,0 +1,48 @@ +import React, { PureComponent } from 'react' +import Button from '../components/atoms/Button' +import styles from './Web3message.module.scss' + +export default class Web3message extends PureComponent { + public render() { + // let indicatorClasses = styles.indicatorCloseEnough + + // if (this.props.activeAccount) { + // indicatorClasses = styles.indicatorActive + // } + + return ( + <> + {/* IF no Web3 */} +