From ceb214f1928ea4da00cf15ceea556f684b49d8ee Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 21 Jul 2015 16:48:55 -0700
Subject: [PATCH] skin dialogs correctly

---
 skins/base/css/common.css                 | 46 +++++++++++++++++------
 skins/base/views/organisms/ErrorDialog.js | 12 ++++--
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/skins/base/css/common.css b/skins/base/css/common.css
index 59915b939..b4941e38e 100644
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@@ -49,9 +49,9 @@ html {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #ccc;
-    opacity: 0.5;
-    z-index: -200;
+    background-color: #000;
+    opacity: 0.2;
+    z-index: 2000;
 }
 
 .mx_Dialog_Wrapper {
@@ -64,19 +64,43 @@ html {
 
 .mx_Dialog {
     background-color: #fff;
+    color: #747474;
+    text-align: center;
     margin: auto;
     max-width: 500px;
-    z-index: -100;
+    z-index: 2010;
+    font-weight: 300;
+    font-size: 16px;
     position: relative;
+    border-radius: 8px;
     top: 200px;
 }
 
-.mx_ErrorDialogTitle {
-    background-color: #d2322d;
-    min-height: 16px;
-    padding: 15px;
-    border-bottom: 1px solid #e5e5e5;
-    font-weight: bold;
-    line-height: 1.4;
+.mx_Dialog_content {
+    margin: 35px;
+}
+
+.mx_Dialog_buttons {
+    padding-bottom: 35px;
+}
+
+.mx_Dialog button {
+    border: 0px;
+    width: 80px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
     color: #fff;
+    background-color: #80cef4;
+}
+
+.mx_ErrorDialogTitle {
+    min-height: 16px;
+    padding: 12px;
+    border-bottom: 1px solid #a9dbf4;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 1.4;
 }
\ No newline at end of file
diff --git a/skins/base/views/organisms/ErrorDialog.js b/skins/base/views/organisms/ErrorDialog.js
index fd34a734a..68d597cbb 100644
--- a/skins/base/views/organisms/ErrorDialog.js
+++ b/skins/base/views/organisms/ErrorDialog.js
@@ -40,10 +40,14 @@ module.exports = React.createClass({
                 <div className="mx_ErrorDialogTitle">
                     {this.props.title}
                 </div>
-                {this.props.description}<br />
-                <button onClick={this.props.onFinished} autoFocus={this.props.focus}>
-                    {this.props.button}
-                </button>
+                <div className="mx_Dialog_content">
+                    {this.props.description}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.props.onFinished} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+                </div>
             </div>
         );
     }