fix: simplify Tooltip

new-lamassu-admin/src/components/Tooltip.js

@@ -1,9 +1,8 @@
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
-import React, { useState, memo, cloneElement } from 'react'
+import React, { useState, memo } from 'react'
 
 import Popper from 'src/components/Popper'
-import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
 
 const useStyles = makeStyles({
   transparentButton: {
@@ -26,7 +25,7 @@ const Tooltip = memo(
     enableOver = false,
     enableClick = false,
     className,
-    element,
+    Icon,
     children,
     width,
     ...props
@@ -50,22 +49,9 @@ const Tooltip = memo(
           type={'button'}
           className={classnames(className, classes.transparentButton)}
           onPointerOver={event => enableOver && handleOpenHelpPopper(event)}
-          onClick={
+          onClick={event => enableClick && handleOpenHelpPopper(event)}
-            element?.props?.onClick
-              ? element.props.onClick
-              : event => enableClick && handleOpenHelpPopper(event)
-          }
           {...props}>
-          {element &&
+          <Icon className={classes.preventDefaultTooltip}></Icon>
-            cloneElement(element, {
-              className: classnames(
-                element.props.className,
-                classes.preventDefaultTooltip
-              )
-            })}
-          {!element && (
-            <HelpIcon className={classes.preventDefaultTooltip}></HelpIcon>
-          )}
           <Popper
             open={helpPopperOpen}
             anchorEl={helpPopperAnchorEl}

new-lamassu-admin/src/components/date-range-picker/Tile.js

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React from 'react'
 
+import typographyStyles from 'src/components/typography/styles'
 import {
   primaryColor,
   spring2,
   spring3,
   disabledColor
 } from 'src/styling/variables'
-import typographyStyles from 'src/components/typography/styles'
 
 const { label1 } = typographyStyles
 

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

@@ -39,7 +39,7 @@ function Select({ label, items, ...props }) {
       <label {...getLabelProps()}>{startCase(label)}</label>
       <button {...getToggleButtonProps()}>
         <span className={classes.selectedItem}>{startCase(selectedItem)}</span>
-        <Arrowdown className={classes.preventDefaultTooltip}/>
+        <Arrowdown className={classes.preventDefaultTooltip} />
       </button>
       <ul {...getMenuProps()}>
         {isOpen &&

new-lamassu-admin/src/components/inputs/formik/PhoneNumberInput.js

@@ -1,5 +1,5 @@
-import React, { memo, useState } from 'react'
 import { makeStyles } from '@material-ui/core'
+import React, { memo, useState } from 'react'
 
 import TextInputFormik from './TextInput'
 import { styles } from './TextInput.styles'

new-lamassu-admin/src/components/layout/Header.js

@@ -5,8 +5,8 @@ import { NavLink } from 'react-router-dom'
 
 import { Link } from 'src/components/buttons'
 import { H4 } from 'src/components/typography'
-import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 import AddMachine from 'src/pages/AddMachine'
+import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
 import styles from './Header.styles'
 

new-lamassu-admin/src/components/table/TableHeader.js

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 
+import typographyStyles from 'src/components/typography/styles'
 import {
   tableHeaderColor,
   tableHeaderHeight,
   spacer,
   white
 } from 'src/styling/variables'
-import typographyStyles from 'src/components/typography/styles'
 
 const { label2 } = typographyStyles
 

new-lamassu-admin/src/components/wizard/Wizard.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
 import { makeStyles } from '@material-ui/core'
+import React, { useState } from 'react'
 
 import { Button } from 'src/components/buttons'
 import { ReactComponent as CompleteIcon } from 'src/styling/icons/stage/spring/complete.svg'

new-lamassu-admin/src/pages/AddMachine/styles.js

@@ -1,10 +1,10 @@
+import typographyStyles from 'src/components/typography/styles'
 import {
   placeholderColor,
   backgroundColor,
   primaryColor,
   mainWidth
 } from 'src/styling/variables'
-import typographyStyles from 'src/components/typography/styles'
 
 const { tl2, p } = typographyStyles
 

new-lamassu-admin/src/pages/Cashout/Cashout.js

@@ -9,6 +9,7 @@ import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import { P, Label2 } from 'src/components/typography'
+import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
 import Wizard from './Wizard'
@@ -88,7 +89,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
           <Label2 className={classes.switchLabel}>
             {fudgeFactorActive ? 'On' : 'Off'}
           </Label2>
-          <Tooltip width={304} enableClick>
+          <Tooltip width={304} enableClick Icon={HelpIcon}>
             <P>
               Automatically accept customer deposits as complete if their
               received amount is 10 crypto atoms or less.

new-lamassu-admin/src/pages/Customers/components/index.js

@@ -1,6 +1,6 @@
 import CustomerDetails from './CustomerDetails'
-import IdDataCard from './IdDataCard'
 import IdCardPhotoCard from './IdCardPhotoCard'
+import IdDataCard from './IdDataCard'
 import PhoneCard from './PhoneCard'
 import TransactionsList from './TransactionsList'
 

new-lamassu-admin/src/pages/Customers/index.js

@@ -1,4 +1,4 @@
-import Customers from './Customers'
 import CustomerProfile from './CustomerProfile'
+import Customers from './Customers'
 
 export { Customers, CustomerProfile }

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js

@@ -88,7 +88,7 @@ const CoinATMRadar = memo(() => {
       <div>
         <div className={classes.titleWrapper}>
           <H4>Coin ATM Radar share settings</H4>
-          <Tooltip enableClick width={304} element={<HelpIcon />}>
+          <Tooltip enableClick width={304} Icon={HelpIcon}>
             <P>
               For details on configuring this panel, please read the relevant
               knowledgebase article{' '}