Дарья Звягинцева, М3337

package.json

@@ -9,6 +9,8 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@types/react": "16.8.19",
+    "@types/react-dom": "16.8.4",
     "react": "16.8.6",
     "react-dom": "16.8.6"
   },

src/allright/allright.css

@@ -0,0 +1,19 @@
+.window__allright {
+	border-top: 1px solid #e2e2e2;
+	width: 100%;
+	position: absolute;
+	margin-top: 10px;
+	bottom: 0;
+}
+
+.allright__foot {
+	margin-top: 8px;
+	float: right;
+	margin-right: 20px; 
+	white-space: nowrap;
+	width: 345px;
+	height: 12px;
+	font-family: HelveticaNeue, Helvetica, sans-serif;
+	font-size: 11px;
+	color: #9b9b9b;
+}

src/allright/allright.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './allright.css';
+
+function Allright() {
+    return (
+      <div className="allright window__allright" id = 'allright'>
+				<p className="allright__foot">Помощь и обратноя связь &nbsp; &nbsp; &nbsp; Реклама &nbsp; &nbsp; &nbsp;  &#169; 2001-2018, Яндекс</p>
+		</div>
+    );
+}
+
+export default Allright;

src/allright/index.js

@@ -0,0 +1,2 @@
+import Allright from './allright'
+export default Allright

src/app/app.css

@@ -1,27 +1,23 @@
-.app {
-  text-align: center;
+@font-face {
+    font-family: Yandex Sans Text Thin;
+    src: url(../source/YandexSansText-Thin/YandexSansText-Thin.woff2) format('woff2');
+    src: url(../source/YandexSansText-Thin/YandexSansText-Thin.ttf) format('truetype');
 }
-
-.app-header {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #282c34;
-  color: #fff;
-  font-size: calc(10px + 2vmin);
+@font-face {
+    font-family: Yandex Sans Text Bold;
+    src: url(../source/YandexSansText-Bold/YandexSansText-Bold.woff2) format('woff2');
+    src: url(../source/YandexSansText-Bold/YandexSansText-Bold.ttf) format('truetype');
 }
-
-.app-link {
-  color: #61dafb;
+@font-face {
+    font-family: 'Yandex Sans Text Regular';
+    src: url('../source/YandexSansText-Regular/YandexSansText-Regular.woff') format('woff'),
+         url('../source/YandexSansText-Regular/YandexSansText-Regular.ttf') format('truetype');
 }
 
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+
+
+.app {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}

src/app/app.tsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+import './app.css';
+import Logo from '../logo';
+import Window from '../window';
+
+
+export class App extends Component {
+  render() {
+    return (
+      <div className="app">
+        <header className="app-header">
+        </header>
+        <Window />
+      </div>
+    );
+  }
+}

src/colorButton/colorButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './colorButton.css';
+
+
+function ColorButton({changeColor} : {changeColor: () => void }) {
+    return (
+      <button id="colorButton" onClick={changeColor}>перейти на темную сторону</button>
+    );
+}
+
+export default ColorButton;

src/colorButton/index.js

@@ -0,0 +1,2 @@
+import ColorButton from './colorButton'
+export default ColorButton

src/find/find.css

@@ -0,0 +1,15 @@
+.body__find {
+	font-family: Yandex Sans Text Regular, sans-serif;
+	font-size: 15px;
+	padding-left: 16px;
+	border: none;
+
+	position: absolute;
+	margin-top: 11px;
+	margin-left: 320px;
+	width: 301px;
+	height: 32px;
+	opacity: 0.5;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	background-color: #fff;
+}

src/find/find.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import './find.css';
+
+interface IProps {
+  filterText: string;
+  onFilterChange: (value: string) => void;
+}
+function  Find (props: IProps) {
+  console.log('Search');
+  const { filterText,  onFilterChange} = props;
+
+  return (
+      <input
+	       		className="body__find" 
+	       		name="request" 
+	       		value={filterText}
+	       		type="search"
+	       		placeholder="Поиск"
+	       		onChange={e => onFilterChange(e.target.value)}
+       		/>
+  );
+}; 
+
+
+export default Find;

src/find/index.js

@@ -0,0 +1,2 @@
+import Find from './find'
+export default Find

src/header/header.css

@@ -0,0 +1,23 @@
+.window__header {
+	margin-left: 20px; 
+	margin-top: 11px; 
+}
+
+.header__item {
+	background: none;
+	color: #ccc;
+	border: 0 none;
+}
+#delButton {
+	background: none;
+	border: none;
+	color: #ccc;
+}
+
+#spinner {
+	margin-left: 400px;
+	margin-top: -11px; 
+	/*position: relative;*/
+    position: absolute;
+    display: none;
+}

src/header/header.tsx

@@ -0,0 +1,37 @@
+import React, { Component }  from 'react';
+
+import './header.css';
+import spinner from '../source/spinner.gif'
+
+interface IProps {
+	isAllSelected : boolean;
+	onDelete: () => void;
+	onSelectAll: () => void;
+}
+/*<img id = "spinner"
+			          src = {spinner}
+			          width = "40"
+			          height = "40"
+			          />*/
+function  Header(props: IProps) {
+  const {isAllSelected, onDelete, onSelectAll} = props;
+  return (
+	      <div className = "header window__header">
+
+					<input type="checkbox" 
+					className="header__box-item" 
+					id = "set-all-box" 
+					checked={isAllSelected}
+					onChange={e => onSelectAll()}/>
+					<input type="submit" name="forward" className = "header__item" value="Переслать" />
+					<button id="delButton"
+						onClick={e => onDelete()}
+					>Удалить</button>
+					<input type="submit" name="spam" className = "header__item" value="Это спам!" />
+					<input type="submit" name="read" className = "header__item" value="Прочитано" />
+
+			</div>
+	    );
+}; 
+
+export default Header;

src/header/index.js

@@ -0,0 +1,2 @@
+import Header from './header'
+export default Header

src/interfaces/ILetter.ts

@@ -0,0 +1,13 @@
+export default interface ILetter {
+
+	id: number;
+	logo_authtor: string;
+	authtor: string;
+	textletter: string;
+	date: string;
+	isUnread: boolean;
+	hidden: boolean;
+	deleted: boolean;
+	display: boolean;
+
+}

src/letter/index.js

@@ -0,0 +1,2 @@
+import Letter from './letter'
+export default Letter