articles styles fix

src/assets/styles/articles.module.scss

@@ -1,41 +1,113 @@
 .main {
   width: 100%;
-    height: 100%;
+  min-height: 100%;
   padding: 4% 8%;
 }
 
 .wrapper {
   width: 100%;
-    height: 100%;
+  min-height: 100%;
 }
 
 .panel {
   width: 100%;
-    height: 10%;
   display: flex;
   justify-content: space-between;
   align-items: end;
-    padding: 0 5%;
+  margin-bottom: 25px;
+  gap: 15px;
+  div:first-child {
+    flex-grow: 1;
+    input {
+      width: 100%;
+    }
+  }
 }
 
-.listArticles {
+.listforms {
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+  border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
+  background: #fff;
-    margin-top: 5%;
+  border-radius: 16px;
   height: 70%;
+  min-height: 700px;
+  margin-bottom: 50px;
   width: 100%;
   &__columns {
     display: flex;
     justify-content: start;
     align-items: center;
-        padding: 0 2%;
+    padding: 20px 25px;
-        height: 15%;
+    border-bottom: 1px solid rgb(220, 220, 220);
+    &__item {
+      font-size: 15px;
+      font-family: "Montserrat", sans-serif;
+      font-weight: bold;
+    }
+  }
+  &__forms {
+    min-height: 100%;
+    display: inline;
+    overflow-y: auto;
+    &__item {
+      display: flex;
+      justify-content: start;
+      align-items: center;
       width: 100%;
+      padding: 20px 25px;
+      font-family: "Montserrat", sans-serif;
+      position: relative;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      &:hover {
+        background-color: rgba(240, 240, 240, 0.8);
+      }
+      &__title {
+        text-align: center;
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &__answers {
+        width: 33.3%;
+        text-align: center;
+      }
+      &__update {
+        width: 33.3%;
+        text-align: center;
+      }
+      i {
+        position: absolute;
+        font-size: 15px;
+        right: 30px;
+        top: calc(50% - 7px);
+        cursor: pointer;
+      }
+      ul {
+        li {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.listArticles {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fff;
+  border-radius: 16px;
+  height: 70%;
+  min-height: 700px;
+  margin-bottom: 50px;
+  width: 100%;
+  &__columns {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 20px 25px;
     border-bottom: 1px solid rgb(220, 220, 220);
     &__item {
       width: 33.3%;
       font-size: 15px;
-            // text-align: center;
       font-family: "Montserrat", sans-serif;
     }
   }
@@ -53,11 +125,11 @@
       display: flex;
       justify-content: start;
       align-items: center;
-            padding: 0 2%;
-            height: 25%;
       width: 100%;
+      padding: 20px 25px;
       font-family: "Montserrat", sans-serif;
       position: relative;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       &:hover {
         background-color: rgba(240, 240, 240, 0.8);
       }

src/assets/styles/viewArticle.module.scss

@@ -13,11 +13,12 @@
 
 .header {
   width: 100%;
-    height: 10%;
+  //   height: 10%;
   &__wrapper {
     width: 100%;
     height: 100%;
-        border: 1px solid rgb(180, 180, 180);
+    background: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: none;
     border-radius: 5px 5px 0 0;
     padding: 0 5px;
@@ -54,7 +55,7 @@
         justify-content: start;
         align-items: center;
         flex-wrap: wrap;
-                padding: 0 5px;
+        padding: 5px;
         position: relative;
         overflow-y: auto;
         // &::-webkit-scrollbar {
@@ -76,7 +77,6 @@
           border: 1px solid rgb(100, 100, 100);
           margin: 1px 3px;
           span {
-
           }
         }
       }
@@ -114,7 +114,6 @@
         border: 1px solid rgb(100, 100, 100);
         margin: 1px 3px;
         span {
-
         }
       }
     }
@@ -127,9 +126,10 @@
   &__wrapper {
     width: 100%;
     height: 100%;
-        border: 1px solid rgb(180, 180, 180);
+    background: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 5px;
-        // border-radius: 0 0 5px 5px;
+    border-radius: 0 0 5px 5px;
     overflow: auto;
     &::-webkit-scrollbar {
       width: 7px;

src/pages/Articles.jsx

@@ -1,17 +1,19 @@
 import React, { useState, useContext, useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import classes from "../assets/styles/articles.module.scss"
+import classes from "../assets/styles/articles.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 import { UserData } from "../context";
 import CheckModal from "../components/CheckModal.jsx";
-import { createArticleApi, getListArticlesApi } from "../hooks/api/articleApi.js";
+import {
-
+  createArticleApi,
+  getListArticlesApi,
+} from "../hooks/api/articleApi.js";
 
 const Articles = () => {
   const navigate = useNavigate();
-    const {user, setUser} = useContext(UserData);
+  const { user, setUser } = useContext(UserData);
   const [stateLoading, setStateLoading] = useState(false);
 
   const [listArticles, setListArticles] = useState([]);
@@ -20,39 +22,31 @@ const Articles = () => {
 
   useEffect(() => {
     async function getListArticles() {
-            const response = await getListArticlesApi(cookies.token)
+      const response = await getListArticlesApi(cookies.token);
 
       if (response.status === 200) {
-                setListArticles(response.data)
+        setListArticles(response.data);
-            }
+      } else if (response.status === 401) {
-            else if (
-                response.status === 401
-            ) {
         // navigate("/enter")
-                setUser(false)
+        setUser(false);
-            }
+      } else {
-            else {
+        console.log(response);
-                console.log(response)
       }
     }
 
-        getListArticles()
+    getListArticles();
-    }, [])
+  }, []);
 
   async function createArticle() {
-        const response = await createArticleApi(cookies.token)
+    const response = await createArticleApi(cookies.token);
 
     if (response.status === 200) {
-            navigate(`/articles/${response.data.id}/edit`)
+      navigate(`/articles/${response.data.id}/edit`);
-        }
+    } else if (response.status === 401) {
-        else if (
-            response.status === 401
-        ) {
       // navigate("/enter")
-            setUser(false)
+      setUser(false);
-        }
+    } else {
-        else {
+      console.log(response);
-            console.log(response)
     }
   }
 
@@ -60,44 +54,85 @@ const Articles = () => {
     <div className={classes.main}>
       <div className={classes.wrapper}>
         <div className={classes.panel}>
-                    <MyInput placeholder={'Поиск...'}/>
+          <MyInput placeholder={"Поиск..."} />
-                    <MyButton click={createArticle} class={"main__green"} otherStyle={{width: '200px'}} text={
+          <MyButton
-                        stateLoading ? <div class="spinner-border text-light" role="status">
+            click={createArticle}
+            class={"main__blue"}
+            otherStyle={{ width: "200px" }}
+            text={
+              stateLoading ? (
+                <div class="spinner-border text-light" role="status">
                   <span class="visually-hidden">Загрузка...</span>
-                        </div> : 'Создать'
+                </div>
-                    }/>
+              ) : (
+                "Создать"
+              )
+            }
+          />
         </div>
         <div className={classes.listArticles}>
           <div className={classes.listArticles__columns}>
             <div className={classes.listArticles__columns__item}>Название</div>
-                        <div className={classes.listArticles__columns__item}>Дата публикации</div>
+            <div className={classes.listArticles__columns__item}>
+              Дата публикации
+            </div>
             <div className={classes.listArticles__columns__item}>Автор</div>
           </div>
           <div className={classes.listArticles__forms}>
-                        {listArticles.map(item => <div className={classes.listArticles__forms__item}>
+            {listArticles.map((item) => (
-                            <div className={classes.listArticles__forms__item__title} onClick={() => navigate(`/articles/${item.id}/edit`)}>{item.title}</div>
+              <div className={classes.listArticles__forms__item}>
-                            <div className={classes.listArticles__forms__item__date}>24.06.24</div>
+                <div
-                            <div className={classes.listArticles__forms__item__author}>kuwsh1n</div>
+                  className={classes.listArticles__forms__item__title}
-                            <i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
+                  onClick={() => navigate(`/articles/${item.id}/edit`)}
+                >
+                  {item.title}
+                </div>
+                <div className={classes.listArticles__forms__item__date}>
+                  24.06.24
+                </div>
+                <div className={classes.listArticles__forms__item__author}>
+                  kuwsh1n
+                </div>
+                <i
+                  class="fa-solid fa-ellipsis-vertical"
+                  id="action"
+                  data-bs-toggle="dropdown"
+                ></i>
                 <ul class="dropdown-menu" aria-labelledby="action">
-                                <li><a class="dropdown-item" onClick={() => navigate(`/articles/${item.id}/`)}>Открыть</a></li>
+                  <li>
-                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModaltest`}>Удалить</a></li>
+                    <a
+                      class="dropdown-item"
+                      onClick={() => navigate(`/articles/${item.id}/`)}
+                    >
+                      Открыть
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      data-bs-toggle="modal"
+                      data-bs-target={`#checkModaltest`}
+                    >
+                      Удалить
+                    </a>
+                  </li>
                 </ul>
 
                 <CheckModal
-                                postfix={'test'}
+                  postfix={"test"}
                   message={`Вы хотетите удалить статью <Test article>?`}
                   action={{
                     execute: () => {},
-                                    cancel: () => {}
+                    cancel: () => {},
                   }}
                 />
-                        </div>)}
+              </div>
+            ))}
           </div>
         </div>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export default Articles;