Добавлены фильтры для сообщений. Убраны заголовки. Изменены стили.

src/components/Well.jsx

@@ -17,7 +17,7 @@ export default function Well() {
     <Layout>
       <Menu
         mode="horizontal"
-        selectable={false}
+        selectable={true}
         className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>

src/pages/Messages.jsx

@@ -1,4 +1,4 @@
-import {Button, Table, Select, DatePicker, ConfigProvider} from 'antd';
+import {Table, Select, DatePicker, ConfigProvider} from 'antd';
 import {MessageService} from '../services/api'
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
@@ -70,12 +70,12 @@ export default function Messages() {
     setRange(range)
   }
 
-  const GetMessages = async() => {
+  const GetMessages = async () => {
     setLoader(true)
     try {
       let begin = null
       let end = null
-      if(range?.length>1){
+      if (range?.length > 1) {
         begin = range[0].toISOString()
         end = range[1].toISOString()
       }
@@ -110,16 +110,16 @@ export default function Messages() {
 
   return (
     <>
-      <h2>Сообщения</h2>
+
-      <hr/>
+      <div className='filter-group'>
-      <h3>Фильтр сообщений</h3>
+        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
         <Select
           mode="multiple"
           allowClear
           placeholder="Фильтр сообщений"
           className="filter-selector"
           value={categories}
-        onChange = {setCategories}>
+          onChange={setCategories}>
           {children}
         </Select>
         <ConfigProvider locale={locale}>
@@ -128,7 +128,7 @@ export default function Messages() {
             onChange={onChangeRange}
           />
         </ConfigProvider>
-
+      </div>
       <Table
         columns={columns}
         dataSource={messages}

src/styles/message.css

@@ -1,11 +1,3 @@
-/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
-/*  padding: 0;*/
-/*}*/
-
-/*.ant-table-tbody > tr > td {*/
-/*  border-bottom: 0.5px;*/
-/*}*/
-
 .event_message > td {
   font-size: 14px;
   padding: 1px !important;
@@ -37,6 +29,15 @@
   background: #505060;
 }
 
+.filter-group {
+  margin: 0 0 5px 0;
+}
+
+.filter-group__heading {
+  margin: 5px auto;
+  align-items: center;
+}
+
 td.ant-table-column-sort {
   color: black;
   background-color: rgb(221, 247, 221);