diff --git a/package.json b/package.json index fec9754..a9dae74 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { + "dom-to-image": "^2.6.0", "react": "^16.3.2", - "react-dom": "^16.3.2" + "react-dom": "^16.3.2", + "semantic-ui-css": "^2.3.1", + "semantic-ui-react": "^0.79.1" }, "devDependencies": { "react-scripts": "1.1.4" @@ -15,4 +18,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/src/App.css b/src/App.css index 4931613..e56928d 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,110 @@ -.App { - text-align: center; +*, :after, :before { + box-sizing: border-box; +} +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} +.chat__body { + font-family: sans; + font-size: 26px; + line-height: initial; + color: initial; + display: flex; + width: 100%; + height: 100%; + //background-image: url("https://raw.githubusercontent.com/telegramdesktop/tdesktop/dev/Telegram/Resources/art/bg_initial.jpg"); + //background-position-y: -54px; + //background-attachment: fixed; +} + +.sticker { + width: 500px; + position: relative; + padding-left: 10px; +} + +.chathead { + position: absolute; + bottom: 12px; + width: 64px; + height: 64px; + //float: left; + background-image: url("./photomair.jpg"); + background-size: contain; + clip-path: circle(50% at 50% 50%); +} + +.messages { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: flex-end; + padding-left: 90px; + padding-right: 10px; +} + +.message { + align-self: flex-start; + display: flex; + align-items: center; + + position: relative; + + min-height: 60px; + max-width: 840px; + + background-color: #FFF; + margin-bottom: 16px; + border-radius: 12px; + + z-index: 2; + + box-shadow: 0 4px 0px 0 rgba(160,172,182,.5); +} + +.message.droplet:before { + position: absolute; + content: ''; + bottom: 0; + left: -16px; + width: 24px; + height: 2px; + background-color: inherit; + z-index: 1; + box-shadow: 0px 2px 2px 2px rgba(160,172,182,.5); +} +.message.droplet:after { + position: absolute; + content: ''; + bottom: 0; + left: -20px; + width: 32px; + height: 20px; + //clip-path: url(#left-droplet); + clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%, 23% 85%, 40% 65%, 54% 33%); + background-color: inherit; + z-index: 1; + box-shadow: 0 4px 2px 0 rgba(160,172,182,.5); +} + +.message__text, +.message__image__text .message__text__content { + padding-top: 20px; + padding-left: 20px; + padding-right: 20px; + z-index: 2; +} + +.message__time { + display: inline-block; + float: right; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 28px; + text-align: right; + font-size: 24px; + color: #a0acb6; } diff --git a/src/App.js b/src/App.js index 1e5a4ff..965bc3c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,59 @@ import React, { Component } from 'react'; +import domtoimage from 'dom-to-image'; +import { Form, Input } from 'semantic-ui-react' import './App.css'; + class App extends Component { - render() { - return ( -