diff --git a/common/assets/images/icon-help-3.svg b/common/assets/images/icon-help-3.svg index dcf0b831..3c168687 100644 --- a/common/assets/images/icon-help-3.svg +++ b/common/assets/images/icon-help-3.svg @@ -1 +1 @@ - + diff --git a/common/components/PriorityRadio/PriorityRadio.scss b/common/components/PriorityRadio/PriorityRadio.scss index 1b8d7101..ca9df5d9 100644 --- a/common/components/PriorityRadio/PriorityRadio.scss +++ b/common/components/PriorityRadio/PriorityRadio.scss @@ -4,51 +4,47 @@ .PriorityRadio { &-button { &-wrapper { - position: relative; - box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05); + display: flex; + flex-wrap: nowrap; + justify-content: space-between; width: 100%; - border: 1px solid #e5ecf3; - border-radius: 3px; - text-transform: capitalize; + > button { + border: solid 1px #e5ecf3; + } } &.selected { + border: solid 1px rgba(16, 151, 192, 0.3); + border-radius: 3px; + box-shadow: 0 1px 1px 0 rgba(232, 234, 237, 0.5), 0 2px 4px 0 rgba(232, 234, 237, 0.5); + background-color: #fafbfc; .PriorityRadio-button-level { color: #4295bc; } } + width: 31%; + border: solid 1px transparent; + border-radius: 3px; + transition: box-shadow 150ms ease, border 150ms ease, color 150ms ease, + background-color 150ms ease; + background-color: white; @include reset-button; - width: 33%; - padding: 0.75rem; + padding: 0.75rem 1.5rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; &-level { - font-weight: 600; + font-size: 1rem; + font-weight: 400; margin-bottom: 2px; color: #9a9a9a; transition: $transition; + text-transform: capitalize; } &-ringsize { color: #9a9a9a; - } - } - &-sliding-border { - box-shadow: inset 0px 0px 0px 1px #4295bc; - height: calc(100% + 2px); - width: calc(33% + 2px); - margin: -1px; - position: absolute; - border: 1px solid #4295bc; - transition: transform 200ms ease; - border-radius: 3px; - - &.medium { - transform: translateX(100%); - } - &.high { - transform: translateX(200%); + font-size: 0.8125rem; } } } diff --git a/common/components/PriorityRadio/index.tsx b/common/components/PriorityRadio/index.tsx index 25048c35..d6f56171 100644 --- a/common/components/PriorityRadio/index.tsx +++ b/common/components/PriorityRadio/index.tsx @@ -22,12 +22,12 @@ export class PriorityRadio extends React.Component { public render() { const { option } = this.state; - const prices = { low: '$0.24', medium: '$0.34', high: '$0.85' }; - const ringSize = { low: '7', medium: '20', high: '40' }; + const speed = { slow: '$0.075', average: '$0.088', fast: '$0.19' }; + const estimate = { slow: '4 min', average: '3.4 min', fast: '24 sec' }; const buttons = [ - { type: 'low', price: prices.low, ringSize: ringSize.low }, - { type: 'medium', price: prices.medium, ringSize: ringSize.medium }, - { type: 'high', price: prices.high, ringSize: ringSize.high } + { type: 'low', price: speed.slow, ringSize: estimate.slow }, + { type: 'medium', price: speed.average, ringSize: estimate.average }, + { type: 'high', price: speed.fast, ringSize: estimate.fast } ]; return (
@@ -38,11 +38,6 @@ export class PriorityRadio extends React.Component {
-
{buttons.map((btn, i) => ( ))}
diff --git a/common/components/PrivacyRadio/PrivacyRadio.scss b/common/components/PrivacyRadio/PrivacyRadio.scss index 1aea194a..fc7622aa 100644 --- a/common/components/PrivacyRadio/PrivacyRadio.scss +++ b/common/components/PrivacyRadio/PrivacyRadio.scss @@ -4,51 +4,47 @@ .PrivacyRadio { &-button { &-wrapper { - position: relative; - box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05); + display: flex; + flex-wrap: nowrap; + justify-content: space-between; width: 100%; - border: 1px solid #e5ecf3; - border-radius: 3px; - text-transform: capitalize; + > button { + border: solid 1px #e5ecf3; + } } &.selected { + border: solid 1px rgba(16, 151, 192, 0.3); + border-radius: 3px; + box-shadow: 0 1px 1px 0 rgba(232, 234, 237, 0.5), 0 2px 4px 0 rgba(232, 234, 237, 0.5); + background-color: #fafbfc; .PrivacyRadio-button-level { color: #4295bc; } } + width: 31%; + border: solid 1px transparent; + border-radius: 3px; + transition: box-shadow 150ms ease, border 150ms ease, color 150ms ease, + background-color 150ms ease; + background-color: white; @include reset-button; - width: 33%; - padding: 0.75rem; + padding: 0.75rem 1.5rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; &-level { - font-weight: 600; + font-size: 1rem; + font-weight: 400; margin-bottom: 2px; color: #9a9a9a; transition: $transition; + text-transform: capitalize; } &-ringsize { color: #9a9a9a; - } - } - &-sliding-border { - box-shadow: inset 0px 0px 0px 1px #4295bc; - height: calc(100% + 2px); - width: calc(33% + 2px); - margin: -1px; - position: absolute; - border: 1px solid #4295bc; - transition: transform 200ms ease; - border-radius: 3px; - - &.medium { - transform: translateX(100%); - } - &.high { - transform: translateX(200%); + font-size: 0.8125rem; } } } diff --git a/common/components/PrivacyRadio/index.tsx b/common/components/PrivacyRadio/index.tsx index 320789bd..426e686d 100644 --- a/common/components/PrivacyRadio/index.tsx +++ b/common/components/PrivacyRadio/index.tsx @@ -38,11 +38,6 @@ export class PrivacyRadio extends React.Component {
-
{buttons.map((btn, i) => (