itmo2019 · Shokk357 · May 26, 2019 · Jun 15, 2019
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/allLetters/allLetters.css b/src/app/allLetters/allLetters.css
@@ -0,0 +1,4 @@
+.allLetters {
+  display: inline-block;
+  width: 100%;
+}
diff --git a/src/app/allLetters/allLetters.jsx b/src/app/allLetters/allLetters.jsx
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import './allLetters.css';
+import { Letter } from '../letter';
+
+export class AllLetters extends Component {
+  render() {
+    return (
+      <div className="allLetters">
+        {this.props.visibleLetters.map(letter => {
+          return (
+            <Letter
+              key={letter.id}
+              id={letter.id}
+              text={letter.text}
+              author={letter.author}
+              subject={letter.subject}
+              date={letter.date}
+              changeAnimation={letter.changeAnimation}
+              switchLetterCheckbox={this.props.switchLetterCheckbox}
+              deleteChosenLetter={this.props.deleteChosenLetter}
+              isSelected={this.props.markedLetters[letter.id]}
+              openLetter={this.props.openLetter}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
diff --git a/src/app/allLetters/index.js b/src/app/allLetters/index.js
@@ -0,0 +1 @@
+export * from './allLetters';
diff --git a/src/app/app.css b/src/app/app.css
@@ -1,27 +1,13 @@
 .app {
-  text-align: center;
+  padding: 25px 3% 2%;
 }
 
-.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: HelveticaNeue;
+  src: url(txtStyle/HelveticaNeueCyr-Medium.otf);
 }
 
-.app-link {
-  color: #61dafb;
-}
-
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+@font-face {
+  font-family: HelveticaNeueLight;
+  src: url(txtStyle/HelveticaNeueCyr-Light.otf);
 }
diff --git a/src/app/app.jsx b/src/app/app.jsx
@@ -1,24 +1,15 @@
 import React, { Component } from 'react';
 
 import './app.css';
+import { Header } from './header';
+import { MailInnerContent } from './mailInnerContent';
 
 export class App extends Component {
   render() {
     return (
       <div className="app">
-        <header className="app-header">
-          <p>
-            Edit <code>src/app/app.jsx</code> and save to reload.
-          </p>
-          <a
-            className="app-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Header />
+        <MailInnerContent />
       </div>
     );
   }

diff --git a/src/app/button/button.css b/src/app/button/button.css
@@ -0,0 +1,29 @@
+.button__textMenu {
+  width: 137px;
+  height: 13px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 10px;
+  margin-bottom: 8px;
+  margin-left: -10px;
+  color: #707070;
+  font-family: HelveticaNeue;
+  font-size: 11px;
+  line-height: 16px;
+  list-style-type: none;
+}
+
+.button__textMenu:hover {
+  background-color: #cdd6e4;
+  border-radius: 3px;
+  color: #555555;
+  font-weight: bold;
+}
+
+.button_unhighlight {
+  color: inherit;
+}
+
+.button__delLine {
+  text-decoration: none;
+}
diff --git a/src/app/button/button.jsx b/src/app/button/button.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import './button.css';
+
+export class Button extends Component {
+  render() {
+    return (
+      <li className="button__textMenu">
+        <a href="#" className="button_unhighlight button__delLine">
+          {this.props.name}
+        </a>
+      </li>
+    );
+  }
+}
diff --git a/src/app/button/index.js b/src/app/button/index.js
@@ -0,0 +1 @@
+export * from './button';
diff --git a/src/app/content/content.css b/src/app/content/content.css
@@ -0,0 +1,10 @@
+.content {
+  display: inline-block;
+  width: 78%;
+  min-height: 600px;
+  margin-left: 3%;
+  background-color: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34);
+  vertical-align: top;
+}
diff --git a/src/app/content/content.jsx b/src/app/content/content.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import './content.css';
+import { LettersMenu } from '../lettersMenu';
+import { LetterState } from '../lettersState';
+import { Footer } from '../footer';
+
+export class Content extends Component {
+  render() {
+    return (
+      <div className="content">
+        <LettersMenu
+          markLettersToDelete={this.props.markLettersToDelete}
+          selectAll={this.props.selectAll}
+          chooseAllLetters={this.props.chooseAllLetters}
+        />
+        <LetterState
+          deleteChosenLetter={this.props.deleteChosenLetter}
+          switchLetterCheckbox={this.props.switchLetterCheckbox}
+          visibleLetters={this.props.visibleLetters}
+          markedLetters={this.props.markedLetters}
+        />
+        <Footer />
+      </div>
+    );
+  }
+}
diff --git a/src/app/content/index.js b/src/app/content/index.js
@@ -0,0 +1 @@
+export * from './content';
diff --git a/src/app/footer/footer.css b/src/app/footer/footer.css
@@ -0,0 +1,24 @@
+.footer {
+  width: 100%;
+  height: 37px;
+
+  border-top: solid 1px #e2e2e2;
+}
+
+.footerText__textEndline {
+  height: 12px;
+  margin-right: 45px;
+  color: #9b9b9b;
+  float: right;
+  font-family: HelveticaNeueLight;
+  font-size: 11px;
+  line-height: 40px;
+}
+
+.footerText_unhighlight {
+  color: inherit;
+}
+
+.footerText__delLine {
+  text-decoration: none;
+}
diff --git a/src/app/footer/footer.jsx b/src/app/footer/footer.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import './footer.css';
+
+export class Footer extends Component {
+  render() {
+    return (
+      <div className="footer">
+        <span className="footerText__textEndline"><a className="footerText__delLine footerText_unhighlight" href="#">&copy; 2001 - 2018, Яндекс</a></span>
+        <span className="footerText__textEndline"><a className="footerText__delLine footerText_unhighlight" href="#">Реклама</a></span>
+        <span className="footerText__textEndline"><a className="footerText__delLine footerText_unhighlight" href="#">Помощь и обратная связь</a></span>
+      </div>
+    );
+  }
+}
diff --git a/src/app/footer/index.js b/src/app/footer/index.js
@@ -0,0 +1 @@
+export * from './footer';
diff --git a/src/app/header/header.css b/src/app/header/header.css
@@ -0,0 +1,27 @@
+.header {
+  display: inline-block;
+  width: 100%;
+  min-width: 800px;
+  height: 5%;
+}
+
+.header__ypLogo {
+  display: inline-block;
+  width: 200px;
+  margin-left: 11px;
+  font-size: 170%;
+  vertical-align: text-bottom;
+}
+
+.header__burgerMenu {
+  display: inline-block;
+  margin-top: 7px;
+}
+
+.header__line {
+  width: 20px;
+  height: 3px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  background-color: #000000;
+}
diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import './header.css';
+import { Search } from '../search';
+import logo from '../images/header-logo.svg';
+
+export class Header extends Component {
+  render() {
+    return (
+      <header className="header">
+        <div className="header__burgerMenu">
+          <div className="header__line" />
+          <div className="header__line" />
+          <div className="header__line" />
+        </div>
+        <img className="header__ypLogo" src={logo} alt="logo" />
+        <Search />
+      </header>
+    );
+  }
+}
diff --git a/src/app/header/index.js b/src/app/header/index.js
@@ -0,0 +1 @@
+export * from './header';
diff --git a/src/app/images/cross.png b/src/app/images/cross.png
diff --git a/src/app/images/header-logo.svg b/src/app/images/header-logo.svg
diff --git a/src/app/images/logo.jpg b/src/app/images/logo.jpg
diff --git a/src/app/leftMenu/index.js b/src/app/leftMenu/index.js
@@ -0,0 +1 @@
+export * from './leftMenu';
diff --git a/src/app/leftMenu/leftMenu.css b/src/app/leftMenu/leftMenu.css
@@ -0,0 +1,28 @@
+.leftMenu {
+  display: inline-block;
+  width: 147px;
+  height: 100%;
+  vertical-align: top;
+}
+
+.leftMenu__button {
+  width: 147px;
+  height: 32px;
+  margin-bottom: 8px;
+
+  border: #6287bd;
+  background-color: #6287bd;
+  border-radius: 3px;
+}
+
+.leftMenu__textWrite {
+  display: inline-block;
+  width: 56px;
+  height: 15px;
+  margin-top: 7px;
+  margin-bottom: 10px;
+  color: #ffffff;
+  font-family: HelveticaNeue;
+  font-size: 12px;
+  vertical-align: center;
+}
diff --git a/src/app/leftMenu/leftMenu.jsx b/src/app/leftMenu/leftMenu.jsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import './leftMenu.css';
+import { MailMenu } from '../mailMenu';
+
+export class LeftMenu extends Component {
+  render() {
+    return (
+      <div className="leftMenu">
+        <button className="leftMenu__button" onClick={this.props.newMail}>
+          <span className="leftMenu__textWrite">Написать</span>
+        </button>
+        <MailMenu />
+      </div>
+    );
+  }
+}
diff --git a/src/app/letter/index.js b/src/app/letter/index.js
@@ -0,0 +1 @@
+export * from './letter';