diff --git a/public/index.html b/public/index.html index 9a8ef8f..fd7dc98 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,13 @@ - + + - - - - React App + Yandex.Mail + - -
+
+
diff --git a/src/app/app.css b/src/app/app.css index 1c4d511..5ddc182 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -1,27 +1,8 @@ -.app { - text-align: center; -} - -.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); -} - -.app-link { - color: #61dafb; -} +.main { + position: static; -@keyframes app-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + width: 800px; + height: 600px; + /*background-color: #f0f8ff;*/ + background-color: rgb(229, 234, 240); } diff --git a/src/app/app.jsx b/src/app/app.jsx index f759eed..8834003 100644 --- a/src/app/app.jsx +++ b/src/app/app.jsx @@ -1,24 +1,23 @@ import React, { Component } from 'react'; import './app.css'; +import Name from '../name/name'; +import ThreeLines from '../three-lines/three-lines'; +import Menu from '../menu/menu'; +import Writebox from '../writebox/writebox'; +import Search from '../search/search'; +import Letters from '../letters/letters'; export class App extends Component { render() { return ( -
-
-

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

- - Learn React - -
+
+ + + + + +
); } diff --git a/src/fonts/HelveticaNeueCyr-Bold.otf b/src/fonts/HelveticaNeueCyr-Bold.otf new file mode 100644 index 0000000..383dca6 Binary files /dev/null and b/src/fonts/HelveticaNeueCyr-Bold.otf differ diff --git a/src/fonts/HelveticaNeueCyr-Light.otf b/src/fonts/HelveticaNeueCyr-Light.otf new file mode 100644 index 0000000..7ced49a Binary files /dev/null and b/src/fonts/HelveticaNeueCyr-Light.otf differ diff --git a/src/fonts/HelveticaNeueCyr-Medium.otf b/src/fonts/HelveticaNeueCyr-Medium.otf new file mode 100644 index 0000000..a2cde16 Binary files /dev/null and b/src/fonts/HelveticaNeueCyr-Medium.otf differ diff --git a/src/fonts/YandexSansText-Bold.ttf b/src/fonts/YandexSansText-Bold.ttf new file mode 100644 index 0000000..e267b3f Binary files /dev/null and b/src/fonts/YandexSansText-Bold.ttf differ diff --git a/src/fonts/YandexSansText-Light.ttf b/src/fonts/YandexSansText-Light.ttf new file mode 100644 index 0000000..875cb32 Binary files /dev/null and b/src/fonts/YandexSansText-Light.ttf differ diff --git a/src/fonts/YandexSansText-Regular.ttf b/src/fonts/YandexSansText-Regular.ttf new file mode 100644 index 0000000..990d16b Binary files /dev/null and b/src/fonts/YandexSansText-Regular.ttf differ diff --git a/src/images/Fill-154.png b/src/images/Fill-154.png new file mode 100644 index 0000000..6aae6dd Binary files /dev/null and b/src/images/Fill-154.png differ diff --git a/src/images/Oval-9.png b/src/images/Oval-9.png new file mode 100644 index 0000000..93c9360 Binary files /dev/null and b/src/images/Oval-9.png differ diff --git a/src/images/Oval.png b/src/images/Oval.png new file mode 100644 index 0000000..c12733c Binary files /dev/null and b/src/images/Oval.png differ diff --git a/src/images/Shape.png b/src/images/Shape.png new file mode 100644 index 0000000..e79b98c Binary files /dev/null and b/src/images/Shape.png differ diff --git a/src/images/cross.png b/src/images/cross.png new file mode 100644 index 0000000..e20bcc9 Binary files /dev/null and b/src/images/cross.png differ diff --git a/src/images/nut.webp b/src/images/nut.webp new file mode 100644 index 0000000..6cdb766 Binary files /dev/null and b/src/images/nut.webp differ diff --git a/src/index.css b/src/index.css index 2b6e525..45b8518 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,37 @@ +@font-face { + font-family: 'Yandex Sans Light'; + src: url(fonts/YandexSansText-Light.ttf); +} + +@font-face { + font-family: 'Yandex Sans Bold'; + src: url(fonts/YandexSansText-Bold.ttf); +} + +@font-face { + font-family: 'Yandex Sans Regular'; + src: url(fonts/YandexSansText-Regular.ttf); +} + +@font-face { + font-family: 'Helvetica Neue Bold'; + src: url(fonts/HelveticaNeueCyr-Bold.otf); +} + +@font-face { + font-family: 'Helvetica Neue Medium'; + src: url(fonts/HelveticaNeueCyr-Medium.otf); +} + +@font-face { + font-family: 'Helvetica Neue Light'; + src: url(fonts/HelveticaNeueCyr-Light.otf); +} + +p { + overflow: hidden; +} + body { padding: 0; margin: 0; diff --git a/src/index.jsx b/src/index.jsx index ffc72ee..5912260 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -6,3 +6,5 @@ import { App } from './app'; import './index.css'; ReactDOM.render(, document.getElementById('root')); + +// document.getElementById('root').newLetters(); diff --git a/src/letters/__article/__cross/letters__cross.css b/src/letters/__article/__cross/letters__cross.css new file mode 100644 index 0000000..5a9ac2b --- /dev/null +++ b/src/letters/__article/__cross/letters__cross.css @@ -0,0 +1,6 @@ +.letters__cross { + position: absolute; + + margin-top: -80px; + margin-left: 570px; +} diff --git a/src/letters/__article/__cross/letters__cross.jsx b/src/letters/__article/__cross/letters__cross.jsx new file mode 100644 index 0000000..61e6656 --- /dev/null +++ b/src/letters/__article/__cross/letters__cross.jsx @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +import './letters__cross.css'; +import cross from '../../../images/cross.png'; + +export default class LettersCross extends Component { + render() { + return ( +
+ cross +
+ ); + } +} diff --git a/src/letters/__article/letters__article.css b/src/letters/__article/letters__article.css new file mode 100644 index 0000000..c7d8eb3 --- /dev/null +++ b/src/letters/__article/letters__article.css @@ -0,0 +1,16 @@ +.letters__article { + position: absolute; + + overflow: hidden; + width: inherit; + max-width: 589px; + height: 448px; + max-height: 448px; + margin-top: 41px; + margin-left: 0; + background-color: #fff; +} + +.letters__article-title { + margin-left: 50px; +} diff --git a/src/letters/__article/letters__article.jsx b/src/letters/__article/letters__article.jsx new file mode 100644 index 0000000..0280732 --- /dev/null +++ b/src/letters/__article/letters__article.jsx @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +import './letters__article.css'; +import LettersCross from './__cross/letters__cross'; + +export default class LettersArticle extends Component { + render() { + return ( +
+

{this.props.articleHeader}

+

{this.props.articleContent}

+ +
+ ); + } +} diff --git a/src/letters/__footer/letters__footer.css b/src/letters/__footer/letters__footer.css new file mode 100644 index 0000000..1b32523 --- /dev/null +++ b/src/letters/__footer/letters__footer.css @@ -0,0 +1,16 @@ +.letters__footer { + position: absolute; + right: 20px; + bottom: 9px; + + color: #9b9b9b; + font-family: 'Helvetica Neue Medium', sans-serif; + font-size: 11px; +} + +.letters__footer-text { + overflow: hidden; + max-width: 350px; + max-height: 11px; + margin-bottom: 2px; +} diff --git a/src/letters/__footer/letters__footer.jsx b/src/letters/__footer/letters__footer.jsx new file mode 100644 index 0000000..5f64e5d --- /dev/null +++ b/src/letters/__footer/letters__footer.jsx @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +import './letters__footer.css'; + +export default class LettersFooter extends Component { + render() { + return ( +
+

+ Помощь и обратная связь       Реклама +         © 2001—2018, Яндекс +

+
+ ); + } +} diff --git a/src/letters/__letter/letters__letter.css b/src/letters/__letter/letters__letter.css new file mode 100644 index 0000000..54fed98 --- /dev/null +++ b/src/letters/__letter/letters__letter.css @@ -0,0 +1,110 @@ +.letters__line { + position: absolute; + + width: inherit; + height: 0; + margin-top: 41px; + + border: 1px solid #e2e2e2; +} + +.letters__marker { + position: absolute; + + width: 16px; + height: 16px; + margin-top: 14px; + margin-left: 20px; + + border: 1px solid rgba(0, 0, 0, 0.15); + background-color: #ffffff; + border-radius: 3px; + color: #fff; +} + +.label { + width: inherit; +} + +/* Single letter */ + +.author-image { + position: absolute; + + width: 30px; + height: inherit; + margin-top: 6px; + margin-left: 46px; +} + +.letters__letter { + width: inherit; + height: 43px; + margin-top: 0; + margin-left: 0; +} + +.yandex-oval { + position: absolute; + + margin-top: 0; + margin-left: 0; +} + +.Ya { + position: absolute; + + margin-top: 7px; + margin-left: 9px; +} + +.letters__author { + position: absolute; + + max-width: 160px; + max-height: 13px; + margin-top: 17px; + margin-left: 86px; + color: #000; + font-family: 'Helvetica Neue Light', sans-serif; + font-size: 13px; +} + +.unread-oval { + position: absolute; + + margin-top: 12px; + margin-left: 261px; +} + +.letters__theme { + position: absolute; + + max-width: 210px; + max-height: 13px; + margin-top: 17px; + margin-left: 281px; + color: #000; + font-family: 'Helvetica Neue Light', sans-serif; + font-size: 13px; +} + +.letters__theme:hover { + background-color: grey; +} + +.letters_unread { + font-family: 'Helvetica Neue Bold', sans-serif; +} + +.letters__date { + position: absolute; + right: 20px; + + max-width: 50px; + max-height: 13px; + margin-top: 17px; + color: #9b9b9b; + font-family: 'Helvetica Neue Medium', sans-serif; + font-size: 13px; +} diff --git a/src/letters/__letter/letters__letter.jsx b/src/letters/__letter/letters__letter.jsx new file mode 100644 index 0000000..cb59424 --- /dev/null +++ b/src/letters/__letter/letters__letter.jsx @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; + +import './letters__letter.css'; +import unread from '../../images/Oval.png'; + +export default class Letter extends Component { + constructor(props) { + super(props); + this.state = {}; + this.open = this.open.bind(this); + this.handleCheckbox = this.handleCheckbox.bind(this); + } + + handleCheckbox(checkbox) { + this.props.handleCheckbox(checkbox, this.props.number); + } + + convertReadProp() { + if (this.props.read) { + return ''; + } + return ' letters_unread'; + } + + unreadMarker() { + if (this.props.read) { + return null; + } + return ( +
+ unread +
+ ); + } + + open() { + this.props.open(this.props.number); + } + + render() { + return ( +
+ + +

{this.props.author}

+ +

+ {this.props.theme} +

+ +

{this.props.date}

+ + {this.props.authorImage} + + {this.unreadMarker()} + +
+
+ ); + } +} diff --git a/src/letters/__list/letters__list.css b/src/letters/__list/letters__list.css new file mode 100644 index 0000000..b96550c --- /dev/null +++ b/src/letters/__list/letters__list.css @@ -0,0 +1,9 @@ +.letters__list { + position: absolute; + + overflow: hidden; + width: inherit; + height: 430px; + margin-top: 41px; + margin-left: 0px; +} diff --git a/src/letters/__list/letters__list.jsx b/src/letters/__list/letters__list.jsx new file mode 100644 index 0000000..8e4fbf5 --- /dev/null +++ b/src/letters/__list/letters__list.jsx @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; + +import './letters__list.css'; +import Letter from '../__letter/letters__letter'; + +export default class LettersList extends Component { + makeJSXLetters() { + const jsxLetters = []; + const letters = this.props.letters; + for (let i = 0; i < letters.length; i++) { + const l = letters[i]; + jsxLetters.push( + + ); + } + return jsxLetters; + } + + render() { + return React.createElement('div', { className: 'letters__list' }, this.makeJSXLetters()); + } +} diff --git a/src/letters/__opmenu/letters__opmenu.css b/src/letters/__opmenu/letters__opmenu.css new file mode 100644 index 0000000..f8d4d58 --- /dev/null +++ b/src/letters/__opmenu/letters__opmenu.css @@ -0,0 +1,43 @@ +.letters__opmenu { + position: absolute; + + width: 540px; + height: 41px; + margin-left: 49px; +} + +.letters__opmenuItem { + overflow: hidden; + max-height: 13px; + margin-top: 15px; + + color: #cccccc; + float: left; + font-family: 'Helvetica Neue Bold', sans-serif; + font-size: 13px; + font-weight: 500; +} + +#forward { + max-width: 75px; + margin-left: 6px; +} + +#delete { + max-width: 53px; + margin-left: 26px; +} + +.letters__opmenuItem:hover { + background-color: grey; +} + +#letters__spam { + max-width: 64px; + margin-left: 24px; +} + +#read { + max-width: 71px; + margin-left: 25px; +} diff --git a/src/letters/__opmenu/letters__opmenu.jsx b/src/letters/__opmenu/letters__opmenu.jsx new file mode 100644 index 0000000..c4d8e13 --- /dev/null +++ b/src/letters/__opmenu/letters__opmenu.jsx @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; + +import './letters__opmenu.css'; + +export default class LettersOpmenu extends Component { + render() { + return ( +
+ + Переслать + + + + Удалить + + + + Это спам! + + + + Прочитано + +
+ ); + } +} diff --git a/src/letters/content.js b/src/letters/content.js new file mode 100644 index 0000000..b5cd68c --- /dev/null +++ b/src/letters/content.js @@ -0,0 +1,31 @@ +export function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min)) + min; +} + +const authors = ['Яндекс', 'Google']; + +export function rndAuthor() { + return authors[getRandomInt(0, authors.length)]; +} + +const themes = { + Яндекс: ['Яндекс.Технологии', 'Яндекс.Музыка', 'Яндекс.Дзен'], + Google: ['Google Play', 'GDrive'] +}; + +export const contents = { + 'Яндекс.Технологии': 'Мы расскажем вам про Яндекс.Технологии', + 'Яндекс.Музыка': 'Подписывайтесь на Яндекс.Музыку', + 'Яндекс.Дзен': 'Умная лента от Яндекс позволит Вам оставаться в курсе новостей', + 'Google Play': 'Would you like to know more about Google Play?', + GDrive: 'Here is a simple tutorial to get started with GDrive', + 'Доступ к аккаунту восстановлен': 'Поздравляем! Доступ к аккаунту наконец-то восстановлен', + 'Как читать почту с мобильного': + 'Для начала нужно установить мобильное приложение Яндекс.Почты, затем...', + 'Соберите всю почту в этот ящик': 'Чем больше человечество использует интернет' +}; + +export function rndTheme(author) { + const concreteThemes = themes[author]; + return concreteThemes[getRandomInt(0, concreteThemes.length)]; +} diff --git a/src/letters/letters.css b/src/letters/letters.css new file mode 100644 index 0000000..4c311f4 --- /dev/null +++ b/src/letters/letters.css @@ -0,0 +1,16 @@ +.letters { + position: absolute; + + width: 589px; + height: 530px; + margin-top: 56px; + + margin-left: 191px; + background-color: #fff; + + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34); +} + +#letters__footer-line { + margin-top: 499px; +} diff --git a/src/letters/letters.jsx b/src/letters/letters.jsx new file mode 100644 index 0000000..af9c134 --- /dev/null +++ b/src/letters/letters.jsx @@ -0,0 +1,177 @@ +import React, { Component } from 'react'; + +import './letters.css'; +import LettersOpmenu from './__opmenu/letters__opmenu'; +import LettersList from './__list/letters__list'; +import LettersArticle from './__article/letters__article'; +import LettersFooter from './__footer/letters__footer'; +import { getRandomInt, rndAuthor, rndTheme, contents } from './content'; +import yandexOval from '../images/Oval-9.png'; +import ya from '../images/Fill-154.png'; + +export default class Letters extends Component { + static createYandexAuthorImage() { + return ( +
+
+ Yandex +
+
+ Yandex +
+
+ ); + } + + constructor(props) { + super(props); + this.state = { + letters: [ + { + author: 'Яндекс.Паспорт', + theme: 'Доступ к аккаунту восстановлен', + date: '6 авг', + authorImage: Letters.createYandexAuthorImage(), + read: false, + checked: false + }, + { + author: 'Команда Яндекс.Почты', + theme: 'Как читать почту с мобильного', + date: '6 июл', + authorImage: Letters.createYandexAuthorImage(), + read: false, + checked: false + }, + { + author: 'Команда Яндекс.Почты', + theme: 'Как читать почту с мобильного', + date: '6 июл', + authorImage: Letters.createYandexAuthorImage(), + read: true, + checked: false + }, + { + author: 'Яндекс', + theme: 'Соберите всю почту в этот ящик', + date: '6 июл', + authorImage: Letters.createYandexAuthorImage(), + read: true, + checked: false + } + ], + articleHeader: 'Header', + articleContent: 'Content', + mode: 'letters' + }; + this.newLetter = this.newLetter.bind(this); + this.deleteOnclick = this.deleteOnclick.bind(this); + this.handleCheckbox = this.handleCheckbox.bind(this); + this.open = this.open.bind(this); + this.close = this.close.bind(this); + } + + componentDidMount() { + let sum = 0; + + for (let i = 1; i < 10; i++) { + sum += 10 * getRandomInt(1, 600); + setTimeout(this.newLetter, sum); + } + } + + newLetter() { + const author = rndAuthor(); + this.setState(state => { + state.letters.unshift({ + author, + theme: rndTheme(author), + date: '6 июл', + read: false, + checked: false + }); + return state; + }); + } + + handleCheckbox(checkbox, number) { + this.state.letters[number].checked = checkbox.target.checked; + this.setState(state => { + return state; + }); + } + + open(number) { + this.setState(state => { + const articleHeader = state.letters[number].theme; + const articleContent = contents[articleHeader]; + state.letters[number].read = true; + return { + letters: state.letters, + articleHeader, + articleContent, + mode: 'article' + }; + }); + } + + createView() { + if (this.state.mode === 'article') { + return ( + + ); + } + return ( + + ); + } + + close() { + this.setState(state => { + state.mode = 'letters'; + return state; + }); + } + + deleteOnclick() { + let kek = 0; + while (kek++ < 4) { + let hasAny = false; + for (let i = 0; i < this.state.letters.length; i++) { + if (this.state.letters[i].checked) { + this.state.letters.splice(i, 1); + hasAny = true; + break; + } + } + if (hasAny) { + continue; + } + break; + } + this.setState(state => { + return state; + }); + } + + render() { + return ( +
+ +
+ + {this.createView()} +
+ +
+ ); + } +} diff --git a/src/menu/menu.css b/src/menu/menu.css new file mode 100644 index 0000000..a663bc5 --- /dev/null +++ b/src/menu/menu.css @@ -0,0 +1,46 @@ +#menu { + position: absolute; + + width: 147px; + height: 126px; + margin-top: 96px; + margin-left: 22px; +} + +#highlighted { + position: absolute; + z-index: 1; + + width: 147px; + height: 22px; + margin-top: 5px; + margin-left: 0; + background-color: #cdd6e4; + border-radius: 3px; +} + +#menu-items { + position: absolute; + z-index: 2; + + width: inherit; + height: inherit; +} + +.menu { + z-index: 2; + + max-width: 147px; + max-height: 14px; + margin-left: 10px; + color: #707070; + font-family: 'Helvetica Neue', sans-serif; + font-size: 11px; + font-weight: 500; +} + +.highlighted { + z-index: 2; + color: #555; + font-weight: 700; +} diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx new file mode 100644 index 0000000..3a0e6c6 --- /dev/null +++ b/src/menu/menu.jsx @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +import './menu.css'; + +export default class Menu extends Component { + render() { + return ( + + ); + } +} diff --git a/src/name/name.css b/src/name/name.css new file mode 100644 index 0000000..c572d9d --- /dev/null +++ b/src/name/name.css @@ -0,0 +1,12 @@ +.name { + position: absolute; + + width: 153px; + height: 31px; + margin-top: 12px; + margin-left: 53px; + + color: #010101; + + font-size: 26px; +} diff --git a/src/name/name.jsx b/src/name/name.jsx new file mode 100644 index 0000000..b27e4ed --- /dev/null +++ b/src/name/name.jsx @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +import './name.css'; +import shape from '../images/Shape.png'; + +export default class Name extends Component { + render() { + return ( +
+ Yandex.Mail +
+ ); + } +} diff --git a/src/search/__cross/search__cross.css b/src/search/__cross/search__cross.css new file mode 100644 index 0000000..c83b612 --- /dev/null +++ b/src/search/__cross/search__cross.css @@ -0,0 +1,6 @@ +.search__cross { + position: absolute; + + margin-top: 5px; + margin-left: 280px; +} diff --git a/src/search/__cross/search__cross.jsx b/src/search/__cross/search__cross.jsx new file mode 100644 index 0000000..0d39609 --- /dev/null +++ b/src/search/__cross/search__cross.jsx @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +import './search__cross.css'; +import cross from '../../images/cross.png'; + +export default class SearchCross extends Component { + render() { + return ( +
+ Cross +
+ ); + } +} diff --git a/src/search/__suggestion/search__suggestion.css b/src/search/__suggestion/search__suggestion.css new file mode 100644 index 0000000..3db9096 --- /dev/null +++ b/src/search/__suggestion/search__suggestion.css @@ -0,0 +1,15 @@ +#search__suggestion { + position: absolute; + + width: 44px; + max-width: 44px; + height: 39px; + max-height: 19px; + margin-top: 7px; + margin-left: 16px; + + color: #707070; + font-family: 'Yandex Sans Regular', sans-serif; + font-size: 15px; + font-weight: 400; +} diff --git a/src/search/__suggestion/search__suggestion.jsx b/src/search/__suggestion/search__suggestion.jsx new file mode 100644 index 0000000..da54954 --- /dev/null +++ b/src/search/__suggestion/search__suggestion.jsx @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +import './search__suggestion.css'; + +export default class SearchSuggestion extends Component { + render() { + return

