chore: reformat code

packages/admin-ui/src/components/NotificationCenter/NotificationCenter.jsx

@@ -52,28 +52,28 @@ const NotificationCenter = ({
   hasUnreadProp,
   buttonCoords,
   popperRef,
-  refetchHasUnreadHeader
+  refetchHasUnreadHeader,
 }) => {
   const { data, loading } = useQuery(GET_NOTIFICATIONS, {
-    pollInterval: 60000
+    pollInterval: 60000,
   })
   const [xOffset, setXoffset] = useState(300)
 
   const [showingUnread, setShowingUnread] = useState(false)
   const machines = R.compose(
     R.map(R.prop('name')),
-    R.indexBy(R.prop('deviceId'))
+    R.indexBy(R.prop('deviceId')),
   )(R.path(['machines'])(data) ?? [])
   const notifications = R.path(['notifications'])(data) ?? []
   const [hasUnread, setHasUnread] = useState(hasUnreadProp)
 
   const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {
     onError: () => console.error('Error while clearing notification'),
-    refetchQueries: () => ['getNotifications']
+    refetchQueries: () => ['getNotifications'],
   })
   const [clearAllNotifications] = useMutation(CLEAR_ALL_NOTIFICATIONS, {
     onError: () => console.error('Error while clearing all notifications'),
-    refetchQueries: () => ['getNotifications']
+    refetchQueries: () => ['getNotifications'],
   })
 
   useEffect(() => {
@@ -103,7 +103,7 @@ const NotificationCenter = ({
           valid={n.valid}
           toggleClear={() =>
             toggleClearNotification({
-              variables: { id: n.id, read: !n.read }
+              variables: { id: n.id, read: !n.read },
             })
           }
         />
@@ -121,7 +121,7 @@ const NotificationCenter = ({
             className={classes.notificationIcon}
             style={{
               top: buttonCoords?.y ?? 0,
-              left: buttonCoords?.x ? buttonCoords.x - xOffset : 0
+              left: buttonCoords?.x ? buttonCoords.x - xOffset : 0,
             }}>
             <NotificationIconZodiac />
             {hasUnread && <div className={classes.hasUnread} />}

packages/admin-ui/src/components/NotificationCenter/NotificationCenter.module.css

@@ -6,8 +6,10 @@
   box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.24);
 }
 
-.container @media only screen and (max-width: 1920px) {
-  width: 30vw;
+@media only screen and (max-width: 1920px) {
+  .container {
+    width: 30vw;
+  }
 }
 
 .header {
@@ -75,7 +77,7 @@
 }
 
 .unread {
-  background-color: var(--spring3)
+  background-color: var(--spring3);
 }
 
 .notificationRowIcon {
@@ -83,11 +85,11 @@
 }
 
 .notificationRowIcon > * {
-  margin-left: 24px
+  margin-left: 24px;
 }
 
 .readIconWrapper {
-  flex-grow: 1
+  flex-grow: 1;
 }
 
 .unreadIcon {
@@ -118,7 +120,7 @@
 }
 
 .notificationBody {
-  margin: 0
+  margin: 0;
 }
 
 .notificationSubtitle {
@@ -142,4 +144,4 @@
   height: 9px;
   background-color: var(--spring);
   border-radius: 50%;
-}
+}

packages/admin-ui/src/components/NotificationCenter/NotificationRow.jsx

@@ -12,37 +12,36 @@ import classes from './NotificationCenter.module.css'
 const types = {
   transaction: {
     display: 'Transactions',
-    icon: <Transaction height={16} width={16} />
+    icon: <Transaction height={16} width={16} />,
   },
   highValueTransaction: {
     display: 'Transactions',
-    icon: <Transaction height={16} width={16} />
+    icon: <Transaction height={16} width={16} />,
   },
   fiatBalance: {
     display: 'Maintenance',
-    icon: <Wrench height={16} width={16} />
+    icon: <Wrench height={16} width={16} />,
   },
   cryptoBalance: {
     display: 'Maintenance',
-    icon: <Wrench height={16} width={16} />
+    icon: <Wrench height={16} width={16} />,
   },
   compliance: {
     display: 'Compliance',
-    icon: <WarningIcon height={16} width={16} />
+    icon: <WarningIcon height={16} width={16} />,
   },
-  error: { display: 'Error', icon: <WarningIcon height={16} width={16} /> }
+  error: { display: 'Error', icon: <WarningIcon height={16} width={16} /> },
 }
 
 const NotificationRow = ({
   id,
   type,
-  detail,
   message,
   deviceName,
   created,
   read,
   valid,
-  toggleClear
+  toggleClear,
 }) => {
   const typeDisplay = R.path([type, 'display'])(types) ?? null
   const icon = R.path([type, 'icon'])(types) ?? (
@@ -50,7 +49,7 @@ const NotificationRow = ({
   )
   const age = prettyMs(new Date().getTime() - new Date(created).getTime(), {
     compact: true,
-    verbose: true
+    verbose: true,
   })
   const notificationTitle =
     typeDisplay && deviceName
@@ -61,13 +60,13 @@ const NotificationRow = ({
 
   const iconClass = {
     [classes.readIcon]: read,
-    [classes.unreadIcon]: !read
+    [classes.unreadIcon]: !read,
   }
   return (
     <div
       className={classnames(
         classes.notificationRow,
-        !read && valid ? classes.unread : ''
+        !read && valid ? classes.unread : '',
       )}>
       <div className={classes.notificationRowIcon}>
         <div>{icon}</div>

packages/admin-ui/src/components/NotificationCenter/index.js

@@ -1,2 +1,3 @@
 import NotificationCenter from './NotificationCenter'
+
 export default NotificationCenter