Inct 92 valid

next.config.js

@@ -28,6 +28,12 @@ const nextConfig = {
         port: '',
         pathname: '/users-inctagram/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'staging-it-incubator.s3.eu-central-1.amazonaws.com',
+        port: '',
+        pathname: '/trainee-instagram-api/**',
+      },
     ],
   },
 }

src/shared/assets/swiperStyle/post-images-slider.scss

@@ -9,7 +9,6 @@
   .swiper-pagination-custom,
   .swiper-horizontal > .swiper-pagination-bullets,
   .swiper-pagination-bullets.swiper-pagination-horizontal {
-
     @media screen and (width<=910px) {
       top: 86%;
       left: 30%;
@@ -21,10 +20,8 @@
 
     @media screen and (width<=459px) {
       top: 77%;
-
     }
   }
-
 
   .swiper-button-prev::after,
   .swiper-button-next::after {
@@ -40,7 +37,7 @@
       font-weight: bold;
       color: rgb(255 255 255);
     }
-  
+
     .swiper-button-prev::after,
     .swiper-button-next::after {
       padding: 10px;

src/shared/components/button/button.module.scss

@@ -129,7 +129,6 @@
 
   &:active {
     background-color: rgb(10 102 56 / 0%);
-    border: 2px solid var(--color-accent-700);
   }
 
   &:focus-visible {

src/shared/components/dropdown/dropdown.module.scss

@@ -30,7 +30,7 @@
   z-index: 0;
   top: -3px;
   right: -1px;
- // transform: rotate(45deg);
+  // transform: rotate(45deg);
 
   width: 7px;
   height: 7px;

src/shared/components/followers-modal/addFollowers/AddFollower.module.scss

@@ -0,0 +1,25 @@
+.buttonBox {
+  display: flex;
+  gap: 24px;
+  justify-content: flex-end;
+  margin-top: 42px;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 36px;
+  height: 36px;
+
+  background-position: center;
+  border: 1px solid var(--color-dark-100);
+  border-radius: 50%;
+}
+
+.avaAndText {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}

src/shared/components/followers-modal/addFollowers/AddFollower.tsx

@@ -0,0 +1,56 @@
+import s from './AddFollower.module.scss'
+
+import { IconUser } from '@/shared/assets'
+import { Button, Typography } from '@/shared/components'
+import { Modal } from '@/shared/components/modals'
+import { useTranslation } from '@/shared/lib'
+import { useModal } from '@/shared/lib/hooks/open-or-close-hook'
+
+type Props = {
+  avatar: string
+  name: string
+  isMob: boolean
+  onAdd: () => void
+}
+export const AddFollowers = ({ avatar, name, isMob, onAdd }: Props) => {
+  const { isOpen, openModal, closeModal } = useModal()
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {/*<Button*/}
+      {/*    variant={'link'}*/}
+      {/*    onClick={() => openModal()}*/}
+      {/*    style={isMob ? {fontSize: '14px', padding: '5px 10px', color: '#fff'} : {color: '#fff'}}*/}
+      {/*>*/}
+      {/*    {t.followers_modal.button_remove}*/}
+      {/*</Button>*/}
+      <Button
+        variant={'primary'}
+        onClick={() => openModal()}
+        style={isMob ? { fontSize: '14px', padding: '5px 10px', color: '#fff' } : { color: '#fff' }}
+      >
+        {t.following_modal.follow_button}
+      </Button>
+
+      <Modal open={isOpen} size={'sm'} title={t.followers_modal.button_remove} onClose={closeModal}>
+        <div className={s.avaAndText}>
+          <div className={s.avatar} style={{ backgroundImage: avatar ? `${avatar}` : 'none' }}>
+            {!avatar && <IconUser />}
+          </div>
+          <Typography>
+            {t.add_following.text} {name}?
+          </Typography>
+        </div>
+        <div className={s.buttonBox}>
+          <Button variant={'outline'} onClick={onAdd} style={{ width: '27px' }}>
+            {t.delete_photo_of_profile.button_yes}
+          </Button>
+          <Button variant={'primary'} onClick={closeModal}>
+            {t.delete_photo_of_profile.button_no}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}

src/shared/components/followers-modal/addFollowers/index.ts

@@ -0,0 +1 @@
+export * from './AddFollower'

src/shared/components/followers-modal/dataOfFollowers/DataOfFollowers.tsx

@@ -6,22 +6,24 @@ import { useRouter } from 'next/router'
 import s from './DataOfFollowers.module.scss'
 
 import { IconUser } from '@/shared/assets'
-import { Button, Input } from '@/shared/components'
+import { Input } from '@/shared/components'
+import { AddFollowers } from '@/shared/components/followers-modal/addFollowers'
 import { RemoveFollower } from '@/shared/components/followers-modal/deleteFollowers'
 import { useTranslation } from '@/shared/lib'
-export const followersArray = [
-  { avatar: '', value: '1', title: 'URLProfile', isUnfollow: false },
-  { avatar: '', value: '2', title: 'URLProfile', isUnfollow: false },
-  { avatar: '', value: '3', title: 'URLProfile', isUnfollow: true },
-  { avatar: '', value: '4', title: 'URLProfile', isUnfollow: false },
-  { avatar: '', value: '5', title: 'URLProfile', isUnfollow: false },
-  { avatar: '', value: '6', title: 'URLProfile', isUnfollow: false },
-  { avatar: '', value: '7', title: 'URLProfile', isUnfollow: true },
-]
+
 export const DataOfFollowers = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const [shouldTruncate, setShouldTruncate] = useState(false)
+  const [followersArray, setFollowersArray] = useState([
+    { avatar: '', value: '1', title: 'URLProfile', isUnfollow: false },
+    { avatar: '', value: '2', title: 'URLProfile', isUnfollow: false },
+    { avatar: '', value: '3', title: 'URLProfile', isUnfollow: true },
+    { avatar: '', value: '4', title: 'URLProfile', isUnfollow: false },
+    { avatar: '', value: '5', title: 'URLProfile', isUnfollow: false },
+    { avatar: '', value: '6', title: 'URLProfile', isUnfollow: false },
+    { avatar: '', value: '7', title: 'URLProfile', isUnfollow: true },
+  ])
 
   useEffect(() => {
     if (router.pathname === '/my-profile/following-page/[subscription]') {
@@ -31,12 +33,25 @@ export const DataOfFollowers = () => {
     }
   }, [router.pathname])
 
+  const handleRemoveFollower = (index: number) => {
+    const updatedFollowersArray = [...followersArray]
+
+    updatedFollowersArray.splice(index, 1)
+    setFollowersArray(updatedFollowersArray)
+  }
+  const handleAddFollower = (index: number) => {
+    const updatedFollowersArray = [...followersArray]
+
+    updatedFollowersArray[index].isUnfollow = !updatedFollowersArray[index].isUnfollow
+    setFollowersArray(updatedFollowersArray)
+  }
+
   return (
     <>
       <Input type={'search'} placeholder={t.following_modal.input_placeholder} />
 
       <ul>
-        {followersArray.map(follower => {
+        {followersArray.map((follower, index) => {
           const truncatedTitle =
             shouldTruncate && follower.title.length >= 5
               ? `${follower.title.substring(0, 2)}...`
@@ -56,22 +71,19 @@ export const DataOfFollowers = () => {
                 {truncatedTitle}
               </span>
               {!follower.isUnfollow && (
-                <Button
-                  variant={'primary'}
-                  style={
-                    shouldTruncate
-                      ? { fontSize: '14px', padding: '5px 10px', color: '#fff' }
-                      : { fontSize: '16px' }
-                  }
-                >
-                  {t.following_modal.follow_button}
-                </Button>
+                <AddFollowers
+                  avatar={follower.avatar}
+                  isMob={shouldTruncate}
+                  name={follower.title}
+                  onAdd={() => handleAddFollower(index)}
+                />
               )}
               <div className={s.deleteButtonBox}>
                 <RemoveFollower
                   avatar={follower.avatar}
                   isMob={shouldTruncate}
                   name={follower.title}
+                  onRemove={() => handleRemoveFollower(index)}
                 />
               </div>
             </li>

src/shared/components/followers-modal/deleteFollowers/RemoveFollower.tsx

@@ -5,12 +5,14 @@ import { Button, Typography } from '@/shared/components'
 import { Modal } from '@/shared/components/modals'
 import { useTranslation } from '@/shared/lib'
 import { useModal } from '@/shared/lib/hooks/open-or-close-hook'
+
 type Props = {
   avatar: string
   name: string
   isMob: boolean
+  onRemove: () => void
 }
-export const RemoveFollower = ({ avatar, name, isMob }: Props) => {
+export const RemoveFollower = ({ avatar, name, isMob, onRemove }: Props) => {
   const { isOpen, openModal, closeModal } = useModal()
   const { t } = useTranslation()
 
@@ -34,7 +36,7 @@ export const RemoveFollower = ({ avatar, name, isMob }: Props) => {
           </Typography>
         </div>
         <div className={s.buttonBox}>
-          <Button variant={'outline'} style={{ width: '27px' }}>
+          <Button variant={'outline'} onClick={onRemove} style={{ width: '27px' }}>
             {t.delete_photo_of_profile.button_yes}
           </Button>
           <Button variant={'primary'} onClick={closeModal}>

src/shared/components/imageCard/ui/imageCard.tsx

@@ -25,8 +25,8 @@ export const ImageCard = ({ postId, src, alt, cardClassName, width, height, open
         onClick={
           openModal
             ? () => {
-              openModal(postId)
-            }
+                openModal(postId)
+              }
             : () => null
         }
       >

src/shared/components/popover-menu/PopoverMenu.module.scss

@@ -8,6 +8,6 @@
   border: 1px solid var(--color-dark-100);
   border-radius: 2px;
   box-shadow:
-          0 10px 38px -10px rgb(22 23 24 / 35%),
-          0 10px 20px -15px rgb(22 23 24 / 20%);
-}
+    0 10px 38px -10px rgb(22 23 24 / 35%),
+    0 10px 20px -15px rgb(22 23 24 / 20%);
+}