hw2

src/index.css

@@ -1,67 +1,70 @@
 body {
-   margin: 0;
-   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-      'Helvetica Neue', sans-serif;
-   -webkit-font-smoothing: antialiased;
-   -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
 }
 
 code {
-   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-      monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
-[data-theme='1']{
-  --primary: #0066CC;
-  --primary-content: #ffffff;
-  --secondary: #f000b8,
-  --secondary-content: #ffffff;
-  --accent: #37cdbe;
-  --accent-content: #163835;
-  --neutral: #3d4451;
-  --neutral-content: #ffffff;
-  --base-100: #ffffff;
-  --base-200: #F2F2F2;
-  --base-300: #E5E6E6;
-  --base-content: #1f2937;
+[data-theme='1'] {
+    --primary: #06c;
+    --primary-content: #fff;
+    --secondary: #f000b8;
+    --secondary-content: #fff;
+    --accent: #37cdbe;
+    --accent-content: #163835;
+    --neutral: #3d4451;
+    --neutral-content: #fff;
+    --base-100: #fff;
+    --base-200: #f2f2f2;
+    --base-300: #e5e6e6;
+    --base-content: #1f2937;
 }
 
 [data-theme='2'] {
-  --primary: #661AE6;
-  --primary-content: #ffffff;
-  --secondary: #D926AA;
-  --secondary-content: #ffffff;
-  --accent: #1FB2A5;
-  --accent-content: #ffffff;
-  --neutral: #191D24;
-  --neutral-focus: #111318;
-  --neutral-content: #A6ADBB;
-  --base-100: #2A303C;
-  --base-200: #242933;
-  --base-300: #20252E;
-  --base-content: #A6ADBB;
+    --primary: #661ae6;
+    --primary-content: #fff;
+    --secondary: #d926aa;
+    --secondary-content: #fff;
+    --accent: #1fb2a5;
+    --accent-content: #fff;
+    --neutral: #191d24;
+    --neutral-focus: #111318;
+    --neutral-content: #a6adbb;
+    --base-100: #2a303c;
+    --base-200: #242933;
+    --base-300: #20252e;
+    --base-content: #a6adbb;
 }
+
 [data-theme='3'] {
-  --primary : #ef9995;
-  --primary-content: #282425;
-  --secondary : #a4cbb4;
-  --secondary-content: #282425;
-  --accent : #ebdc99;
-  --accent-content: #282425;
-  --neutral : #7d7259;
-  --neutral-content: #e4d8b4;
-  --base-100: #e4d8b4;
-  --base-200: #d2c59d;
-  --base-300: #c6b386;
-  --base-content: #282425;
-  --info: #2563eb;
-  --success: #16a34a;
-  --warning: #d97706;
-  --error: #dc2626;
+    --primary: #ef9995;
+    --primary-content: #282425;
+    --secondary: #a4cbb4;
+    --secondary-content: #282425;
+    --accent: #ebdc99;
+    --accent-content: #282425;
+    --neutral: #7d7259;
+    --neutral-content: #e4d8b4;
+    --base-100: #e4d8b4;
+    --base-200: #d2c59d;
+    --base-300: #c6b386;
+    --base-content: #282425;
+    --info: #2563eb;
+    --success: #16a34a;
+    --warning: #d97706;
+    --error: #dc2626;
 
 }
+
 html {
-   background-color: var(--base-100);
-   color: var(--base-content);
+    background-color: var(--base-100);
+    color: var(--base-content);
 }

src/s1-main/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import HW2 from '../s2-homeworks/hw02/HW2'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
 // import HW2 from '../s2-homeworks/hw02/HW2'
@@ -9,22 +10,22 @@ import { useSelector } from 'react-redux'
 import { useEffect } from 'react'
 
 const App = () => {
-   const themeId = useSelector((state: any) => state.theme.themeId)
-   useEffect(() => {
-      document.documentElement.dataset.theme = themeId
-   }, [themeId])
-   return (
-      <div className={s.App} data-theme={themeId}>
-          {/*<div>react homeworks:</div>*/}
+    const themeId = useSelector((state: any) => state.theme.themeId)
+    useEffect(() => {
+        document.documentElement.dataset.theme = themeId
+    }, [themeId])
+    return (
+        <div className={s.App} data-theme={themeId}>
+            {/*<div>react homeworks:</div>*/}
 
-          <HW1/>
-         {/*<HW2/>*/}
-         {/*<HW3/>*/}
-         {/*<HW4/>*/}
+            {/*<HW1/>*/}
+            <HW2/>
+            {/*<HW3/>*/}
+            {/*<HW4/>*/}
 
-         {/*<HW5 />*/}
-      </div>
-   )
+            {/*<HW5/>*/}
+        </div>
+    )
 }
 
 export default App

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/>
             {/*можно убрать этот тег*/}