Modal window styling

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}>