From d87d6cbc642ec7cd7613e56df82e507dfe52860f Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:38:47 +0000
Subject: [PATCH 1/2] CSS for improving group creation UX, namely setting long
description
---
.../matrix-react-sdk/structures/_GroupView.scss | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
index 583ab2ce..c830a79d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
@@ -304,6 +304,18 @@ limitations under the License.
}
.mx_GroupView_groupDesc textarea {
- width: 50%;
+ width: 100%;
+ max-width: 100%;
height: 150px;
}
+
+.mx_GroupView_groupDesc_placeholder {
+ background-color: $group-my-groups-placeholder-bg;
+ color: $group-my-groups-placeholder-fg;
+ border-radius: 10px;
+ text-align: center;
+
+ cursor: pointer;
+ padding: 100px 20px;
+ margin: 20px 0px;
+}
From aa4feb056398287e5c9b89129216b74f6b6778a2 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:57:03 +0000
Subject: [PATCH 2/2] Info plinth CSS variables
---
.../vector/css/matrix-react-sdk/structures/_GroupView.scss | 4 ++--
.../vector/css/matrix-react-sdk/structures/_MyGroups.scss | 4 ++--
src/skins/vector/css/themes/_base.scss | 6 +++---
src/skins/vector/css/themes/_dark.scss | 2 +-
4 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
index c830a79d..2f7cd187 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
@@ -310,8 +310,8 @@ limitations under the License.
}
.mx_GroupView_groupDesc_placeholder {
- background-color: $group-my-groups-placeholder-bg;
- color: $group-my-groups-placeholder-fg;
+ background-color: $info-plinth-bg-color;
+ color: $info-plinth-fg-color;
border-radius: 10px;
text-align: center;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index d7cbda9a..f76aefe3 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -87,8 +87,8 @@ limitations under the License.
}
.mx_MyGroups_placeholder {
- background-color: $group-my-groups-placeholder-bg;
- color: $group-my-groups-placeholder-fg;
+ background-color: $info-plinth-bg-color;
+ color: $info-plinth-fg-color;
line-height: 400px;
border-radius: 10px;
text-align: center;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 1a0fa5b4..d204829d 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -22,9 +22,9 @@ $warning-color: #ff0064;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
-// groups
-$group-my-groups-placeholder-bg: #f7f7f7;
-$group-my-groups-placeholder-fg: #888;
+// informational plinth
+$info-plinth-bg-color: #f7f7f7;
+$info-plinth-fg-color: #888;
$preview-bar-bg-color: #f7f7f7;
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 034bd748..d6fa88d6 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -21,7 +21,7 @@ $focus-brightness: 200%;
$warning-color: #ff0064;
// groups
-$group-my-groups-placeholder-bg: #454545;
+$info-plinth-bg-color: #454545;
$other-user-pill-bg-color: rgba(255, 255, 255, 0.1);