fix: block friends

src/entities/row-friends/ui/row-friends.tsx

@@ -1,15 +1,19 @@
 import { useWindowSize } from '@shared/lib/hooks/useWindowSize'
 import { cn } from '@shared/lib/merge-classes'
+import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC } from 'react'
 
+import { useTheme } from '@app/providers/theme-context'
+import { Theme } from '@app/providers/theme-context/lib/theme-context'
 import avatarLight from '@assets/avatar/default avatar light.svg'
-import noFriends from '@assets/ui/No Friends.svg'
+import { icons } from '@shared/lib/button-icons'
 
 interface IRowFriendsProps {
   avatars: Array<string | null> | undefined
 }
 
 const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
+  const { theme } = useTheme()
   const isMobile = useWindowSize(500)
 
   const maxCount = isMobile ? 3 : 5
@@ -25,14 +29,14 @@ const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
   const renderImg = (avatars: Array<string | null>): JSX.Element[] => {
     return avatars.map((avatar, i) => {
       return (
-        <img
+        <UserAvatar
           key={i}
           className={cn(
             'w-[50px] h-[50px] border-2 rounded-full border-White dark:border-grayBlue',
             avatars.length > 0 && imgClasses[i]
           )}
           src={avatar || avatarLight}
-          alt=''
+          isImgNotOnBackend={!avatar}
         />
       )
     })
@@ -49,7 +53,7 @@ const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
           )
         ) : (
           <div className='w-[50px] h-[50px] flex items-center justify-center border-2 rounded-full border-smokyWhite dark:border-cadet'>
-            <img src={noFriends} alt='' />
+            {theme === Theme.LIGHT ? icons.noFriendsBlack : icons.noFriendsWhite}
           </div>
         )}
       </div>

src/features/button-settings/ui/button-settings.tsx

@@ -8,6 +8,6 @@ const ButtonSettings: FC = () => {
   const clickHandler = (): void => {
     navigate(AppRoutes.SETTINGS)
   }
-  return <ButtonSetting icon='settingsWhite' onClick={clickHandler} />
+  return <ButtonSetting icon='settings' onClick={clickHandler} />
 }
 export { ButtonSettings }

src/shared/lib/button-icons.tsx

@@ -20,11 +20,13 @@ import Info from '@assets/icons/info.svg?react'
 import Notification from '@assets/icons/notification.svg?react'
 import Setting from '@assets/icons/setting.svg?react'
 import Theme from '@assets/icons/theme.svg?react'
+import NoFriends from '@assets/ui/No Friends.svg?react'
 
 export const icons = {
+  noFriendsWhite: <NoFriends stroke='white' />,
+  noFriendsBlack: <NoFriends stroke='black' />,
   edit: <Edit />,
-  settingsRed: <Setting color='#D22828' />,
-  settingsWhite: <Setting />,
+  settings: <Setting />,
   notification: <Notification />,
   theme: <Theme />,
   darkTheme: <DarkTheme />,

src/shared/lib/url.ts

@@ -0,0 +1,2 @@
+export const URL_BANNERS = import.meta.env.VITE_BACKEND_DOMEN + '/ftp/banners/'
+export const URL_AVATARS = import.meta.env.VITE_BACKEND_DOMEN + '/ftp/avatars/'

src/shared/ui/banner.tsx

@@ -2,6 +2,7 @@ import { cn } from '@shared/lib/merge-classes'
 import { type FC } from 'react'
 
 import banner from '@assets/banner/default user banner.jpg'
+import { URL_BANNERS } from '@shared/lib/url'
 
 interface IBannerProps {
   className?: string
@@ -10,8 +11,7 @@ interface IBannerProps {
 }
 
 const Banner: FC<IBannerProps> = ({ className, src, isImgNotOnBackend }) => {
-  const urlBackend = import.meta.env.VITE_BACKEND_DOMEN + '/ftp/banners/'
-  const img = isImgNotOnBackend ? src : urlBackend + src
+  const img = isImgNotOnBackend ? src : URL_BANNERS + src
   return (
     <img /* Todo убрать иконку файла при отсутствии урл */
       src={src && img ? img : banner}

src/shared/ui/user-avatar.tsx

@@ -5,6 +5,7 @@ import { cn } from '../lib/merge-classes'
 import { type IPropsForwardRefsUI } from '../lib/types/props'
 
 import avatarLight from '@assets/avatar/default avatar light.svg'
+import { URL_AVATARS } from '@shared/lib/url'
 
 interface IAvatarProps extends React.ComponentPropsWithoutRef<typeof Root> {
   text?: string
@@ -70,8 +71,7 @@ const UserAvatar: FC<IUserAvatarProps> = ({
   isImgNotOnBackend,
   link
 }) => {
-  const urlBackend = import.meta.env.VITE_BACKEND_DOMEN + '/ftp/avatars/'
-  const img = isImgNotOnBackend ? src : urlBackend + src
+  const img = isImgNotOnBackend ? src : URL_AVATARS + src
 
   if (link) {
     return (

src/widgets/mobile-nav/ui/mobile-nav.tsx

@@ -50,7 +50,7 @@ const MobileNav: FC = () => {
 
       <ButtonNav
         className='w-full h-full flex-col px-0 justify-center items-center text-center text-[12px] md:text-[14px]'
-        icon='settingsRed'
+        icon='settings'
         to={AppRoutes.SETTINGS}
       >
         Настройки