hw1

src/s1-main/App.module.css

@@ -1,5 +1,6 @@
 .App {
-
+    padding-top: 107px;
+    padding-bottom: 63px;
 }
 
 .hw {
@@ -7,5 +8,22 @@
 }
 
 .hwTitle {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 27px;
+    margin-bottom: 10px;
+    margin-left: 70px;
+}
 
+.hwContainer {
+    padding: 0 70px 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+hr {
+    border-top: 1px solid #d9d9d9;
+    margin: 0
 }

src/s1-main/App.tsx

@@ -15,14 +15,14 @@ const App = () => {
    }, [themeId])
    return (
       <div className={s.App} data-theme={themeId}>
-         <div>react homeworks:</div>
+          {/*<div>react homeworks:</div>*/}
 
-         {/*<HW1/>*/}
+          <HW1/>
          {/*<HW2/>*/}
          {/*<HW3/>*/}
          {/*<HW4/>*/}
 
-         <HW5 />
+         {/*<HW5 />*/}
       </div>
    )
 }

src/s2-homeworks/hw01/FriendMessage.tsx

@@ -5,34 +5,37 @@ import s from './Message.module.css'
 const FriendMessage = (props: any) => {
     return (
         <div id={'hw1-friend-message-' + props.message.id} className={s.friendMessage}>
-            <img
+            <div className={s.friendImageAndMessage}>
-                id={'hw1-friend-avatar-' + props.message.id}
+                <img
+                    id={'hw1-friend-avatar-' + props.message.id}
 
-                // создаёт студент
+                    // создаёт студент
-                src={props.message.user.avatar}
+                    src={props.message.user.avatar}
-                width={'50px'} height={'50px'}
+                    width={'50px'} height={'50px'}
-                alt={'avatar'}
+                    alt={'avatar'}
-                //
+                    //
-            />
+                />
+                <div className={s.friendMessageText}>
+                    <div id={'hw1-friend-name-' + props.message.id} className={s.friendName}>
+                        {/*создаёт студент*/}
+                        {props.message.user.name}
+                        {/**/}
+                    </div>
+                    <div id={'hw1-friend-text-' + props.message.id} className={s.friendText}>
+                        {/*создаёт студент*/}
+                        {props.message.message.text}
+                        {/**/}
+                    </div>
+                </div>
 
-            <div>
+            </div>
-                <div id={'hw1-friend-name-' + props.message.id}>
+            <div id={'hw1-friend-time-' + props.message.id} className={s.friendTime}>
-                    {/*создаёт студент*/}
+                {/*создаёт студент*/}
-                    {props.message.user.name}
+                {props.message.message.time}
-                    {/**/}
+                {/**/}
-                </div>
-                <pre id={'hw1-friend-text-' + props.message.id}>
-                    {/*создаёт студент*/}
-                    {props.message.message.text}
-                    {/**/}
-                </pre>
-                <div id={'hw1-friend-time-' + props.message.id}>
-                    {/*создаёт студент*/}
-                    {props.message.message.time}
-                    {/**/}
-                </div>
             </div>
         </div>
+
     )
 }
 

src/s2-homeworks/hw01/HW1.tsx

@@ -4,7 +4,7 @@ import MessageSender from './MessageSender'
 import s from './Message.module.css'
 import s2 from '../../s1-main/App.module.css'
 import FriendMessage from './FriendMessage'
-
+import avatar from './avatar.png'
 // нужно создать правильный тип вместо any
 export type MessageType = any
 
