modified requestpage

src/pages/RequestPage/RequestPage.module.css

+.container {
+    min-width: 1440px;
+}
+
+.filter {
+    margin: 1rem 1rem .5rem;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.fields {
+    display: flex;
+    gap: 1rem;
+}
+
 .pagination_container {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    background: white;
-    padding: 10px 20px;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+    padding: .5rem 1rem;
+
     display: flex;
     justify-content: center;
+
+    background: white;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file

src/pages/RequestPage/RequestPage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { DatePicker, Select, Button, Pagination } from 'antd';
 import dayjs from 'dayjs';
 import styles from './RequestPage.module.css';
+import { MaterialSymbol } from 'react-material-symbols';
 
 const dateFormat = 'YYYY/MM/DD';
 
@@ -11,14 +12,14 @@ const RequestPage: React.FC = () => {
     }
     
     return (
-        <div className='container' style={{minWidth: '1440px'}}>
-            <div className='filter' style={{margin: '20px 20px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-                <div className='fields' style={{display: 'flex', gap: 14}}>
-                    <div className="dates">
+        <div className={styles.container}>
+            <div className={styles.filter}>
+                <div className={styles.fields}>
+                    <div className={styles.dates}>
                         <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{marginRight: 14}}/>
                         <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} />
                     </div>
-                    <div className="category">
+                    <div className={styles.category}>
                         <Select placeholder="Не выбрано" style={{width: 270}} options={[]} />
                     </div>
                 </div>
@@ -56,7 +57,7 @@ const RequestPage: React.FC = () => {
                                 <td>2023-09-26 11:54:34</td>
                                 <td>1</td>
                                 <td style={{textAlign: 'center'}}>
-                                    <span className='material-symbols-outlined' style={{color: '#0E2B52', fontSize: '20px'}}>mail</span>
+                                    <MaterialSymbol icon='mail' size={20} color="#0E2B52" />
                                 </td>
                             </tr>
                             <tr>
@@ -71,7 +72,7 @@ const RequestPage: React.FC = () => {
                                 <td>2023-09-26 11:54:34</td>
                                 <td>0</td>
                                 <td style={{textAlign: 'center'}}>
-                                    <span className='material-symbols-outlined' style={{color: '#0E2B52', fontSize: '20px'}}>mail</span>
+                                    <MaterialSymbol icon='mail' size={20} color="#0E2B52" />
                                 </td>
                             </tr>
                             <tr>
@@ -86,7 +87,7 @@ const RequestPage: React.FC = () => {
                                 <td>2023-09-26 11:54:34</td>
                                 <td>5</td>
                                 <td style={{textAlign: 'center'}}>
-                                    <span className='material-symbols-outlined' style={{color: '#0E2B52', fontSize: '20px'}}>mail</span>
+                                    <MaterialSymbol icon='mail' size={20} color="#0E2B52" />
                                 </td>
                             </tr>
                             <tr>
@@ -101,17 +102,13 @@ const RequestPage: React.FC = () => {
                                 <td>2023-09-26 11:54:34</td>
                                 <td>5</td>
                                 <td style={{textAlign: 'center'}}>
-                                    <span className='material-symbols-outlined' style={{color: '#0E2B52', fontSize: '20px'}}>mail</span>
+                                    <MaterialSymbol icon='mail' size={20} color="#0E2B52" />
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </section>
-            {/* <div className='pagination-container' style={{marginTop: 300, display: 'flex', justifyContent: "center"}}>
-                <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} />
-            </div> */}
-
             <div className={styles.pagination_container}>
                 <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
             </div>