Merge branch 'main' of https://github.com/Katyusha-Group/Front-End in…

…to dev

.github/workflows/Ci-Cd.yml

@@ -0,0 +1,40 @@
+name: CI CD
+
+on:
+  push:
+    branches:
+      - main  # Replace 'main' with your primary branch name
+  pull_request:
+    branches:
+      - main  # Replace 'main' with your primary branch name
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Build and run tests
+        run: |
+          docker compose  up --build
+          docker exec docker-react-i  "npm test"
+          
+  Deploy:
+    name: deploy
+    runs-on: ubuntu-latest
+    steps: 
+    - uses: actions/checkout@v2
+    - name: Connect
+      uses: appleboy/ssh-action@master
+      with:   
+        username: ${{ secrets.USERNAME }}  
+        password: ${{ secrets.PASSWORD }}  
+        host: ${{ secrets.HOST }}  
+        port: ${{ secrets.PORT }}  
+        script: |
+          cd ${{ secrets.PATH }}
+          docker compose stop
+          git pull
+          docker compose restart

.github/workflows/docker-image.yml

@@ -0,0 +1,34 @@
+name: React CI with Docker Compose
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    services:
+      docker:
+        image: docker:20.10.7
+        options: --privileged
+        ports:
+          - 8081:80
+        env:
+          DOCKER_DRIVER: overlay2
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2
+
+    - name: Build and run services with Docker Compose
+      run: 
+        docker-compose -f docker-compose.yml up -d --build
+
+    - name: Run tests
+      run: 
+        docker exec -it docker-react-c npm test
+
+    - name: Stop services
+      run: docker-compose -f docker-compose.yml down

.github/workflows/react-ci-last.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main  # Replace 'main' with your primary branch name
+  pull_request:
+    branches:
+      - main  # Replace 'main' with your primary branch name
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Build and run tests
+        run: |
+          docker-compose  up --build
+          docker exec docker-react-c  "npm test"
+  

.github/workflows/react-ci.yml

@@ -0,0 +1,34 @@
+name: React CI with Docker Compose
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    services:
+      docker:
+        image: docker:20.10.7
+        options: --privileged
+        ports:
+          - 8081:80
+        env:
+          DOCKER_DRIVER: overlay2
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2
+
+    - name: Build and run services with Docker Compose
+      run: 
+        docker-compose -f docker-compose.yml up -d --build
+
+    - name: Run tests
+      run: 
+        docker exec -it docker-react-c npm test
+
+    - name: Stop services
+      run: docker-compose -f docker-compose.yml down

src/assets/css/Profile.module.css

@@ -1,40 +1,38 @@
 @import "./black-dashboard-react.css";
 
