Merge pull request #4690 from vector-im/rxl881/widgetPermissions

Widget permissions styling and icon

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 {

src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss

@@ -83,11 +83,20 @@ limitations under the License.
     border: 1px solid transparent;
 }
 
+.mx_AppTileMenuBarWidgetDelete {
+    filter: none;
+}
+
 .mx_AppTileMenuBarWidget:hover {
     border: 1px solid $primary-hairline-color;
     border-radius: 2px;
 }
 
+.mx_AppTileBody{
+    height: 350px;
+    overflow: hidden;
+}
+
 .mx_AppTileBody iframe {
     width: 100%;
     height: 350px;
@@ -167,3 +176,52 @@ form.mx_Custom_Widget_Form div {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.mx_AppPermissionWarning {
+    text-align: center;
+    padding: 30px 0;
+    background-color: $primary-bg-color;
+}
+
+.mx_AppPermissionWarningImage {
+    margin: 10px 0;
+}
+
+.mx_AppPermissionWarningImage img {
+    width: 150px;
+}
+
+.mx_AppPermissionWarningText {
+    max-width: 400px;
+    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;
+    background-color: $primary-bg-color;
+}
+
+.mx_AppPermissionButton:hover {
+    background-color: $primary-fg-color;
+    cursor: pointer;
+}
+
+.mx_AppLoading {
+    min-height: 305px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+}