diff --git a/package.json b/package.json
index c9300a13ca..7ba69c4272 100644
--- a/package.json
+++ b/package.json
@@ -64,8 +64,8 @@
"create-react-class": "^15.6.0",
"diff-dom": "^4.1.3",
"diff-match-patch": "^1.0.4",
- "emojibase-data": "^4.0.2",
- "emojibase-regex": "^3.0.0",
+ "emojibase-data": "^5.0.1",
+ "emojibase-regex": "^4.0.1",
"escape-html": "^1.0.3",
"file-saver": "^1.3.3",
"filesize": "3.5.6",
@@ -89,7 +89,6 @@
"qrcode-react": "^0.1.16",
"qs": "^6.6.0",
"react": "^16.9.0",
- "react-addons-css-transition-group": "15.6.2",
"react-beautiful-dnd": "^4.0.1",
"react-dom": "^16.9.0",
"react-focus-lock": "^2.2.1",
diff --git a/res/css/_common.scss b/res/css/_common.scss
index ad64aced50..03442ca510 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+@import "./_font-sizes.scss";
+
+:root {
+ font-size: 15px;
+}
+
html {
/* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +31,7 @@ html {
body {
font-family: $font-family;
- font-size: 15px;
+ font-size: $font-15px;
background-color: $primary-bg-color;
color: $primary-fg-color;
border: 0px;
@@ -60,7 +66,7 @@ b {
h2 {
color: $primary-fg-color;
font-weight: 400;
- font-size: 18px;
+ font-size: $font-18px;
margin-top: 16px;
margin-bottom: 16px;
}
@@ -76,7 +82,7 @@ input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
- font-size: 14px;
+ font-size: $font-14px;
font-weight: 600;
min-width: 0;
}
@@ -253,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $light-fg-color;
z-index: 4012;
font-weight: 300;
- font-size: 15px;
+ font-size: $font-15px;
position: relative;
padding: 25px 30px 30px 30px;
max-height: 80%;
@@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_Dialog_title {
- font-size: 22px;
- line-height: 36px;
+ font-size: $font-22px;
+ line-height: $font-36px;
color: $dialog-title-fg-color;
}
@@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content {
margin: 24px 0 68px;
- font-size: 14px;
+ font-size: $font-14px;
color: $primary-fg-color;
word-wrap: break-word;
}
@@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_TextInputDialog_input {
- font-size: 15px;
+ font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
diff --git a/res/css/_components.scss b/res/css/_components.scss
index b959b1f1cd..a5dc87a952 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -1,5 +1,6 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
+@import "./_font-sizes.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@@ -93,6 +94,7 @@
@import "./views/elements/_AccessibleButton.scss";
@import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss";
+@import "./views/elements/_ButtonPlaceholder.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@@ -132,6 +134,7 @@
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
+@import "./views/messages/_MVideoBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_MjolnirBody.scss";
diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
new file mode 100644
index 0000000000..ad9e2e7103
--- /dev/null
+++ b/res/css/_font-sizes.scss
@@ -0,0 +1,63 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$font-8px: 0.533rem;
+$font-9px: 0.600rem;
+$font-10px: 0.667rem;
+$font-10-4px: 0.693rem;
+$font-11px: 0.733rem;
+$font-12px: 0.800rem;
+$font-13px: 0.867rem;
+$font-14px: 0.933rem;
+$font-15px: 1.000rem;
+$font-16px: 1.067rem;
+$font-17px: 1.133rem;
+$font-18px: 1.200rem;
+$font-19px: 1.267rem;
+$font-20px: 1.333rem;
+$font-21px: 1.400rem;
+$font-22px: 1.467rem;
+$font-23px: 1.533rem;
+$font-24px: 1.600rem;
+$font-25px: 1.667rem;
+$font-26px: 1.733rem;
+$font-27px: 1.800rem;
+$font-28px: 1.867rem;
+$font-29px: 1.933rem;
+$font-30px: 2.000rem;
+$font-31px: 2.067rem;
+$font-32px: 2.133rem;
+$font-33px: 2.200rem;
+$font-34px: 2.267rem;
+$font-35px: 2.333rem;
+$font-36px: 2.400rem;
+$font-37px: 2.467rem;
+$font-38px: 2.533rem;
+$font-39px: 2.600rem;
+$font-40px: 2.667rem;
+$font-41px: 2.733rem;
+$font-42px: 2.800rem;
+$font-43px: 2.867rem;
+$font-44px: 2.933rem;
+$font-45px: 3.000rem;
+$font-46px: 3.067rem;
+$font-47px: 3.133rem;
+$font-48px: 3.200rem;
+$font-49px: 3.267rem;
+$font-50px: 3.333rem;
+$font-51px: 3.400rem;
+$font-52px: 3.467rem;
+$font-400px: 26.667rem;
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index fa2d87029d..61070a0541 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -36,7 +36,7 @@ limitations under the License.
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
- font-size: 14px;
+ font-size: $font-14px;
z-index: 5001;
}
diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss
index 10f9e23a02..e859beb20e 100644
--- a/res/css/structures/_CreateRoom.scss
+++ b/res/css/structures/_CreateRoom.scss
@@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
- font-size: 13px;
+ font-size: $font-13px;
padding: 9px;
margin-top: 6px;
}
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 87e885e668..859ee28035 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -49,7 +49,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
display: flex;
- font-size: 14px;
+ font-size: $font-14px;
color: $event-timestamp-color;
}
@@ -60,7 +60,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
- font-size: 11px;
+ font-size: $font-11px;
text-align: right;
white-space: nowrap;
}
@@ -80,7 +80,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
- font-size: 11px;
+ font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}
@@ -90,7 +90,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
- font-size: 11px;
+ font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}
diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 72a1132c15..ed0cf121a4 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -134,7 +134,7 @@ limitations under the License.
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
- font-size: 22px;
+ font-size: $font-22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
max-height: 42px;
color: $settings-grey-fg-color;
font-weight: 300;
- font-size: 13px;
+ font-size: $font-13px;
padding-left: 19px;
margin-right: 16px;
overflow: hidden;
@@ -196,7 +196,7 @@ limitations under the License.
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
- font-size: 13px;
+ font-size: $font-13px;
margin-bottom: 10px;
}
@@ -226,7 +226,7 @@ limitations under the License.
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
- line-height: 24px;
+ line-height: $font-24px;
padding-left: 28px;
color: $accent-color;
}
@@ -258,7 +258,7 @@ limitations under the License.
.mx_GroupView_membershipSection_description {
/* To match textButton */
- line-height: 34px;
+ line-height: $font-34px;
}
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss
index 3aa80f6f59..0160cf368b 100644
--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@@ -23,3 +23,84 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
}
+
+.mx_HomePage_default {
+ text-align: center;
+
+ .mx_HomePage_default_wrapper {
+ padding: 25vh 0 12px;
+ }
+
+ img {
+ height: 48px;
+ }
+
+ h1 {
+ font-weight: 600;
+ font-size: $font-32px;
+ line-height: $font-44px;
+ margin-bottom: 4px;
+ }
+
+ h4 {
+ margin-top: 4px;
+ font-weight: 600;
+ font-size: $font-18px;
+ line-height: $font-25px;
+ color: $muted-fg-color;
+ }
+
+ .mx_HomePage_default_buttons {
+ margin: 80px auto 0;
+ width: fit-content;
+
+ .mx_AccessibleButton {
+ padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
+
+ width: 104px; // 120px - 2* 8px
+ margin: 0 39px; // 55px - 2* 8px
+ position: relative;
+ display: inline-block;
+ border-radius: 8px;
+ vertical-align: top;
+ word-break: break-word;
+
+ font-weight: 600;
+ font-size: $font-15px;
+ line-height: $font-20px;
+ color: $muted-fg-color;
+
+ &:hover {
+ color: $accent-color;
+ background: rgba(#03b381, 0.06);
+
+ &::before {
+ background-color: $accent-color;
+ }
+ }
+
+ &::before {
+ top: 20px;
+ left: 40px; // (120px-40px)/2
+ width: 40px;
+ height: 40px;
+
+ content: '';
+ position: absolute;
+ background-color: $muted-fg-color;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ }
+
+ &.mx_HomePage_button_sendDm::before {
+ mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+ }
+ &.mx_HomePage_button_explore::before {
+ mask-image: url('$(res)/img/feather-customised/explore.svg');
+ }
+ &.mx_HomePage_button_createGroup::before {
+ mask-image: url('$(res)/img/feather-customised/group.svg');
+ }
+ }
+ }
+}
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 85fdfa092d..7d57425f6f 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -147,7 +147,7 @@ limitations under the License.
}
.mx_AccessibleButton {
- font-size: 14px;
+ font-size: $font-14px;
margin: 4px 0 1px 9px;
padding: 9px;
padding-left: 42px;
diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss
index 36150c33a5..73f1332cd0 100644
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@@ -105,7 +105,7 @@ limitations under the License.
.mx_MyGroups_placeholder {
background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color;
- line-height: 400px;
+ line-height: $font-400px;
border-radius: 10px;
text-align: center;
}
@@ -149,11 +149,11 @@ limitations under the License.
.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0px;
- font-size: 15px;
+ font-size: $font-15px;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
- font-size: 13px;
+ font-size: $font-13px;
opacity: 0.7;
}
@@ -161,7 +161,7 @@ limitations under the License.
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- font-size: 13px;
+ font-size: $font-13px;
max-height: 36px;
overflow: hidden;
}
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index c9e0261ec9..44205b1f01 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -39,7 +39,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
- font-size: 14px;
+ font-size: $font-14px;
}
.mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-fg-color;
- font-size: 12px;
+ font-size: $font-12px;
display: inline;
padding-left: 0px;
}
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 3c373e8883..10878322e3 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -96,7 +96,7 @@ limitations under the License.
}
.mx_RightPanel_headerButton_badge {
- font-size: 8px;
+ font-size: $font-8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index f3a7b0e243..e0814182f5 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -64,7 +64,7 @@ limitations under the License.
}
.mx_RoomDirectory_table {
- font-size: 12px;
+ font-size: $font-12px;
color: $primary-fg-color;
width: 100%;
text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
.mx_RoomDirectory_name {
display: inline-block;
- font-size: 18px;
+ font-size: $font-18px;
font-weight: 600;
}
@@ -124,7 +124,7 @@ limitations under the License.
border-radius: 10px;
display: inline-block;
height: 20px;
- line-height: 20px;
+ line-height: $font-20px;
padding: 0 5px;
color: $accent-fg-color;
background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
}
.mx_RoomDirectory_alias {
- font-size: 12px;
+ font-size: $font-12px;
color: $settings-grey-fg-color;
}
@@ -150,7 +150,7 @@ limitations under the License.
}
.mx_RoomDirectory > span {
- font-size: 15px;
+ font-size: $font-15px;
margin-top: 0;
.mx_AccessibleButton {
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 090a40235f..cd4390ee5c 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 50px;
- line-height: 50px;
+ line-height: $font-50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
@@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
- line-height: 24px;
+ line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color;
- font-size: 13px;
+ font-size: $font-13px;
opacity: 0.5;
padding-bottom: 20px;
}
@@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 50px;
- line-height: 50px;
+ line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone {
height: 50px;
- line-height: 50px;
+ line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 40px;
- line-height: 40px;
+ line-height: $font-40px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
- line-height: 40px;
+ line-height: $font-40px;
}
}
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 1934e681c2..2e0c94263e 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -68,7 +68,7 @@ limitations under the License.
text-transform: uppercase;
color: $roomsublist-label-fg-color;
font-weight: 700;
- font-size: 12px;
+ font-size: $font-12px;
margin-left: 8px;
}
@@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
- font-size: 12px;
+ font-size: $font-12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 5e826306c6..f2154ef448 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -23,7 +23,7 @@ limitations under the License.
.mx_RoomView_fileDropTarget {
min-width: 0px;
width: 100%;
- font-size: 18px;
+ font-size: $font-18px;
text-align: center;
pointer-events: none;
@@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty {
flex: 1 1 auto;
- font-size: 13px;
+ font-size: $font-13px;
padding-left: 3em;
padding-right: 3em;
margin-right: 20px;
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 7904df5a82..4a4bb125a3 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer;
display: block;
border-radius: 3px;
- font-size: 14px;
+ font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index c1c5d92d3c..0065ffa502 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -139,7 +139,7 @@ limitations under the License.
background-color: $neutral-badge-color;
color: #000;
font-weight: 600;
- font-size: 10px;
+ font-size: $font-10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@@ -157,7 +157,7 @@ limitations under the License.
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
- font-size: 14px;
+ font-size: $font-14px;
padding: 0 5px;
background-color: $roomtile-name-color;
}
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index d1687743d6..af595aaeee 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -77,7 +77,7 @@ limitations under the License.
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
- font-size: 15px;
+ font-size: $font-15px;
font-weight: 600;
}
@@ -96,11 +96,11 @@ limitations under the License.
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_Toast_deviceID {
- font-size: 10px;
+ font-size: $font-10px;
}
}
}
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index ee03978f18..53d44e7c24 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -32,7 +32,7 @@ limitations under the License.
.mx_TopLeftMenuButton_name {
margin: 0 7px;
- font-size: 18px;
+ font-size: $font-18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index b908861c6f..421d1f03cd 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -29,7 +29,7 @@ limitations under the License.
.mx_ViewSource pre {
text-align: left;
- font-size: 12px;
+ font-size: $font-12px;
padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
index 601492d43c..80e7aaada0 100644
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@@ -34,7 +34,7 @@ limitations under the License.
}
.mx_CompleteSecurity_body {
- font-size: 15px;
+ font-size: $font-15px;
}
.mx_CompleteSecurity_waiting {
@@ -44,6 +44,7 @@ limitations under the License.
.mx_CompleteSecurity_actionRow {
display: flex;
justify-content: flex-end;
+ margin-top: $font-28px;
.mx_AccessibleButton {
margin-inline-start: 18px;
diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index 4ce90cc6bd..02436833a2 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -89,3 +89,13 @@ limitations under the License.
.mx_Login_underlinedServerName {
border-bottom: 1px dashed $accent-color;
}
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+ // style it as a link
+ font-size: inherit;
+ padding: 0;
+
+ &.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+ }
+}
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 7c5b008535..4b2d6b1bf1 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthBody {
width: 500px;
- font-size: 12px;
+ font-size: $font-12px;
color: $authpage-secondary-color;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
@@ -25,14 +25,14 @@ limitations under the License.
box-sizing: border-box;
h2 {
- font-size: 24px;
+ font-size: $font-24px;
font-weight: 600;
margin-top: 8px;
color: $authpage-primary-color;
}
h3 {
- font-size: 14px;
+ font-size: $font-14px;
font-weight: 600;
color: $authpage-primary-color;
}
@@ -98,7 +98,7 @@ limitations under the License.
.mx_AuthBody_editServerDetails {
padding-left: 1em;
- font-size: 12px;
+ font-size: $font-12px;
font-weight: normal;
}
@@ -119,6 +119,24 @@ limitations under the License.
margin-right: 0;
}
+.mx_AuthBody_paddedFooter {
+ height: 80px; // height of the submit button + register link
+ padding-top: 28px;
+ text-align: center;
+
+ .mx_AuthBody_paddedFooter_title {
+ margin-top: 16px;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ }
+
+ .mx_AuthBody_paddedFooter_subtitle {
+ margin-top: 8px;
+ font-size: $font-10px;
+ line-height: $font-14px;
+ }
+}
+
.mx_AuthBody_changeFlow {
display: block;
text-align: center;
diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss
index 553adeee14..8deb0f80ac 100644
--- a/res/css/views/auth/_AuthButtons.scss
+++ b/res/css/views/auth/_AuthButtons.scss
@@ -43,7 +43,7 @@ limitations under the License.
cursor: pointer;
- font-size: 15px;
+ font-size: $font-15px;
padding: 0 11px;
word-break: break-word;
}
diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss
index ab169a6898..0bc2743d54 100644
--- a/res/css/views/auth/_AuthFooter.scss
+++ b/res/css/views/auth/_AuthFooter.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter {
text-align: center;
width: 100%;
- font-size: 14px;
+ font-size: $font-14px;
opacity: 0.72;
padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss
index c7860fbe74..46b7abe2cc 100644
--- a/res/css/views/auth/_CompleteSecurityBody.scss
+++ b/res/css/views/auth/_CompleteSecurityBody.scss
@@ -24,13 +24,13 @@ limitations under the License.
box-sizing: border-box;
h2 {
- font-size: 24px;
+ font-size: $font-24px;
font-weight: 600;
margin-top: 0;
}
h3 {
- font-size: 14px;
+ font-size: $font-14px;
font-weight: 600;
}
diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss
index 6f7eac0cf6..781561f876 100644
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@@ -20,7 +20,7 @@ limitations under the License.
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
- font-size: 14px;
+ font-size: $font-14px;
font-weight: 600;
color: $authpage-lang-color;
}
diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss
index ed781726b7..fbd3d2655d 100644
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ b/res/css/views/auth/_ServerTypeSelector.scss
@@ -65,5 +65,5 @@ limitations under the License.
}
.mx_ServerTypeSelector_description {
- font-size: 10px;
+ font-size: $font-10px;
}
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index d15d566bdb..2ecb93e734 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -19,6 +19,7 @@ limitations under the License.
}
.mx_MessageContextMenu_field {
+ display: block;
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss
index 308cecfe1e..9697ac9bef 100644
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ b/res/css/views/context_menus/_RoomTileContextMenu.scss
@@ -38,7 +38,7 @@ limitations under the License.
white-space: nowrap;
display: flex;
align-items: center;
- line-height: 16px;
+ line-height: $font-16px;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
index 2c8d608950..fceb7fba34 100644
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton;
align-self: start;
- font-size: 12px;
+ font-size: $font-12px;
padding: 6px 1em;
border: 1px solid transparent;
margin-right: 10px;
diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 46b279ce2d..e4ccc030a2 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -22,7 +22,7 @@ limitations under the License.
white-space: nowrap;
display: flex;
align-items: center;
- line-height: 16px;
+ line-height: $font-16px;
}
.mx_TagTileContextMenu_item object {
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index ed0d0106bc..973c306695 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -19,12 +19,12 @@ limitations under the License.
border-radius: 4px;
.mx_TopLeftMenu_greyedText {
- font-size: 12px;
+ font-size: $font-12px;
opacity: 0.5;
}
.mx_TopLeftMenu_upgradeLink {
- font-size: 12px;
+ font-size: $font-12px;
img {
margin-left: 5px;
diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss
index 39a9260ba3..136e497994 100644
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@@ -28,7 +28,7 @@ limitations under the License.
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus {
height: 26px;
- font-size: 14px;
+ font-size: $font-14px;
font-family: $font-family;
padding-left: 12px;
padding-right: 12px;
@@ -50,7 +50,7 @@ limitations under the License.
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: solid 1px $input-border-color;
- line-height: 36px;
+ line-height: $font-36px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
index b859d6bf4d..823f4d1e28 100644
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@@ -26,22 +26,22 @@ limitations under the License.
}
.mx_ConfirmUserActionDialog_name {
- font-size: 18px;
+ font-size: $font-18px;
}
.mx_ConfirmUserActionDialog_userId {
- font-size: 13px;
+ font-size: $font-13px;
}
.mx_ConfirmUserActionDialog_reasonField {
font-family: $font-family;
- font-size: 14px;
+ font-size: $font-14px;
color: $primary-fg-color;
background-color: $primary-bg-color;
border-radius: 3px;
border: solid 1px $input-border-color;
- line-height: 36px;
+ line-height: $font-36px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss
index 128eacc3ce..f7bfc61a98 100644
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@@ -25,7 +25,7 @@ limitations under the License.
}
.mx_CreateGroupDialog_input {
- font-size: 15px;
+ font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
@@ -44,7 +44,7 @@ limitations under the License.
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
padding: 0px 5px;
- line-height: 37px;
+ line-height: $font-37px;
background-color: $input-darker-bg-color;
border: 1px solid $input-border-color;
text-align: center;
diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 7416ec2ef4..2678f7b4ad 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -15,6 +15,8 @@ limitations under the License.
*/
.mx_CreateRoomDialog_details {
+ margin-top: 15px;
+
.mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
@@ -49,7 +51,7 @@ limitations under the License.
}
.mx_CreateRoomDialog_input {
- font-size: 15px;
+ font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
@@ -71,11 +73,19 @@ limitations under the License.
}
.mx_CreateRoomDialog {
-
&.mx_Dialog_fixedWidth {
width: 450px;
}
+ .mx_Dialog_content {
+ margin-bottom: 40px;
+ }
+
+ p,
+ .mx_Field_input label {
+ color: $muted-fg-color;
+ }
+
.mx_SettingsFlag {
display: flex;
}
@@ -90,5 +100,18 @@ limitations under the License.
flex: 0 0 auto;
margin-left: 30px;
}
+
+ .mx_CreateRoomDialog_topic {
+ margin-bottom: 36px;
+ }
+
+ .mx_Dialog_content > .mx_SettingsFlag {
+ margin-top: 24px;
+ }
+
+ p {
+ margin: 0 85px 0 0;
+ font-size: $font-12px;
+ }
}
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 500c46b5fd..35cb6bc7ab 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -68,11 +68,11 @@ limitations under the License.
width: 240px;
color: $input-fg-color;
font-family: $font-family;
- font-size: 16px;
+ font-size: $font-16px;
}
.mx_DevTools_textarea {
- font-size: 12px;
+ font-size: $font-12px;
max-width: 684px;
min-height: 250px;
padding: 10px;
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 5e0893b8fd..a77d0bfbba 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -40,8 +40,8 @@ limitations under the License.
textarea,
textarea:focus {
height: 34px;
- line-height: 34px;
- font-size: 14px;
+ line-height: $font-34px;
+ font-size: $font-14px;
padding-left: 12px;
margin: 0 !important;
border: 0 !important;
@@ -65,7 +65,7 @@ limitations under the License.
min-width: 48px;
margin-left: 10px;
height: 25px;
- line-height: 25px;
+ line-height: $font-25px;
}
.mx_InviteDialog_buttonAndSpinner {
@@ -84,7 +84,7 @@ limitations under the License.
padding-bottom: 10px;
h3 {
- font-size: 12px;
+ font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
@@ -143,23 +143,23 @@ limitations under the License.
.mx_InviteDialog_roomTile_name {
font-weight: 600;
- font-size: 14px;
+ font-size: $font-14px;
color: $primary-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_userId {
- font-size: 12px;
+ font-size: $font-12px;
color: $muted-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_time {
text-align: right;
- font-size: 12px;
+ font-size: $font-12px;
color: $muted-fg-color;
float: right;
- line-height: 36px; // Height of the avatar to keep the time vertically aligned
+ line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
}
.mx_InviteDialog_roomTile_highlight {
@@ -176,7 +176,7 @@ limitations under the License.
border-radius: 12px;
display: inline-block;
height: 24px;
- line-height: 24px;
+ line-height: $font-24px;
padding-left: 8px;
padding-right: 8px;
color: #ffffff; // this is fine without a var because it's for both themes
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index 0066faccae..e9d777effd 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -35,7 +35,7 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
- font-size: 14px;
+ font-size: $font-14px;
padding: 0;
color: $primary-fg-color;
@@ -60,7 +60,7 @@ limitations under the License.
}
.mx_MessageActionBar .mx_AccessibleButton {
- font-size: 10px;
+ font-size: $font-10px;
padding: 0 8px;
}
}
diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss
index 7e35fe941e..b35c570c80 100644
--- a/res/css/views/dialogs/_NewSessionReviewDialog.scss
+++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss
@@ -32,6 +32,6 @@ limitations under the License.
}
.mx_NewSessionReviewDialog_deviceID {
- font-size: 12px;
+ font-size: $font-12px;
color: $notice-secondary-color;
}
diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss
index 9d09a208df..37bee7a9ff 100644
--- a/res/css/views/dialogs/_SetEmailDialog.scss
+++ b/res/css/views/dialogs/_SetEmailDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
padding: 9px;
color: $input-fg-color;
background-color: $primary-bg-color;
- font-size: 15px;
+ font-size: $font-15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss
index f7d8a3d001..1df34f3408 100644
--- a/res/css/views/dialogs/_SetMxIdDialog.scss
+++ b/res/css/views/dialogs/_SetMxIdDialog.scss
@@ -29,7 +29,7 @@ limitations under the License.
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
- font-size: 15px;
+ font-size: $font-15px;
width: 100%;
max-width: 280px;
}
diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss
index 325ff6c6ed..1f99353298 100644
--- a/res/css/views/dialogs/_SetPasswordDialog.scss
+++ b/res/css/views/dialogs/_SetPasswordDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
- font-size: 15px;
+ font-size: $font-15px;
max-width: 280px;
margin-bottom: 10px;
}
diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss
index beb507e778..939a31dee6 100644
--- a/res/css/views/dialogs/_TermsDialog.scss
+++ b/res/css/views/dialogs/_TermsDialog.scss
@@ -31,7 +31,7 @@ limitations under the License.
}
.mx_TermsDialog_termsTable {
- font-size: 12px;
+ font-size: $font-12px;
width: 100%;
}
diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss
index 2b0f8dceca..daa6bd2352 100644
--- a/res/css/views/dialogs/_UnknownDeviceDialog.scss
+++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss
@@ -27,7 +27,7 @@ limitations under the License.
// userid
.mx_UnknownDeviceDialog p {
font-weight: bold;
- font-size: 16px;
+ font-size: $font-16px;
}
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index 106392f880..dd1892c448 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -35,6 +35,8 @@ limitations under the License.
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
background-color: $primary-bg-color;
+ max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
+ overflow-y: auto;
}
.mx_NetworkDropdown_menu_network {
@@ -47,9 +49,9 @@ limitations under the License.
.mx_NetworkDropdown_server_title {
padding: 0 10px;
- font-size: 15px;
+ font-size: $font-15px;
font-weight: 600;
- line-height: 20px;
+ line-height: $font-20px;
margin-bottom: 4px;
// remove server button
@@ -77,16 +79,16 @@ limitations under the License.
.mx_NetworkDropdown_server_subtitle {
padding: 0 10px;
- font-size: 10px;
- line-height: 14px;
+ font-size: $font-10px;
+ line-height: $font-14px;
margin-top: -4px;
margin-bottom: 4px;
color: $muted-fg-color;
}
.mx_NetworkDropdown_server_network {
- font-size: 12px;
- line-height: 16px;
+ font-size: $font-12px;
+ line-height: $font-16px;
padding: 4px 10px;
cursor: pointer;
position: relative;
@@ -154,7 +156,7 @@ limitations under the License.
.mx_NetworkDropdown_handle_server {
color: $muted-fg-color;
- font-size: 12px;
+ font-size: $font-12px;
}
}
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index de39525588..96269cea43 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -27,7 +27,7 @@ limitations under the License.
text-align: center;
border-radius: 4px;
display: inline-block;
- font-size: 14px;
+ font-size: $font-14px;
}
.mx_AccessibleButton_kind_primary {
diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss
index 0ecfb17c83..c42f52f8f4 100644
--- a/res/css/views/elements/_AddressTile.scss
+++ b/res/css/views/elements/_AddressTile.scss
@@ -19,9 +19,9 @@ limitations under the License.
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
- line-height: 26px;
+ line-height: $font-26px;
color: $primary-fg-color;
- font-size: 14px;
+ font-size: $font-14px;
font-weight: normal;
margin-right: 4px;
}
diff --git a/res/css/views/elements/_ButtonPlaceholder.scss b/res/css/views/elements/_ButtonPlaceholder.scss
new file mode 100644
index 0000000000..858fcdecf6
--- /dev/null
+++ b/res/css/views/elements/_ButtonPlaceholder.scss
@@ -0,0 +1,24 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ButtonPlaceholder {
+ font-size: $font-14px;
+ font-weight: 600;
+ padding: 7px 18px;
+ display: inline-block;
+ text-align: center;
+ color: $authpage-secondary-color;
+}
diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
index 75ef3fbabd..e4b1ac5574 100644
--- a/res/css/views/elements/_DirectorySearchBox.scss
+++ b/res/css/views/elements/_DirectorySearchBox.scss
@@ -32,7 +32,7 @@ limitations under the License.
background-repeat: no-repeat;
text-indent: 18px;
font-weight: 600;
- font-size: 12px;
+ font-size: $font-12px;
user-select: none;
cursor: pointer;
}
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 102ac56bf9..32a68d5252 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -29,10 +29,14 @@ limitations under the License.
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
- font-size: 12px;
+ font-size: $font-12px;
user-select: none;
}
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+
.mx_Dropdown_input:focus {
border-color: $input-focused-border-color;
}
@@ -53,7 +57,7 @@ limitations under the License.
.mx_Dropdown_option {
height: 35px;
- line-height: 35px;
+ line-height: $font-35px;
padding-left: 8px;
padding-right: 8px;
}
diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss
index 99a5c06a5f..f3e9f77aa3 100644
--- a/res/css/views/elements/_EventListSummary.scss
+++ b/res/css/views/elements/_EventListSummary.scss
@@ -19,7 +19,7 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 14px;
+ font-size: $font-14px;
display: inline-flex;
}
@@ -27,7 +27,7 @@ limitations under the License.
display: inline-block;
margin-right: 8px;
padding-top: 8px;
- line-height: 12px;
+ line-height: $font-12px;
}
.mx_EventListSummary_avatars .mx_BaseAvatar {
@@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
- line-height: 30px;
+ line-height: $font-30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_EventListSummary {
- font-size: 13px;
+ font-size: $font-13px;
.mx_EventTile_line {
- line-height: 20px;
+ line-height: $font-20px;
}
}
.mx_EventListSummary_line {
- line-height: 22px;
+ line-height: $font-22px;
}
.mx_EventListSummary_toggle {
@@ -66,6 +66,6 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 13px;
+ font-size: $font-13px;
}
}
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index b260d4b097..cf5bc7ab41 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -40,7 +40,7 @@ limitations under the License.
.mx_Field textarea {
font-weight: normal;
font-family: $font-family;
- font-size: 14px;
+ font-size: $font-14px;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
@@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
- font-size: 14px;
+ font-size: $font-14px;
position: absolute;
left: 0px;
top: 0px;
@@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
- font-size: 10px;
+ font-size: $font-10px;
top: -13px;
padding: 0 2px;
background-color: $field-focused-label-bg-color;
diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss
index 1483fe2091..7ec01f17e6 100644
--- a/res/css/views/elements/_FormButton.scss
+++ b/res/css/views/elements/_FormButton.scss
@@ -15,9 +15,9 @@ limitations under the License.
*/
.mx_FormButton {
- line-height: 16px;
+ line-height: $font-16px;
padding: 5px 15px;
- font-size: 12px;
+ font-size: $font-12px;
height: min-content;
&:not(:last-child) {
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 67b0d6d7df..0a4ed2a194 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -102,13 +102,13 @@ limitations under the License.
}
.mx_ImageView_name {
- font-size: 18px;
+ font-size: $font-18px;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
- font-size: 15px;
+ font-size: $font-15px;
opacity: 0.5;
}
@@ -118,13 +118,13 @@ limitations under the License.
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
- font-size: 14px;
+ font-size: $font-14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
- font-size: 11px;
+ font-size: $font-11px;
}
.mx_ImageView_link {
@@ -133,7 +133,7 @@ limitations under the License.
}
.mx_ImageView_button {
- font-size: 15px;
+ font-size: $font-15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;
diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index 17a76436e8..db98d95709 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -24,7 +24,7 @@ limitations under the License.
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
- font-size: 10px;
+ font-size: $font-10px;
font-weight: 600;
padding: 6px;
z-index: 5001;
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index 5066ee10f3..e01b1f8938 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -9,13 +9,16 @@
border-radius: 16px;
display: inline-block;
height: 20px;
- line-height: 20px;
+ line-height: $font-20px;
padding-left: 5px;
}
a.mx_Pill {
- word-break: break-all;
- display: inline;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ vertical-align: text-bottom;
+ max-width: calc(100% - 1ch);
}
/* More specific to override `.markdown-body a` text-decoration */
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index cc4eb409df..73ac9b3558 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -58,8 +58,8 @@ limitations under the License.
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
- line-height: 14px;
- font-size: 12px;
+ line-height: $font-14px;
+ font-size: $font-12px;
font-weight: 600;
color: $primary-fg-color;
max-width: 200px;
@@ -82,7 +82,7 @@ limitations under the License.
text-align: center;
border: none;
border-radius: 3px;
- font-size: 14px;
+ font-size: $font-14px;
line-height: 1.2;
padding: 6px 8px;
diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.scss
index 6ea36c800e..0c85dac818 100644
--- a/res/css/views/elements/_TooltipButton.scss
+++ b/res/css/views/elements/_TooltipButton.scss
@@ -28,7 +28,7 @@ limitations under the License.
transition: opacity 0.2s ease-in;
opacity: 0.6;
- line-height: 11px;
+ line-height: $font-11px;
text-align: center;
cursor: pointer;
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 5d9b3f2687..24561eeeb9 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -163,7 +163,7 @@ limitations under the License.
.mx_EmojiPicker_item {
display: inline-block;
- font-size: 20px;
+ font-size: $font-20px;
padding: 5px;
width: 100%;
height: 100%;
@@ -183,7 +183,7 @@ limitations under the License.
}
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
- font-size: 16px;
+ font-size: $font-16px;
font-weight: 600;
margin: 0;
}
@@ -197,7 +197,7 @@ limitations under the License.
}
.mx_EmojiPicker_preview_emoji {
- font-size: 32px;
+ font-size: $font-32px;
padding: 8px 16px;
}
@@ -212,7 +212,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
- font-size: 14px;
+ font-size: $font-14px;
&::before, &::after {
content: ":";
diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss
index 935ee1aba3..867f58d860 100644
--- a/res/css/views/messages/_DateSeparator.scss
+++ b/res/css/views/messages/_DateSeparator.scss
@@ -19,7 +19,7 @@ limitations under the License.
margin: 4px 0;
display: flex;
align-items: center;
- font-size: 14px;
+ font-size: $font-14px;
color: $roomtopic-color;
}
diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss
new file mode 100644
index 0000000000..3b05c53f34
--- /dev/null
+++ b/res/css/views/messages/_MVideoBody.scss
@@ -0,0 +1,22 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+span.mx_MVideoBody {
+ video.mx_MVideoBody {
+ max-width: 100%;
+ height: auto;
+ }
+}
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index c032051c36..9f3971ecf0 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -21,7 +21,7 @@ limitations under the License.
cursor: pointer;
display: flex;
height: 24px;
- line-height: 24px;
+ line-height: $font-24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
top: -18px;
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss
index e5c228aa68..f8d91cc083 100644
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@@ -16,5 +16,5 @@ limitations under the License.
.mx_MessageTimestamp {
color: $event-timestamp-color;
- font-size: 10px;
+ font-size: $font-10px;
}
diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index 57c02ed3e5..2f5695e1fb 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -21,7 +21,7 @@ limitations under the License.
.mx_ReactionsRow_showAll {
text-decoration: none;
- font-size: 10px;
+ font-size: $font-10px;
font-weight: 600;
margin-left: 6px;
vertical-align: top;
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index e54201d963..fe5b081042 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
height: 20px;
- line-height: 21px;
+ line-height: $font-21px;
margin-right: 6px;
padding: 0 6px;
border: 1px solid $reaction-row-button-border-color;
@@ -34,12 +34,17 @@ limitations under the License.
background-color: $reaction-row-button-selected-bg-color;
border-color: $reaction-row-button-selected-border-color;
}
-}
-.mx_ReactionsRowButton_content {
- max-width: 100px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-right: 4px;
+ // ignore mouse events for all children, treat it as one entire hoverable entity
+ * {
+ pointer-events: none;
+ }
+
+ .mx_ReactionsRowButton_content {
+ max-width: 100px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-right: 4px;
+ }
}
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index a15924e759..076932ee97 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_EventTile_content.mx_ViewSourceEvent {
display: flex;
opacity: 0.6;
- font-size: 12px;
+ font-size: $font-12px;
pre, code {
flex: 1;
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 98e1e97e39..637d25d7a1 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -45,7 +45,7 @@ limitations under the License.
.mx_cryptoEvent_title {
font-weight: 600;
- font-size: 15px;
+ font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
@@ -56,7 +56,7 @@ limitations under the License.
}
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index d4ea823131..a4d88f9882 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -20,7 +20,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
- font-size: 12px;
+ font-size: $font-12px;
.mx_UserInfo_cancel {
cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
}
h2 {
- font-size: 18px;
+ font-size: $font-18px;
font-weight: 600;
margin: 18px 0 0 0;
}
@@ -122,7 +122,7 @@ limitations under the License.
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
- font-size: 12px;
+ font-size: $font-12px;
margin: 4px 0;
}
@@ -134,24 +134,28 @@ limitations under the License.
text-align: center;
h2 {
- font-size: 18px;
- line-height: 25px;
+ display: flex;
+ font-size: $font-18px;
+ line-height: $font-25px;
flex: 1;
justify-content: center;
- align-items: center;
- // limit to 2 lines, show an ellipsis if it overflows
- // this looks webkit specific but is supported by Firefox 68+
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
+ span {
+ // limit to 2 lines, show an ellipsis if it overflows
+ // this looks webkit specific but is supported by Firefox 68+
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
- overflow: hidden;
- word-break: break-all;
- text-overflow: ellipsis;
+ overflow: hidden;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ }
.mx_E2EIcon {
- margin: 5px;
+ margin-top: 3px; // visual vertical centering to the top line of text
+ margin-right: 4px; // margin from displyname
+ min-width: 18px; // convince flexbox to not collapse it
}
}
@@ -197,7 +201,7 @@ limitations under the License.
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
- line-height: 16px;
+ line-height: $font-16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
@@ -206,7 +210,7 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
- font-size: 11px;
+ font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 459622b277..a8466a1626 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_VerificationPanel_verified_section,
+.mx_VerificationPanel_reciprocate_section {
+ // center the big shield icon
+ .mx_E2EIcon {
+ // Override general user info margin
+ margin: 20px auto !important;
+ }
+}
+
+
.mx_UserInfo {
.mx_EncryptionPanel_cancel {
mask: url('$(res)/img/feather-customised/cancel.svg');
@@ -30,11 +40,6 @@ limitations under the License.
right: 14px;
}
- .mx_VerificationPanel_verified_section .mx_E2EIcon {
- // Override general user info margin
- margin: 0 auto !important;
- }
-
.mx_VerificationPanel_qrCode {
padding: 4px 4px 0 4px;
background: white;
@@ -51,6 +56,16 @@ limitations under the License.
max-width: 240px;
}
}
+
+ .mx_VerificationPanel_reciprocate_section {
+ .mx_FormButton {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ display: block;
+ margin: 10px 0;
+ }
+ }
}
// Special case styling for EncryptionPanel in a Modal dialog
@@ -60,6 +75,7 @@ limitations under the License.
margin-top: 10px;
margin-bottom: 10px;
align-items: stretch;
+ justify-content: center;
> .mx_VerificationPanel_QRPhase_betweenText {
width: 50px;
@@ -75,10 +91,12 @@ limitations under the License.
border-radius: 10px;
flex: 1;
display: flex;
- padding: 10px;
+ padding: 20px;
align-items: center;
flex-direction: column;
position: relative;
+ max-width: 310px;
+ justify-content: space-between;
canvas, .mx_VerificationPanel_QRPhase_noQR {
width: 220px !important;
@@ -91,31 +109,36 @@ limitations under the License.
}
> p {
+ margin-top: 0;
font-weight: 700;
}
.mx_VerificationPanel_QRPhase_helpText {
- font-size: 14px;
- margin-top: 71px;
+ font-size: $font-14px;
+ margin: 30px 0;
text-align: center;
}
-
- .mx_AccessibleButton {
- position: absolute;
- bottom: 30px;
- }
}
}
// EncryptionPanel when verification is done
.mx_VerificationPanel_verified_section {
- // center the big shield icon
- .mx_E2EIcon {
- margin: 0 auto;
- }
// right align the "Got it" button
.mx_AccessibleButton {
float: right;
}
}
+
+ .mx_VerificationPanel_reciprocate_section {
+ .mx_AccessibleButton {
+ margin-left: 10px;
+ padding: 7px 40px;
+ }
+
+ .mx_VerificationPanel_reciprocateButtons {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+ }
}
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index a3fe573ad0..1b1bab67bc 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 0;
margin: 5px auto 5px auto;
color: $accent-color;
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_AddWidget_button_full_width {
@@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
- font-size: 15px;
+ font-size: $font-15px;
}
.mx_AppTile {
@@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTileMenuBar {
margin: 0;
- font-size: 12px;
+ font-size: $font-12px;
background-color: $widget-menu-bar-bg-color;
display: flex;
flex-direction: row;
@@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
flex-direction: column;
justify-content: center;
align-items: center;
- font-size: 16px;
+ font-size: $font-16px;
}
.mx_AppPermissionWarning_row {
@@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
}
.mx_AppPermissionWarning_smallText {
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_AppPermissionWarning_bolder {
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index ce519b1ea7..e9013eb7b7 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -44,27 +44,29 @@ limitations under the License.
outline: none;
overflow-x: hidden;
- span.mx_UserPill, span.mx_RoomPill {
- padding-left: 21px;
- position: relative;
+ &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
+ span.mx_UserPill, span.mx_RoomPill {
+ padding-left: 21px;
+ position: relative;
- // avatar psuedo element
- &::before {
- position: absolute;
- left: 2px;
- top: 2px;
- content: var(--avatar-letter);
- width: 16px;
- height: 16px;
- background: var(--avatar-background), $avatar-bg-color;
- color: $avatar-initial-color;
- background-repeat: no-repeat;
- background-size: 16px;
- border-radius: 8px;
- text-align: center;
- font-weight: normal;
- line-height: 16px;
- font-size: 10.4px;
+ // avatar psuedo element
+ &::before {
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ content: var(--avatar-letter);
+ width: 16px;
+ height: 16px;
+ background: var(--avatar-background), $avatar-bg-color;
+ color: $avatar-initial-color;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ border-radius: 8px;
+ text-align: center;
+ font-weight: normal;
+ line-height: $font-16px;
+ font-size: $font-10-4px;
+ }
}
}
}
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index a2867de3a7..966d2c4e70 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
.mx_GroupRoomTile_name {
flex: 1 1 0;
overflow: hidden;
- font-size: 14px;
+ font-size: $font-14px;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -116,7 +116,7 @@ limitations under the License.
}
.mx_EntityTile_subtext {
- font-size: 11px;
+ font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@@ -125,7 +125,7 @@ limitations under the License.
.mx_EntityTile_power {
padding-inline-start: 6px;
- font-size: 10px;
+ font-size: $font-10px;
color: $notice-secondary-color;
max-width: 6em;
overflow: hidden;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 1cf9fb6edb..e015f30e48 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -19,7 +19,7 @@ limitations under the License.
max-width: 100%;
clear: both;
padding-top: 18px;
- font-size: 14px;
+ font-size: $font-14px;
position: relative;
}
@@ -64,7 +64,7 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
- font-size: 14px;
+ font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
@@ -72,7 +72,7 @@ limitations under the License.
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
- line-height: 17px;
+ line-height: $font-17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
@@ -111,13 +111,14 @@ limitations under the License.
}
.mx_EventTile_line, .mx_EventTile_reply {
+ clear: both;
position: relative;
padding-left: 65px; /* left gutter */
padding-top: 4px;
padding-bottom: 2px;
border-radius: 4px;
min-height: 24px;
- line-height: 22px;
+ line-height: $font-22px;
}
.mx_RoomView_timeline_rr_enabled,
@@ -314,7 +315,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_readAvatarRemainder {
color: $event-timestamp-color;
- font-size: 11px;
+ font-size: $font-11px;
position: absolute;
}
@@ -343,7 +344,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
- font-size: 11px;
+ font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
@@ -395,7 +396,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile_keyRequestInfo {
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_EventTile_keyRequestInfo_text {
@@ -473,7 +474,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_content .mx_EventTile_edited {
user-select: none;
- font-size: 12px;
+ font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
@@ -491,7 +492,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
white-space: normal !important;
line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
- font-size: 14px;
+ font-size: $font-14px;
pre, code {
font-family: $monospace-font-family !important;
@@ -591,9 +592,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
- font-size: 13px;
+ font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
- line-height: 20px;
+ line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
@@ -601,7 +602,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile .mx_SenderProfile {
- font-size: 13px;
+ font-size: $font-13px;
}
.mx_EventTile.mx_EventTile_emote {
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 7f458092fb..63cf574596 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -34,8 +34,8 @@ limitations under the License.
top: -12px;
border-radius: 16px;
font-weight: bold;
- font-size: 12px;
- line-height: 14px;
+ font-size: $font-12px;
+ line-height: $font-14px;
text-align: center;
// to be able to get it centered
// with text-align in parent
diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index 15b4832dc5..71b05a93fc 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -59,7 +59,7 @@ limitations under the License.
.mx_MemberDeviceInfo_deviceId {
word-break: break-word;
- font-size: 13px;
+ font-size: $font-13px;
}
.mx_MemberDeviceInfo_deviceInfo {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index e3f746e9d3..fb082843f1 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -48,7 +48,7 @@ limitations under the License.
}
.mx_MemberInfo h2 {
- font-size: 18px;
+ font-size: $font-18px;
font-weight: 600;
margin: 16px 0 16px 15px;
}
@@ -94,12 +94,12 @@ limitations under the License.
text-transform: uppercase;
color: $input-darker-fg-color;
font-weight: bold;
- font-size: 12px;
+ font-size: $font-12px;
margin: 4px 0;
}
.mx_MemberInfo_profileField {
- font-size: 15px;
+ font-size: $font-15px;
position: relative;
}
@@ -109,10 +109,10 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
- font-size: 15px;
+ font-size: $font-15px;
color: $primary-fg-color;
margin-left: 8px;
- line-height: 23px;
+ line-height: $font-23px;
}
.mx_MemberInfo_createRoom {
@@ -128,7 +128,7 @@ limitations under the License.
}
.mx_MemberInfo label {
- font-size: 13px;
+ font-size: $font-13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
@@ -144,7 +144,7 @@ limitations under the License.
}
.mx_MemberInfo_statusMessage {
- font-size: 11px;
+ font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 6e4465583c..99dc2338d4 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -30,7 +30,7 @@ limitations under the License.
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
- font-size: 13px;
+ font-size: $font-13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index a05b4c0c0e..7b223be3a4 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -105,7 +105,7 @@ limitations under the License.
min-height: 60px;
justify-content: flex-start;
align-items: flex-start;
- font-size: 14px;
+ font-size: $font-14px;
margin-right: 6px;
}
@@ -161,7 +161,7 @@ limitations under the License.
box-shadow: none;
color: $primary-fg-color;
background-color: $primary-bg-color;
- font-size: 14px;
+ font-size: $font-14px;
max-height: 120px;
overflow: auto;
/* needed for FF */
@@ -242,7 +242,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
- font-size: 10px;
+ font-size: $font-10px;
color: $greyed-fg-color;
}
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index 1b5a21bed0..27ee7b9795 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -97,13 +97,13 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
- font-size: 13px;
+ font-size: $font-13px;
font-weight: 600;
min-width: 54px;
text-align: center;
.mx_MessageComposerFormatBar_tooltipShortcut {
- font-size: 9px;
+ font-size: $font-9px;
opacity: 0.7;
}
}
diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss
index 26ed1aa6a3..5be83c77d7 100644
--- a/res/css/views/rooms/_PresenceLabel.scss
+++ b/res/css/views/rooms/_PresenceLabel.scss
@@ -15,6 +15,6 @@ limitations under the License.
*/
.mx_PresenceLabel {
- font-size: 11px;
+ font-size: $font-11px;
opacity: 0.5;
}
diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss
index 1076a0563a..2e8145c2c9 100644
--- a/res/css/views/rooms/_RoomDropTarget.scss
+++ b/res/css/views/rooms/_RoomDropTarget.scss
@@ -28,7 +28,7 @@ limitations under the License.
}
.mx_RoomDropTarget {
- font-size: 13px;
+ font-size: $font-13px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed $accent-color;
@@ -41,7 +41,7 @@ limitations under the License.
.mx_RoomDropTarget_label {
position: relative;
margin-top: 3px;
- line-height: 21px;
+ line-height: $font-21px;
z-index: 1;
text-align: center;
}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 47b8131ef0..969106c9ea 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -77,9 +77,9 @@ limitations under the License.
}
.mx_RoomHeader_simpleHeader {
- line-height: 52px;
+ line-height: $font-52px;
color: $roomheader-color;
- font-size: 18px;
+ font-size: $font-18px;
font-weight: 600;
overflow: hidden;
margin-left: 63px;
@@ -102,7 +102,7 @@ limitations under the License.
overflow: hidden;
color: $roomheader-color;
font-weight: 600;
- font-size: 18px;
+ font-size: $font-18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
display: flex;
@@ -161,7 +161,7 @@ limitations under the License.
flex: 1;
color: $roomtopic-color;
font-weight: 400;
- font-size: 13px;
+ font-size: $font-13px;
margin: 0 7px;
margin-top: 4px; // to align baseline of topic with room name
overflow: hidden;
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 5ed22f997d..50a9e7ee1f 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -47,13 +47,13 @@ limitations under the License.
}
.mx_RoomList_emptySubListTip {
- font-size: 13px;
+ font-size: $font-13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
- line-height: 16px;
+ line-height: $font-16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 981cf06c69..8708f13ada 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -23,7 +23,7 @@ limitations under the License.
-webkit-align-items: center;
h3 {
- font-size: 18px;
+ font-size: $font-18px;
font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle {
@@ -48,8 +48,8 @@ limitations under the License.
}
.mx_RoomPreviewBar_footer {
- font-size: 12px;
- line-height: 20px;
+ font-size: $font-12px;
+ line-height: $font-20px;
.mx_Spinner {
vertical-align: middle;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index aa8a77de78..de018bf178 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -69,7 +69,7 @@ limitations under the License.
.mx_RoomTile_subtext {
display: inline-block;
- font-size: 11px;
+ font-size: $font-11px;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
@@ -117,7 +117,7 @@ limitations under the License.
}
.mx_RoomTile_name {
- font-size: 14px;
+ font-size: $font-14px;
padding: 0 4px;
color: $roomtile-name-color;
white-space: nowrap;
@@ -131,7 +131,7 @@ limitations under the License.
padding: 0 0.4em;
color: $roomtile-badge-fg-color;
font-weight: 600;
- font-size: 12px;
+ font-size: $font-12px;
}
.collapsed {
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index b6748e5ad2..fecc8d78d8 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -22,7 +22,7 @@ limitations under the License.
.mx_SearchBar_input {
// border: 1px solid $input-border-color;
- // font-size: 15px;
+ // font-size: $font-15px;
flex: 1 1 0;
margin-left: 22px;
}
@@ -45,7 +45,7 @@ limitations under the License.
border: 0;
margin: 0 0 0 22px;
padding: 5px;
- font-size: 15px;
+ font-size: $font-15px;
cursor: pointer;
color: $primary-fg-color;
border-bottom: 2px solid $accent-color;
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index d20f7107b3..0b646666e7 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
- font-size: 14px;
+ font-size: $font-14px;
justify-content: center;
margin-right: 6px;
// don't grow wider than available space
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 579ea7e73e..8b135152d6 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -49,7 +49,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
- line-height: 24px;
+ line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@@ -57,7 +57,7 @@ limitations under the License.
.mx_WhoIsTypingTile_label {
flex: 1;
- font-size: 14px;
+ font-size: $font-14px;
font-weight: 600;
color: $eventtile-meta-color;
}
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 01a1d94956..1fbfb35927 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -19,7 +19,7 @@ limitations under the License.
}
.mx_SettingsTab_heading {
- font-size: 20px;
+ font-size: $font-20px;
font-weight: 600;
color: $primary-fg-color;
}
@@ -29,7 +29,7 @@ limitations under the License.
}
.mx_SettingsTab_subheading {
- font-size: 16px;
+ font-size: $font-16px;
display: block;
font-family: $font-family;
font-weight: 600;
@@ -40,7 +40,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
- font-size: 14px;
+ font-size: $font-14px;
display: block;
margin: 10px 100px 10px 0; // Align with the rest of the view
}
@@ -61,7 +61,7 @@ limitations under the License.
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
- font-size: 14px;
+ font-size: $font-14px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;
diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss
index e00dcf31d1..1d0e3ea8c5 100644
--- a/res/css/views/terms/_InlineTermsAgreement.scss
+++ b/res/css/views/terms/_InlineTermsAgreement.scss
@@ -16,7 +16,7 @@ limitations under the License.
.mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
- font-size: 14px;
+ font-size: $font-14px;
a {
color: $accent-color;
diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 5038d40b73..af003112f7 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -48,16 +48,34 @@ limitations under the License.
}
.mx_VerificationShowSas_emojiSas_emoji {
- font-size: 32px;
+ font-size: $font-32px;
}
.mx_VerificationShowSas_emojiSas_label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- font-size: 12px;
+ font-size: $font-12px;
}
.mx_VerificationShowSas_emojiSas_break {
flex-basis: 100%;
}
+
+.mx_VerificationShowSas {
+ .mx_Dialog_buttons {
+ // this is more specific than the DialogButtons css so gets preference
+ button.mx_VerificationShowSas_matchButton {
+ color: $accent-color;
+ background-color: $accent-bg-color;
+ border: none;
+ }
+
+ // this is more specific than the DialogButtons css so gets preference
+ button.mx_VerificationShowSas_noMatchButton {
+ color: $notice-primary-color;
+ background-color: $notice-primary-bg-color;
+ border: none;
+ }
+ }
+}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index b01fbf8c66..4650f30c1d 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -21,5 +21,5 @@ limitations under the License.
text-align: center;
padding: 6px;
font-weight: bold;
- font-size: 13px;
+ font-size: $font-13px;
}
diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss
index 64eac25d01..ed33de470d 100644
--- a/res/css/views/voip/_IncomingCallbox.scss
+++ b/res/css/views/voip/_IncomingCallbox.scss
@@ -54,7 +54,7 @@ limitations under the License.
vertical-align: middle;
width: 80px;
height: 36px;
- line-height: 36px;
+ line-height: $font-36px;
border-radius: 36px;
color: $accent-fg-color;
margin: auto;
diff --git a/res/img/feather-customised/explore.svg b/res/img/feather-customised/explore.svg
new file mode 100644
index 0000000000..45be889bb7
--- /dev/null
+++ b/res/img/feather-customised/explore.svg
@@ -0,0 +1,8 @@
+
diff --git a/res/img/feather-customised/group.svg b/res/img/feather-customised/group.svg
new file mode 100644
index 0000000000..7051860e62
--- /dev/null
+++ b/res/img/feather-customised/group.svg
@@ -0,0 +1,7 @@
+
diff --git a/res/img/feather-customised/message-circle.svg b/res/img/feather-customised/message-circle.svg
new file mode 100644
index 0000000000..acc6d2fb0f
--- /dev/null
+++ b/res/img/feather-customised/message-circle.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss
index aff647ce26..03ceef45c6 100644
--- a/res/themes/dark-custom/css/dark-custom.scss
+++ b/res/themes/dark-custom/css/dark-custom.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bfa2272283..5d6ba033c8 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
border: 0px;
border-radius: 4px;
font-family: $font-family;
- font-size: 14px;
+ font-size: $font-14px;
color: $button-fg-color;
background-color: $button-bg-color;
width: auto;
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index e7ae7c8cf8..d81db4595f 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss
index 278ca5f0b1..4f80647eba 100644
--- a/res/themes/light-custom/css/light-custom.scss
+++ b/res/themes/light-custom/css/light-custom.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 9bdd712e07..f5f3013354 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
border: 0px;
border-radius: 4px;
font-family: $font-family;
- font-size: 14px;
+ font-size: $font-14px;
color: $button-fg-color;
background-color: $button-bg-color;
width: auto;
@@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
- font-size: 15px;
+ font-size: $font-15px;
padding: 0px 1.5em 0px 1.5em;
}
diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss
index 6acb2d9d94..4f48557648 100644
--- a/res/themes/light/css/light.scss
+++ b/res/themes/light/css/light.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "_paths.scss";
@import "_fonts.scss";
@import "_light.scss";
diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/end-to-end-tests.sh
index 2f907dffa2..1233677db4 100755
--- a/scripts/ci/end-to-end-tests.sh
+++ b/scripts/ci/end-to-end-tests.sh
@@ -13,7 +13,6 @@ handle_error() {
trap 'handle_error' ERR
-
echo "--- Building Riot"
scripts/ci/layered-riot-web.sh
cd ../riot-web
diff --git a/scripts/gen-i18n.js b/scripts/gen-i18n.js
index a4d53aea2f..a1823cdf50 100755
--- a/scripts/gen-i18n.js
+++ b/scripts/gen-i18n.js
@@ -237,7 +237,7 @@ const walkOpts = {
const fullPath = path.join(root, fileStats.name);
let trs;
- if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.tsx')) {
+ if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.ts') || fileStats.name.endsWith('.tsx')) {
trs = getTranslationsJs(fullPath);
} else if (fileStats.name.endsWith('.html')) {
trs = getTranslationsOther(fullPath);
diff --git a/src/Analytics.js b/src/Analytics.js
index c96cfdefee..e55612c4f1 100644
--- a/src/Analytics.js
+++ b/src/Analytics.js
@@ -123,8 +123,8 @@ const LAST_VISIT_TS_KEY = "mx_Riot_Analytics_lvts";
function getUid() {
try {
- let data = localStorage.getItem(UID_KEY);
- if (!data) {
+ let data = localStorage && localStorage.getItem(UID_KEY);
+ if (!data && localStorage) {
localStorage.setItem(UID_KEY, data = [...Array(16)].map(() => Math.random().toString(16)[2]).join(''));
}
return data;
@@ -145,14 +145,16 @@ class Analytics {
this.firstPage = true;
this._heartbeatIntervalID = null;
- this.creationTs = localStorage.getItem(CREATION_TS_KEY);
- if (!this.creationTs) {
+ this.creationTs = localStorage && localStorage.getItem(CREATION_TS_KEY);
+ if (!this.creationTs && localStorage) {
localStorage.setItem(CREATION_TS_KEY, this.creationTs = new Date().getTime());
}
- this.lastVisitTs = localStorage.getItem(LAST_VISIT_TS_KEY);
- this.visitCount = localStorage.getItem(VISIT_COUNT_KEY) || 0;
- localStorage.setItem(VISIT_COUNT_KEY, parseInt(this.visitCount, 10) + 1);
+ this.lastVisitTs = localStorage && localStorage.getItem(LAST_VISIT_TS_KEY);
+ this.visitCount = localStorage && localStorage.getItem(VISIT_COUNT_KEY) || 0;
+ if (localStorage) {
+ localStorage.setItem(VISIT_COUNT_KEY, parseInt(this.visitCount, 10) + 1);
+ }
}
get disabled() {
diff --git a/src/BasePlatform.js b/src/BasePlatform.js
index 5d809eb28f..7214031586 100644
--- a/src/BasePlatform.js
+++ b/src/BasePlatform.js
@@ -188,4 +188,8 @@ export default class BasePlatform {
const callbackUrl = this.getSSOCallbackUrl(mxClient.getHomeserverUrl(), mxClient.getIdentityServerUrl());
window.location.href = mxClient.getSsoLoginUrl(callbackUrl.toString(), loginType); // redirect to SSO
}
+
+ onKeyDown(ev: KeyboardEvent): boolean {
+ return false; // no shortcuts implemented
+ }
}
diff --git a/src/CallHandler.js b/src/CallHandler.js
index 8284e788b4..c63bfe309a 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -60,12 +60,12 @@ import * as sdk from './index';
import { _t } from './languageHandler';
import Matrix from 'matrix-js-sdk';
import dis from './dispatcher';
-import SdkConfig from './SdkConfig';
import { showUnknownDeviceDialogForCalls } from './cryptodevices';
import WidgetUtils from './utils/WidgetUtils';
import WidgetEchoStore from './stores/WidgetEchoStore';
import SettingsStore, { SettingLevel } from './settings/SettingsStore';
import {generateHumanReadableId} from "./utils/NamingUtils";
+import {Jitsi} from "./widgets/Jitsi";
global.mxCalls = {
//room_id: MatrixCall
@@ -431,7 +431,7 @@ async function _startCallApp(roomId, type) {
}
const confId = `JitsiConference${generateHumanReadableId()}`;
- const jitsiDomain = SdkConfig.get()['jitsi']['preferredDomain'];
+ const jitsiDomain = Jitsi.getInstance().preferredDomain;
let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl();
diff --git a/src/CrossSigningManager.js b/src/CrossSigningManager.js
index 1bcf1ba706..c37d0f8bf5 100644
--- a/src/CrossSigningManager.js
+++ b/src/CrossSigningManager.js
@@ -51,7 +51,7 @@ async function confirmToDismiss(name) {
} else if (name === "m.cross_signing.self_signing") {
description = _t("If you cancel now, you won't complete verifying your other session.");
} else {
- description = _t("If you cancel now, you won't complete your secret storage operation.");
+ description = _t("If you cancel now, you won't complete your operation.");
}
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -185,7 +185,7 @@ export async function promptForBackupPassphrase() {
const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
const { finished } = Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {
- showSummary: false, keyCallback: k => key = k,
+ showSummary: false, keyCallback: k => key = k,
}, null, /* priority = */ false, /* static = */ true);
const success = await finished;
diff --git a/src/DeviceListener.js b/src/DeviceListener.js
index f8555c7602..3201e4af45 100644
--- a/src/DeviceListener.js
+++ b/src/DeviceListener.js
@@ -50,6 +50,7 @@ export default class DeviceListener {
MatrixClientPeg.get().on('crypto.devicesUpdated', this._onDevicesUpdated);
MatrixClientPeg.get().on('deviceVerificationChanged', this._onDeviceVerificationChanged);
MatrixClientPeg.get().on('userTrustStatusChanged', this._onUserTrustStatusChanged);
+ MatrixClientPeg.get().on('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
MatrixClientPeg.get().on('accountData', this._onAccountData);
this._recheck();
}
@@ -59,6 +60,7 @@ export default class DeviceListener {
MatrixClientPeg.get().removeListener('crypto.devicesUpdated', this._onDevicesUpdated);
MatrixClientPeg.get().removeListener('deviceVerificationChanged', this._onDeviceVerificationChanged);
MatrixClientPeg.get().removeListener('userTrustStatusChanged', this._onUserTrustStatusChanged);
+ MatrixClientPeg.get().removeListener('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
MatrixClientPeg.get().removeListener('accountData', this._onAccountData);
}
this._dismissed.clear();
@@ -89,9 +91,20 @@ export default class DeviceListener {
this._recheck();
}
+ _onCrossSingingKeysChanged = () => {
+ this._recheck();
+ }
+
_onAccountData = (ev) => {
- // User may have migrated SSSS to symmetric, in which case we can dismiss that toast
- if (ev.getType().startsWith('m.secret_storage.key.')) {
+ // User may have:
+ // * migrated SSSS to symmetric
+ // * uploaded keys to secret storage
+ // * completed secret storage creation
+ // which result in account data changes affecting checks below.
+ if (
+ ev.getType().startsWith('m.secret_storage.') ||
+ ev.getType().startsWith('m.cross_signing.')
+ ) {
this._recheck();
}
}
@@ -111,7 +124,7 @@ export default class DeviceListener {
const cli = MatrixClientPeg.get();
if (
- !SettingsStore.isFeatureEnabled("feature_cross_signing") ||
+ !SettingsStore.getValue("feature_cross_signing") ||
!await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")
) return;
@@ -165,6 +178,9 @@ export default class DeviceListener {
props: {kind: 'upgrade_ssss'},
component: sdk.getComponent("toasts.SetupEncryptionToast"),
});
+ } else {
+ // cross-signing is ready, and we don't need to upgrade encryption
+ ToastStore.sharedInstance().dismissToast(THIS_DEVICE_TOAST_KEY);
}
}
diff --git a/src/KeyRequestHandler.js b/src/KeyRequestHandler.js
index 30f3b7d50e..ceaff0c54d 100644
--- a/src/KeyRequestHandler.js
+++ b/src/KeyRequestHandler.js
@@ -35,7 +35,7 @@ export default class KeyRequestHandler {
handleKeyRequest(keyRequest) {
// Ignore own device key requests if cross-signing lab enabled
- if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ if (SettingsStore.getValue("feature_cross_signing")) {
return;
}
@@ -70,7 +70,7 @@ export default class KeyRequestHandler {
handleKeyRequestCancellation(cancellation) {
// Ignore own device key requests if cross-signing lab enabled
- if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ if (SettingsStore.getValue("feature_cross_signing")) {
return;
}
diff --git a/src/Keyboard.ts b/src/Keyboard.ts
index 23e2bbf0d6..7040898872 100644
--- a/src/Keyboard.ts
+++ b/src/Keyboard.ts
@@ -43,6 +43,8 @@ export const Key = {
BACKTICK: "`",
SPACE: " ",
SLASH: "/",
+ SQUARE_BRACKET_LEFT: "[",
+ SQUARE_BRACKET_RIGHT: "]",
A: "a",
B: "b",
C: "c",
diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index b9fbf4f1bc..1baa6c8e0c 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -40,6 +40,7 @@ import ToastStore from "./stores/ToastStore";
import {IntegrationManagers} from "./integrations/IntegrationManagers";
import {Mjolnir} from "./mjolnir/Mjolnir";
import DeviceListener from "./DeviceListener";
+import {Jitsi} from "./widgets/Jitsi";
/**
* Called at startup, to attempt to build a logged-in Matrix session. It tries
@@ -578,9 +579,6 @@ async function startMatrixClient(startSyncing=true) {
UserActivity.sharedInstance().start();
TypingStore.sharedInstance().reset(); // just in case
ToastStore.sharedInstance().reset();
- if (!SettingsStore.getValue("lowBandwidth")) {
- Presence.start();
- }
DMRoomMap.makeShared().start();
IntegrationManagers.sharedInstance().startWatching();
ActiveWidgetStore.start();
@@ -603,6 +601,14 @@ async function startMatrixClient(startSyncing=true) {
// This needs to be started after crypto is set up
DeviceListener.sharedInstance().start();
+ // Similarly, don't start sending presence updates until we've started
+ // the client
+ if (!SettingsStore.getValue("lowBandwidth")) {
+ Presence.start();
+ }
+
+ // Now that we have a MatrixClientPeg, update the Jitsi info
+ await Jitsi.getInstance().update();
// dispatch that we finished starting up to wire up any other bits
// of the matrix client that cannot be set prior to starting up.
@@ -637,6 +643,10 @@ async function _clearStorage() {
window.localStorage.clear();
}
+ if (window.sessionStorage) {
+ window.sessionStorage.clear();
+ }
+
// create a temporary client to clear out the persistent stores.
const cli = createMatrixClient({
// we'll never make any requests, so can pass a bogus HS URL
diff --git a/src/Notifier.js b/src/Notifier.js
index 36a6f13bb6..ec92840998 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -37,6 +37,18 @@ import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
const MAX_PENDING_ENCRYPTED = 20;
+/*
+Override both the content body and the TextForEvent handler for specific msgtypes, in notifications.
+This is useful when the content body contains fallback text that would explain that the client can't handle a particular
+type of tile.
+*/
+const typehandlers = {
+ "m.key.verification.request": (event) => {
+ const name = (event.sender || {}).name;
+ return _t("%(name)s is requesting verification", { name });
+ },
+};
+
const Notifier = {
notifsByRoom: {},
@@ -46,6 +58,9 @@ const Notifier = {
pendingEncryptedEventIds: [],
notificationMessageForEvent: function(ev) {
+ if (typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+ return typehandlers[ev.getContent().msgtype](ev);
+ }
return TextForEvent.textForEvent(ev);
},
@@ -69,7 +84,9 @@ const Notifier = {
title = room.name;
// notificationMessageForEvent includes sender,
// but we already have the sender here
- if (ev.getContent().body) msg = ev.getContent().body;
+ if (ev.getContent().body && !typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+ msg = ev.getContent().body;
+ }
} else if (ev.getType() === 'm.room.member') {
// context is all in the message here, we don't need
// to display sender info
@@ -78,7 +95,9 @@ const Notifier = {
title = ev.sender.name + " (" + room.name + ")";
// notificationMessageForEvent includes sender,
// but we've just out sender in the title
- if (ev.getContent().body) msg = ev.getContent().body;
+ if (ev.getContent().body && !typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+ msg = ev.getContent().body;
+ }
}
if (!this.isBodyEnabled()) {
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index 2211e513c3..ca8ca103e1 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -172,6 +172,7 @@ Request:
Response:
[
{
+ // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
type: "im.vector.modular.widgets",
state_key: "wid1",
content: {
@@ -190,6 +191,7 @@ Example:
room_id: "!foo:bar",
response: [
{
+ // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
type: "im.vector.modular.widgets",
state_key: "wid1",
content: {
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index d60434cf97..71815dde8c 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -350,7 +350,7 @@ export const Commands = [
return success(cli.setRoomTopic(roomId, args));
}
const room = cli.getRoom(roomId);
- if (!room) return reject('Bad room ID: ' + roomId);
+ if (!room) return reject(_t("Failed to set topic"));
const topicEvents = room.currentState.getStateEvents('m.room.topic', '');
const topic = topicEvents && topicEvents.getContent().topic;
@@ -721,9 +721,10 @@ export const Commands = [
if (!isNaN(powerLevel)) {
const cli = MatrixClientPeg.get();
const room = cli.getRoom(roomId);
- if (!room) return reject('Bad room ID: ' + roomId);
+ if (!room) return reject(_t("Command failed"));
const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+ if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
}
}
@@ -742,9 +743,10 @@ export const Commands = [
if (matches) {
const cli = MatrixClientPeg.get();
const room = cli.getRoom(roomId);
- if (!room) return reject('Bad room ID: ' + roomId);
+ if (!room) return reject(_t("Command failed"));
const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+ if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
}
}
@@ -914,7 +916,7 @@ export const Commands = [
// Command definitions for autocompletion ONLY:
// /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
new Command({
- command: 'me',
+ command: "me",
args: '
{_t( "We'll store an encrypted copy of your keys on our server. " + - "Protect your backup with a passphrase to keep it secure.", + "Secure your backup with a recovery passphrase.", )}
{_t("For maximum security, this should be different from your account password.")}
@@ -307,7 +297,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent { onChange={this._onPassPhraseChange} value={this.state.passPhrase} className="mx_CreateKeyBackupDialog_passPhraseInput" - placeholder={_t("Enter a passphrase...")} + placeholder={_t("Enter a recovery passphrase...")} autoFocus={true} />