itmo2019 · alexust27 · May 20, 2019 · May 31, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,11 +10,14 @@
   ],
   "dependencies": {
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "classnames": "latest"
   },
   "devDependencies": {
     "@hellroot/eslint-config": "1.8.0",
     "@hellroot/stylelint-config": "1.1.0",
+    "@types/classnames": "2.2.8",
+    "@types/react": "16.8.18",
     "eslint": "5.12.0",
     "npm-run-all": "4.1.5",
     "prettier": "1.17.0",

diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <title>React App</title>
+    <title>Яндекс.Почта</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/app/app.css b/src/app/app.css
diff --git a/src/app/app.jsx b/src/app/app.jsx
diff --git a/src/app/app.module.css b/src/app/app.module.css
@@ -0,0 +1,29 @@
+@font-face {
+  font-family: YandexSansBold;
+  /*src: url(fonts/YandexSansDisplay-Bold.ttf);*/
+}
+
+@font-face {
+  font-family: YandexSansThin;
+  /*src: url(/src/app/fonts/YandexSansDisplay-Thin.ttf);*/
+}
+
+@font-face {
+  font-family: HelveticaNeue;
+  /*src: url(/src/app/fonts/HelveticaNeueCyr-Medium.otf);*/
+}
+
+@font-face {
+  font-family: HelveticaNeueLight;
+  /*src: url(/src/app/fonts/HelveticaNeueCyr-Light.otf);*/
+}
+
+body {
+  position: relative;
+
+  min-width: 750px;
+  max-width: 1600px;
+  padding: 0;
+  margin: 0 auto;
+  background: #e5eaf0;
+}
diff --git a/src/app/app.test.jsx b/src/app/app.test.jsx
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+
+import styles from './app.module.css';
+import { Header } from './structure/header/header';
+import { Menu } from './structure/menu/menu';
+import { MainContent } from './structure/main-content/mainContent';
+
+export interface LetterType {
+  key: string;
+  id: string;
+  // classList: string[];
+  text: string[];
+  author : string;
+  topic : string;
+  date : string;
+  isChecked: boolean;
+  isVisible: boolean;
+}
+
+
+export class App extends Component {
+  render() {
+    return (
+      <div className={styles.body}>
+        <Header />
+        <Menu />
+        <MainContent />
+      </div>
+    );
+  }
+}
diff --git a/src/app/fonts/HelveticaNeueCyr-Light.otf b/src/app/fonts/HelveticaNeueCyr-Light.otf
diff --git a/src/app/fonts/HelveticaNeueCyr-Medium.otf b/src/app/fonts/HelveticaNeueCyr-Medium.otf
diff --git a/src/app/fonts/YandexSansDisplay-Bold.ttf b/src/app/fonts/YandexSansDisplay-Bold.ttf
diff --git a/src/app/fonts/YandexSansDisplay-Thin.ttf b/src/app/fonts/YandexSansDisplay-Thin.ttf
diff --git a/src/app/index.js → src/app/index.ts b/src/app/index.js → src/app/index.ts
diff --git a/src/app/structure/header/header.module.css b/src/app/structure/header/header.module.css
@@ -0,0 +1,36 @@
+/*Start SearchInput*/
+
+.header {
+  margin-top: 7px;
+  margin-bottom: 18px;
+  margin-left: 22px;
+}
+
+.header__lines,
+.header__mainLogo {
+  margin: 0;
+  float: left;
+}
+
+.header__lines {
+  margin-top: 12px;
+  float: left;
+}
+
+.header__line {
+  width: 20px;
+  height: 3px;
+  margin-top: 4px;
+  background-color: #000000;
+}
+
+.header__mainLogo {
+  margin-top: 7px;
+  margin-left: 11px;
+}
+
+.clearfix:after {
+  display: table;
+  clear: both;
+  content: '';
+}