partial: notifications, op info, services

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

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H4 } from 'src/components/typography'
 import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
@@ -6,27 +5,23 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
 import { Link, IconButton } from 'src/components/buttons'
 
-import styles from './EditHeader.styles'
-
-const useStyles = makeStyles(styles)
-
 const Header = ({ title, editing, disabled, setEditing }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classes.header}>
-      <H4 className={classes.title}>{title}</H4>
+    <div className="flex items-center m-0 mb-4 h-7">
+      <H4 noMargin className="overflow-hidden whitespace-nowrap text-ellipsis">
+        {title}
+      </H4>
       {!editing && (
         <IconButton
           onClick={() => setEditing(true)}
-          className={classes.button}
+          className="border-0 bg-transparent shrink-0 cursor-pointer ml-2"
           disabled={disabled}
           size="large">
           {disabled ? <DisabledEditIcon /> : <EditIcon />}
         </IconButton>
       )}
       {editing && (
-        <div className={classes.editingButtons}>
+        <div className="flex ml-4 justify-between shrink-0 w-27">
           <Link color="primary" type="submit">
             Save
           </Link>
@@ -36,7 +31,7 @@ const Header = ({ title, editing, disabled, setEditing }) => {
         </div>
       )}
     </div>
-  );
+  )
 }
 
 export default Header