fix ts and lint errors

www/src/components/account/AccountAttributes.tsx

@@ -77,7 +77,6 @@ function DomainMappingFunc({
               onClick={() => {
                 setConfirm(true)
               }}
-              // @ts-expect-error
               hue="lighter"
             />
           </Flex>

www/src/components/account/CreateRole.tsx

@@ -71,7 +71,6 @@ export function CreateRole({ q }: any) {
         header="Create role"
         open={createModalVisible}
         onClose={() => resetAndClose()}
-        marginVertical={16}
         size="large"
         actions={
           <Actions

www/src/components/account/Domains.tsx

@@ -145,7 +145,6 @@ function AccessPolicy({ domain: { id, accessPolicy }, edit, setEdit }: any) {
       header="Edit access policy"
       open={edit}
       onClose={() => setEdit(false)}
-      width="100%"
       actions={
         <Actions
           cancel={() => setEdit(false)}

www/src/components/account/InviteUser.tsx

@@ -86,7 +86,7 @@ export function InviteUser({ refetch }: { refetch?: (() => void) | null }) {
         header="Invite users"
         open={showInviteModal}
         onClose={() => resetAndClose()}
-        width="100%"
+        size="auto"
         actions={
           invite ? (
             <Button onClick={() => resetAndClose()}>Done</Button>

www/src/components/account/billing/BillingBankCards.tsx

@@ -160,9 +160,7 @@ function AddPaymentMethodModal({
     >
       <PaymentForm
         formVariant={PaymentFormVariant.AddCard}
-        onClose={() => {
-          onClose()
-        }}
+        onClose={onClose}
       />
     </Modal>
   )

www/src/components/account/billing/BillingFeatureBlockModal.tsx

@@ -26,7 +26,6 @@ export default function BillingFeatureBlockModal({
 }: BillingFeatureBlockModalProps) {
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       header={
         <Header>
           <WarningIcon

www/src/components/account/billing/BillingStartTrialModal.tsx

@@ -48,7 +48,6 @@ function BillingStartTrialModal({
 
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       open={open}
       onClose={onClose}
       style={{ padding: 0 }}

www/src/components/account/billing/DelinquencyNotices.tsx

@@ -80,7 +80,7 @@ export function DelinquencyToast() {
 
   return (
     <Toast
-      severity="error"
+      severity="danger"
       marginBottom="medium"
       marginRight="xxxxlarge"
       closeTimeout="none"

www/src/components/account/billing/PaymentForm.tsx

@@ -128,7 +128,7 @@ function PaymentFormProvider({
   children,
 }: PropsWithChildren<{
   formVariant: PaymentFormVariant
-  onClose?: () => void
+  onClose?: Nullable<() => void>
 }>) {
   const initialFormState =
     formVariant === PaymentFormVariant.Upgrade

www/src/components/account/billing/StripeElements.tsx

@@ -24,7 +24,7 @@ export function StripeElements({
         appearance,
         mode: 'setup',
         currency: 'usd',
-      } satisfies StripeElementsOptions),
+      }) satisfies StripeElementsOptions,
     [appearance]
   )
 

www/src/components/account/invite/InviteUser.tsx

@@ -205,7 +205,7 @@ function InviteUserUnstyled({
       attributes: {
         email,
         inviteGroups: groupBindings.map(
-          (g) => ({ groupId: g.id } as BindingAttributes)
+          (g) => ({ groupId: g.id }) as BindingAttributes
         ),
         admin: isAdmin,
         serviceAccountId,

www/src/components/account/invite/InviteUserModal.tsx

@@ -40,7 +40,6 @@ function InviteUserModalUnstyled({
     <Modal
       open
       onClose={onClose}
-      style={{ padding: 0 }}
       size="large"
       header={header}
     >

www/src/components/account/utils.ts

@@ -16,8 +16,8 @@ export function hasRbac(user: CurrentUser, permission: Permission) {
   if (user.boundRoles != null) {
     const boundRoles = user.boundRoles.filter(notNil)
 
-    return boundRoles.some(({ permissions }) =>
-      permissions?.includes(permission)
+    return boundRoles.some(
+      ({ permissions }) => permissions?.includes(permission)
     )
   }
 

www/src/components/cluster/ClusterAppHealth.tsx

@@ -23,7 +23,7 @@ export default function ClusterAppHealth({
 
   return (
     <Chip
-      severity={healthy ? 'success' : 'error'}
+      severity={healthy ? 'success' : 'danger'}
       {...props}
     >
       {healthy ? 'Healthy' : 'Unhealthy'}

www/src/components/cluster/ClusterDependencyModal.tsx

@@ -85,11 +85,11 @@ export function ClusterDependencyModal({
         </>
       }
       size="large"
-      overflow="hidden"
     >
       <Flex
         direction="column"
         gap="xlarge"
+        overflow="hidden"
       >
         <Div subtitle2>Set up promotions</Div>
         {error && (

www/src/components/cluster/ClusterPromoteModal.tsx

@@ -128,11 +128,11 @@ function ClusterPromoteModalInternal({
           </>
         }
         size="large"
-        overflow="hidden"
       >
         <Flex
           direction="column"
           gap="xlarge"
+          overflow="hidden"
         >
           <Div subtitle2>
             {finished ? 'Cluster promotion complete' : 'Cluster promotion'}

www/src/components/cluster/UpgradeNeededModal.tsx

@@ -32,7 +32,6 @@ function UpgradeNeededModal({
 
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       header={
         <Header>
           <WarningIcon

www/src/components/layout/Overlay.tsx

@@ -31,6 +31,7 @@ const getTransitionProps = (isOpen: boolean) => ({
       },
 })
 
+// @ts-ignore, see https://github.com/pmndrs/react-spring/issues/1515
 const OverlayBG = styled(AnimatedDiv)(({ theme }) => ({
   position: 'absolute',
   top: 0,

www/src/components/overview/CreateClusterModal.tsx

@@ -366,7 +366,6 @@ function CreateClusterModal({ open, onClose }): ReactElement {
 
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       header={<Header>Create cluster</Header>}
       open={open}
       onClose={() => {

www/src/components/overview/clusters/ClusterHealth.tsx

@@ -32,7 +32,7 @@ export default function ClusterHealth({
   return (
     <Flex gap="xsmall">
       <Chip
-        severity={pinged ? (healthy ? 'success' : 'error') : 'warning'}
+        severity={pinged ? (healthy ? 'success' : 'danger') : 'warning'}
         size={size}
         hue={hue}
       >

www/src/components/profile/AccessTokens.tsx

@@ -129,6 +129,7 @@ function TokenMetrics({ token }: any) {
     <Flex
       direction="column"
       gap="large"
+      overflow="hidden"
     >
       <Span
         body2
@@ -215,10 +216,8 @@ function AccessToken({ token, first, last }: any) {
             />
             <Modal
               open={graph}
-              size="large"
-              style={{ padding: 0 }}
-              maxWidth="900px"
-              width="900px"
+              size="custom"
+              css={{ width: '900px' }}
               onClose={() => setGraph(false)}
             >
               <TokenMetrics token={token} />

www/src/components/repository/RepositoryPackages.tsx

@@ -61,8 +61,8 @@ export default function RepositoryPackages() {
   const tabStateRef = useRef<any>(null)
   const pathPrefix = `/repository/${repository.name}/packages`
 
-  const currentTab = DIRECTORY.find((tab) =>
-    pathname?.startsWith(`${pathPrefix}${tab.path}`)
+  const currentTab = DIRECTORY.find(
+    (tab) => pathname?.startsWith(`${pathPrefix}${tab.path}`)
   )
 
   return (

www/src/components/shell/OAuthCallback.tsx

@@ -31,7 +31,7 @@ const toOnboardingContext = (
       authUrls: authUrlData?.scmAuthorization as Array<AuthorizationUrl>,
       token,
     },
-  } as ContextProps)
+  }) as ContextProps
 
 function OAuthCallback({ provider }: any) {
   const navigate = useNavigate()

www/src/components/shell/onboarding/checklist/Checklist.tsx

@@ -167,7 +167,7 @@ export function OnboardingChecklist() {
     >
       {error && (
         <Toast
-          severity="error"
+          severity="danger"
           marginBottom="medium"
           marginRight="xxxxlarge"
         >

www/src/components/shell/onboarding/sections/shell/ShellStatus.tsx

@@ -25,7 +25,7 @@ function StatusChip({ loading, error }: StatusChipProps) {
       loading={loading && !error}
       backgroundColor="fill-two"
       borderColor="border-fill-two"
-      severity={error ? 'error' : loading ? 'info' : 'success'}
+      severity={error ? 'danger' : loading ? 'info' : 'success'}
     >
       {error ? 'Error' : loading ? 'Running' : 'Success'}
     </Chip>

www/src/components/shell/terminal/actionbar/options/DeleteShellModal.tsx

@@ -9,6 +9,8 @@ import {
 import { A, Button, Flex, Span } from 'honorable'
 import { useCallback, useContext, useState } from 'react'
 
+import { useTheme } from 'styled-components'
+
 import { ImpersonationContext } from '../../../context/impersonation'
 
 import {
@@ -17,6 +19,7 @@ import {
 } from '../../../queries'
 
 function DeleteDemoModal({ onClose }) {
+  const theme = useTheme()
   const [open, setOpen] = useState(true)
   const close = useCallback(() => {
     setOpen(false)
@@ -32,8 +35,7 @@ function DeleteDemoModal({ onClose }) {
       size="large"
       open={open}
       onClose={close}
-      style={{ padding: 0 }}
-      borderTop="4px solid border-warning"
+      css={{ borderTop: `4px solid ${theme.colors['border-warning']}` }}
     >
       <Flex
         direction="column"
@@ -85,6 +87,7 @@ function DeleteDemoModal({ onClose }) {
 }
 
 function DeleteShellModal({ onClose }) {
+  const theme = useTheme()
   const {
     user: { demoing },
   } = useContext(ImpersonationContext)
@@ -116,8 +119,7 @@ function DeleteShellModal({ onClose }) {
       size="large"
       open={open}
       onClose={close}
-      style={{ padding: 0 }}
-      borderTop="4px solid border-warning"
+      css={{ borderTop: `4px solid ${theme.colors['border-warning']}` }}
     >
       <Flex
         direction="column"

www/src/components/shell/terminal/actionbar/options/EditCloudCredentialsModal.tsx

@@ -80,7 +80,6 @@ function EditCloudCredentialsModal({ onClose }) {
         />
       )}
       <Modal
-        BackdropProps={{ zIndex: 20 }}
         size="large"
         open={open}
         onClose={close}

www/src/components/users/DeviceLoginNotif.tsx

@@ -23,8 +23,8 @@ export function DeviceLoginNotif() {
       header="Device Login Successful"
       open={open}
       onClose={() => setOpen(false)}
-      width="512px"
-      portal
+      size="custom"
+      css={{ width: '512px' }}
     >
       The device you requested on should now have access.
     </Modal>

www/src/components/users/stripe.css

@@ -5,7 +5,8 @@
   padding: 10px 14px;
   font-size: 1em;
   font-family: 'Source Code Pro', monospace;
-  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+  box-shadow:
+    rgba(50, 50, 93, 0.14902) 0px 1px 3px,
     rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
   border: 0;
   outline: 0;
@@ -18,7 +19,8 @@
 }
 
 .StripeElement--focus {
-  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+  box-shadow:
+    rgba(50, 50, 93, 0.109804) 0px 4px 6px,
     rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
   -webkit-transition: all 150ms ease;
   transition: all 150ms ease;

www/src/components/utils/Confirm.tsx

@@ -33,7 +33,8 @@ export function Confirm({
       header={title}
       open={open}
       onClose={close}
-      width="512px"
+      css={{ width: '512px' }}
+      size="custom"
       actions={
         <>
           <Button

www/src/components/utils/InstallAppButton.tsx

@@ -5,10 +5,18 @@ import {
   TabList,
   TabPanel,
 } from '@pluralsh/design-system'
-import { Button, Div, Flex, H2, ModalBaseProps, P } from 'honorable'
+import { Key } from '@react-types/shared'
+import { Button, Div, Flex, H2, P } from 'honorable'
 import isEmpty from 'lodash/isEmpty'
 import upperFirst from 'lodash/upperFirst'
-import { Key, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ComponentProps,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Link } from 'react-router-dom'
 
 import ClustersContext from '../../contexts/ClustersContext'
@@ -218,7 +226,7 @@ function InstallModal({
   ...props
 }: Omit<InstallAppButtonProps, 'loading'> & {
   clusters: Cluster[]
-} & ModalBaseProps) {
+} & ComponentProps<typeof Modal>) {
   const [clusterId, setClusterId] = useState<string | undefined>(
     !isEmpty(clusters) ? clusters[0].id : undefined
   )

www/src/contexts/AppContext.tsx

@@ -25,7 +25,7 @@ export function AppContextProvider({
   refetch,
 }: ContextProps) {
   const finalValue = useMemo(
-    () => ({ repository, refetch } as ContextProps),
+    () => ({ repository, refetch }) as ContextProps,
     [refetch, repository]
   )
 

www/src/hooks/usePaginatedQuery.ts

@@ -87,14 +87,14 @@ export function usePaginatedQueryHook<Q, V extends OperationVars, N>(
     () => void,
     <
       TSubscriptionData = Q,
-      TSubscriptionVariables extends Apollo.OperationVariables = V
+      TSubscriptionVariables extends Apollo.OperationVariables = V,
     >(
       options: Apollo.SubscribeToMoreOptions<
         Q,
         TSubscriptionVariables,
         TSubscriptionData
       >
-    ) => () => void
+    ) => () => void,
   ] = [
     [...previousEdgeNodes, ...(mapExistingNodes(workingResults) || [])],
     results.loading,