diff --git a/public/index.html b/public/index.html index 9a8ef8f..5d57a79 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - React App + Яндекс.Почта diff --git a/src/app/allLetters/allLetters.css b/src/app/allLetters/allLetters.css new file mode 100644 index 0000000..b1edb05 --- /dev/null +++ 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 new file mode 100644 index 0000000..915e733 --- /dev/null +++ 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 ( +
+ {this.props.visibleLetters.map(letter => { + return ( + + ); + })} +
+ ); + } +} diff --git a/src/app/allLetters/index.js b/src/app/allLetters/index.js new file mode 100644 index 0000000..7e2dfac --- /dev/null +++ b/src/app/allLetters/index.js @@ -0,0 +1 @@ +export * from './allLetters'; diff --git a/src/app/app.css b/src/app/app.css index 1c4d511..54d20b1 100644 --- 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 index f759eed..5e592bc 100644 --- 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 (
-
-

- Edit src/app/app.jsx and save to reload. -

- - Learn React - -
+
+
); } diff --git a/src/app/button/button.css b/src/app/button/button.css new file mode 100644 index 0000000..59c9060 --- /dev/null +++ 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 new file mode 100644 index 0000000..d773261 --- /dev/null +++ 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 ( +
  • + + {this.props.name} + +
    • + ); + } +} diff --git a/src/app/button/index.js b/src/app/button/index.js new file mode 100644 index 0000000..eaf5eea --- /dev/null +++ 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 new file mode 100644 index 0000000..994d1ad --- /dev/null +++ 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 new file mode 100644 index 0000000..4cc0bc9 --- /dev/null +++ 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 ( +
    + + +
    + ); + } +} diff --git a/src/app/content/index.js b/src/app/content/index.js new file mode 100644 index 0000000..7b367d1 --- /dev/null +++ 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 new file mode 100644 index 0000000..0484ee2 --- /dev/null +++ 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 new file mode 100644 index 0000000..fd7800f --- /dev/null +++ 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 ( +
    + © 2001 - 2018, Яндекс + Реклама + Помощь и обратная связь +
    + ); + } +} diff --git a/src/app/footer/index.js b/src/app/footer/index.js new file mode 100644 index 0000000..a058eae --- /dev/null +++ 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 new file mode 100644 index 0000000..f0eb6e3 --- /dev/null +++ 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 new file mode 100644 index 0000000..4affdef --- /dev/null +++ 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 ( +
    +
    +
    +
    +
    +
    + logo + +
    + ); + } +} diff --git a/src/app/header/index.js b/src/app/header/index.js new file mode 100644 index 0000000..677ca79 --- /dev/null +++ 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 new file mode 100644 index 0000000..7765268 Binary files /dev/null and b/src/app/images/cross.png differ diff --git a/src/app/images/header-logo.svg b/src/app/images/header-logo.svg new file mode 100644 index 0000000..db23b2d --- /dev/null +++ b/src/app/images/header-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/images/logo.jpg b/src/app/images/logo.jpg new file mode 100644 index 0000000..8743b99 Binary files /dev/null and b/src/app/images/logo.jpg differ diff --git a/src/app/leftMenu/index.js b/src/app/leftMenu/index.js new file mode 100644 index 0000000..45e2691 --- /dev/null +++ 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 new file mode 100644 index 0000000..d8f6caa --- /dev/null +++ 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 new file mode 100644 index 0000000..f91a36e --- /dev/null +++ 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 ( +
    + + +
    + ); + } +} diff --git a/src/app/letter/index.js b/src/app/letter/index.js new file mode 100644 index 0000000..c37f80d --- /dev/null +++ b/src/app/letter/index.js @@ -0,0 +1 @@ +export * from './letter'; diff --git a/src/app/letter/letter.css b/src/app/letter/letter.css new file mode 100644 index 0000000..1be3627 --- /dev/null +++ b/src/app/letter/letter.css @@ -0,0 +1,126 @@ +.letter { + width: 100%; + height: 37px; + + border-bottom: solid 1px #e2e2e2; +} + +.letter__animatedAddLetter { + animation-duration: 2s; + animation-name: add-new-letter; +} + +.letter__animatedDeleteLetter { + animation-duration: 1s; + animation-name: delete-letter; +} + +.letter__checkbox { + display: inline-block; + width: 16px; + height: 16px; + padding: 2px; + margin-top: 11px; + margin-left: 20px; + + border: solid 1px rgba(0, 0, 0, 0.15); + -webkit-appearance: none; + background-color: #ffffff; + border-radius: 3px; + outline: none; + vertical-align: top; +} + +.letter__checkbox:checked { + display: inline-block; + background: #e2e2e2; + background-clip: content-box; +} + +.letter__delLine { + text-decoration: none; +} + +.letter__yLogo { + display: inline-block; + width: 37px; + margin-left: 10px; + border-radius: 50%; +} + +.letter_isBold { + font-weight: bold; +} + +.letter__textSenderLetter { + display: inline-block; + overflow: hidden; + width: 20%; + height: 15px; + margin-top: 12px; + margin-left: 10px; + color: #000000; + font-family: HelveticaNeue; + font-size: 13px; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; +} + +.letter__textLetter { + display: inline-block; + overflow: hidden; + width: 40%; + height: 15px; + margin-top: 12px; + margin-left: 10px; + color: #000000; + font-family: HelveticaNeue; + font-size: 13px; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; +} + +.letter__markNewLetter { + display: inline-block; + width: 10px; + height: 10px; + margin-top: 14px; + margin-left: 20px; + background-color: #6287bd; + border-radius: 50%; + vertical-align: top; +} + +.letter__data { + width: 8%; + height: 15px; + margin-top: 11px; + margin-right: 20px; + color: #9b9b9b; + float: right; + font-family: HelveticaNeue; + font-size: 13px; + text-align: right; +} + +@keyframes delete-letter { + from { + opacity: 100%; + } + + to { + opacity: 0; + } +} + +@keyframes add-new-letter { + from { + opacity: 0; + } + + to { + opacity: 100%; + } +} diff --git a/src/app/letter/letter.jsx b/src/app/letter/letter.jsx new file mode 100644 index 0000000..968b50a --- /dev/null +++ b/src/app/letter/letter.jsx @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; + +import './letter.css'; +import logo from '../images/logo.jpg'; + +export class Letter extends Component { + constructor(props) { + super(props); + + this.changeAnimation = this.changeAnimation.bind(this); + } + + changeAnimation() { + if (this.props.changeAnimation) { + this.props.deleteChosenLetter(this.props.id); + } + } + + render() { + return ( +
    + this.props.switchLetterCheckbox(this.props.id)} + /> + this.props.openLetter(this.props.text)} + > + + {this.props.author} +
    + {this.props.subject} + {this.props.date} + +
    + ); + } +} diff --git a/src/app/lettersMenu/index.js b/src/app/lettersMenu/index.js new file mode 100644 index 0000000..9dd0de6 --- /dev/null +++ b/src/app/lettersMenu/index.js @@ -0,0 +1 @@ +export * from './lettersMenu'; diff --git a/src/app/lettersMenu/lettersMenu.css b/src/app/lettersMenu/lettersMenu.css new file mode 100644 index 0000000..a2f84f4 --- /dev/null +++ b/src/app/lettersMenu/lettersMenu.css @@ -0,0 +1,55 @@ +.lettersMenu { + width: 100%; + height: 37px; + padding: 0; + margin: 0; + + border-bottom: solid 1px #e2e2e2; +} + +.lettersMenu__checkbox { + display: inline-block; + width: 16px; + height: 16px; + padding: 2px; + margin-top: 11px; + margin-left: 20px; + + border: solid 1px rgba(0, 0, 0, 0.15); + -webkit-appearance: none; + background-color: #ffffff; + border-radius: 3px; + outline: none; + vertical-align: top; +} + +.lettersMenu__checkbox:checked { + display: inline-block; + background: #e2e2e2; + background-clip: content-box; +} + +.lettersMenu__horizontalPosition { + display: inline; + list-style-type: none; +} + +.lettersMenu__button__textTitle { + display: inline-block; + height: 16px; + margin-top: 11px; + margin-left: 25px; + + border: none; + background: none; + color: #cccccc; + font-family: HelveticaNeue; + font-size: 13px; + line-height: 20px; + outline: none; + vertical-align: top; +} + +.lettersMenu__button__delLine { + text-decoration: none; +} diff --git a/src/app/lettersMenu/lettersMenu.jsx b/src/app/lettersMenu/lettersMenu.jsx new file mode 100644 index 0000000..8803d89 --- /dev/null +++ b/src/app/lettersMenu/lettersMenu.jsx @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; + +import './lettersMenu.css'; + +export class LettersMenu extends Component { + render() { + return ( + + ); + } +} diff --git a/src/app/lettersState/index.js b/src/app/lettersState/index.js new file mode 100644 index 0000000..32f343b --- /dev/null +++ b/src/app/lettersState/index.js @@ -0,0 +1 @@ +export * from './letterState'; diff --git a/src/app/lettersState/letterState.css b/src/app/lettersState/letterState.css new file mode 100644 index 0000000..9591015 --- /dev/null +++ b/src/app/lettersState/letterState.css @@ -0,0 +1,8 @@ +.letterState { + width: 100%; + min-height: 524px; +} + +.letterState_show:target { + display: inline-block; +} diff --git a/src/app/lettersState/letterState.jsx b/src/app/lettersState/letterState.jsx new file mode 100644 index 0000000..bba3f68 --- /dev/null +++ b/src/app/lettersState/letterState.jsx @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; + +import './letterState.css'; +import { OpenLetter } from '../openLetter'; +import { AllLetters } from '../allLetters'; + +export class LetterState extends Component { + constructor(props) { + super(props); + + this.state = { + openLetter: false, + contentLetter: '' + }; + this.closeLetter = this.closeLetter.bind(this); + this.openLetter = this.openLetter.bind(this); + } + + openLetter(text) { + this.setState({ + openLetter: true, + contentLetter: text + }); + } + + closeLetter() { + this.setState({ + openLetter: false + }); + } + + render() { + return this.state.openLetter ? ( +
    + +
    + ) : ( +
    + +
    + ); + } +} diff --git a/src/app/mailInnerContent/index.js b/src/app/mailInnerContent/index.js new file mode 100644 index 0000000..1babe3c --- /dev/null +++ b/src/app/mailInnerContent/index.js @@ -0,0 +1 @@ +export * from './mailInnerContent'; diff --git a/src/app/mailInnerContent/mailInnerContent.css b/src/app/mailInnerContent/mailInnerContent.css new file mode 100644 index 0000000..156ad4a --- /dev/null +++ b/src/app/mailInnerContent/mailInnerContent.css @@ -0,0 +1,7 @@ +.mailInnerContent { + display: inline-block; + width: 100%; + min-width: 800px; + height: 90%; + padding-top: 13px; +} diff --git a/src/app/mailInnerContent/mailInnerContent.jsx b/src/app/mailInnerContent/mailInnerContent.jsx new file mode 100644 index 0000000..4e819c8 --- /dev/null +++ b/src/app/mailInnerContent/mailInnerContent.jsx @@ -0,0 +1,164 @@ +import React, { Component } from 'react'; + +import './mailInnerContent.css'; +import { LeftMenu } from '../leftMenu'; +import { Content } from '../content'; +import { + generateDate, + generateName, + generateContent, + generateRandomCount +} from './scripts/letterGeneratorUtils'; + +const MAX_COUNT = 30; + +export class MailInnerContent extends Component { + static async generateLetter() { + const author = generateName(); + const text = await generateContent(); + const subject = text[0].substr(0, 45); + const date = generateDate(); + return { author, text, subject, date }; + } + + constructor(props) { + super(props); + + this.state = { + counter: 0, + letters: [], + visibleLetters: [], + selectAll: false, + markedLetters: {} + }; + this.deleteChosenLetter = this.deleteChosenLetter.bind(this); + this.markLettersToDelete = this.markLettersToDelete.bind(this); + this.switchLetterCheckbox = this.switchLetterCheckbox.bind(this); + this.chooseAllLetters = this.chooseAllLetters.bind(this); + this.newMail = this.newMail.bind(this); + this.GenerateNewLetter(); + } + + deleteChosenLetter(id) { + let count = 0; + const tmpVisibleLetters = []; + const tmpLetters = this.state.letters.filter(letter => letter.id !== id); + tmpLetters.forEach(letter => { + const tmp = letter; + if (MAX_COUNT > count) { + tmpVisibleLetters.push(tmp); + count++; + } + }); + this.setState(() => { + return { letters: tmpLetters, visibleLetters: tmpVisibleLetters }; + }); + } + + chooseAllLetters() { + const tmpVisibleLetters = this.state.visibleLetters; + const newMarkedLetters = this.state.markedLetters; + for (let i = 0; i < tmpVisibleLetters.length; i++) { + newMarkedLetters[tmpVisibleLetters[i].id] = !this.state.selectAll; + } + this.setState(state => { + return { + visibleLetters: tmpVisibleLetters, + selectAll: !state.selectAll, + markedLetters: newMarkedLetters + }; + }); + } + + async newMail() { + const { author, text, subject, date } = await MailInnerContent.generateLetter(); + const newMarkedLetters = this.state.markedLetters; + const id = `${this.state.counter}`; + this.setState(state => { + return { counter: state.counter + 1 }; + }); + newMarkedLetters[id] = false; + const tmpLetters = this.state.letters; + const tmpVisibleLetters = []; + const letter = { + id, + author, + subject, + text, + date, + changeAnimation: false, + isSelected: false + }; + tmpVisibleLetters.push(letter); + for (let i = 0; i < tmpLetters.length; i++) { + if (i < MAX_COUNT - 1) { + tmpVisibleLetters.push(tmpLetters[i]); + } + } + this.setState(state => { + return { + visibleLetters: tmpVisibleLetters, + letters: [letter].concat(state.letters), + markedLetters: newMarkedLetters + }; + }); + } + + sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } + + async GenerateNewLetter() { + const fiveMinute = 300000; + const minTime = 10; + const maxTime = 600000; + let previous = 300000; + await this.newMail(); + previous = Math.max(fiveMinute - previous, generateRandomCount(minTime, maxTime)); + await this.sleep(previous); + this.GenerateNewLetter(); + } + + markLettersToDelete() { + const tmpLetters = this.state.letters; + const tmpVisibleLetters = this.state.visibleLetters; + for (let i = 0; i < tmpLetters.length; i++) { + if (this.state.markedLetters[tmpLetters[i].id]) { + tmpVisibleLetters[i].changeAnimation = true; + tmpLetters[i].changeAnimation = true; + } + } + this.setState(() => { + return { + visibleLetters: tmpVisibleLetters, + letters: tmpLetters, + selectAll: false + }; + }); + } + + switchLetterCheckbox(id) { + const newMarkedLetters = this.state.markedLetters; + newMarkedLetters[id] = !newMarkedLetters[id]; + this.setState(() => { + return { markedLetters: newMarkedLetters }; + }); + } + + render() { + return ( +
    + + +
    + ); + } +} diff --git a/src/app/mailInnerContent/scripts/letterGeneratorUtils.js b/src/app/mailInnerContent/scripts/letterGeneratorUtils.js new file mode 100644 index 0000000..87a1ff5 --- /dev/null +++ b/src/app/mailInnerContent/scripts/letterGeneratorUtils.js @@ -0,0 +1,95 @@ +const months = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; + +const names = [ + 'Фотин', + 'Евтихий', + 'Азарий', + 'Фетис', + 'Полиевкт', + 'Борислав', + 'Кассиан', + 'Юст', + 'Мартьян', + 'Капитон', + 'Никандр', + 'Эрнест', + 'Петроний', + 'Иезекииль', + 'Харитон', + 'Севастиан', + 'Орест', + 'Вит', + 'Василий', + 'Гордей', + 'Максим', + 'Павлин', + 'Захар', + 'Владилен', + 'Наум', + 'Алипий', + 'Меркурий', + 'Феоктист', + 'Овдоким', + 'Феофил' +]; + +const surnames = [ + 'Чашников', + 'Березников', + 'Руликовский', + 'Ляпишев', + 'Оффенберг', + 'Шипов', + 'Арнаутов', + 'Машковцев', + 'Столыпин', + 'Шереметьев', + 'Яворский', + 'Рындин', + 'Лонгинов', + 'Ададуров', + 'Нечаев', + 'Габаев', + 'Маткевич', + 'Маковский', + 'Юрасовский', + 'Ващенко', + 'Кобылин', + 'Карандеев', + 'Золотарёв', + 'Голицын', + 'Игнатьев', + 'Байчуров', + 'Бурдуков', + 'Болтенков', + 'Михеев', + 'Храпов' +]; + +export const generateRandomCount = (from, to) => { + return Math.floor(Math.random() * (to - from) + from); +}; + +const getRandomObj = (array) => { + return array[generateRandomCount(0, array.length)]; +}; + +export const generateName = () => { + const name = getRandomObj(names); + const surname = getRandomObj(surnames); + return `${name} ${surname}`; +}; + +export const generateContent = async () => { + const paragraphsCount = generateRandomCount(3, 10); + + const text = await fetch( + `https://baconipsum.com/api/?type=meat&formaat=json¶s=${paragraphsCount}` + ); + return text.json(); +}; + +export const generateDate = () => { + const date = new Date(); + return `${date.getDate()} ${months[date.getMonth()]}`; +}; diff --git a/src/app/mailMenu/index.js b/src/app/mailMenu/index.js new file mode 100644 index 0000000..7451256 --- /dev/null +++ b/src/app/mailMenu/index.js @@ -0,0 +1 @@ +export * from './mailMenu'; diff --git a/src/app/mailMenu/mailMenu.css b/src/app/mailMenu/mailMenu.css new file mode 100644 index 0000000..0a08017 --- /dev/null +++ b/src/app/mailMenu/mailMenu.css @@ -0,0 +1,5 @@ +.mailMenu__actionsBlock { + width: 100%; + margin-top: 0; + margin-left: -30px; +} diff --git a/src/app/mailMenu/mailMenu.jsx b/src/app/mailMenu/mailMenu.jsx new file mode 100644 index 0000000..48c3cfe --- /dev/null +++ b/src/app/mailMenu/mailMenu.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import './mailMenu.css'; +import { Button } from '../button'; + +export class MailMenu extends Component { + render() { + return ( + + ); + } +} diff --git a/src/app/openLetter/index.js b/src/app/openLetter/index.js new file mode 100644 index 0000000..3406e12 --- /dev/null +++ b/src/app/openLetter/index.js @@ -0,0 +1 @@ +export * from './openLetter'; diff --git a/src/app/openLetter/openLetter.css b/src/app/openLetter/openLetter.css new file mode 100644 index 0000000..a150fe3 --- /dev/null +++ b/src/app/openLetter/openLetter.css @@ -0,0 +1,22 @@ +.openLetter__close { + margin-top: 10px; + margin-right: 10px; + float: right; +} + +.openLetter__delLine { + text-decoration: none; +} + +.openLetter__cross { + width: 15px; + height: 15px; + margin-top: -8px; + margin-right: 10px; + float: right; + opacity: 0.15; +} + +.openLetter__textLetter { + margin: 30px; +} diff --git a/src/app/openLetter/openLetter.jsx b/src/app/openLetter/openLetter.jsx new file mode 100644 index 0000000..088ea3c --- /dev/null +++ b/src/app/openLetter/openLetter.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import './openLetter.css'; +import cross from '../images/cross.png'; + +export class OpenLetter extends Component { + render() { + return ( +
    + + + +
    {this.props.contentLetter.map((paragraph) => { + return

    {paragraph}

    ; + })}
    +
    + ); + } +} diff --git a/src/app/search/index.js b/src/app/search/index.js new file mode 100644 index 0000000..5a2bdeb --- /dev/null +++ b/src/app/search/index.js @@ -0,0 +1 @@ +export * from './search'; diff --git a/src/app/search/search.css b/src/app/search/search.css new file mode 100644 index 0000000..7d55b6a --- /dev/null +++ b/src/app/search/search.css @@ -0,0 +1,32 @@ +.search { + display: inline-block; + width: 40%; + height: 32px; + margin-left: 14%; + background-color: #ffffff; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + opacity: 0.5; + vertical-align: text-bottom; +} + +.search__textSearch { + width: 90%; + height: 100%; + padding-left: 10px; + + border: none; + -webkit-appearance: none; + background: none; + color: #000000; + font-size: 15px; + outline: none; +} + +.search__cross { + width: 9px; + height: 9px; + margin-top: 12px; + margin-right: 10px; + float: right; + opacity: 0.15; +} diff --git a/src/app/search/search.jsx b/src/app/search/search.jsx new file mode 100644 index 0000000..9271796 --- /dev/null +++ b/src/app/search/search.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +import './search.css'; +import cross from '../images/cross.png'; + +export class Search extends Component { + render() { + return ( +
    + + cross +
    + ); + } +} diff --git a/src/app/txtStyle/HelveticaNeueCyr-Light.otf b/src/app/txtStyle/HelveticaNeueCyr-Light.otf new file mode 100644 index 0000000..7ced49a Binary files /dev/null and b/src/app/txtStyle/HelveticaNeueCyr-Light.otf differ diff --git a/src/app/txtStyle/HelveticaNeueCyr-Medium.otf b/src/app/txtStyle/HelveticaNeueCyr-Medium.otf new file mode 100644 index 0000000..a2cde16 Binary files /dev/null and b/src/app/txtStyle/HelveticaNeueCyr-Medium.otf differ diff --git a/src/app/txtStyle/YandexSansDisplay-Thin.ttf b/src/app/txtStyle/YandexSansDisplay-Thin.ttf new file mode 100644 index 0000000..3b8e196 Binary files /dev/null and b/src/app/txtStyle/YandexSansDisplay-Thin.ttf differ diff --git a/src/index.css b/src/index.css index 2b6e525..74897da 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,5 @@ body { - 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; + background-color: #e5eaf0; } code {