hw2

src/s2-homeworks/hw01/HW1.tsx

@@ -55,9 +55,9 @@ const HW1 = () => {
             </div>
 
 
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
         </div>
     )

src/s2-homeworks/hw02/Affair.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {AffairType} from './HW2'
+import { AffairType } from './HW2'
 import s from './Affairs.module.css'
 
 type AffairPropsType = {
@@ -14,24 +14,24 @@ function Affair(props: AffairPropsType) {
     const priorityClass = s.item + ' ' + s[props.affair.priority]
 
     return (
-        <div id={'hw2-affair-' + props.affair._id} className={s.affair}>
-            <div id={'hw2-name-' + props.affair._id} className={s.item}>
+        <div id={'hw2-affair-' + props.affair._id} className={s.affair + ' ' + s[props.affair.priority]}>
+            <div id={'hw2-name-' + props.affair._id} className={priorityClass}>
                 {/*создаёт студент*/}
                 {props.affair.name}
                 {/**/}
             </div>
-            [
-            <div id={'hw2-priority-' + props.affair._id} className={priorityClass}>
-                {/*создаёт студент*/}
-                {props.affair.priority}
-                {/**/}
-            </div>
-            ]
+            {/*[*/}
+            {/*<div id={'hw2-priority-' + props.affair._id} className={priorityClass}>*/}
+            {/*    /!*создаёт студент*!/*/}
+            {/*    {props.affair.priority}*/}
+            {/*    /!**!/*/}
+            {/*</div>*/}
+            {/*]*/}
 
             <button
                 id={'hw2-button-delete-' + props.affair._id}
                 onClick={deleteCallback} // создаёт студент
-                className={s.item + ' ' + s.button}
+                className={priorityClass + ' ' + s.closeButton}
             >
                 {/*текст кнопки могут изменить студенты*/}
                 X

src/s2-homeworks/hw02/Affairs.module.css

@@ -1,41 +1,86 @@
-.button {
-    margin: 10px;
-    width: 60px;
-
-    background: #003300;
-    color: #99ff99;
-    outline: none;
+.all {
+    --color: #06c;
 }
-.button:focus {
-    outline: #99ff99 solid 1px;
+
+.low {
+    --color: #0c2;
+}
+
+.high {
+    --color: #c00;
+}
+
+.middle {
+    --color: #cc9c00;
+}
+
+.button {
+    background: transparent;
+    border: 1px solid var(--color);
+    border-radius: 15px;
+    color: var(--color);
+    outline: none;
+    padding: 5px 15px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }
 
 .button:active {
-    background: #99ff99;
+    background: var(--color);
+    color: white;
 }
 
 .active {
-    background: #335533;
+    background: var(--color);
+    color: white;
 }
 
 .affair {
     display: flex;
     align-items: center;
+    border: 1.5px solid var(--color);
+    width: 185px;
+    border-radius: 5px;
+}
+
+.affairs {
+    display: flex;
+    gap: 17px;
+    flex-wrap: wrap;
+    max-width: 450px;
 }
 
 .item {
-    margin: 10px;
-    width: 100px;
+    width: 145px;
+    height: 37px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.high {
-    color: red;
+.container {
+    padding: 32px 0 73px 70px;
 }
 
-.middle {
-    color: orange;
+.buttonContainer {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 32px;
+
 }
 
-.low {
-    color: lime;
+.closeButton {
+    border: none;
+    border-left: 1.5px solid var(--color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    width: 40px;
+    height: 37px;
+    font-weight: 900;
+    cursor: pointer;
 }

src/s2-homeworks/hw02/Affairs.tsx

@@ -1,6 +1,6 @@
 import React, { SetStateAction, Dispatch } from 'react'
 import Affair from './Affair'
-import {AffairType, FilterType} from './HW2'
+import { AffairType, FilterType } from './HW2'
 import s from './Affairs.module.css'
 
 type AffairsPropsType = { // need to fix any
@@ -36,24 +36,25 @@ function Affairs(props: AffairsPropsType) {
     //     props.setFilter(e.currentTarget.value as FilterType)
     // }
 
-    const cnAll = s.button + ' ' + (props.filter === 'all' ? s.active : '')
-    const cnHigh = s.button + ' ' + (props.filter === 'high' ? s.active : '')
-    const cnMiddle = s.button + ' ' + (props.filter === 'middle' ? s.active : '')
-    const cnLow = s.button + ' ' + (props.filter === 'low' ? s.active : '')
+    const cnAll = s.button + ' ' + s.all + ' ' + (props.filter === 'all' ? s.active : '')
+    const cnHigh = s.button + ' ' + s.high + ' ' + (props.filter === 'high' ? s.active : '')
+    const cnMiddle = s.button + ' ' + s.middle + ' ' + (props.filter === 'middle' ? s.active : '')
+    const cnLow = s.button + ' ' + s.low + ' ' + (props.filter === 'low' ? s.active : '')
     // const setClass = (filter: FilterType) => {
     //     return s.button + (props.filter === filter ? ' ' + s.active : '')
     // }
 
     return (
-        <div>
-
-            {mappedAffairs}
-
-            <button id={'hw2-button-all'} onClick={setAll} className={cnAll}>All</button>
-            <button id={'hw2-button-high'} onClick={setHigh} className={cnHigh}>High</button>
-            <button id={'hw2-button-middle'} onClick={setMiddle} className={cnMiddle}>Middle</button>
-            <button id={'hw2-button-low'} onClick={setLow} className={cnLow}>Low</button>
-
+        <div className={s.container}>
+            <div className={s.buttonContainer}>
+                <button id={'hw2-button-all'} onClick={setAll} className={cnAll}>All</button>
+                <button id={'hw2-button-high'} onClick={setHigh} className={cnHigh}>High</button>
+                <button id={'hw2-button-middle'} onClick={setMiddle} className={cnMiddle}>Middle</button>
+                <button id={'hw2-button-low'} onClick={setLow} className={cnLow}>Low</button>
+            </div>
+            <div className={s.affairs}>
+                {mappedAffairs}
+            </div>
             {/*<button onClick={set} className={setClass('all')} value={'all'}>All</button>*/}
             {/*<button onClick={set} className={setClass('high')} value={'high'}>High</button>*/}
             {/*<button onClick={set} className={setClass('middle')} value={'middle'}>Middle</button>*/}

src/s2-homeworks/hw02/HW2.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import Affairs from './Affairs'
 import s from './Affairs.module.css'
 import s2 from '../../s1-main/App.module.css'
@@ -45,10 +45,11 @@ function HW2() {
 
     return (
         <div id={'hw2'} className={s2.hw}>
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 2</div>
+            <div className={s2.hwTitle}>Homework #2</div>
+            <hr/>
 
             {/*не менять*/}
             <Affairs
@@ -58,7 +59,7 @@ function HW2() {
                 filter={filter}
             />
 
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
             <hr/>
             {/*можно убрать этот тег*/}