From ff2554c8a6c6a04efe39a71c3c47b56d160d628a Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Wed, 26 Jul 2017 16:48:24 +0100
Subject: [PATCH 1/5] App permission component styling.

---
 .../views/rooms/_AppsDrawer.scss              | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index 7d1ac628..41efe4c8 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -167,3 +167,37 @@ form.mx_Custom_Widget_Form div {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.mx_AppPermissionWarning {
+    text-align: center;
+    padding: 30px 0;
+    background-color: $lightbox-bg-color;
+}
+
+.mx_AppPermissionWarningImage {
+    margin: 10px 0;
+}
+
+.mx_AppPermissionWarningImage img {
+    width: 150px;
+}
+
+.mx_AppPermissionWarningText {
+    max-width: 300px;
+    margin: 10px auto 10px auto;
+    color: $primary-fg-color;
+}
+
+.mx_AppPermissionWarningTextLabel {
+    font-weight: bold;
+}
+
+.mx_AppPermissionWarningTextURL {
+    color: $accent-color;
+}
+
+.mx_AppPermissionButton {
+    padding: 5px;
+    border-radius: 5px;
+    color: $warning-color;
+}

From 0bee03e86f7f191c465099eb70cb8f7d08d6aef9 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 27 Jul 2017 16:40:33 +0100
Subject: [PATCH 2/5] Fix App body height. App warning colours. App loading
 styling.

---
 .../views/rooms/_AppsDrawer.scss              | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index 41efe4c8..07eeba70 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -88,6 +88,11 @@ limitations under the License.
     border-radius: 2px;
 }
 
+.mx_AppTileBody{
+    height: 350px;
+    overflow: hidden;
+}
+
 .mx_AppTileBody iframe {
     width: 100%;
     height: 350px;
@@ -171,7 +176,7 @@ form.mx_Custom_Widget_Form div {
 .mx_AppPermissionWarning {
     text-align: center;
     padding: 30px 0;
-    background-color: $lightbox-bg-color;
+    background-color: $primary-bg-color;
 }
 
 .mx_AppPermissionWarningImage {
@@ -183,7 +188,7 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarningText {
-    max-width: 300px;
+    max-width: 400px;
     margin: 10px auto 10px auto;
     color: $primary-fg-color;
 }
@@ -200,4 +205,18 @@ form.mx_Custom_Widget_Form div {
     padding: 5px;
     border-radius: 5px;
     color: $warning-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_AppPermissionButton:hover {
+    background-color: $primary-fg-color;
+}
+
+.mx_AppLoading {
+    min-height: 305px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
 }

From c1fe3533c4eb247ad2a4147dd6369a57faffcbbd Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 27 Jul 2017 18:10:56 +0100
Subject: [PATCH 3/5] Add red cancel icon and styling.

---
 .../css/matrix-react-sdk/views/rooms/_AppsDrawer.scss  |  4 ++++
 src/skins/vector/img/cancel-red.svg                    | 10 ++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/skins/vector/img/cancel-red.svg

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index 07eeba70..c8556b0d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -83,6 +83,10 @@ limitations under the License.
     border: 1px solid transparent;
 }
 
+.mx_AppTileMenuBarWidgetDelete {
+    filter: none;
+}
+
 .mx_AppTileMenuBarWidget:hover {
     border: 1px solid $primary-hairline-color;
     border-radius: 2px;
diff --git a/src/skins/vector/img/cancel-red.svg b/src/skins/vector/img/cancel-red.svg
new file mode 100644
index 00000000..a72a970b
--- /dev/null
+++ b/src/skins/vector/img/cancel-red.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ff0064" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>

From 50f5abf53565a02efc26537b25b47b845c82025a Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 27 Jul 2017 20:19:08 +0100
Subject: [PATCH 4/5] Permissions button cursor.

---
 .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index c8556b0d..73c59c6e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -214,6 +214,7 @@ form.mx_Custom_Widget_Form div {
 
 .mx_AppPermissionButton:hover {
     background-color: $primary-fg-color;
+    cursor: pointer;
 }
 
 .mx_AppLoading {

From 317ff8c6af40bd93a474f188d177878b89082c4c Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 27 Jul 2017 23:02:19 +0100
Subject: [PATCH 5/5] Beta tag styling

---
 src/skins/vector/css/_common.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index c52204c5..3189deb0 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -319,6 +319,7 @@ textarea {
     cursor: help;
     transition-duration: 200ms;
     font-size: smaller;
+    filter: opacity(0.5);
 }
 
 .mx_Beta:hover {