usersadd

src/Components/AddUsersPage/index.jsx

@@ -1,7 +1,8 @@
 import styles from './style.module.scss';
 import avatar from '../../img/profilePage/avatar.png';
 import Header from '../Header';
-
+import del from '../../img/AddUsers/delete.png';
+import perm from '../../img/AddUsers/permission.png';
 const AddUsers = () => {
     return (
         <>
@@ -38,6 +39,48 @@ const AddUsers = () => {
                                     <span>1</span>
 
                                 </div>
+                                <div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
+                                <div className={styles.feautures}>Отправлено</div>
+                            </div>
+                        </div>
+                        <div className={styles.profile__user_container}>
+                            <div className={styles.profile__user_img_container}>
+                                <img src={avatar} className={styles.profile__user_img}></img>
+                                <div className={styles.profile__user_role}>Участник</div>
+                            </div>
+                            <div className={styles.profile__user_info_container}>
+                                <div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
+                                <div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
+                                <div className={styles.profile__user_socialMedia}>TG: @dkir</div>
+                                <div className={styles.profile__user_email}>gmail@gmail.com</div>
+                                <div className={styles.profile__user_progress_container}>
+                                    <span>0</span>
+                                    <span className={styles.profile__user_progress_line}></span>
+                                    <span>1</span>
+
+                                </div>
+                                <div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
+                                <div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
+                            </div>
+                        </div>
+                        <div className={styles.profile__user_container}>
+                            <div className={styles.profile__user_img_container}>
+                                <img src={avatar} className={styles.profile__user_img}></img>
+                                <div className={styles.profile__user_role}>Участник</div>
+                            </div>
+                            <div className={styles.profile__user_info_container}>
+                                <div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
+                                <div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
+                                <div className={styles.profile__user_socialMedia}>TG: @dkir</div>
+                                <div className={styles.profile__user_email}>gmail@gmail.com</div>
+                                <div className={styles.profile__user_progress_container}>
+                                    <span>0</span>
+                                    <span className={styles.profile__user_progress_line}></span>
+                                    <span>1</span>
+
+                                </div>
+                                <div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
+                                <div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
                             </div>
                         </div>
                     </div>

src/Components/AddUsersPage/style.module.scss

@@ -18,6 +18,7 @@
 
    
     &__search {
+        margin-top: 150px;
         border-radius: 10px;
         border: 1px solid var(--gray_stroke, #D0D2D8);
         height: 70px;
@@ -35,24 +36,30 @@
         margin-top: 200px;
         display: flex;
         justify-content: space-between;
+        
 
     }
     &__user {
         &_img {
+            width: 180px;
+            height: 180px;
             &_container {
                 display: flex;
                 flex-direction: column;
                 margin-right: 50px;
                 
+                
             }
         }
         &_container {
             display: flex;
-            width: 50%;
+            width: 48%;
+            margin-bottom: 110px;
+            position: relative;
         }
         &_info_container {
             text-align: left;
-            margin-top: 20px;
+            margin-top: 18px;
             display: flex;
             text-align: left;
             flex-direction: column;
@@ -60,7 +67,7 @@
         &_fullName {
             color: #000;
             font-family: Montserrat;
-            font-size: 36px;
+            font-size: 26px;
             font-style: normal;
             font-weight: 600;
             line-height: normal;
@@ -72,7 +79,7 @@
         &_spaciality {
             color: #000;
             font-family: Montserrat;
-            font-size: 32px;
+            font-size: 22px;
             font-style: normal;
             font-weight: 400;
             line-height: normal;
@@ -81,7 +88,7 @@
         &_socialMedia {
             color: #000;
             font-family: Montserrat;
-            font-size: 20px;
+            font-size: 18px;
             font-style: normal;
             font-weight: 400;
             line-height: normal;
@@ -90,7 +97,7 @@
         &_email {
             color: #000;
             font-family: Montserrat;
-            font-size: 20px;
+            font-size: 18px;
             font-style: normal;
             font-weight: 400;
             line-height: normal;
@@ -129,6 +136,8 @@
         display: flex;
         justify-content: space-between;
         margin-top: 120px;
+        flex-wrap: wrap;
+        
     }
     &__card {
 
@@ -141,6 +150,7 @@
             width: 48%;
             border-radius: 10px;
             border: 1px solid var(--gray_stroke, #D0D2D8);
+            margin-bottom: 110px;
         }
         &_text {
             color: #000;
@@ -168,4 +178,53 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-}
+}
+.feautures {
+    width: 90px;
+    position: absolute;
+    right: 0px;
+    bottom: 40px;
+    display: flex;
+    justify-content: center;
+    font-family: Montserrat;
+    align-items: center;
+    color: #60AD1E;
+    font-family: Montserrat;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    background: #E7FFD2;
+    height: 15px;
+    padding: 10px;
+    }
+    .permission {
+
+
+        &_container {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            right: 0px;
+            bottom: 40px;
+        }
+        &_img {
+            height: 100%;
+            width: 100%;
+        }
+    }
+    .delete {
+
+
+        &_container {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            top: 40px;
+            right: 0px;
+        }
+        &_img {
+            height: 100%;
+            width: 100%;
+        }
+    }