-:root {
-    overflow-y: hidden;
+:root{
+    overflow-y: hidden ;
     /* background-color: var(--dark); */
 }
 
-.main {
+.main{
     display: flex;
     flex-direction: row;
     /* align-items: center; */
-    justify-content: space-between;
+    justify-content:space-between;
     width: 100%;
     /* background-color: #1e1e1e; */
     /* background-color: var(--dark); */
     /* overflow-y: hidden; */
 }
-
-.leftpart {
+.leftpart{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 30px;
+    gap: 30px; 
     border-radius: 10px;
 
     height: 93vh;
     margin-top: 20px;
     margin-left: 30px;
     margin-right: 30px;
 }
-
-.rightUpper {
+.rightUpper{
     flex-grow: 1;
     width: 25vw;
     /* background-color:var(--gray-dark); */
     /* background-color: #373C57; */
-    background: rgb(39, 42, 61, 1);
+    background: rgb(39,42,61,1);
     /* background: linear-gradient(180deg, rgba(39,42,61,1) 54%, rgba(109,54,114,1) 89%, rgba(143,62,140,1) 100%); */
     border-radius: 15px;
     position: relative;
@@ -56,17 +54,17 @@
     /* background-color: rgba(137, 101, 224, 0.5); */
     z-index: 0;
     /* mix-blend-mode: multiply; */
-}
+  }
 
-.rightpart {
-    width: 900px;
+.rightpart{
+    width:900px;
     height: 100%;
     margin-top: 20px;
     margin-bottom: 10px;
     padding: 10px;
     border-radius: 15px;
     gap: 30px;
-    background-color: #272A3D;
+    background-color:#272A3D;
     /* background-color:var(--gray-dark); */
     /* margin-left: 30px; */
     margin-right: 30px;
@@ -79,16 +77,21 @@
 }
 
 
-.ProfileImage {
+.ProfileImage{
     /* border: 2px solid #272A3D; */
     /* box-sizing: border-box; */
     height: 180px;
     width: 180px;
-    margin-top: 10px;
-    border-radius: 50%;
+    margin-top: 30px;
+    margin-bottom: -20px;
+    border-radius: 50%; 
     /* clip-path: circle(50% at 50% 50%); */
 }
 
+.ProfileImage:hover{
+    scale: 1.1;
+}
+
 
 .Followes {
     display: flex;
@@ -106,33 +109,29 @@
     scale: 1.2;
 }
 
-.myusername {
+.myusername{
     text-align: center;
     direction: ltr;
     /* cursor: pointer; */
     font-weight: bold;
-    margin-top: 5px;
 }
-
-.p_name {
+.p_name{
     margin-top: 15px;
 }
-
-.Follow {
+.Follow{
     display: flex;
     font-size: 12px;
     flex-direction: row-reverse;
     justify-content: center;
     gap: 20px;
     /* cursor: pointer; */
 }
-
-.DateStart {
+.DateStart{
     margin-top: 15px;
     font-size: 9px;
 }
-
-.followbutton {
+.followbutton{
+    margin-top: 10px;
     width: 100px;
     height: 30px;
     border-radius: 5px;
@@ -144,26 +143,23 @@
     border: 1px solid var(--purple);
     /* margin-right: 30px; */
 }
-
-.followbutton:hover {
+.followbutton:hover{
     /* background-color: #67539E;
     color: white;
     border: 1px solid white; */
     background-color: var(--purple);
     color: var(--white);
     border: 1px solid var(--white);
 }
-
-.followbutton:active {
+.followbutton:active{
     /* background-color: #67539E;
     color: white;
     border: 1px solid white; */
     background-color: var(--purple);
     color: var(--white);
     border: 1px solid var(--white);
 }
-
-.table {
+.table{
     width: 776px;
     height: 390px;
     display: flex;
@@ -177,8 +173,7 @@
     /* color: white; */
     color: var(--white);
 }
-
-.div {
+.div{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -190,9 +185,8 @@
     /* color: white; */
     color: var(--white);
     width: 776px;
-    height: 91px;
+    height: 91px;   
 }
-
 /* .timeline{
 
 } */
@@ -209,7 +203,7 @@
     font-size: 12px;
     gap: 20px;
     /* cursor: pointer; */
-    padding: 20px 25px;
+    padding: 20px 40px;
 }
 
 .ProfileHeader_Other_Item {
@@ -220,18 +214,20 @@
 
 
 @media only screen and (max-width: 1064px) {
-    .leftpart {
-        display: none;
+    .rightUpper {
+      display: none;
     }
 }
 
 @media only screen and (max-width: 541px) {
     .main {
         flex-direction: column-reverse;
     }
-
     .rightpart {
         max-width: 90vw;
         max-height: 80vh;
     }
-}
+    .leftpart {
+        display: none;
+    }
+}

src/components/ModalReport/ModalReport.jsx

@@ -143,7 +143,7 @@ const ModalReport = ({ showModal, handleClose, id }) => {
     return (
         <Modal show={show} onHide={handleCloseModal} className={styles.Modal}>
             <div className={styles.ModalContents}>
-                <Modal.Header className={styles.ModalHeader}>
+                <Modal.Header closeButton className={styles.ModalHeader}>
                     <h4 className={styles.ModalTitle}>دلیل ریپورت؟</h4>
                     <button className="close" onClick={handleCloseModal}>
                         <span>&times;</span>