diff --git a/package.json b/package.json
index a015728256..da0d33a59e 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
"linkifyjs": "^2.1.9",
"lodash": "^4.17.19",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
- "matrix-widget-api": "^0.1.0-beta.8",
+ "matrix-widget-api": "^0.1.0-beta.9",
"minimist": "^1.2.5",
"pako": "^1.0.11",
"parse5": "^5.1.1",
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 0317e89d20..7ab88d6f02 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -60,6 +60,10 @@ pre, code {
color: $accent-color;
}
+.text-muted {
+ color: $muted-fg-color;
+}
+
b {
// On Firefox, the default weight for `` is `bolder` which results in no bold
// effect since we only have specific weights of our fonts available.
@@ -364,6 +368,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
+
+ .mx_Dialog_buttons_additive {
+ // The consumer is responsible for positioning their elements.
+ float: left;
+ }
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 002f95119d..445ed70ff4 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -91,6 +91,7 @@
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
+@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
@import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
@@ -227,6 +228,7 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
+@import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss
index 45aa34d3b5..9f72213d1a 100644
--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@@ -26,9 +26,10 @@ limitations under the License.
.mx_HomePage_default {
text-align: center;
+ display: flex;
.mx_HomePage_default_wrapper {
- padding: 25vh 0 12px;
+ margin: auto;
}
img {
@@ -55,7 +56,7 @@ limitations under the License.
}
.mx_HomePage_default_buttons {
- margin: 80px auto 0;
+ margin: 60px auto 0;
width: fit-content;
.mx_AccessibleButton {
@@ -63,7 +64,7 @@ limitations under the License.
width: 160px;
height: 132px;
- margin: 0 20px;
+ margin: 20px;
position: relative;
display: inline-block;
border-radius: 8px;
diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
index 05cddf2c48..0a5ac9b2bc 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@@ -14,6 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_InteractiveAuthEntryComponents_emailWrapper {
+ padding-right: 60px;
+ position: relative;
+ margin-top: 32px;
+ margin-bottom: 32px;
+
+ &::before, &::after {
+ position: absolute;
+ width: 116px;
+ height: 116px;
+ content: "";
+ right: -10px;
+ }
+
+ &::before {
+ background-color: rgba(244, 246, 250, 0.91);
+ border-radius: 50%;
+ top: -20px;
+ }
+
+ &::after {
+ background-image: url('$(res)/img/element-icons/email-prompt.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ top: -25px;
+ }
+}
+
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
text-align: center;
}
diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
new file mode 100644
index 0000000000..176919b84c
--- /dev/null
+++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
@@ -0,0 +1,75 @@
+/*
+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_WidgetCapabilitiesPromptDialog {
+ .text-muted {
+ font-size: $font-12px;
+ }
+
+ .mx_Dialog_content {
+ margin-bottom: 16px;
+ }
+
+ .mx_WidgetCapabilitiesPromptDialog_cap {
+ margin-top: 20px;
+ font-size: $font-15px;
+ line-height: $font-15px;
+
+ .mx_WidgetCapabilitiesPromptDialog_byline {
+ color: $muted-fg-color;
+ margin-left: 26px;
+ font-size: $font-12px;
+ line-height: $font-12px;
+ }
+ }
+
+ .mx_Dialog_buttons {
+ margin-top: 40px; // double normal
+ }
+
+ .mx_SettingsFlag {
+ line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
+ color: $muted-fg-color;
+ font-size: $font-12px;
+
+ .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+
+ // downsize the switch + ball
+ width: $font-32px;
+ height: $font-15px;
+
+
+ &.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+ left: calc(100% - $font-15px);
+ }
+
+ .mx_ToggleSwitch_ball {
+ width: $font-15px;
+ height: $font-15px;
+ border-radius: $font-15px;
+ }
+ }
+
+ .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+}
diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss
index 3b05c53f34..ac3491bc8f 100644
--- a/res/css/views/messages/_MVideoBody.scss
+++ b/res/css/views/messages/_MVideoBody.scss
@@ -18,5 +18,6 @@ span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
height: auto;
+ border-radius: 4px;
}
}
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 958d718b11..ece547d02b 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -186,6 +186,7 @@ $irc-line-height: $font-18px;
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
+ text-align: end;
}
}
}
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
index af72a0dd69..4322ba341c 100644
--- a/res/css/views/rooms/_NewRoomIntro.scss
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_NewRoomIntro {
- margin: 80px 0 48px 64px;
+ margin: 40px 0 48px 64px;
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
&::before, &::after {
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 78e7307bc0..6ea99585d2 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -33,7 +33,6 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
- margin-bottom: 8px;
}
.mx_AccessibleButton {
@@ -41,6 +40,7 @@ limitations under the License.
position: relative;
padding: 0 0 0 24px;
font-size: inherit;
+ margin-top: 8px;
&::before {
content: '';
@@ -53,6 +53,13 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
+ }
+
+ &.mx_RoomList_explorePrompt_startChat::before {
+ mask-image: url('$(res)/img/element-icons/feedback.svg');
+ }
+
+ &.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}
diff --git a/res/css/views/toasts/_AnalyticsToast.scss b/res/css/views/toasts/_AnalyticsToast.scss
new file mode 100644
index 0000000000..fdbe7f1c76
--- /dev/null
+++ b/res/css/views/toasts/_AnalyticsToast.scss
@@ -0,0 +1,27 @@
+/*
+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_AnalyticsToast {
+ .mx_AccessibleButton_kind_danger {
+ background: none;
+ color: $accent-color;
+ }
+
+ .mx_AccessibleButton_kind_primary {
+ background: $accent-color;
+ color: #ffffff;
+ }
+}
diff --git a/res/img/element-icons/email-prompt.svg b/res/img/element-icons/email-prompt.svg
new file mode 100644
index 0000000000..19b8f82449
--- /dev/null
+++ b/res/img/element-icons/email-prompt.svg
@@ -0,0 +1,13 @@
+
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 6350439a4f..76cc5e2df9 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -274,6 +274,10 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
background-color: #080808;
}
}
+
+ blockquote {
+ color: #919191;
+ }
}
// diff highlight colors
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 2f761e7393..ab582b9b22 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -147,6 +147,15 @@ export class ModalManager {
return this.appendDialogAsync
- You can even use 'img' tags + You can even add images with Matrix URLs
`); diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index d11944e470..68bb4322e6 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -31,10 +31,26 @@ import {UPDATE_EVENT} from "../../stores/AsyncStore"; import {useEventEmitter} from "../../hooks/useEventEmitter"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import MiniAvatarUploader, {AVATAR_SIZE} from "../views/elements/MiniAvatarUploader"; +import Analytics from "../../Analytics"; +import CountlyAnalytics from "../../CountlyAnalytics"; -const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'}); -const onClickExplore = () => dis.fire(Action.ViewRoomDirectory); -const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'}); +const onClickSendDm = () => { + Analytics.trackEvent('home_page', 'button', 'dm'); + CountlyAnalytics.instance.track("home_page_button", { button: "dm" }); + dis.dispatch({action: 'view_create_chat'}); +}; + +const onClickExplore = () => { + Analytics.trackEvent('home_page', 'button', 'room_directory'); + CountlyAnalytics.instance.track("home_page_button", { button: "room_directory" }); + dis.fire(Action.ViewRoomDirectory); +}; + +const onClickNewRoom = () => { + Analytics.trackEvent('home_page', 'button', 'create_room'); + CountlyAnalytics.instance.track("home_page_button", { button: "create_room" }); + dis.dispatch({action: 'view_create_room'}); +}; interface IProps { justRegistered?: boolean; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index ab5b93794c..ec5afd13f0 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types'; import { MatrixClient } from 'matrix-js-sdk/src/client'; import { DragDropContext } from 'react-beautiful-dnd'; -import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent} from '../../Keyboard'; +import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isMac} from '../../Keyboard'; import PageTypes from '../../PageTypes'; import CallMediaHandler from '../../CallMediaHandler'; import { fixupColorFonts } from '../../utils/FontManager'; @@ -52,6 +52,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore"; import NonUrgentToastContainer from "./NonUrgentToastContainer"; import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload"; import { IThreepidInvite } from "../../stores/ThreepidInviteStore"; +import Modal from "../../Modal"; import { ICollapseConfig } from "../../resizer/distributors/collapse"; // We need to fetch each pinned message individually (if we don't already have it) @@ -392,6 +393,7 @@ class LoggedInView extends React.Component{ _t("An email has been sent to %(emailAddress)s", - { emailAddress: (sub) => { this.props.inputs.emailAddress } }, +
{ _t("A confirmation email has been sent to %(emailAddress)s", + { emailAddress: (sub) => { this.props.inputs.emailAddress } }, ) }
-{ _t("Please check your email to continue registration.") }
+{ _t("Open the link in the email to continue registration.") }