Поиск

; + } +} diff --git a/src/search/search.css b/src/search/search.css new file mode 100644 index 0000000..1b605c1 --- /dev/null +++ b/src/search/search.css @@ -0,0 +1,11 @@ +#search { + position: absolute; + + width: 301px; + height: 32px; + margin-top: 11px; + + margin-left: 320px; + background-color: #fff; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); +} diff --git a/src/search/search.jsx b/src/search/search.jsx new file mode 100644 index 0000000..dc5ff89 --- /dev/null +++ b/src/search/search.jsx @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +import './search.css'; +import SearchSuggestion from './__suggestion/search__suggestion'; +import SearchCross from './__cross/search__cross'; + +export default class Search extends Component { + render() { + return ( + + ); + } +} diff --git a/src/three-lines/three-lines.css b/src/three-lines/three-lines.css new file mode 100644 index 0000000..cbc29a1 --- /dev/null +++ b/src/three-lines/three-lines.css @@ -0,0 +1,20 @@ +.hline { + position: absolute; + + width: 20px; + height: 3px; + margin-left: 22px; + background-color: #000; +} + +#hline-1 { + margin-top: 19px; +} + +#hline-2 { + margin-top: 26px; +} + +#hline-3 { + margin-top: 33px; +} diff --git a/src/three-lines/three-lines.jsx b/src/three-lines/three-lines.jsx new file mode 100644 index 0000000..e215082 --- /dev/null +++ b/src/three-lines/three-lines.jsx @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +import './three-lines.css'; + +export default class ThreeLines extends Component { + render() { + return ( +
+
+ +
+ +
+
+ ); + } +} diff --git a/src/writebox/writebox.css b/src/writebox/writebox.css new file mode 100644 index 0000000..6e19a42 --- /dev/null +++ b/src/writebox/writebox.css @@ -0,0 +1,27 @@ +#writebox { + position: absolute; + + width: 147px; + height: 32px; + margin-top: 56px; + margin-left: 22px; + background-color: #6287bd; + + border-radius: 3px; +} + +#write { + position: absolute; + + overflow: hidden; + + max-width: 60px; + max-height: 11px; + margin-top: 7px; + margin-left: 46px; + + color: #fff; + font-family: 'Helvetica Neue Medium', sans-serif; + font-size: 12px; + font-weight: 500; +} diff --git a/src/writebox/writebox.jsx b/src/writebox/writebox.jsx new file mode 100644 index 0000000..1898f43 --- /dev/null +++ b/src/writebox/writebox.jsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; + +import './writebox.css'; + +export default class ThreeLines extends Component { + render() { + return ( +
+

Написать

+
+ ); + } +}