Add basic radio selection

common/components/AmountField.tsx

@@ -42,10 +42,7 @@ export const AmountField: React.SFC<Props> = ({
           {hasUnitDropdown ? (
             <UnitDropDown showAllTokens={showAllTokens} />
           ) : (
-            <span
-              className="AmountField-networkId input-group-inline-absolute-right"
-              onClick={() => {}}
-            >
+            <span className="AmountField-networkId input-group-inline-absolute-right">
               {networkId}
             </span>
           )}

common/components/PrivacyRadio/PrivacyRadio.scss

@@ -0,0 +1,50 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+.PrivacyRadio {
+  &-button {
+    &-wrapper {
+      position: relative;
+      width: 100%;
+      border: 1px solid #e5ecf3;
+      border-radius: $border-radius;
+    }
+    &.selected {
+      .PrivacyRadio-button-level {
+        color: #4295bc;
+      }
+    }
+    @include reset-button;
+    width: 33%;
+    padding: 0.75rem;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &-level {
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: #9a9a9a;
+      transition: $transition;
+    }
+    &-ringsize {
+      color: #9a9a9a;
+    }
+  }
+  &-sliding-border {
+    height: calc(100% + 2px);
+    width: calc(33% + 2px);
+    margin: -1px;
+    position: absolute;
+    border: 1px solid #4295bc;
+    transition: transform 200ms ease;
+
+    &.medium {
+      transform: translateX(100%);
+    }
+    &.high {
+      transform: translateX(200%);
+    }
+  }
+}

common/components/PrivacyRadio/index.tsx

@@ -1,23 +1,68 @@
 import React from 'react';
 import translate from 'translations';
 import Help from 'components/ui/Help';
+import './PrivacyRadio.scss';
+
+interface State {
+  option: { type: string; value: string | number };
+}
+
+export class PrivacyRadio extends React.Component<any, State> {
+  public state = {
+    option: { type: 'low', value: 0 }
+  };
+
+  public componentDidMount() {
+    //
+  }
+
+  public onClick = (type: string, value: string | number) => {
+    this.setState({ option: { type, value } });
+  };
 
-export class PrivacyRadio extends React.Component<any, any> {
   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' };
     return (
       <div className="PrivacyRadio input-group-wrapper">
-        <label className="PrivacyRadio-group input-group input-group-inline" htmlFor="amount">
+        <div className="PrivacyRadio-group input-group input-group-inline">
           <div className="input-group-header">
             <div className="">{translate('PRIVACY_RADIO')}</div>
             <Help size="x1" link="https://support.mycrypto.com/" />
             <div className="flex-spacer" />
           </div>
           <div className="PrivacyRadio-button-wrapper">
-            <button className="PrivacyRadio-button">Low</button>
-            <button className="PrivacyRadio-button">Medium</button>
-            <button className="PrivacyRadio-button">High</button>
+            <div
+              className={`PrivacyRadio-sliding-border ${
+                option.type === 'high' ? 'high' : option.type === 'medium' ? 'medium' : ''
+              }`}
+            />
+            <button
+              className={`PrivacyRadio-button ${option.type === 'low' && 'selected'}`}
+              onClick={() => this.onClick('low', ringSize.low)}
+            >
+              <span className="PrivacyRadio-button-level">Low: {prices.low}</span>
+              <span className="PrivacyRadio-button-ringsize small">ring size: {ringSize.low}</span>
+            </button>
+            <button
+              className={`PrivacyRadio-button ${option.type === 'medium' && 'selected'}`}
+              onClick={() => this.onClick('medium', ringSize.medium)}
+            >
+              <span className="PrivacyRadio-button-level">Medium: {prices.medium}</span>
+              <span className="PrivacyRadio-button-ringsize small">
+                ring size: {ringSize.medium}
+              </span>
+            </button>
+            <button
+              className={`PrivacyRadio-button ${option.type === 'high' && 'selected'}`}
+              onClick={() => this.onClick('high', ringSize.high)}
+            >
+              <span className="PrivacyRadio-button-level">High: {prices.high}</span>
+              <span className="PrivacyRadio-button-ringsize small">ring size: {ringSize.high}</span>
+            </button>
           </div>
-        </label>
+        </div>
       </div>
     );
   }

common/components/ui/Help.scss

@@ -1,4 +1,5 @@
 .Help {
+  color: #4295bc;
   display: inline-block;
   box-sizing: border-box;
   line-height: inherit;