+ this.props.openLetters()}
+ />
+
+
+ {this.props.letterText}
+
+
+ );
+ }
+}
diff --git a/src/functions/Functions.tsx b/src/functions/Functions.tsx
new file mode 100644
index 0000000..9f071e3
--- /dev/null
+++ b/src/functions/Functions.tsx
@@ -0,0 +1,52 @@
+const senders = ['Mom', 'Dad', 'Cat', 'Dog', 'Apple', 'Teacher', 'Homie', 'Mole',
+ 'Hare', 'BB-8', 'Porg', 'Totoro'];
+
+const actions = ['runs', 'waits', 'flies', 'sleeps', 'lays', 'jumps', 'sings',
+ 'writes', 'reads', 'executes', 'exists', 'builds', 'tests'];
+
+const adverbs = ['rapidly', 'at home', 'at school', 'at the university', 'on bed',
+ 'highly', 'alone', 'sadly', 'today'];
+
+const punctuationMarks = ['.', '...', '!', '?', '?!'];
+
+export function getRandomFromRange(minTime: number, maxTime: number) {
+ return Math.random() * (maxTime - minTime) + minTime;
+}
+
+function getRandomInt(minRange: number, maxRange: number) {
+ return Math.trunc(getRandomFromRange(minRange, maxRange));
+}
+
+function genColor() {
+ const n = getRandomInt(0, 255);
+ let res = n.toString(16);
+ while (res.length < 2) {
+ res = `0${res}`;
+ }
+ return res;
+}
+
+export function genLetterText() {
+ const letterLen = getRandomInt(0, 10);
+ let answer = '';
+ for (let i = 0; i < letterLen; i++) {
+ const send = senders[getRandomInt(0, senders.length)];
+ const act = actions[getRandomInt(0, actions.length)];
+ const adv = adverbs[getRandomInt(0, adverbs.length)];
+ const punMark = punctuationMarks[getRandomInt(0, punctuationMarks.length)];
+ answer += `${send} ${act} ${adv}${punMark} `;
+ }
+ const curDate = new Date();
+ const letterDate = `${curDate.getDate()} ${curDate.toLocaleString('ru', { month: 'short' })}`;
+ const senderOne = senders[getRandomInt(0, senders.length)];
+ const colorLetter = `#${genColor()}${genColor()}${genColor()}`;
+ return {
+ deleted: false,
+ letterText: answer,
+ sender: senderOne,
+ date: letterDate,
+ color: colorLetter,
+ chose: false,
+ isVisible: true
+ };
+}
diff --git a/src/header/Header.module.css b/src/header/Header.module.css
new file mode 100644
index 0000000..1333a83
--- /dev/null
+++ b/src/header/Header.module.css
@@ -0,0 +1,61 @@
+.beforeLines {
+ height: 19px;
+ margin-top: 11px;
+ margin-left: 22px;
+}
+
+.oneLine {
+ width: 20px;
+ height: 2px;
+ margin-top: 4px;
+ background-color: #000000;
+}
+
+.darkSide {
+ background-color: #ffffff;
+}
+
+.search {
+ background-color: #ffffff;
+ width: 301px;
+ height: 32px;
+ margin-top: 11px;
+ margin-left: 114px;
+ line-height: 100%;
+}
+
+.searchCancelSign {
+ float: right;
+ background-color: inherit;
+ border: none;
+ padding-right: 15px;
+ margin-top: -25px;
+ /*opacity: 0.15;*/
+}
+
+.searchWord {
+ border: none;
+ display: inline-block;
+ padding-left: 16px;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ opacity: 0.5;
+ font-size: 15px;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.yandexMail_picture {
+ margin-left: 11px;
+ margin-top: 10px;
+}
+
+.yandexMail_unstressedLink {
+ color: inherit;
+ text-decoration: none;
+}
+
+.highPart {
+ display: inline-block;
+ vertical-align: middle;
+}
diff --git a/src/header/Header.tsx b/src/header/Header.tsx
new file mode 100644
index 0000000..9d775ad
--- /dev/null
+++ b/src/header/Header.tsx
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import cn from 'classnames';
+
+import stylesMain from '../main/Main.module.css';
+import styles from './Header.module.css';
+import logo from '../sourse/YandexMail.png';
+import darkLogo from '../sourse/YandexMail-dark.png';
+
+interface IProps {
+ searchLetters: (a: string) => void;
+ isDark: boolean;
+}
+
+export class Header extends Component-
+
- + + +
- + this.props.letterAdded(0)} + /> + +
- + { + const inpButton = this.markerRef.current; + if (inpButton !== null) { + inpButton.checked = false; + } + this.props.lettersDeleted(); + }} + /> + +
- + + +
- + + +
- + { + this.props.changeColor(); + }} + /> + +
- {code}
+
+
+
+
+ );
+ }
+}
diff --git a/src/menu/Menu.module.css b/src/menu/Menu.module.css
new file mode 100644
index 0000000..5450d24
--- /dev/null
+++ b/src/menu/Menu.module.css
@@ -0,0 +1,88 @@
+.menu__actions-list_unstressed-link {
+ color: inherit;
+ text-decoration: none;
+}
+
+.menu__actions-list {
+ list-style-type: none;
+ padding-inline-start: 28px;
+}
+
+.menu__navigation {
+ line-height: 22px;
+ padding-left: 10px;
+ margin-left: -28px;
+ font-family: HelveticaNeueCyr-Medium;
+ font-size: 11px;
+ font-weight: 500;
+ color: #707070;
+}
+
+.menu__navigation:hover {
+ border-radius: 3px;
+ background-color: #cdd6e4;
+}
+
+.menu__write-button {
+ width: 147px;
+ height: 32px;
+ border: none;
+ border-radius: 3px;
+ background-color: #6287bd;
+ font-family: HelveticaNeueCyr-Medium;
+ font-size: 12px;
+ font-weight: 500;
+ color: #ffffff;
+}
+
+.menu {
+ display: inline-block;
+ margin-top: 13px;
+ margin-left: 22px;
+ width: 147px;
+}
+
+
+.actionsList_unstressedLink {
+ color: inherit;
+ text-decoration: none;
+}
+
+.actionsList {
+ list-style-type: none;
+ padding-inline-start: 28px;
+}
+
+.navigation {
+ line-height: 22px;
+ padding-left: 10px;
+ margin-left: -28px;
+ font-family: HelveticaNeueCyr-Medium;
+ font-size: 11px;
+ font-weight: 500;
+ color: #707070;
+}
+
+.navigation:hover {
+ border-radius: 3px;
+ background-color: #cdd6e4;
+}
+
+.writeButton {
+ width: 147px;
+ height: 32px;
+ border: none;
+ border-radius: 3px;
+ background-color: #6287bd;
+ font-family: HelveticaNeueCyr-Medium;
+ font-size: 12px;
+ font-weight: 500;
+ color: #ffffff;
+}
+
+.menu {
+ display: inline-block;
+ margin-top: 13px;
+ margin-left: 22px;
+ width: 147px;
+}
diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx
new file mode 100644
index 0000000..7d9f885
--- /dev/null
+++ b/src/menu/Menu.tsx
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+import styles from './Menu.module.css';
+
+export class Menu extends Component {
+ public render() {
+ return (
+ -
+
- + Входящие + +
- + Отправленные + +
- + Спам + +
- + Черновики + +
- + Создать папку + +