feat: created the base skeleton for the Coin ATM Radar Setup screen (#355)

For now it doesn't have any functionality, CSS styling, or tables

feat: added tables to the Coin ATM Radar screen

No styles or icons yet.

feat: added Edit links to the Coin ATM Radar Setup screen

chore: added some TODOs to the Coin ATM Radar Setup screen

refactor: make a function to render both Coin ATM Radar Setup tables

feat: toggle function on table (not working on table content yet)

feat: added toggle state to the Share Information switch

feat: make the Share Information toggle change the tables contents

feat: added a 'Help' link

Later will be replaced by a '?' button with a pop-up help text.

feat: added radio groups when in editing mode of Coin ATM Radar screen

chore: replaced edit and help placeholders with proper buttons

style: defined some CSS styles

feat: added a help popper

feat: enable radio change events, so they can be selected

style: defined row styles for the radio button groups

For now the help popper contains only a placeholder text, which must be
replaced.

refactor: replaced help and edit Links with Buttons

fix: fixed the margin spacing for buttons

style: added more spacing between before the share information Switch

refactor: made a function to check a table element boolean value

fix: changed some typography styles for titles (from TL2 to H4)

style: added the alternating row style to the information tables

style: added true and false table icons replacing the placeholder texts

style: fixed the radio groups right margin

refactor: renamed everything from CoinATMRadarSetup to CoinATMRadar

feat: integrate share information switch with graphql api

Still needs to finish the tables api integration.

refactor: rename properties from 'show' to 'send'

feat: integrate tables with graphql api

feat: updated the coinatmradar module with the new config properties

feat: added logic to show only currently available CAR config properties

feat: disable the edit button when 'Share Information' is set to 'No'

chore: replaced the lorem ipsum with the correct text on the help popup

fix: fixed some css styling errors

chore: added link to the CAR page on the corresponding button

refactor: refactored the information table to make a component out of it

refactor: changed the name of the 'active' property of the properties
table to 'disabled' and inverted it's logic

refactor: created a component from the boolean property table

refactor: delete repeated styling code on the car page and it's table

style: update styles to be in accordance with the guidelines

refactor: rename properties to make them more concise

fix: readded the old coinatmradar module and renamed the current one

refactor: replaced ternary if with a coalescing operator

fix: make the info table always visible, and it's values not dependent
on the disabled status

fix: move link style to jss

refactor: simplify the use of car properties, and remove currently
unused ones

fix: put hooks on their correct places

fix: when changing the value of the switch, update only it's own config

fix: rename booleanPropertiesTable file so it starts with a capital
letter.

chore: readd removed properties on the car settings (all commented out)

chore: integrated CAR settings page into Operator Info page

fix: replaced broken white and disabled versions of the edit icon

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js

@@ -0,0 +1,112 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React, { useState, memo } from 'react'
+
+import { H4 } from 'src/components/typography'
+import { Link } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
+import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
+import { ReactComponent as TrueIcon } from 'src/styling/icons/table/true.svg'
+import { ReactComponent as FalseIcon } from 'src/styling/icons/table/false.svg'
+
+import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'
+
+const useStyles = makeStyles(booleanPropertiesTableStyles)
+
+const BooleanPropertiesTable = memo(
+  ({ title, disabled, data, elements, save }) => {
+    const [editing, setEditing] = useState(false)
+    const [radioGroupValues, setRadioGroupValues] = useState(elements)
+
+    const classes = useStyles()
+
+    const innerSave = () => {
+      radioGroupValues.forEach(element => {
+        data[element.name] = element.value
+      })
+
+      save(data)
+      setEditing(false)
+    }
+
+    const innerCancel = () => {
+      setEditing(false)
+    }
+
+    const handleRadioButtons = (elementName, newValue) => {
+      setRadioGroupValues(
+        radioGroupValues.map(element =>
+          element.name === elementName
+            ? { ...element, value: newValue }
+            : element
+        )
+      )
+    }
+
+    const radioButtonOptions = [
+      { label: 'Yes', value: true },
+      { label: 'No', value: false }
+    ]
+
+    if (!elements || radioGroupValues?.length === 0) return null
+
+    return (
+      <div className={classes.booleanPropertiesTableWrapper}>
+        <div className={classes.rowWrapper}>
+          <H4>{title}</H4>
+          {editing ? (
+            <div className={classes.rightAligned}>
+              <Link onClick={innerCancel} color="secondary">
+                Cancel
+              </Link>
+              <Link
+                className={classes.rightLink}
+                onClick={innerSave}
+                color="primary">
+                Save
+              </Link>
+            </div>
+          ) : (
+            <div className={classes.transparentButton}>
+              <button disabled={disabled} onClick={() => setEditing(true)}>
+                {disabled ? <EditIconDisabled /> : <EditIcon />}
+              </button>
+            </div>
+          )}
+        </div>
+        <Table className={classes.fillColumn}>
+          <TableBody className={classes.fillColumn}>
+            {radioGroupValues &&
+              radioGroupValues.map((element, idx) => (
+                <TableRow key={idx} size="sm" className={classes.tableRow}>
+                  <TableCell className={classes.tableCell}>
+                    {element.display}
+                    {editing ? (
+                      <RadioGroup
+                        options={radioButtonOptions}
+                        value={element.value}
+                        onChange={event =>
+                          handleRadioButtons(
+                            element.name,
+                            event.target.value === 'true'
+                          )
+                        }
+                        className={classes.radioButtons}
+                      />
+                    ) : element.value ? (
+                      <TrueIcon />
+                    ) : (
+                      <FalseIcon />
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+)
+
+export default BooleanPropertiesTable