nossila · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026
@@ -3,13 +3,12 @@ import { FC } from 'react'
 import { useLogout } from '@baseapp-frontend/authentication'
 
 import { ButtonBase, MenuItem } from '@mui/material'
+import { useIntl } from 'react-intl'
 
 import { LogoutItemProps } from './types'
 
-const LogoutItem: FC<LogoutItemProps> = ({
-  handlePopoverOnClose,
-  logoutButtonLabel = 'Logout',
-}) => {
+const LogoutItem: FC<LogoutItemProps> = ({ handlePopoverOnClose, logoutButtonLabel }) => {
+  const intl = useIntl()
   const { logout } = useLogout()
 
   return (
@@ -23,7 +22,11 @@ const LogoutItem: FC<LogoutItemProps> = ({
       }}
       sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }}
     >
-      {logoutButtonLabel}
+      {logoutButtonLabel ??
+        intl.formatMessage({
+          id: 'navigations.accountPopover.logout',
+          defaultMessage: 'Logout',
+        })}
     </MenuItem>
   )
 }

@@ -7,6 +7,8 @@ import { ClickableAvatar } from '@baseapp-frontend/design-system/components/web/
 import { Popover } from '@baseapp-frontend/design-system/components/web/popovers'
 import { usePopover } from '@baseapp-frontend/design-system/hooks/common'
 
