fix: rework wallet screen

new-lamassu-admin/src/components/inputs/base/RadioGroup.js

@@ -1,64 +1,55 @@
 import {
-  Radio as MaterialRadio,
-  RadioGroup as MaterialRadioGroup,
-  FormControlLabel
+  Radio,
+  RadioGroup as MRadioGroup,
+  FormControlLabel,
+  makeStyles
 } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
 import classnames from 'classnames'
 import React from 'react'
 
-import { secondaryColor } from '../../../styling/variables'
-import typographyStyles from '../../typography/styles'
+import { Label1 } from 'src/components/typography'
 
-const { p } = typographyStyles
-
-const GreenRadio = withStyles({
-  root: {
-    color: secondaryColor,
-    padding: [[9, 8, 9, 9]],
-    '&$checked': {
-      color: secondaryColor
-    }
-  },
-  checked: {}
-})(props => <MaterialRadio color="default" {...props} />)
-
-const Label = withStyles({
+const styles = {
   label: {
-    extend: p
+    height: 16,
+    lineHeight: '16px',
+    margin: [[0, 0, 4, 0]],
+    paddingLeft: 3
   }
-})(props => <FormControlLabel {...props} />)
+}
+
+const useStyles = makeStyles(styles)
 
-/* options = [{ label, value }]
- */
 const RadioGroup = ({
   name,
+  label,
   value,
   options,
-  ariaLabel,
   onChange,
   className,
-  ...props
+  labelClassName,
+  radioClassName
 }) => {
+  const classes = useStyles()
+
   return (
     <>
-      {options && (
-        <MaterialRadioGroup
-          aria-label={ariaLabel}
-          name={name}
-          value={value}
-          onChange={onChange}
-          className={classnames(className)}>
-          {options.map((option, idx) => (
-            <Label
-              key={idx}
-              value={option.value}
-              control={<GreenRadio />}
-              label={option.label}
-            />
-          ))}
-        </MaterialRadioGroup>
-      )}
+      {label && <Label1 className={classes.label}>{label}</Label1>}
+      <MRadioGroup
+        name={name}
+        value={value}
+        onChange={onChange}
+        className={classnames(className)}>
+        {options.map((option, idx) => (
+          <FormControlLabel
+            key={idx}
+            value={option.code}
+            control={<Radio className={radioClassName} />}
+            label={option.display}
+            className={classnames(labelClassName)}
+          />
+        ))}
+      </MRadioGroup>
     </>
   )
 }