fix style

src/s2-homeworks/hw01/HW1.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import Message from './Message'
 import MessageSender from './MessageSender'
+import s from './Message.module.css'
 
+// структуру объекта не менять
 export const message0 = {
     id: 0,
     user: {
@@ -16,17 +18,19 @@ export const message0 = {
 
 const HW1 = () => {
     return (
-        <div id={'hw1'}>
+        <div id={'hw1'} className={s.hw1}>
-            <hr/>
+            <hr/>{/*можно убрать этот тег*/}
-            homeworks 1
+
+            <div className={s.hwTitle}>homeworks 1</div>
 
             {/*проверка отображения (не менять)*/}
             <Message message={message0}/>
 
             {/*для автоматической проверки дз (не менять)*/}
             <MessageSender M={Message}/>
-            <hr/>
+
-            <hr/>
+            <hr/>{/*можно убрать этот тег*/}
+            <hr/>{/*можно убрать этот тег*/}
         </div>
     )
 }

src/s2-homeworks/hw01/Message.module.css

@@ -0,0 +1,25 @@
+.hw1 {
+
+}
+
+.hwTitle {
+
+}
+
+.message {
+    display: flex;
+    border: 1px solid lime;
+    margin: 10px;
+}
+
+.sendForm {
+
+}
+
+.textarea {
+    margin: 0 10px;
+}
+
+.button {
+
+}

src/s2-homeworks/hw01/Message.tsx

@@ -1,15 +1,36 @@
 import React from 'react'
+import s from './Message.module.css'
 
 // создать тип вместо any и отобразить приходящие данные
 const Message = (props: any) => {
     return (
-        <div id={'hw1-message-' + props.message.id} style={{display: "flex", border: '1px solid lime', margin: '10px'}}>
+        <div id={'hw1-message-' + props.message.id} className={s.message}>
-            <img src={props.message.user.avatar} width={'50px'} height={'50px'} id={'hw1-avatar-' + props.message.id} alt={'avatar'}/>
+            <img
+                id={'hw1-avatar-' + props.message.id}
+
+                // создаёт студент
+                src={props.message.user.avatar}
+                width={'50px'} height={'50px'}
+                alt={'avatar'}
+                //
+            />
 
             <div>
-                <div id={'hw1-name-' + props.message.id}>{props.message.user.name}</div>
+                <div id={'hw1-name-' + props.message.id}>
-                <pre id={'hw1-text-' + props.message.id}>{props.message.message.text}</pre>
+                    {/*создаёт студент*/}
-                <div id={'hw1-time-' + props.message.id}>{props.message.message.time}</div>
+                    {props.message.user.name}
+                    {/**/}
+                </div>
+                <pre id={'hw1-text-' + props.message.id}>
+                    {/*создаёт студент*/}
+                    {props.message.message.text}
+                    {/**/}
+                </pre>
+                <div id={'hw1-time-' + props.message.id}>
+                    {/*создаёт студент*/}
+                    {props.message.message.time}
+                    {/**/}
+                </div>
             </div>
         </div>
     )

src/s2-homeworks/hw01/MessageSender.tsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import {message0} from './HW1'
+import s from './Message.module.css'
 
 // компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
 const MessageSender = (props: any) => {
@@ -23,9 +24,18 @@ const MessageSender = (props: any) => {
         <>
             {messages.map(m => <M key={'message' + m.id} message={m}/>)}
 
-            <div id={'hw1-send-message-form'}>
+            <div id={'hw1-send-message-form'} className={s.sendForm}>
-                <textarea id={'hw1-textarea'} value={text} onChange={e => setText(e.currentTarget.value)} style={{margin: '0 10px'}}/>
+                <textarea
-                <button id={'hw1-button'} onClick={addMessage}>send</button>
+                    id={'hw1-textarea'}
+                    value={text}
+                    onChange={e => setText(e.currentTarget.value)}
+                    className={s.textarea}
+                />
+                <button id={'hw1-button'} onClick={addMessage} className={s.button}>
+                    {/*текст кнопки могут изменить студенты*/}
+                    send
+                    {/**/}
+                </button>
             </div>
         </>
     )