@@ -12,18 +12,18 @@ export type MessageType = any
 export const message0: MessageType = {
     id: 0,
     user: {
-        avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
+        avatar: avatar,
         name: 'Some Name',
     },
     message: {
-        text: 'some text',
+        text: 'some textsome textsome textsome textsome textsome textsome text',
         time: '22:00',
     },
 }
 export const friendMessage0: MessageType = {
     id: 100,
     user: {
-        avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
+        avatar: avatar,
         name: 'Friend Name',
     },
     message: {
@@ -36,19 +36,24 @@ export const friendMessage0: MessageType = {
 const HW1 = () => {
     return (
         <div id={'hw1'} className={s2.hw}>
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 1</div>
+            <div className={s2.hwTitle}>Homework #1</div>
+            <hr/>
+            <div className={s2.hwContainer}>
+                {/*проверка отображения (не менять)*/}
+                <div>
+                    <Message message={message0}/>
 
-            {/*проверка отображения (не менять)*/}
+                    {/*не обязательно*/}
-            <Message message={message0}/>
+                    <FriendMessage message={friendMessage0}/>
+                </div>
 
-            {/*не обязательно*/}
+                {/*для автоматической проверки дз (не менять)*/}
-            <FriendMessage message={friendMessage0}/>
+                <MessageSender M={Message}/>
+            </div>
 
-            {/*для автоматической проверки дз (не менять)*/}
-            <MessageSender M={Message}/>
 
             <hr/>
             {/*можно убрать этот тег*/}

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

@@ -1,26 +1,176 @@
 .message {
     display: flex;
-    justify-content: right;
+    flex-direction: column;
-    border: 1px solid lime;
+    justify-content: flex-start;
-    margin: 10px;
+    align-items: flex-end;
+    margin: 24px 0 23px;
 }
 
 .friendMessage {
     display: flex;
-    border: 1px solid red;
+    flex-direction: column;
-    margin: 10px;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 24px 0 23px;
+}
+
+.imageAndMessage {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+}
+
+.friendImageAndMessage {
+    display: flex;
+    align-items: flex-end;
+}
+
+.friendName {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    text-align: start;
+}
+
+.name {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    color: white;
+    text-align: end;
+}
+
+.text {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    color: white;
+}
+
+.friendText {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.messageText {
+    position: relative;
+    width: 100%;
+    max-width: 70%;
+    height: 100%;
+    background-color: #06c;
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
+    display: flex;
+    flex-direction: column;
+    margin-right: 20px;
+    padding: 7px 25px 8px 13px;
+    border-radius: 10px;
+}
+
+.messageText:after {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: -15px;
+    left: auto;
+    top: auto;
+    bottom: 0;
+    border: 16px solid;
+    border-color: transparent transparent #06c transparent;
+}
+
+.friendMessageText {
+    position: relative;
+    width: 100%;
+    max-width: 70%;
+    height: 100%;
+    background-color: #f5f7fb;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+    padding: 7px 25px 8px 13px;
+    border-radius: 10px;
+}
+
+.friendMessageText:after {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: auto;
+    left: -15px;
+    top: auto;
+    bottom: 0;
+    border: 16px solid;
+    border-color: transparent transparent #f5f7fb transparent;
 }
 
 .sendForm {
     display: flex;
     justify-content: right;
-    margin: 10px;
+    gap: 44px;
 }
 
 .textarea {
-
+    box-sizing: border-box;
+    background: #f5f7fb;
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
+    border-radius: 20px;
+    width: 100%;
+    border: none;
+    resize: none;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    padding: 12px 25px;
 }
 
 .button {
+    width: 120px;
+    height: 40px;
+    background: #06c;
+    border-radius: 20px;
+    border: none;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: white;
+}
+
+.button:hover {
+    cursor: pointer;
+}
+
+.time {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 12px;
+    margin-top: 5px;
+    width: 48px;
+    text-align: center;
+}
+
+img {
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+}
+
+.friendTime {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 12px;
+    margin-top: 5px;
+    width: 48px;
+    text-align: center;
+}
 
-}

src/s2-homeworks/hw01/Message.tsx

@@ -8,34 +8,35 @@ export type MessagePropsType = any
 const Message = (props: MessagePropsType) => {
     return (
         <div id={'hw1-message-' + props.message.id} className={s.message}>
-            <img
+            <div className={s.imageAndMessage}>
-                id={'hw1-avatar-' + props.message.id}
+                <img
+                    id={'hw1-avatar-' + props.message.id}
 
-                // создаёт студент
+                    // создаёт студент
-                src={props.message.user.avatar}
+                    src={props.message.user.avatar}
-                width={'50px'} height={'50px'}
+                    alt={'avatar'}
-                alt={'avatar'}
+                    //
-                //
+                />
-            />
+                <div className={s.messageText}>
-
+                    <div id={'hw1-name-' + props.message.id} className={s.name}>
-            <div>
+                        {/*создаёт студент*/}
-                <div id={'hw1-name-' + props.message.id}>
+                        {props.message.user.name}
-                    {/*создаёт студент*/}
+                        {/**/}
-                    {props.message.user.name}
+                    </div>
-                    {/**/}
+                    <div id={'hw1-text-' + props.message.id} className={s.text}>
-                </div>
+                        {/*создаёт студент*/}
-                <pre id={'hw1-text-' + props.message.id}>
+                        {props.message.message.text}
-                    {/*создаёт студент*/}
+                        {/**/}
-                    {props.message.message.text}
+                    </div>
-                    {/**/}
-                </pre>
-                <div id={'hw1-time-' + props.message.id}>
-                    {/*создаёт студент*/}
-                    {props.message.message.time}
-                    {/**/}
                 </div>
             </div>
+            <div id={'hw1-time-' + props.message.id} className={s.time}>
+                {/*создаёт студент*/}
+                {props.message.message.time}
+                {/**/}
+            </div>
         </div>
+
     )
 }
 

src/s2-homeworks/hw01/MessageSender.tsx

@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
-import {message0} from './HW1'
+import { message0 } from './HW1'
 import s from './Message.module.css'
 
 // компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
@@ -29,13 +29,15 @@ const MessageSender = (props: any) => {
                     id={'hw1-textarea'}
                     value={text}
                     onChange={e => setText(e.currentTarget.value)}
-                    onKeyPress={e => e.key === 'Enter' && e.shiftKey && addMessage()}
+                    placeholder={'Type your message'}
+                    onKeyDown={e => e.key === 'Enter' && e.shiftKey && addMessage()}
                     title={'Shift+Enter for send'}
                     className={s.textarea}
+                    rows={1}
                 />
                 <button id={'hw1-button'} onClick={addMessage} className={s.button}>
                     {/*текст кнопки могут изменить студенты*/}
-                    send
+                    Send
                     {/**/}
                 </button>
             </div>