linting updates

Author: thinknoack

packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss

@@ -133,16 +133,17 @@
           color: #770D0D;
           background-color: #FFF5F5;
         }
+
         .accordionicon {
-          max-width: 22px;
+          max-width: 21px;
           height: auto;
           display: inline-block;
           border-radius: 4px;
           border: 1px solid #ccc;
           padding: 5px;
           margin-right: 5px;
           &.archiveicon {
-            max-width: 17px;
+            max-width: 18px;
           }
           &.saveicon {
             max-width: 23px;

packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx

@@ -8,18 +8,17 @@ import iconArchived from "../../assets/icon-archived.png"
 export const NotificationAccordion = ({ notification, onUpdate }) => {
   const { id, title, content, status, type, approval } = notification
 
-  // Check if content is not empty or null
   const hasContent = content && content.trim().length > 0
 
   const [isOpen, setIsOpen] = useState(false)
   const toggleAccordion = () => setIsOpen(!isOpen)
 
   const handleApprovalChange = (approvalStatus) => {
-    onUpdate(id, { approval: approvalStatus }) // Only update the approval field
+    onUpdate(id, { approval: approvalStatus })
   }
 
   const handleStatusChange = (newStatus) => {
-    onUpdate(id, { status: newStatus }) // Only update the status field
+    onUpdate(id, { status: newStatus })
   }
 
   return (
@@ -48,28 +47,26 @@ export const NotificationAccordion = ({ notification, onUpdate }) => {
         <div className={styles.actions}>
           {type === "approval" && (
             <>
-              {/* Approve Button */}
               {(approval === "not provided" || approval === "approved") && (
                 <button
                   className={`${styles.notificationapprove} ${
                     approval === "approved" ? styles.active : ""
                   }`}
                   onClick={() => handleApprovalChange("approved")}
-                  disabled={approval === "approved"} // Disable if already approved
+                  disabled={approval === "approved"}
                 >
                   <i className="fa fa-check"></i>{" "}
                   {approval !== "approved" ? "Approved" : "Approve"}
                 </button>
               )}
 
-              {/* Deny Button */}
               {(approval === "not provided" || approval === "denied") && (
                 <button
                   className={`${styles.notificationdeny} ${
                     approval === "denied" ? styles.active : ""
                   }`}
                   onClick={() => handleApprovalChange("denied")}
-                  disabled={approval === "denied"} // Disable if already denied
+                  disabled={approval === "denied"}
                 >
                   <i className="fa fa-times"></i>{" "}
                   {approval === "denied" ? "Denied" : "Deny"}

packages/openneuro-app/src/scripts/users/user-notifications-view.tsx

@@ -12,43 +12,40 @@ import iconSaved from "../../assets/icon-saved.png"
 import iconArchived from "../../assets/icon-archived.png"
 
 export const UserNotificationsView = ({ user }) => {
-  const tabsRef = useRef(null)
+  const tabsRef = useRef<HTMLUListElement | null>(null)
   const { tab = "unread" } = useParams()
   const navigate = useNavigate()
   const location = useLocation()
 
-  const [indicatorStyle, setIndicatorStyle] = useState({
+  // Explicitly define the type of indicatorStyle
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
     width: "0px",
     transform: "translateX(0px)",
     position: "absolute",
-    bottom: "0",
+    bottom: "0px",
     height: "2px",
     backgroundColor: "#000",
     transition: "transform 0.3s ease, width 0.3s ease",
   })
 
-  // To store the active tab's offset
-  const [activePosition, setActivePosition] = useState(0)
-
   // Update the indicator position based on active tab whenever location changes
   useEffect(() => {
     const activeLink = tabsRef.current?.querySelector(`.${styles.active}`)
     if (activeLink) {
-      const li = activeLink.parentElement
+      const li = activeLink.parentElement as HTMLElement
       if (li) {
-        setActivePosition(li.offsetLeft)
         setIndicatorStyle({
           width: `${li.offsetWidth}px`,
           transform: `translateX(${li.offsetLeft}px)`,
           position: "absolute",
-          bottom: "0",
+          bottom: "0px",
           height: "2px",
           backgroundColor: "#000",
           transition: "transform 0.3s ease, width 0.3s ease",
         })
       }
     }
-  }, [location]) // Re-run whenever the location changes
+  }, [location])
 
   // Redirect to default tab if no tab is specified
   useEffect(() => {