Merge pull request #2522 from matrix-org/bwindels/memberpanel-tiny-makeover
Redesign: small member info panel makeover
This commit is contained in:
commit
6aca7e4515
4 changed files with 24 additions and 20 deletions
res/css/views
src/components/views/elements
|
@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
|
||||
.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
|
||||
float: right;
|
||||
padding: 0px;
|
||||
margin-right: 42px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
|
||||
|
|
|
@ -15,13 +15,15 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MemberDeviceInfo {
|
||||
padding: 10px 0px;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
|
||||
.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton {
|
||||
|
@ -39,16 +41,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceInfo {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
margin: 0 5px 5px 8px;
|
||||
}
|
||||
|
||||
/* "Unblacklist" is too long for a regular button: make it wider and
|
||||
reduce the padding. */
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
|
||||
width: 8em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
|
|
@ -43,7 +43,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberInfo_container {
|
||||
padding: 8px;
|
||||
margin: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo .mx_RoomTile_nameContainer {
|
||||
|
@ -60,6 +60,7 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo_avatar {
|
||||
background: $tagpanel-bg-color;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar > img {
|
||||
|
@ -83,15 +84,14 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo h3 {
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 14px;
|
||||
color: $input-darker-fg-color;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_profileField {
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -101,14 +101,17 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo_field {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: $accent-color;
|
||||
font-size: 15px;
|
||||
color: $primary-fg-color;
|
||||
margin-left: 8px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_createRoom {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_createRoom_label {
|
||||
|
|
|
@ -114,9 +114,8 @@ export default React.createClass({
|
|||
);
|
||||
}
|
||||
|
||||
// mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful
|
||||
return (
|
||||
<div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
|
||||
<div className="mx_DeviceVerifyButtons" >
|
||||
{ verifyButton }
|
||||
{ blacklistButton }
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue