fix: revert selected files, no need to add tooltips on svg buttons

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

@@ -10,7 +10,6 @@ import React, { useEffect, useState, memo } from 'react'
 import { Button, IconButton } from 'src/components/buttons'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 
-import Tooltip from './Tooltip'
 import { TextInput } from './inputs'
 import { H4, P } from './typography'
 
@@ -42,16 +41,13 @@ export const DialogTitle = ({ children, onClose }) => {
     <div className={classes.wrapper}>
       {children}
       {onClose && (
-        <Tooltip
+        <IconButton
+          size={16}
+          aria-label="close"
           className={classes.closeButton}
-          enableOver
+          onClick={onClose}>
-          element={
-            <IconButton size={16} aria-label="close" onClick={onClose}>
           <CloseIcon />
         </IconButton>
-          }>
-          <P>Close</P>
-        </Tooltip>
       )}
     </div>
   )

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

@@ -3,11 +3,9 @@ import classnames from 'classnames'
 import React from 'react'
 
 import { IconButton } from 'src/components/buttons'
-import { H1, H4, P } from 'src/components/typography'
+import { H1, H4 } from 'src/components/typography'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 
-import Tooltip from './Tooltip'
-
 const styles = {
   modal: {
     display: 'flex',
@@ -76,16 +74,12 @@ const Modal = ({
         <Paper className={classnames(classes.wrapper, className)}>
           <div className={classes.header}>
             {title && <TitleCase className={classes.title}>{title}</TitleCase>}
-            <Tooltip
+            <IconButton
-              enableOver
+              size={closeSize}
               className={classes.button}
-              element={
+              onClick={() => handleClose()}>
-                <IconButton size={closeSize} onClick={() => handleClose()}>
               <CloseIcon />
             </IconButton>
-              }>
-              <P>Close</P>
-            </Tooltip>
           </div>
           <div className={classes.content}>{children}</div>
         </Paper>

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

@@ -2,16 +2,14 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { useState, memo } from 'react'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
 import BooleanCell from 'src/components/tables/BooleanCell'
-import { H4, P } from 'src/components/typography'
+import { H4 } from 'src/components/typography'
 import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 
-import Tooltip from '../Tooltip'
-
 import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'
 
 const useStyles = makeStyles(booleanPropertiesTableStyles)
@@ -71,25 +69,11 @@ const BooleanPropertiesTable = memo(
               </Link>
             </div>
           ) : (
-            <>
+            <div className={classes.transparentButton}>
-              {disabled && (
+              <button disabled={disabled} onClick={() => setEditing(true)}>
-                <IconButton disabled>
+                {disabled ? <EditIconDisabled /> : <EditIcon />}
-                  <EditIconDisabled />
+              </button>
-                </IconButton>
+            </div>
-              )}
-
-              {!disabled && (
-                <Tooltip
-                  enableOver
-                  element={
-                    <IconButton onClick={() => setEditing(true)}>
-                      <EditIcon />
-                    </IconButton>
-                  }>
-                  <P>Configure the following properties as desired</P>
-                </Tooltip>
-              )}
-            </>
           )}
         </div>
         <Table className={classes.fillColumn}>

new-lamassu-admin/src/components/editableTable/Row.js

@@ -3,11 +3,10 @@ import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 
-import Tooltip from 'src/components/Tooltip'
 import { Link, IconButton } from 'src/components/buttons'
 import { Td, Tr } from 'src/components/fake-table/Table'
 import { Switch } from 'src/components/inputs'
-import { TL2, P } from 'src/components/typography'
+import { TL2 } from 'src/components/typography'
 import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
 import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
 import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
@@ -55,46 +54,19 @@ const ActionCol = ({ disabled, editing }) => {
       )}
       {!editing && enableEdit && (
         <Td textAlign="center" width={editWidth}>
-          {!disableEdit && (
-            <Tooltip
-              enableOver
-              element={
           <IconButton
+            disabled={disableEdit}
             className={classes.editButton}
             onClick={() => onEdit && onEdit(values.id)}>
-                  <EditIcon />
+            {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
           </IconButton>
-              }>
-              <P>Modify row contents</P>
-            </Tooltip>
-          )}
-
-          {disableEdit && (
-            <IconButton disabled className={classes.editButton}>
-              <DisabledEditIcon />
-            </IconButton>
-          )}
         </Td>
       )}
       {!editing && enableDelete && (
         <Td textAlign="center" width={deleteWidth}>
-          {!disabled && (
+          <IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
-            <Tooltip
+            {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
-              enableOver
-              element={
-                <IconButton onClick={() => onDelete(values.id)}>
-                  <DeleteIcon />
           </IconButton>
-              }>
-              <P>Delete row</P>
-            </Tooltip>
-          )}
-
-          {disabled && (
-            <IconButton disabled>
-              <DisabledDeleteIcon />
-            </IconButton>
-          )}
         </Td>
       )}
       {!editing && enableToggle && (

new-lamassu-admin/src/components/single-row-table/SingleRowTable.js

@@ -2,7 +2,6 @@ import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
 
-import Tooltip from 'src/components/Tooltip'
 import { IconButton } from 'src/components/buttons'
 import {
   Table,
@@ -14,8 +13,6 @@ import {
 } from 'src/components/fake-table/Table'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg'
 
-import { P } from '../typography'
-
 import styles from './SingleRowTable.styles'
 
 const useStyles = makeStyles(styles)
@@ -26,8 +23,7 @@ const SingleRowTable = ({
   title,
   items,
   onEdit,
-  className,
+  className
-  editMessage
 }) => {
   const classes = useStyles({ width, height })
 
@@ -37,15 +33,9 @@ const SingleRowTable = ({
         <THead>
           <Th className={classes.head}>
             {title}
-            <Tooltip
-              enableOver
-              element={
             <IconButton onClick={onEdit} className={classes.button}>
               <EditIcon />
             </IconButton>
-              }>
-              <P>{editMessage}</P>
-            </Tooltip>
           </Th>
         </THead>
         <TBody>

new-lamassu-admin/src/pages/Notifications/components/EditHeader.js

@@ -1,9 +1,8 @@
 import { makeStyles } from '@material-ui/core'
 import React from 'react'
 
-import Tooltip from 'src/components/Tooltip'
 import { Link, IconButton } from 'src/components/buttons'
-import { H4, P } from 'src/components/typography'
+import { H4 } from 'src/components/typography'
 import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 
@@ -17,27 +16,14 @@ const Header = ({ title, editing, disabled, setEditing }) => {
   return (
     <div className={classes.header}>
       <H4 className={classes.title}>{title}</H4>
-
+      {!editing && (
-      {!editing && !disabled && (
-        <Tooltip
-          enableOver
-          element={
         <IconButton
+          onClick={() => setEditing(true)}
           className={classes.button}
-              onClick={() => setEditing(true)}>
+          disabled={disabled}>
-              <EditIcon />
+          {disabled ? <DisabledEditIcon /> : <EditIcon />}
-            </IconButton>
-          }>
-          <P>Modify value</P>
-        </Tooltip>
-      )}
-
-      {!editing && disabled && (
-        <IconButton disabled className={classes.button}>
-          <DisabledEditIcon />
         </IconButton>
       )}
-
       {editing && (
         <div className={classes.editingButtons}>
           <Link color="primary" type="submit">

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

@@ -9,8 +9,7 @@ import React, { useState } from 'react'
 import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
-import Tooltip from 'src/components/Tooltip'
+import { Link } from 'src/components/buttons'
-import { Link, IconButton } from 'src/components/buttons'
 import Switch from 'src/components/inputs/base/Switch'
 import { TextInput, NumberInput } from 'src/components/inputs/formik'
 import {
@@ -232,15 +231,11 @@ const ContactInfo = () => {
         <div className={classes.header}>
           <Info2>Info card</Info2>
           {!editing && (
-            <Tooltip
+            <div className={classes.transparentButton}>
-              enableOver
+              <button onClick={() => setEditing(true)}>
-              element={
-                <IconButton onClick={() => setEditing(true)}>
                 <EditIcon />
-                </IconButton>
+              </button>
-              }>
+            </div>
-              <P>Configure info card settings</P>
-            </Tooltip>
           )}
         </div>
         <Formik
@@ -310,11 +305,7 @@ const ContactInfo = () => {
         </Formik>
       </div>
       <div className={classnames(classes.section, classes.infoMessage)}>
-        <Tooltip width={304} enableOver element={<WarningIcon />}>
+        <WarningIcon />
-          Sharing your information with your customers through your machines
-          allows them to contact you in case there's a problem with a machine in
-          your network or a transaction.
-        </Tooltip>
         <Label1>
           Sharing your information with your customers through your machines
           allows them to contact you in case there's a problem with a machine in