From e13eda5ed191639a7c906ee51e3c0332f4eedf53 Mon Sep 17 00:00:00 2001
From: Alexey <ay.nokhrin@autodrilling.ru>
Date: Tue, 1 Jun 2021 14:32:36 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D1=8B=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B9.=20=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=D1=8B=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B8.=20=D0=98?=
 =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Well.jsx |  2 +-
 src/pages/Messages.jsx  | 44 ++++++++++++++++++++---------------------
 src/styles/message.css  | 17 ++++++++--------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/Well.jsx b/src/components/Well.jsx
index ee45576..64e6ecc 100644
--- a/src/components/Well.jsx
+++ b/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/>}>
diff --git a/src/pages/Messages.jsx b/src/pages/Messages.jsx
index 2a8ee81..188acc4 100644
--- a/src/pages/Messages.jsx
+++ b/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'
@@ -57,7 +57,7 @@ export default function Messages() {
   let {id} = useParams()
   const [messages, setMessages] = useState([])
   const [pagination, setPagination] = useState(null)
-  const [page, setPage] = useState(1)  
+  const [page, setPage] = useState(1)
   const [range, setRange] = useState([])
   const [categories, setCategories] = useState([])
 
@@ -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,25 +110,25 @@ export default function Messages() {
 
   return (
     <>
-      <h2>Сообщения</h2>
-      <hr/>
-      <h3>Фильтр сообщений</h3>
-      <Select
-        mode="multiple"
-        allowClear
-        placeholder="Фильтр сообщений"
-        className="filter-selector"
-        value={categories}
-        onChange = {setCategories}>
-        {children}
-      </Select>
-      <ConfigProvider locale={locale}>
-        <RangePicker
-          showTime
-          onChange={onChangeRange}
-        />
-      </ConfigProvider>
 
+      <div className='filter-group'>
+        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
+        <Select
+          mode="multiple"
+          allowClear
+          placeholder="Фильтр сообщений"
+          className="filter-selector"
+          value={categories}
+          onChange={setCategories}>
+          {children}
+        </Select>
+        <ConfigProvider locale={locale}>
+          <RangePicker
+            showTime
+            onChange={onChangeRange}
+          />
+        </ConfigProvider>
+      </div>
       <Table
         columns={columns}
         dataSource={messages}
diff --git a/src/styles/message.css b/src/styles/message.css
index 329182b..fb003b0 100644
--- a/src/styles/message.css
+++ b/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);