From 5210e14a19cd7bcdab1aad6ee350d32d61ae2bbd Mon Sep 17 00:00:00 2001
From: Mauricio Navarro Miranda <mauricio@navarromiranda.mx>
Date: Thu, 20 Aug 2020 03:42:33 -0500
Subject: [PATCH] fix: simplify Tooltip

---
 new-lamassu-admin/src/components/Tooltip.js   | 22 ++++---------------
 .../src/components/date-range-picker/Tile.js  |  2 +-
 .../src/components/inputs/base/Select.js      |  2 +-
 .../inputs/formik/PhoneNumberInput.js         |  2 +-
 .../src/components/layout/Header.js           |  2 +-
 .../src/components/table/TableHeader.js       |  2 +-
 .../src/components/wizard/Wizard.js           |  2 +-
 .../src/pages/AddMachine/styles.js            |  2 +-
 .../src/pages/Cashout/Cashout.js              |  3 ++-
 .../src/pages/Customers/components/index.js   |  2 +-
 .../src/pages/Customers/index.js              |  2 +-
 .../OperatorInfo/CoinATMRadar/CoinATMRadar.js |  2 +-
 12 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js
index 6a485111..e19fc20c 100644
--- a/new-lamassu-admin/src/components/Tooltip.js
+++ b/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={
-            element?.props?.onClick
-              ? element.props.onClick
-              : event => enableClick && handleOpenHelpPopper(event)
-          }
+          onClick={event => enableClick && handleOpenHelpPopper(event)}
           {...props}>
-          {element &&
-            cloneElement(element, {
-              className: classnames(
-                element.props.className,
-                classes.preventDefaultTooltip
-              )
-            })}
-          {!element && (
-            <HelpIcon className={classes.preventDefaultTooltip}></HelpIcon>
-          )}
+          <Icon className={classes.preventDefaultTooltip}></Icon>
           <Popper
             open={helpPopperOpen}
             anchorEl={helpPopperAnchorEl}
diff --git a/new-lamassu-admin/src/components/date-range-picker/Tile.js b/new-lamassu-admin/src/components/date-range-picker/Tile.js
index 4c5086fd..98362d58 100644
--- a/new-lamassu-admin/src/components/date-range-picker/Tile.js
+++ b/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
 
diff --git a/new-lamassu-admin/src/components/inputs/base/Select.js b/new-lamassu-admin/src/components/inputs/base/Select.js
index 2237dbfd..1e23df99 100644
--- a/new-lamassu-admin/src/components/inputs/base/Select.js
+++ b/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 &&
diff --git a/new-lamassu-admin/src/components/inputs/formik/PhoneNumberInput.js b/new-lamassu-admin/src/components/inputs/formik/PhoneNumberInput.js
index bd0e5ce0..e3cb6201 100644
--- a/new-lamassu-admin/src/components/inputs/formik/PhoneNumberInput.js
+++ b/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'
diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js
index 0a182257..61debd00 100644
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/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'
 
diff --git a/new-lamassu-admin/src/components/table/TableHeader.js b/new-lamassu-admin/src/components/table/TableHeader.js
index e02571e3..23019850 100644
--- a/new-lamassu-admin/src/components/table/TableHeader.js
+++ b/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
 
diff --git a/new-lamassu-admin/src/components/wizard/Wizard.js b/new-lamassu-admin/src/components/wizard/Wizard.js
index 0ae600b3..fad882a4 100644
--- a/new-lamassu-admin/src/components/wizard/Wizard.js
+++ b/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'
diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js
index 9bd9ce4a..164a4a70 100644
--- a/new-lamassu-admin/src/pages/AddMachine/styles.js
+++ b/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
 
diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js
index 292b89c9..ac4db035 100644
--- a/new-lamassu-admin/src/pages/Cashout/Cashout.js
+++ b/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.
diff --git a/new-lamassu-admin/src/pages/Customers/components/index.js b/new-lamassu-admin/src/pages/Customers/components/index.js
index 9b8f8946..940c031a 100644
--- a/new-lamassu-admin/src/pages/Customers/components/index.js
+++ b/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'
 
diff --git a/new-lamassu-admin/src/pages/Customers/index.js b/new-lamassu-admin/src/pages/Customers/index.js
index 069aafbb..0ef3b321 100644
--- a/new-lamassu-admin/src/pages/Customers/index.js
+++ b/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 }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js
index 437b0f48..45508878 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js
+++ b/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{' '}