diff --git a/package-lock.json b/package-lock.json
index 24c1378..2c1555c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3396,12 +3396,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3416,17 +3418,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3543,7 +3548,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3555,6 +3561,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3569,6 +3576,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3576,12 +3584,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3600,6 +3610,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3680,7 +3691,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3692,6 +3704,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -3813,6 +3826,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -7242,12 +7256,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -7262,17 +7278,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -7389,7 +7408,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -7401,6 +7421,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -7415,6 +7436,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -7422,12 +7444,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -7446,6 +7470,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -7526,7 +7551,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -7538,6 +7564,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -7659,6 +7686,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
diff --git a/src/app/app.css b/src/app/app.css
index 1c4d511..ee523de 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -2,6 +2,7 @@
text-align: center;
}
+
.app-header {
display: flex;
min-height: 100vh;
@@ -25,3 +26,18 @@
transform: rotate(360deg);
}
}
+
+.input {
+ transition: width .35s linear;
+ outline: none;
+ border: none;
+ border-radius: 4px;
+ padding: 10px;
+ font-size: 20px;
+ width: 150px;
+ background-color: #dddddd;
+}
+
+.input-focused {
+ width: 240px;
+}
diff --git a/src/app/app.jsx b/src/app/app.jsx
index f759eed..114ce3e 100644
--- a/src/app/app.jsx
+++ b/src/app/app.jsx
@@ -2,23 +2,15 @@ import React, { Component } from 'react';
import './app.css';
+import { Header } from '../components/header/Header';
+import { PageContent } from '../components/main/PageContent';
+
export class App extends Component {
render() {
return (
-
-
+
);
}
diff --git a/src/components/header/Header.css b/src/components/header/Header.css
new file mode 100644
index 0000000..eb2e367
--- /dev/null
+++ b/src/components/header/Header.css
@@ -0,0 +1,40 @@
+.header {
+ width: 100%;
+ height: 56px;
+ float: right;
+}
+
+.header__mail-logo {
+ width: 153px;
+ height: 31px;
+ float: left;
+ margin: 19px 20% 0 22px;
+}
+
+
+.search-bar {
+ float: left;
+ width: 30%;
+ height: 60%;
+}
+
+.search-bar_position {
+ margin: 11px 0 13px;
+ opacity: 0.5;
+}
+
+.search-bar__input {
+ float: left;
+ width: 98%;
+ height: 100%;
+
+}
+
+.search-bar__input_view {
+ margin: 0;
+ padding-left: 2%;
+ opacity: 0.5;
+ text-overflow: ellipsis;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #fff;
+}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 0000000..bd38f2f
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+import './Header.css';
+
+import YandexLogo from '../../resources/images/yandex-logo.svg'
+
+export class Header extends Component {
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/main/PageContent.css b/src/components/main/PageContent.css
new file mode 100644
index 0000000..ed35caa
--- /dev/null
+++ b/src/components/main/PageContent.css
@@ -0,0 +1,4 @@
+.page-content {
+ width: 100%;
+ float: left;
+}
diff --git a/src/components/main/PageContent.jsx b/src/components/main/PageContent.jsx
new file mode 100644
index 0000000..712ce6e
--- /dev/null
+++ b/src/components/main/PageContent.jsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import {Sidebar} from './sidebar/Sidebar';
+import { MailContent } from './mail/MailContent';
+
+import './PageContent.css'
+
+export class PageContent extends Component{
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/main/mail/Mail.css b/src/components/main/mail/Mail.css
new file mode 100644
index 0000000..f495ba9
--- /dev/null
+++ b/src/components/main/mail/Mail.css
@@ -0,0 +1,115 @@
+.mail__sender-logo {
+ float: left;
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ background-color: #f33;
+ border-radius: 50%;
+ color: #fff;
+ line-height: 30px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.mail__author {
+ width: 25%;
+ height: 30px;
+ float: left;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.mail__author_view {
+ margin: 10px 20px 13px 0;
+}
+
+.mail__unread {
+ font-weight: bold;
+}
+
+.read-status {
+ float: left;
+ width: 10px;
+ height: 10px;
+
+}
+
+.read-status_view {
+ margin: 14px 10px 15px 0;
+ border-radius: 50%;
+ background-color: #6287bd;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.read-status_not-read {
+ visibility: visible;
+}
+
+.read-status_read {
+ visibility: hidden;
+}
+
+.mail {
+ height: 0px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border-bottom: solid 1px #e2e2e2;
+ transition: all 1.2s ease-out;
+}
+
+.mail__text-overflow {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.just-added {
+ height: 30px;
+ opacity: 0;
+}
+
+.already-added {
+ height: 30px;
+ opacity: 1;
+}
+
+.mail__message-body {
+ display: inline-block;
+ vertical-align: middle;
+ width: 40%;
+}
+
+.mail__checkbox {
+ width: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ height: 16px;
+}
+
+.chose {
+ float: left;
+}
+
+.chose_view {
+ margin-left: 20px;
+ margin-right: 20px;
+}
+
+.message-date {
+ right: 20px;
+ top: 13px;
+ float: right;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.message-date_view {
+ margin-right: 20px;
+}
+
+.mail_deleted {
+ transition: all 0.6s ease-out;
+ opacity: 0;
+}
diff --git a/src/components/main/mail/Mail.jsx b/src/components/main/mail/Mail.jsx
new file mode 100644
index 0000000..f92b26a
--- /dev/null
+++ b/src/components/main/mail/Mail.jsx
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+
+import './Mail.css';
+
+export class Mail extends Component {
+ constructor(props) {
+ super(props);
+ this.notifyIsMarked = this.notifyIsMarked.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ render() {
+ let marked = this.props.isMailMarked(this.props.id);
+ let justAdded = this.props.justAdded;
+ let toDelete = this.props.toDelete;
+ const mailClass = `mail${toDelete ? ' mail_deleted' : ''} ${
+ justAdded ? ' just-added' : 'already-added'
+ }`;
+ console.log(mailClass)
+ const logoClass = 'mail__sender-logo';
+ const senderClass = 'mail__author mail__text-overflow mail__unread';
+ const messageBodyClass = 'mail__message-body mail__message-body_view mail__text-overflow mail__unread';
+ const readStatusClass = 'read-status read-status_view read-status_not-read';
+ return (
+
+
+
+
+
{this.props.logo}
+
{this.props.sender}
+
+ {this.props.title}
+
+
+
+ );
+ }
+
+ handleClick(event) {
+ let targetName = event.target.className;
+ if (targetName !== 'mail__checkbox') {
+ this.props.openMail(this.props.id);
+ }
+ }
+
+ notifyIsMarked() {
+ let wasUpdate = this.props.updateAllMarked(this.props.id);
+ if (!wasUpdate) {
+ this.setState({})
+ }
+ }
+}
+
+
diff --git a/src/components/main/mail/MailAction.css b/src/components/main/mail/MailAction.css
new file mode 100644
index 0000000..3449820
--- /dev/null
+++ b/src/components/main/mail/MailAction.css
@@ -0,0 +1,52 @@
+.actions {
+ height: 37px;
+}
+
+.actions_view {
+ overflow: hidden;
+ border-bottom: 1px solid #e2e2e2;
+}
+
+.actions__chose-all {
+ width: 16px;
+ height: 16px;
+}
+
+.actions__chose-all {
+ float: left;
+}
+
+.chose_view {
+ margin-right: 20px;
+ margin-left: 20px;
+}
+
+.actions__choose-all {
+ width: 16px;
+ height: 16px;
+}
+
+.actions_option {
+ margin: 11px 10px;
+ float: left;
+ font: normal 500 13px normal HelveticaNeue;
+ font-stretch: normal;
+ letter-spacing: normal;
+ color: #cccccc;
+}
+
+.no-button-decoration {
+ padding: 0;
+ border: none;
+ background: none;
+}
+
+.no-button-decoration:focus{
+ outline: 0;
+}
+
+.no-button-decoration:hover {
+ border-radius: 3px;
+ background-color: #cdd6e4;
+}
+
diff --git a/src/components/main/mail/MailAction.jsx b/src/components/main/mail/MailAction.jsx
new file mode 100644
index 0000000..e40ba35
--- /dev/null
+++ b/src/components/main/mail/MailAction.jsx
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+
+import './MailAction.css';
+
+export class MailAction extends Component {
+ constructor(props) {
+ super(props);
+ this.markAll = this.markAll.bind(this);
+ }
+
+ markAll() {
+ if (this.props.markAll)
+ this.props.markAll();
+ }
+
+ render() {
+ const isMarkedAll = this.props.isAllMarked();
+
+ const actions = [
+ { name: 'resend', title: 'Переслать' },
+ { name: 'delete', title: 'Удалить', func: this.props.removeMarkedMails },
+ { name: 'spam', title: 'Это спам!' },
+ { name: 'read', title: 'Прочитано' },
+ { name: 'newMessage', title: 'Добавить письмо', func: this.props.addNewMail }
+ ].map(elem =>
+
);
+
+ return (
+
+ );
+
+ }
+
+}
+
+function Action(props) {
+ const classStr = `actions__${props.title} actions__${props.title}_view ` +
+ 'actions_option no-button-decoration';
+
+ return (
+
+ );
+}
diff --git a/src/components/main/mail/MailBody.css b/src/components/main/mail/MailBody.css
new file mode 100644
index 0000000..c0661e2
--- /dev/null
+++ b/src/components/main/mail/MailBody.css
@@ -0,0 +1,20 @@
+.mail-body {
+ min-height: 480px;
+}
+
+.mail-body__text {
+ position: absolute;
+ background-color: #fff;
+ width: 95%;
+ text-align: justify;
+ font-size: 16px;
+ margin: 10px;
+}
+
+.mail-body__close {
+ float: right;
+ margin: 5px;
+ font-size: 20px;
+ color: #708090;
+ cursor: pointer;
+}
diff --git a/src/components/main/mail/MailBody.jsx b/src/components/main/mail/MailBody.jsx
new file mode 100644
index 0000000..1b5d5cc
--- /dev/null
+++ b/src/components/main/mail/MailBody.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import './MailBody.css'
+
+export class MailBody extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return(
+
+
{this.props.text}
+
+ ×
+
+
+ );
+ }
+}
+
diff --git a/src/components/main/mail/MailContent.css b/src/components/main/mail/MailContent.css
new file mode 100644
index 0000000..f18573c
--- /dev/null
+++ b/src/components/main/mail/MailContent.css
@@ -0,0 +1,46 @@
+.mail-content {
+ width: 70%;
+ min-width: 730px;
+ min-height: 500px;
+ height: 90vh;
+}
+
+.mail-content_view {
+ position: relative;
+ margin-left: 180px;
+ border-radius: 3px;
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34);
+ background-color: #fff;
+}
+
+.footer_view {
+ border-top: 1px solid #e2e2e2;
+ bottom: 0;
+ height: 33px;
+ position: absolute;
+}
+
+.footer {
+ width: 100%;
+}
+
+.footer__site-information {
+ width: 345px;
+ height: 12px;
+ float: right;
+}
+
+.footer__site-information_view {
+ margin: 1% 1% 0 0;
+ color: #9b9b9b;
+ font: normal 500 11px normal HelveticaNeue;
+ letter-spacing: normal;
+ font-stretch: normal;
+ text-align: right;
+}
+
+.footer__link_view {
+ color: #9b9b9b;
+ margin-right: 20px;
+ text-decoration: none;
+}
diff --git a/src/components/main/mail/MailContent.jsx b/src/components/main/mail/MailContent.jsx
new file mode 100644
index 0000000..3f454ae
--- /dev/null
+++ b/src/components/main/mail/MailContent.jsx
@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+
+import { MailAction } from './MailAction';
+import { MailFactory } from './MailFactory';
+import { MailBody } from './MailBody';
+
+import { FIVE_MIN, MESSAGES_LIMIT, getRandomInt, getLocalDate, getRandomMail, MailState } from './mailUtils';
+
+import './MailContent.css';
+
+export class MailContent extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { mails: [] };
+
+ this.createNewMail = this.createNewMail.bind(this);
+ this.addNewMail = this.addNewMail.bind(this);
+ this.isAllMarked = this.isAllMarked.bind(this);
+ this.markAll = this.markAll.bind(this);
+ this.updateAllMarked = this.updateAllMarked.bind(this);
+ this.isMailMarked = this.isMailMarked.bind(this);
+ this.removeMarkedMails = this.removeMarkedMails.bind(this);
+ this.openMail = this.openMail.bind(this);
+ this.closeMail = this.closeMail.bind(this);
+
+ this.markedMails = new Set();
+
+ setInterval(this.addNewMail, FIVE_MIN);
+ }
+
+ render() {
+ var content;
+ if (this.state.text)
+ content = ;
+ else
+ content = (
+
+ );
+
+
+ return (
+
+ );
+ }
+
+
+ openMail(id) {
+ const mailText = this.state.mails[id].text;
+ this.setState({
+ text: mailText
+ });
+ }
+
+ closeMail() {
+ this.setState({
+ text: null
+ });
+ }
+
+ removeMarkedMails() {
+ const mails = this.state.mails;
+ const limit = Math.max(mails.length - MESSAGES_LIMIT, 0);
+ let notDeletedMails = [];
+ var deletedMails = 0;
+ for (var i = limit; i < mails.length; i++) {
+ if (this.markedMails.has(i)) {
+ deletedMails++;
+ mails[i].toDelete = true;
+ } else {
+ notDeletedMails.push(mails[i]);
+ }
+ }
+ if (limit !== 0) {
+ notDeletedMails = notDeletedMails.concat(mails.slice(0, limit));
+ }
+ this.markedMails.clear();
+ this.setState({
+ mails: mails
+ });
+ setTimeout(() => {
+ this.setState({ mails: notDeletedMails });
+ }, 1000);
+ }
+
+ markAll() {
+ let wasMakedAll = this.isAllMarked();
+ this.markedMails.clear();
+ let mails = this.state.mails;
+ if (!wasMakedAll) {
+ let limit = Math.max(mails.length - MESSAGES_LIMIT, 0);
+ for (var i = mails.length - 1; i >= limit; i--) {
+ this.markedMails.add(i);
+ }
+ }
+
+ this.setState({
+ mails: mails
+ });
+ }
+
+ isAllMarked() {
+ return this.markedMails.size > 0 && this.markedMails.size === this.state.mails.length;
+ }
+
+ isMailMarked(id) {
+ return this.markedMails.has(id);
+ }
+
+ updateAllMarked(id) {
+ let wasAllMarked = this.isAllMarked();
+ const mails = this.state.mails;
+
+ if (this.isMailMarked(id))
+ this.markedMails.delete(id);
+ else
+ this.markedMails.add(id);
+
+ if (this.isAllMarked() || wasAllMarked) {
+ this.setState({ mails: mails });
+ return true;
+ }
+ return false;
+ }
+
+ async createNewMail() {
+ let mailTemplate = await getRandomMail();
+ let date = getLocalDate();
+ let newMail = new MailState(
+ mailTemplate['logo'],
+ mailTemplate['sender'],
+ mailTemplate['title'],
+ date,
+ mailTemplate['text']
+ );
+ let otherMails = this.state.mails;
+ otherMails.push(newMail);
+ this.setState({ mails: otherMails });
+ setTimeout(() => {
+ this.setState({ mails: otherMails });
+ }, 10);
+ };
+
+
+ addNewMail() {
+ let currentRandomTimeout = getRandomInt(FIVE_MIN);
+ setTimeout(this.createNewMail, currentRandomTimeout);
+ }
+}
+
+
diff --git a/src/components/main/mail/MailFactory.css b/src/components/main/mail/MailFactory.css
new file mode 100644
index 0000000..19c985e
--- /dev/null
+++ b/src/components/main/mail/MailFactory.css
@@ -0,0 +1,4 @@
+.content-main {
+ height: 92%;
+ overflow-y: auto;
+}
diff --git a/src/components/main/mail/MailFactory.jsx b/src/components/main/mail/MailFactory.jsx
new file mode 100644
index 0000000..8621daa
--- /dev/null
+++ b/src/components/main/mail/MailFactory.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import { MESSAGES_LIMIT } from './mailUtils';
+import { Mail } from './Mail';
+
+import './MailFactory.css';
+
+export class MailFactory extends Component {
+ constructor(props) {
+ super(props);
+ this.initMails = this.initMails.bind(this);
+ }
+
+ render() {
+ return ({this.initMails()}
);
+ }
+
+ initMails() {
+ const mailsInfo = this.props.mails;
+ const mailComponents = [];
+ const limit = Math.max(mailsInfo.length - MESSAGES_LIMIT, 0);
+
+ for (var i = mailsInfo.length - 1; i >= limit; i--) {
+ const info = mailsInfo[i];
+ const newMail = ;
+ mailComponents.push(newMail);
+ mailsInfo[i].justAdded = false;
+
+ }
+ return mailComponents;
+ }
+}
diff --git a/src/components/main/mail/mailUtils.js b/src/components/main/mail/mailUtils.js
new file mode 100644
index 0000000..2de1621
--- /dev/null
+++ b/src/components/main/mail/mailUtils.js
@@ -0,0 +1,46 @@
+const MONTH = ['янв', 'фев', 'март', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
+export const FIVE_MIN = 60 * 5 * 1000;
+export const MESSAGES_LIMIT = 30;
+
+const senders = ['Принц Рашид', 'Спортлото', 'Дальний родственник', 'Димас', 'Физрук', 'IBM'];
+
+export const getRandomInt = limit => {
+ return Math.floor(Math.random() * (Math.floor(limit) + 1));
+};
+
+function getRandomSender() {
+ return senders[getRandomInt(senders.length - 1)];
+}
+
+async function getRandomThemeAndText() {
+ const responseText = await fetch('https://baconipsum.com/api/?type=meat-and-filler');
+ const responseTheme = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=1');
+ const dataText = await responseText.json();
+ const dataTheme = await responseTheme.json();
+ return [dataTheme[0], dataText[0]];
+}
+
+export const getLocalDate = () => {
+ const date = new Date();
+ return `${date.getDate()} ${MONTH[date.getMonth()]}`;
+};
+
+export async function getRandomMail() {
+ const senderName = getRandomSender();
+ const logo = senderName[0];
+ const [title, text] = await getRandomThemeAndText();
+ return { logo: logo, sender: senderName, title: title, text: text };
+}
+
+
+export class MailState {
+ constructor(logo, sender, title, time, text) {
+ this.logo = logo;
+ this.sender = sender;
+ this.title = title;
+ this.time = time;
+ this.text = text;
+ this.justAdded = true;
+ this.toDelete = false;
+ }
+}
diff --git a/src/components/main/sidebar/Sidebar.css b/src/components/main/sidebar/Sidebar.css
new file mode 100644
index 0000000..36f6a5d
--- /dev/null
+++ b/src/components/main/sidebar/Sidebar.css
@@ -0,0 +1,64 @@
+a {
+ color: #000;
+ text-decoration: none;
+}
+
+.sidebar {
+ width: 147px;
+ height: 100%;
+}
+
+.sidebar_position {
+ top: 64px;
+ left: 22px;
+ position: absolute;
+}
+
+.sidebar__mail-send {
+ width: 147px;
+ height: 32px;
+}
+
+.sidebar__mail-send_view {
+ margin-bottom: 8px;
+ border-radius: 3px;
+ background-color: #6287bd;
+ border: none;
+ font: normal 500 12px normal HelveticaNeue;
+ letter-spacing: normal;
+ font-stretch: normal;
+ color: #fff;
+}
+
+.sidebar__items {
+ margin: 0;
+ padding-left: 0;
+}
+
+.sidebar__item {
+ width: 147px;
+ height: 22px;
+}
+
+.sidebar__item:hover {
+ border-radius: 3px;
+ background-color: #cdd6e4;
+}
+
+.sidebar__item_view {
+ margin: 0;
+ padding: 0;
+ color: #707070;
+ list-style-type: none;
+}
+
+.sidebar__item-paragraph {
+ width: 70px;
+ margin: 0;
+ padding: 4px 67px 5px 10px;
+ font: normal 500 11px normal HelveticaNeue;
+ font-stretch: normal;
+ letter-spacing: normal;
+}
+
+
diff --git a/src/components/main/sidebar/Sidebar.jsx b/src/components/main/sidebar/Sidebar.jsx
new file mode 100644
index 0000000..e5c45f3
--- /dev/null
+++ b/src/components/main/sidebar/Sidebar.jsx
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+import './Sidebar.css';
+
+
+export class Sidebar extends Component {
+ render() {
+ const sidebarElements = ['Входящие', 'Отправленные', 'Удаленные', 'Спам', 'Черновики', 'Создать папку']
+ const liElems = sidebarElements.map(elem => )
+
+ return (
+
+ );
+ }
+}
+
+function BarItem(props) {
+ const className = 'sidebar__item sidebar__item_view';
+ return (
+
+ {props.title}
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index 2b6e525..98dd98c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,7 @@
body {
padding: 0;
margin: 0;
+ background-color: #e5eaf0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
diff --git a/src/resources/images/yandex-logo.svg b/src/resources/images/yandex-logo.svg
new file mode 100644
index 0000000..20a1170
--- /dev/null
+++ b/src/resources/images/yandex-logo.svg
@@ -0,0 +1,91 @@
+
+
+
+