+
+ 
+
+
+ );
+ }
+}
+
+export default YandexServiceLogo;
diff --git a/src/index.css b/src/index.css
index 2b6e525..355b134 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,7 @@
body {
+ width: 100%;
+ height: 100%;
padding: 0;
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;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+ background: #e5eaf0;
}
diff --git a/src/index.jsx b/src/index.jsx
index ffc72ee..f6073ef 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { App } from './app';
+import { App } from './app/app';
import './index.css';
diff --git a/src/main-block/index.ts b/src/main-block/index.ts
new file mode 100644
index 0000000..f80c28e
--- /dev/null
+++ b/src/main-block/index.ts
@@ -0,0 +1,2 @@
+import MainBlock from './main-block'
+export default MainBlock
diff --git a/src/main-block/left-menu/folders-list/folders-list.module.css b/src/main-block/left-menu/folders-list/folders-list.module.css
new file mode 100644
index 0000000..dc5c20a
--- /dev/null
+++ b/src/main-block/left-menu/folders-list/folders-list.module.css
@@ -0,0 +1,30 @@
+.folders-list {
+ margin-top: 12px;
+}
+
+.selected {
+ background-color: #cdd6e4;
+ border-radius: 4px;
+ color: #555;
+ font-weight: 700;
+}
+
+.folders-list__folder {
+ overflow: hidden;
+ height: 14px;
+ padding: 5px 10px;
+ color: #707070;
+ font-size: 13px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.folders-list__folder:hover {
+ background-color: #d8e1ef;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.selected:hover {
+ background-color: #cdd6e4;
+}
diff --git a/src/main-block/left-menu/folders-list/folders-list.tsx b/src/main-block/left-menu/folders-list/folders-list.tsx
new file mode 100644
index 0000000..cc15e94
--- /dev/null
+++ b/src/main-block/left-menu/folders-list/folders-list.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './folders-list.module.css';
+
+class FoldersList extends React.Component{
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default FoldersList;
diff --git a/src/main-block/left-menu/index.ts b/src/main-block/left-menu/index.ts
new file mode 100644
index 0000000..ee2e47f
--- /dev/null
+++ b/src/main-block/left-menu/index.ts
@@ -0,0 +1,2 @@
+import LeftMenu from './left-menu'
+export default LeftMenu
diff --git a/src/main-block/left-menu/left-menu.module.css b/src/main-block/left-menu/left-menu.module.css
new file mode 100644
index 0000000..d74d4e5
--- /dev/null
+++ b/src/main-block/left-menu/left-menu.module.css
@@ -0,0 +1,24 @@
+.main-block__left-menu {
+ display: inline-block;
+ width: 19.5%;
+ min-width: 150px;
+}
+
+.left-menu__write-letter {
+ overflow: hidden;
+ height: 32px;
+ padding: 0 10px;
+ background-color: #6287bd;
+ border-radius: 4px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 32px;
+
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.left-menu__write-letter:hover {
+ cursor: pointer;
+}
diff --git a/src/main-block/left-menu/left-menu.tsx b/src/main-block/left-menu/left-menu.tsx
new file mode 100644
index 0000000..6a291bd
--- /dev/null
+++ b/src/main-block/left-menu/left-menu.tsx
@@ -0,0 +1,17 @@
+import React, { ReactComponentElement } from 'react';
+
+import styles from './left-menu.module.css';
+import FoldersList from './folders-list/folders-list';
+
+class LeftMenu extends React.Component {
+ render() {
+ return (
+ Входящие
+ Отправленные
+ Удаленные
+ Спам
+ Черновики
+ Создать папку
+
+
+ );
+ }
+}
+
+export default LeftMenu;
diff --git a/src/main-block/main-block.module.css b/src/main-block/main-block.module.css
new file mode 100644
index 0000000..7437726
--- /dev/null
+++ b/src/main-block/main-block.module.css
@@ -0,0 +1,5 @@
+.mail-page__main-block {
+ min-width: 800px;
+ min-height: 100%;
+ padding-top: 13px;
+}
diff --git a/src/main-block/main-block.tsx b/src/main-block/main-block.tsx
new file mode 100644
index 0000000..bcde187
--- /dev/null
+++ b/src/main-block/main-block.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styles from './main-block.module.css';
+import LeftMenu from './left-menu';
+import MessagesBlock from './messages-block';
+import { MessageInterface } from '../app';
+
+interface InjectedProps {
+ messagesList: MessageInterface[];
+ messagesPerPage: number;
+ updateList: (newList: MessageInterface[]) => void;
+}
+
+class MainBlock extends React.ComponentНаписать
+
+
+ );
+ }
+}
+
+export default MainBlock;
diff --git a/src/main-block/messages-block/footer/footer.module.css b/src/main-block/messages-block/footer/footer.module.css
new file mode 100644
index 0000000..5a40335
--- /dev/null
+++ b/src/main-block/messages-block/footer/footer.module.css
@@ -0,0 +1,35 @@
+.footer {
+ width: 100%;
+ height: 34px;
+
+ border-top: solid 1px #e2e2e2;
+}
+
+.footer__links-list {
+ display: inline;
+ padding: 5px 20px;
+ margin: 5px 0;
+ float: right;
+ font-family: 'Helvetica Neue', sans-serif;
+ font-size: 11px;
+}
+
+.link-container {
+ display: inline;
+}
+
+.footer-link {
+ display: inline-block;
+ overflow: hidden;
+ max-width: 200px;
+ margin-left: 20px;
+ color: #ccc;
+ cursor: pointer;
+ outline: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.footer-link:focus {
+ outline: 2px solid #d9f7ff;
+}
diff --git a/src/main-block/messages-block/footer/footer.tsx b/src/main-block/messages-block/footer/footer.tsx
new file mode 100644
index 0000000..945619e
--- /dev/null
+++ b/src/main-block/messages-block/footer/footer.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styles from './footer.module.css';
+
+class Footer extends React.Component{
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default Footer;
diff --git a/src/main-block/messages-block/footer/index.ts b/src/main-block/messages-block/footer/index.ts
new file mode 100644
index 0000000..cd82817
--- /dev/null
+++ b/src/main-block/messages-block/footer/index.ts
@@ -0,0 +1,2 @@
+import Footer from './footer'
+export default Footer
diff --git a/src/main-block/messages-block/header/header.module.css b/src/main-block/messages-block/header/header.module.css
new file mode 100644
index 0000000..eb52409
--- /dev/null
+++ b/src/main-block/messages-block/header/header.module.css
@@ -0,0 +1,53 @@
+.messages-block-header {
+ overflow: auto;
+ height: 40px;
+
+ border-bottom: solid 1px #e2e2e2;
+ font-family: 'Helvetica Neue', sans-serif;
+ font-size: 13px;
+ white-space: nowrap;
+}
+
+.messages-block-header__action {
+ display: inline-block;
+ width: auto;
+
+ margin-left: 15px;
+ color: #ccc;
+ cursor: pointer;
+ font-weight: 500;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.button-to-div {
+ padding: 0;
+
+ border: 0;
+ font-family: inherit;
+ font-size: 100%;
+ outline: none;
+}
+
+.button-to-div:focus {
+ outline: 2px solid #d9f7ff;
+}
+
+#check-all:global {
+ margin-top: 12px;
+ margin-right: 10px;
+ margin-left: 20px;
+}
+
+#check-all-label:global {
+ display: inline-block;
+ width: 46px;
+ height: 40px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
diff --git a/src/main-block/messages-block/header/header.tsx b/src/main-block/messages-block/header/header.tsx
new file mode 100644
index 0000000..a711e17
--- /dev/null
+++ b/src/main-block/messages-block/header/header.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import styles from './header.module.css';
+import checkboxStyle from '../messages-block.module.css'
+
+interface InjectedProps {
+ handleSelectAll: () => void;
+ deleteSelected: () => void;
+ selectAllCheckbox: boolean;
+}
+
+class Header extends React.Component
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Header;
diff --git a/src/main-block/messages-block/header/index.ts b/src/main-block/messages-block/header/index.ts
new file mode 100644
index 0000000..0d3f295
--- /dev/null
+++ b/src/main-block/messages-block/header/index.ts
@@ -0,0 +1,2 @@
+import Header from './header'
+export default Header
diff --git a/src/main-block/messages-block/hidden-message/hidden-message.module.css b/src/main-block/messages-block/hidden-message/hidden-message.module.css
new file mode 100644
index 0000000..da7e406
--- /dev/null
+++ b/src/main-block/messages-block/hidden-message/hidden-message.module.css
@@ -0,0 +1,38 @@
+.hidden-message {
+ position: relative;
+ z-index: 1;
+ top: 0;
+
+ display: none;
+ min-height: 500px;
+
+ border-bottom: solid 1px #e2e2e2;
+ background-color: #fff;
+}
+
+.hidden-message__open {
+ display: block;
+}
+
+.hidden-message__closed {
+ display: none;
+}
+
+.hidden-message__content {
+ overflow: auto;
+ padding: 20px;
+ font-family: 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ white-space: normal;
+}
+
+.close-message {
+ margin-right: 5px;
+
+ border: 0;
+ color: #ccc;
+ cursor: pointer;
+ float: right;
+ font-size: 35px;
+ font-weight: 100;
+}
diff --git a/src/main-block/messages-block/hidden-message/hidden-message.tsx b/src/main-block/messages-block/hidden-message/hidden-message.tsx
new file mode 100644
index 0000000..4ce74c6
--- /dev/null
+++ b/src/main-block/messages-block/hidden-message/hidden-message.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styles from './hidden-message.module.css';
+
+interface InjectedProps {
+ closeMessage: () => void;
+ messageIsOpen: boolean;
+ hiddenMessageText: String;
+}
+
+class HiddenMessage extends React.Component
+
+
+
+ );
+ }
+}
+
+export default HiddenMessage;
diff --git a/src/main-block/messages-block/hidden-message/index.ts b/src/main-block/messages-block/hidden-message/index.ts
new file mode 100644
index 0000000..9536208
--- /dev/null
+++ b/src/main-block/messages-block/hidden-message/index.ts
@@ -0,0 +1,2 @@
+import HiddenMessage from './hidden-message'
+export default HiddenMessage
diff --git a/src/main-block/messages-block/index.ts b/src/main-block/messages-block/index.ts
new file mode 100644
index 0000000..54f0a44
--- /dev/null
+++ b/src/main-block/messages-block/index.ts
@@ -0,0 +1,2 @@
+import MessagesBlock from './messages-block'
+export default MessagesBlock
diff --git a/src/main-block/messages-block/message/index.ts b/src/main-block/messages-block/message/index.ts
new file mode 100644
index 0000000..3a718b6
--- /dev/null
+++ b/src/main-block/messages-block/message/index.ts
@@ -0,0 +1,2 @@
+import Message from './message'
+export default Message
diff --git a/src/main-block/messages-block/message/message.module.css b/src/main-block/messages-block/message/message.module.css
new file mode 100644
index 0000000..35758c9
--- /dev/null
+++ b/src/main-block/messages-block/message/message.module.css
@@ -0,0 +1,124 @@
+.select-message__checkbox {
+ margin-top: 12px;
+ margin-right: 10px;
+ margin-left: 20px;
+}
+
+.select-message__checkbox-label {
+ display: inline-block;
+ width: 46px;
+ height: 40px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.message-container {
+ width: calc(100% - 46px - 3px);
+ padding: 0;
+ padding-right: 3px;
+
+ border: 0;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: 100%;
+ outline: none;
+}
+
+.message-container:focus {
+ box-shadow: 0 0 0 2px #d9f7ff;
+}
+
+.message {
+ overflow: hidden;
+ height: 40px;
+
+ border-bottom: solid 0 #e2e2e2;
+ font-family: 'Helvetica Neue', sans-serif;
+ font-size: 13px;
+ opacity: 0;
+ text-overflow: ellipsis;
+ transition: opacity 1.5s, height 1.5s, border-bottom-width 1.5s;
+ white-space: nowrap;
+ will-change: transform, height, opacity;
+}
+
+.message-info__sender-logo {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ background-color: #f33;
+
+ border-radius: 100px;
+ color: #fff;
+ line-height: 30px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.message-info__sender {
+ display: inline-block;
+ overflow: hidden;
+ width: 175px;
+ margin-left: 10px;
+ color: #000;
+ line-height: 30px;
+ text-align: left;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+
+ white-space: nowrap;
+}
+
+.message-info__mark {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin-right: 10px;
+ margin-left: 10px;
+ vertical-align: middle;
+}
+
+.unread-mark {
+ background-color: #6287bd;
+ border-radius: 100px;
+}
+
+.message-info__subject {
+ display: inline-block;
+ overflow: hidden;
+ width: calc(100% - 325px);
+ color: #000;
+ text-align: left;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.message-info__date-container {
+ display: inline-block;
+ overflow: hidden;
+ width: 70px;
+ margin-right: 10px;
+ margin-left: 0;
+ color: #9b9b9b;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.date-container__date {
+ float: right;
+}
+
+.unshrink {
+ border-bottom: solid 1px #e2e2e2;
+ opacity: 1;
+}
+
+.shrink {
+ opacity: 0;
+}
diff --git a/src/main-block/messages-block/message/message.tsx b/src/main-block/messages-block/message/message.tsx
new file mode 100644
index 0000000..f0c0ca8
--- /dev/null
+++ b/src/main-block/messages-block/message/message.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import styles from './message.module.css';
+import checkboxStyle from '../messages-block.module.css'
+import { MessageInterface } from '../../../app';
+
+interface InjectedProps {
+ message: MessageInterface;
+ openMessage: (message: MessageInterface) => void;
+ selectCheckbox: (messageIndex: number) => void;
+ messageIndex: number;
+}
+
+class Message extends React.Component
+ {this.props.hiddenMessageText}
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Message;
diff --git a/src/main-block/messages-block/messages-block.module.css b/src/main-block/messages-block/messages-block.module.css
new file mode 100644
index 0000000..270c35d
--- /dev/null
+++ b/src/main-block/messages-block/messages-block.module.css
@@ -0,0 +1,49 @@
+.messages-block {
+ display: inline-block;
+ width: 78%;
+ min-width: 600px;
+ height: 100%;
+ margin-right: 0;
+ margin-left: 2%;
+ background-color: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+
+ vertical-align: top;
+}
+
+.messages-list {
+ overflow: auto;
+ min-height: 500px;
+ max-height: 1231px;
+
+ border-bottom: solid 1px #e2e2e2;
+}
+
+.messages-list__open {
+ display: block;
+}
+
+.messages-list__closed {
+ display: none;
+}
+
+.checkbox {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ background-color: #fff;
+
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.virtualizedList {
+ outline: none;
+}
+
+.virtualizedList:focus {
+ outline: 2px solid #d9f7ff;
+}
diff --git a/src/main-block/messages-block/messages-block.tsx b/src/main-block/messages-block/messages-block.tsx
new file mode 100644
index 0000000..f9a39a0
--- /dev/null
+++ b/src/main-block/messages-block/messages-block.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+
+import styles from './messages-block.module.css';
+import Header from './header';
+import HiddenMessage from './hidden-message';
+import Message from './message';
+import Footer from './footer';
+import { MessageInterface } from '../../app';
+import { AutoSizer, List } from 'react-virtualized';
+
+interface InjectedProps {
+ messagesList: MessageInterface[];
+ messagesPerPage: number;
+ updateList: (newList: MessageInterface[]) => void;
+}
+
+interface State {
+ hiddenMessageText: String,
+ messageIsOpen: boolean,
+ selectAllCheckbox: boolean,
+ messagesList: MessageInterface[]
+}
+
+class MessagesBlock extends React.Component
+
+ );
+ }
+}
+
+export default MessagesBlock;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
+
+ {({ height, width }) => (
+
+
+
+ - {
+ return
+
;
+ }
+ }
+ />
+ )}
+