diff options
| -rw-r--r-- | vnext/src/components/LoginButton.js | 3 | ||||
| -rw-r--r-- | vnext/src/components/Modal.css | 95 | ||||
| -rw-r--r-- | vnext/src/components/Modal.js | 14 |
3 files changed, 100 insertions, 12 deletions
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index 02a1db35..c25b0e81 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from './Icon'; import Modal from './Modal'; +import Button from './Button'; import { me, facebookLink, vkLink } from '../api'; @@ -75,7 +76,7 @@ export default class LoginButton extends React.Component { type="password" name="password" placeholder="Password..." value={this.state.password} onChange={this.passwordChanged} /><br /> - <input className="signsubmit" type="submit" value="OK" /> + <Button onClick={this.login}>OK</Button> </form> </div> </Modal> diff --git a/vnext/src/components/Modal.css b/vnext/src/components/Modal.css new file mode 100644 index 00000000..428ee2e3 --- /dev/null +++ b/vnext/src/components/Modal.css @@ -0,0 +1,95 @@ +#dialogt { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.3); +} +#dialogw { + z-index: 11; + max-width: 96%; + max-height: calc(100% - 100px); + background-color: #fff; +} +#dialogw a { + display: block; +} +#dialogw img { + max-height: 100%; + max-height: 90vh; + max-width: 100%; +} +#dialog_header { + width: 100%; + height: 44px; + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.header_image { + background: rgba(0, 0, 0, 0.28); +} +#dialogc { + cursor: pointer; + color: #ccc; + padding-right: 6px; +} +.dialoglogin { + background: #fff; + padding: 25px; +} +.dialog-opened { + overflow: hidden; +} +#signemail, +#signfb, +#signvk { + display: block; + line-height: 32px; + margin: 10px 0; + text-decoration: none; + width: 100%; +} +#signvk { + margin-bottom: 30px; +} +.dialoglogin form { + margin-top: 7px; +} +.signinput, +.signsubmit { + border: 1px solid #CCC; + margin: 3px 0; + padding: 3px; +} +.signsubmit { + width: 70px; +} +.dialogshare { + background: #fff; + min-width: 300px; + overflow: auto; + padding: 20px; +} +.dialogl { + background: #fff; + border: 1px solid #DDD; + margin: 3px 0 20px; + padding: 5px; +} +.dialogshare li { + float: left; + margin: 5px 10px 0 0; +} +.dialogshare a { + display: block; +} +.dialogtxt { + background: #fff; + padding: 20px; +} diff --git a/vnext/src/components/Modal.js b/vnext/src/components/Modal.js index 50516d05..799a6f35 100644 --- a/vnext/src/components/Modal.js +++ b/vnext/src/components/Modal.js @@ -3,19 +3,11 @@ import PropTypes from 'prop-types'; import Icon from './Icon'; +import './Modal.css'; + function Modal(props) { - // The gray background - const backdropStyle = { - position: 'fixed', - top: 0, - bottom: 0, - left: 0, - right: 0, - backgroundColor: 'rgba(0, 0, 0, 0.3)', - padding: 50 - }; return props.show ? ( - <div id="dialogt" style={backdropStyle}> + <div id="dialogt"> <div id="dialogw"> <div id="dialog_header"> <div id="dialogc" onClick={props.onClose}> |