diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss index ed2f600..acf3f1b 100644 --- a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss @@ -10,8 +10,8 @@ .element { display: inline-block; - margin-left: $spacer / 2; - margin-right: $spacer / 2; + margin-left: $spacer / 1.5; + margin-right: $spacer / 1.5; text-align: center; } diff --git a/client/src/components/organisms/WalletSelector.module.scss b/client/src/components/organisms/WalletSelector.module.scss index 9e3be32..74e3851 100644 --- a/client/src/components/organisms/WalletSelector.module.scss +++ b/client/src/components/organisms/WalletSelector.module.scss @@ -8,39 +8,47 @@ } .info { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button { + flex: 0 0 100%; background: $brand-white; - padding: $spacer; border: 1px solid $brand-grey-lighter; border-radius: $border-radius; + padding: $spacer $spacer / 1.5; + font-family: $font-family-base; + display: inline-block; + display: flex; + flex-wrap: wrap; + cursor: pointer; + transition: border .2s ease-out; + margin-bottom: $spacer; - h3 { - font-size: $font-size-base; - margin-top: 0; - margin-bottom: $spacer / 8; + @media (min-width: $break-point--small) { + flex-basis: 48%; + margin-bottom: 0; } - p { - border-bottom: 1px solid $brand-grey-lighter; - padding-bottom: $spacer / 2; + &:hover, + &:focus { + border-color: $brand-pink; } - code { - padding: 0; - color: $brand-grey-light; + span { + display: block; + width: 100%; } } -.error { - background: $red; - padding: $spacer / 2; - text-align: center; - color: $brand-white; - border-radius: $border-radius; +.buttonTitle { + font-size: $font-size-base; + margin-bottom: $spacer / 8; font-weight: $font-weight-bold; +} + +.buttonDescription { font-size: $font-size-small; } - -.success { - composes: error; - background: $green; -} diff --git a/client/src/components/organisms/WalletSelector.tsx b/client/src/components/organisms/WalletSelector.tsx index 1fa251a..a3e9528 100644 --- a/client/src/components/organisms/WalletSelector.tsx +++ b/client/src/components/organisms/WalletSelector.tsx @@ -41,16 +41,34 @@ export default class WalletSelector extends PureComponent<
- -
diff --git a/client/src/components/organisms/Web3message.module.scss b/client/src/components/organisms/Web3message.module.scss index b8f2bb5..8913012 100644 --- a/client/src/components/organisms/Web3message.module.scss +++ b/client/src/components/organisms/Web3message.module.scss @@ -4,8 +4,6 @@ margin-bottom: $spacer; color: $brand-grey; position: relative; - border-bottom: .1rem solid $brand-grey-lighter; - border-top: .1rem solid $brand-grey-lighter; padding-top: $spacer / 2; padding-bottom: $spacer / 2; text-align: left; @@ -23,6 +21,7 @@ .text { padding-left: $spacer * 1.5; display: inline-block; + margin-bottom: 0; } .status {