🐛 Repair the UI regressions from the MUI 9 upgrade

src/components/Loader.tsx

@@ -6,7 +6,7 @@ const Loader: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Stack alignItems="center" justifyContent="center" sx={{ m: 10 }}>
+    <Stack sx={{ alignItems: 'center', justifyContent: 'center', m: 10 }}>
       <CircularProgress size="3rem" />
       <Typography component="span" sx={{ pt: 2 }} variant="h5">
         {t('common.loading')}

src/components/ProtectedRoute.tsx

@@ -1,13 +1,13 @@
 import { Container, Typography } from '@mui/material'
-import { FC } from 'react'
+import { FC, ReactElement } from 'react'
 import { Navigate, RouteProps } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { Roles } from '../contexts/AuthContext'
 import useAuth from '../contexts/useAuth'
 
 type Props = RouteProps & {
   role: Roles
-  outlet: JSX.Element
+  outlet: ReactElement
 }
 
 const ProtectedRoute: FC<Props> = ({ role, outlet }) => {

src/components/common/Modal.tsx

@@ -36,7 +36,7 @@ const Modal: FC<Props> = ({
   return (
     <Dialog fullWidth={fullWidth} maxWidth={maxWidth} open={open}>
       <DialogTitle>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           {title}
           <IconButton aria-label={t('action.close')} onClick={onClose}>
             <Close />

src/components/message/MessageFooter.tsx

@@ -23,12 +23,12 @@ const formatDate = (dateString: string): string => {
 
 const MessageFooter: FC<Props> = ({ message }) => {
   return (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" sx={{ mt: 2, pr: 2.5 }}>
-      <Stack alignItems="center" direction="row" spacing={0.5}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mt: 2, pr: 2.5 }}>
+      <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
         <FontAwesomeIcon aria-hidden="true" icon={faClock} size="2xs" color={colors.grey[600]} />
         <Typography variant="caption">{formatDate(message.createdAt)}</Typography>
       </Stack>
-      <Stack alignItems="center" direction="row" spacing="0.5">
+      <Stack direction="row" spacing="0.5" sx={{ alignItems: 'center' }}>
         <Icon icon={faTelegram} url={message.telegramUrl} label="Telegram" />
         <Icon icon={faMastodon} url={message.mastodonUrl} label="Mastodon" />
         <Icon icon={faBluesky} url={message.blueskyUrl} label="Bluesky" />

src/components/message/MessageForm.tsx

@@ -133,8 +133,8 @@ const MessageForm: FC<Props> = ({ ticker }) => {
             disabled={!ticker.active}
           />
         </FormGroup>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
-          <Box display="flex">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex' }}>
             <Button disabled={disabled} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
               {t('action.send')}
             </Button>

src/components/settings/InactiveSettingsCard.tsx

@@ -37,66 +37,66 @@ const InactiveSettingsCard: FC = () => {
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t('title.inactive')}
           </Typography>
           <Button data-testid="inactivesetting-edit" onClick={handleFormOpen} size="small" startIcon={<FontAwesomeIcon icon={faPencil} />}>
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t('status.description')}
         </Typography>
       </CardContent>
       <Divider variant="middle" />
       <CardContent>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.headline')}
           </Typography>
           <Typography>{setting.value.headline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.subheadline')}
           </Typography>
           <Typography>{setting.value.subHeadline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.description')}
           </Typography>
           <Typography>{setting.value.description}</Typography>
         </Box>
         <Grid container>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('common.author')}
               </Typography>
               <Typography>{setting.value.author}</Typography>
             </Box>
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('integrations.homepage')}
               </Typography>
               <Typography>{setting.value.homepage}</Typography>
             </Box>
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('user.email')}
               </Typography>
               <Typography>{setting.value.email}</Typography>
             </Box>
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('social.twitter')}
               </Typography>
               <Typography>{setting.value.twitter}</Typography>

src/components/settings/SettingsCard.tsx

@@ -36,15 +36,15 @@ function SettingsCard<T>({ title, description, editTestId, queryKey, errorMessag
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t(title)}
           </Typography>
           <Button data-testid={editTestId} onClick={() => setFormOpen(true)} size="small" startIcon={<FontAwesomeIcon icon={faPencil} />}>
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t(description)}
         </Typography>
       </CardContent>

src/components/settings/SignalGroupSettingsCard.tsx

@@ -24,19 +24,19 @@ const SignalGroupSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.apiUrl')}
             </Typography>
             <Typography>{data.setting.value.apiUrl || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.account')}
             </Typography>
             <Typography>{data.setting.value.account || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.avatar')}
             </Typography>
             <Typography>{data.setting.value.avatar || '—'}</Typography>

src/components/settings/TelegramSettingsCard.tsx

@@ -24,13 +24,13 @@ const TelegramSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.botUsername')}
             </Typography>
             <Typography>{data.setting.value.botUsername || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.token')}
             </Typography>
             <Typography>{data.setting.value.token || '—'}</Typography>

src/components/ticker/BlueskyCard.tsx

@@ -47,18 +47,18 @@ const BlueskyCard: FC<Props> = ({ ticker }) => {
   const details = bluesky.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {bluesky.handle}
           </Link>
           <CopyToClipboard text={profileUrl} />
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.bluesky.replyRestriction')}
         </Typography>
         <Typography variant="body2">{replyRestrictionLabel(bluesky.replyRestriction)}</Typography>

src/components/ticker/IntegrationCard.tsx

@@ -83,13 +83,13 @@ const IntegrationCard: FC<IntegrationCardProps> = ({
     <>
       <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <CardContent>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
             <Typography component="h5" variant="h5">
               <FontAwesomeIcon aria-hidden="true" icon={icon} /> {title}
             </Typography>
             <Chip label={t(`integrations.integrationStatus.${status}`)} color={color} size="small" variant="outlined" />
           </Stack>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
             {description}
           </Typography>
         </CardContent>

src/components/ticker/LocationSearch.tsx

@@ -28,7 +28,7 @@ interface Props {
 const LocationSearch: FC<Props> = ({ callback }) => {
   const { t } = useTranslation()
   const [options, setOptions] = useState<SearchResult[]>([])
-  const previousController = useRef<AbortController>()
+  const previousController = useRef<AbortController | null>(null)
 
   const handleInputChange = (_: React.SyntheticEvent, value: string) => {
     if (previousController.current) {

src/components/ticker/MastodonCard.tsx

@@ -33,10 +33,10 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
   const details = mastodon.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {profileHandle}
           </Link>

src/components/ticker/SignalGroupAdminForm.tsx

@@ -63,12 +63,14 @@ const SignalGroupAdminForm: FC<Props> = ({ callback, ticker, setSubmitting }) =>
               required
               helperText={errors.number ? errors.number?.message : null}
               error={errors.number ? true : false}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <FontAwesomeIcon icon={faPhone} />
-                  </InputAdornment>
-                ),
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FontAwesomeIcon icon={faPhone} />
+                    </InputAdornment>
+                  ),
+                },
               }}
             />
           </FormGroup>

src/components/ticker/SignalGroupCard.tsx

@@ -91,10 +91,10 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
   const details = signalGroup.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.signal.inviteLink')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={signalGroup.groupInviteLink} rel="noreferrer" target="_blank" variant="body2">
             {ticker.title}
           </Link>

src/components/ticker/TelegramCard.tsx

@@ -34,21 +34,21 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
   const details = telegram.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.channel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={channelUrl} rel="noreferrer" target="_blank" variant="body2">
             {telegram.channelName}
           </Link>
           <CopyToClipboard text={channelUrl} />
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.botLabel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
           <Typography variant="body2">{telegram.botUsername}</Typography>
           <Tooltip title={t('integrations.telegram.botHint')}>
             <FontAwesomeIcon icon={faCircleInfo} size="sm" style={{ color: 'gray', cursor: 'help' }} />

src/components/ticker/Ticker.tsx

@@ -25,7 +25,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
   const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
 
   const headline = () => (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
       <Typography component="h2" gutterBottom variant="h3">
         {t('title.ticker')}
       </Typography>
@@ -67,7 +67,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
           <Alert severity="warning">{t('tickers.disabled')}</Alert>
         </Grid>
       ) : null}
-      <Grid display={{ xs: 'none', md: 'block' }} size={{ md: 4, xs: 12 }}>
+      <Grid size={{ md: 4, xs: 12 }} sx={{ display: { xs: 'none', md: 'block' } }}>
         <TickerCard ticker={ticker} />
         {user?.roles.includes('admin') ? (
           <>

src/components/ticker/TickerCard.tsx

@@ -24,9 +24,9 @@ const TickerCard: FC<Props> = ({ ticker }) => {
   return (
     <Card>
       <CardContent>
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <FontAwesomeIcon aria-hidden="true" icon={faCircleInfo} />
-          <Typography component="h5" variant="h5" flexGrow={1}>
+          <Typography component="h5" variant="h5" sx={{ flexGrow: 1 }}>
             {t('common.info')}
           </Typography>
         </Stack>
@@ -36,7 +36,7 @@ const TickerCard: FC<Props> = ({ ticker }) => {
         </Stack>
         <Chip icon={icon} label={status} variant="outlined" sx={{ mt: 2 }} size="small" color={color} />
         <Divider sx={{ mt: 2 }} />
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2 }}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', mt: 2 }}>
           <Campaign />
           <Typography component="h6" variant="h6">
             {t('title.integrations')}
@@ -57,9 +57,9 @@ const Integrations = ({ ticker }: { ticker: Ticker }) => {
         <TickerProperty
           label="Websites"
           value={ticker.websites.map(website => (
-            <Stack key={website.origin} direction="row" alignItems="center" spacing={0.5}>
+            <Stack key={website.origin} direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
               <FontAwesomeIcon aria-hidden="true" icon={faGlobeEurope} color={grey[800]} />
-              <Typography variant="body2" flexGrow={1}>
+              <Typography variant="body2" sx={{ flexGrow: 1 }}>
                 <Link href={website.origin} target="_blank" rel="noopener noreferrer">
                   {website.origin.replace(/(^\w+:|^)\/\//, '')}
                 </Link>
@@ -122,13 +122,13 @@ const IntegrationChip = ({ active, title, link }: { active: boolean; title: stri
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center" spacing={0.5}>
+    <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
       <Tooltip title={t(active ? 'status.active' : 'status.inactive')} arrow placement="top">
         <span>
           <FontAwesomeIcon aria-hidden="true" icon={active ? faToggleOn : faToggleOff} color={grey[800]} />
         </span>
       </Tooltip>
-      <Typography variant="body2" flexGrow={1}>
+      <Typography variant="body2" sx={{ flexGrow: 1 }}>
         <Link href={link} target="_blank" rel="noopener noreferrer">
           {title}
         </Link>

src/components/ticker/TickerListFilter.tsx

@@ -16,7 +16,7 @@ const TickerListFilter: FC<Props> = ({ params, onTitleChange, onOriginChange, on
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center">
+    <Stack direction="row" sx={{ alignItems: 'center' }}>
       <Box sx={{ px: 1 }}>
         <FontAwesomeIcon aria-hidden="true" icon={faFilter} />
       </Box>