+import { useIntl } from 'react-intl'
+
 // TODO: review importing components directly from another module
 import {
   AddProfileMenuItem as DefaultAddProfileMenuItem,
@@ -34,6 +36,7 @@ const AccountPopover: FC<AccountPopoverProps> = ({
   AddProfileMenuItemProps = {},
   LogoutItemProps = {},
 }) => {
+  const intl = useIntl()
   const { currentProfile: profile } = useCurrentProfile()
 
   const popover = usePopover()
@@ -66,7 +69,10 @@ const AccountPopover: FC<AccountPopoverProps> = ({
       <ClickableAvatar
         color="secondary"
         src={profile?.image ?? ''}
-        alt="User avatar"
+        alt={intl.formatMessage({
+          id: 'navigations.accountPopover.avatarAlt',
+          defaultMessage: 'User avatar',
+        })}
         onClick={popover.onOpen}
         isOpen={!!popover.open}
       />

@@ -11,6 +11,7 @@ import { useUISettings } from '@baseapp-frontend/design-system/hooks/web'
 import { joinWithSeparator } from '@baseapp-frontend/utils'
 
 import { Box, Typography } from '@mui/material'
+import { useIntl } from 'react-intl'
 
 import {
   AddProfileMenuItem as DefaultAddProfileMenuItem,
@@ -32,6 +33,7 @@ import {
 import { VerticalFooterProps } from './types'
 
 const VerticalFooter: FC<VerticalFooterProps> = ({ AccountPopoverProps = {} }) => {
+  const intl = useIntl()
   const { currentProfile: profile } = useCurrentProfile()
   const { user } = useJWTUser()
   const popover = usePopover()
@@ -99,7 +101,10 @@ const VerticalFooter: FC<VerticalFooterProps> = ({ AccountPopoverProps = {} }) =
             width={AVATAR_SIZE}
             height={AVATAR_SIZE}
             src={profile?.image ?? ''}
-            alt="Profile avatar"
+            alt={intl.formatMessage({
+              id: 'navigations.verticalFooter.avatarAlt',
+              defaultMessage: 'Profile avatar',
+            })}
             color="secondary"
             sx={{
               border: (theme) => `2px solid ${theme.palette.divider}`,

@@ -8,6 +8,7 @@ import { JWTContent } from '@baseapp-frontend/utils'
 
 import { Button, Divider } from '@mui/material'
 import { Box } from '@mui/system'
+import { useIntl } from 'react-intl'
 
 import AccountPopover from './AccountPopover'
 import VerticalFooter from './VerticalFooter'
@@ -18,15 +19,22 @@ const AccountMenu: FC<AccountMenuProps> = ({
   AccountPopoverProps = {},
   additionalComponent,
   children,
-  loginButtonLabel = 'Login',
+  loginButtonLabel: loginButtonLabelProp,
   loginButtonProps,
   onLoginClick,
   onRegisterClick,
-  registerButtonLabel = 'Register',
+  registerButtonLabel: registerButtonLabelProp,
   registerButtonProps,
   vertical = false,
 }) => {
+  const intl = useIntl()
   const { user } = useJWTUser<BaseUser & JWTContent>()
+  const loginButtonLabel =
+    loginButtonLabelProp ??
+    intl.formatMessage({ id: 'navigations.accountMenu.login', defaultMessage: 'Login' })
+  const registerButtonLabel =
+    registerButtonLabelProp ??
+    intl.formatMessage({ id: 'navigations.accountMenu.register', defaultMessage: 'Register' })
   const { settings } = useUISettings()
   const isNavMini = useMemo(() => settings.themeLayout === 'mini', [settings.themeLayout])
 

@@ -3,6 +3,7 @@ import { FC } from 'react'
 import { NotificationBellIcon as DefaultNotificationBellIcon } from '@baseapp-frontend/design-system/components/web/icons'
 
 import { Box, Typography } from '@mui/material'
+import { FormattedMessage } from 'react-intl'
 
 import { Container as DefaultContainer } from './styled'
 import { EmptyStateProps } from './types'
@@ -18,9 +19,17 @@ const EmptyState: FC<EmptyStateProps> = ({
       {...NotificationBellIconProps}
     />
     <Box textAlign="center">
-      <Typography variant="subtitle2">You don’t have notifications.</Typography>
+      <Typography variant="subtitle2">
+        <FormattedMessage
+          id="notifications.emptyState.title"
+          defaultMessage="You don’t have notifications."
+        />
+      </Typography>
       <Typography variant="caption" color="text.secondary">
-        Your future notifications will be shown here.
+        <FormattedMessage
+          id="notifications.emptyState.description"
+          defaultMessage="Your future notifications will be shown here."
+        />
       </Typography>
     </Box>
   </Container>

@@ -1,7 +1,9 @@
 import { LoadingState as BaseAppLoadingState } from '@baseapp-frontend/design-system/components/web/displays'
 
 import { Box, Typography } from '@mui/material'
+import { FormattedMessage } from 'react-intl'
 
+import { NOTIFICATIONS_LIST_MESSAGES } from '../constants'
 import { HeaderContainer } from '../styled'
 
 const LoadingState = () => (
@@ -12,7 +14,9 @@ const LoadingState = () => (
     sx={{ backgroundColor: 'common.white' }}
   >
     <HeaderContainer>
-      <Typography variant="h6">Notifications</Typography>
+      <Typography variant="h6">
+        <FormattedMessage {...NOTIFICATIONS_LIST_MESSAGES.title} />
+      </Typography>
     </HeaderContainer>
     <BaseAppLoadingState />
   </Box>

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
 import LoadingButton from '@mui/lab/LoadingButton'
+import { FormattedMessage } from 'react-intl'
 
 import { useNotificationsMarkAllAsRead } from '../../../common'
 import { MarkAllAsReadButtonProps } from './types'
@@ -20,7 +21,7 @@ const MarkAllAsReadButton: FC<MarkAllAsReadButtonProps> = ({ refetch }) => {
 
   return (
     <LoadingButton color="primary" onClick={markAsRead} loading={isLoading}>
-      Mark all as read
+      <FormattedMessage id="notifications.list.markAllAsRead" defaultMessage="Mark all as read" />
     </LoadingButton>
   )
 }

@@ -2,6 +2,8 @@ import { FC } from 'react'
 
 import { formatRelativeTime } from '@baseapp-frontend/utils'
 
+import { useIntl } from 'react-intl'
+
 import DefaultNotificationAvatar from '../Notification/NotificationAvatar'
 import DefaultNotificationBody from '../Notification/NotificationBody'
 import DefaultNotificationHeader from '../Notification/NotificationHeader'
@@ -22,8 +24,16 @@ const CommentCreated: FC<CommentCreatedProps> = ({
   NotificationBody = DefaultNotificationBody,
   NotificationBodyProps = {},
 }) => {
-  // eslint-disable-next-line no-underscore-dangle
-  const message = `commented in your ${notification.target?.__typename?.toLowerCase?.() ?? ''}`
+  const intl = useIntl()
+  const message = intl.formatMessage(
+    {
+      id: 'notifications.commentCreated.message',
+      defaultMessage:
+        'commented in {target, select, comment {your comment} contentpost {your contentpost} file {your file} page {your page} other {your {target}}}',
+    },
+    // eslint-disable-next-line no-underscore-dangle
+    { target: notification.target?.__typename?.toLowerCase?.() ?? '' },
+  )
 
   return (
     <NotificationRoot>

@@ -2,6 +2,8 @@ import { FC } from 'react'
 
 import { formatRelativeTime } from '@baseapp-frontend/utils'
 
+import { useIntl } from 'react-intl'
+
 import DefaultNotificationAvatar from '../Notification/NotificationAvatar'
 import DefaultNotificationBody from '../Notification/NotificationBody'
 import DefaultNotificationHeader from '../Notification/NotificationHeader'
@@ -22,8 +24,11 @@ const CommentReply: FC<CommentReplyProps> = ({
   NotificationBody = DefaultNotificationBody,
   NotificationBodyProps = {},
 }) => {
-  // eslint-disable-next-line no-underscore-dangle
-  const message = `replied to your comment`
+  const intl = useIntl()
+  const message = intl.formatMessage({
+    id: 'notifications.commentReply.message',
+    defaultMessage: 'replied to your comment',
+  })
 
   return (
     <NotificationRoot>

@@ -2,15 +2,27 @@ import { FC } from 'react'
 
 import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars'
 
+import { useIntl } from 'react-intl'
+
 import { NotificationAvatarProps } from './types'
 
-const NotificationAvatar: FC<NotificationAvatarProps> = ({ actorAvatar, actorName }) => (
-  <AvatarWithPlaceholder
-    width={40}
-    height={40}
-    alt={actorName ?? `Notification's user avatar`}
-    src={actorAvatar ?? ''}
-  />
-)
+const NotificationAvatar: FC<NotificationAvatarProps> = ({ actorAvatar, actorName }) => {
+  const intl = useIntl()
+
+  return (
+    <AvatarWithPlaceholder
+      width={40}
+      height={40}
+      alt={
+        actorName ??
+        intl.formatMessage({
+          id: 'notifications.item.avatarAlt',
+          defaultMessage: "Notification's user avatar",
+        })
+      }
+      src={actorAvatar ?? ''}
+    />
+  )
+}
 
 export default NotificationAvatar
@@ -2,6 +2,8 @@ import { FC } from 'react'
 
 import { formatRelativeTime } from '@baseapp-frontend/utils'
 
+import { useIntl } from 'react-intl'
+
 import DefaultNotificationAvatar from '../Notification/NotificationAvatar'
 import DefaultNotificationHeader from '../Notification/NotificationHeader'
 import {
@@ -19,8 +21,16 @@ const ReactionCreated: FC<ReactionCreatedProps> = ({
   NotificationHeader = DefaultNotificationHeader,
   NotificationHeaderProps = {},
 }) => {
-  // eslint-disable-next-line no-underscore-dangle
-  const message = `liked your ${notification.target?.__typename?.toLowerCase?.() ?? ''}`
+  const intl = useIntl()
+  const message = intl.formatMessage(
+    {
+      id: 'notifications.reactionCreated.message',
+      defaultMessage:
+        'liked {target, select, comment {your comment} contentpost {your contentpost} file {your file} page {your page} other {your {target}}}',
+    },
+    // eslint-disable-next-line no-underscore-dangle
+    { target: notification.target?.__typename?.toLowerCase?.() ?? '' },
+  )
 
   return (
     <NotificationRoot>

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl'
+
+export const NOTIFICATIONS_LIST_MESSAGES = defineMessages({
+  title: {
+    id: 'notifications.list.title',
+    defaultMessage: 'Notifications',
+  },
+})
@@ -6,6 +6,7 @@ import { CloseIcon } from '@baseapp-frontend/design-system/components/web/icons'
 import { useResponsive } from '@baseapp-frontend/design-system/hooks/web'
 
 import { Box, Divider, Typography } from '@mui/material'
+import { useIntl } from 'react-intl'
 import { useLazyLoadQuery, usePaginationFragment } from 'react-relay'
 import { Virtuoso } from 'react-virtuoso'
 
@@ -19,6 +20,7 @@ import {
 import DefaultEmptyState from './EmptyState'
 import MarkAllAsReadButton from './MarkAllAsReadButton'
 import DefaultNotificationItem from './NotificationItem'
+import { NOTIFICATIONS_LIST_MESSAGES } from './constants'
 import {
   HeaderContainer as DefaultHeaderContainer,
   ListContainer as DefaultListContainer,
@@ -37,6 +39,7 @@ const NotificationsList: FC<NotificationsListProps> = ({
   HeaderContainer = DefaultHeaderContainer,
   ListContainer = DefaultListContainer,
 }) => {
+  const intl = useIntl()
   const smDown = useResponsive('down', 'sm')
 
   const options = { count: 10 }
@@ -64,7 +67,9 @@ const NotificationsList: FC<NotificationsListProps> = ({
       return (
         <>
           <Divider>
-            <Typography variant="body2">Older</Typography>
+            <Typography variant="body2">
+              {intl.formatMessage({ id: 'notifications.list.older', defaultMessage: 'Older' })}
+            </Typography>
           </Divider>
           <NotificationItem
             key={`notification-${notification.id}`}
@@ -127,13 +132,21 @@ const NotificationsList: FC<NotificationsListProps> = ({
   return (
     <Box display="grid" gridTemplateRows="min-content 1fr" height="100%">
       <HeaderContainer>
-        <Typography variant="h6">Notifications</Typography>
+        <Typography variant="h6">
+          {intl.formatMessage(NOTIFICATIONS_LIST_MESSAGES.title)}
+        </Typography>
         <Box display="grid" gridTemplateColumns="max-content min-content">
           {!!data?.notificationsUnreadCount && (
             <MarkAllAsReadButton refetch={refetchNotifications} />
           )}
           {smDown && (
-            <IconButton onClick={() => setIsDrawerOpened(false)} aria-label="close notifications">
+            <IconButton
+              onClick={() => setIsDrawerOpened(false)}
+              aria-label={intl.formatMessage({
+                id: 'notifications.list.closeAriaLabel',
+                defaultMessage: 'close notifications',
+              })}
+            >
               <CloseIcon />
             </IconButton>
           )}

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl'
+
+export const NOTIFICATIONS_POPOVER_MESSAGES = defineMessages({
+  label: {
+    id: 'notifications.popover.label',
+    defaultMessage: 'Notifications',
+  },
+  ariaLabel: {
+    id: 'notifications.popover.ariaLabel',
+    defaultMessage: 'see notifications',
+  },
+})