From 6fa2d356300767c17d2bd26968b8cad4c6089455 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 20 Oct 2017 18:41:39 +0100 Subject: [PATCH 01/50] support concept of default theme --- config.sample.json | 1 + src/vector/index.html | 3 +-- src/vector/index.js | 17 +++++++++++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/config.sample.json b/config.sample.json index a4477ea1..a6378334 100644 --- a/config.sample.json +++ b/config.sample.json @@ -7,6 +7,7 @@ "bug_report_endpoint_url": "https://riot.im/bugreports/submit", "enableLabs": true, "default_federate": true, + "default_theme": "light", "roomDirectory": { "servers": [ "matrix.org" diff --git a/src/vector/index.html b/src/vector/index.html index 49c2979e..864377ee 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -25,9 +25,8 @@ var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); - var light = match[1] == 'light'; %> - <link rel="<%= light ? '' : 'alternate ' %>stylesheet" title="<%= title %>" + <link rel="alternate stylesheet" title="<%= title %>" href="<%= file %>"> <% } else { %> <link rel="stylesheet" href="<%= file %>"> diff --git a/src/vector/index.js b/src/vector/index.js index a08397ce..f775d1b3 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -281,6 +281,23 @@ async function loadApp() { configError = e; } + // as quickly as we possibly can, set a default theme... + const styleElements = Object.create(null); + let a; + for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) { + const href = a.getAttribute("href"); + // shouldn't we be using the 'title' tag rather than the href? + const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); + if (match) { + if (match[1] === (configJson.default_theme || 'light')) { + // remove the alternative flag off the stylesheet + a.setAttribute("rel", "stylesheet"); + } + } + } + // XXX: do we also need to call MatrixChat.setTheme here to do any random fixups (e.g. svg tint) + + if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) { console.log('User has previously accepted risks in using an unsupported browser'); validBrowser = true; From cd31e6532b14adcf18ddecee1fa15ddde1d2cb68 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 20 Oct 2017 18:43:06 +0100 Subject: [PATCH 02/50] initial wip theme --- src/skins/vector/css/_common.scss | 14 +- src/skins/vector/css/themes/_base.scss | 6 + src/skins/vector/css/themes/_status.scss | 155 +++++++++++++++++++++++ src/skins/vector/css/themes/status.scss | 3 + webpack.config.js | 1 + 5 files changed, 170 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/css/themes/_status.scss create mode 100644 src/skins/vector/css/themes/status.scss diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index bf742cd0..0802c1ca 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -23,12 +23,7 @@ html { } body { - /* Open Sans lacks combining diacritics, so these will fall through - to the next font. Helevetica's diacritics however do not combine - nicely with Open Sans (on OSX, at least) and result in a huge - horizontal mess. Arial empirically gets it right, hence prioritising - Arial here. */ - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 15px; background-color: $primary-bg-color; color: $primary-fg-color; @@ -73,7 +68,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { /* Required by Firefox */ textarea { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; } /* Prevent ugly dotted highlight around selected elements in Firefox */ @@ -211,7 +206,7 @@ textarea { border: solid 1px $accent-color; font-weight: 600; font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; margin-left: 0px; margin-right: 8px; padding-left: 1.5em; @@ -304,7 +299,8 @@ textarea { } .changelog_text { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + // why on earth is this needed? and with the wrong namespacing? >:( + font-family: $font-family; } .mx_Beta { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index a13c517b..a67d2001 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -1,3 +1,9 @@ +/* Open Sans lacks combining diacritics, so these will fall through + to the next font. Helevetica's diacritics however do not combine + nicely with Open Sans (on OSX, at least) and result in a huge + horizontal mess. Arial empirically gets it right, hence prioritising + Arial here. */ +$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; // typical text (dark-on-white in light skin) $primary-fg-color: #454545; diff --git a/src/skins/vector/css/themes/_status.scss b/src/skins/vector/css/themes/_status.scss new file mode 100644 index 00000000..b1d8b0ef --- /dev/null +++ b/src/skins/vector/css/themes/_status.scss @@ -0,0 +1,155 @@ +@font-face { + font-family:PostGrotesk-Medium; + src:url(../fonts/PostGrotesk-Medium.eot); + src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Medium.woff) format("woff"),url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family:PostGrotesk-Book; + src:url(../fonts/PostGrotesk-Book.eot); + src:url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Book.woff) format("woff"),url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); + font-weight: 400; + font-style: normal; +} + +// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss) +// N.B. that the status.im website uses: +// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; +// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now. + +$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; + +// typical text (dark-on-white in light skin) +$primary-fg-color: #70808D; +$primary-bg-color: #EEF2F5; + +// ***** Status theme specifics ****** +$header-color: #49555F; +$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; + +h1,h2,h3,h4,h5 { + color: $header-color; + font-family: $header-font-family; + font-weight: 400 ! important; +} + +// used for dialog box text +$light-fg-color: #747474; + +// used for focusing form controls +$focus-bg-color: #dddddd; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color: #76CFA6; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 125%; + +// red warning colour +$warning-color: #ff0064; +$mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); + +$group-alert-color: #774f7e; + +$preview-bar-bg-color: #f7f7f7; + +// left-panel style muted accent color +$secondary-accent-color: #eaf5f0; + +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255,255,255,0.5); + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #f7f7f7; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #f0f0f0; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; + +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + +$greyed-fg-color: #888; + +$neutral-badge-color: #dbdbdb; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + +$rte-bg-color: #e9e9e9; +$rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; + +// ******************** + +$roomtile-name-color: rgba(69, 69, 69, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); +$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); + +$roomsublist-label-fg-color: $h3-color; +$roomsublist-label-bg-color: #d3efe1; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event redaction +$event-redacted-img: url('../../img/redacted.jpg'); + +// event timestamp +$event-timestamp-color: #acacac; + +$edit-button-url: "../../img/icon_context_message.svg"; +$copy-button-url: "../../img/icon_copy_message.svg"; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; diff --git a/src/skins/vector/css/themes/status.scss b/src/skins/vector/css/themes/status.scss new file mode 100644 index 00000000..391026b2 --- /dev/null +++ b/src/skins/vector/css/themes/status.scss @@ -0,0 +1,3 @@ +@import "_base.scss"; +@import "_status.scss"; +@import "../_components.scss"; diff --git a/webpack.config.js b/webpack.config.js index 5d4fef72..1e134495 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,6 +20,7 @@ module.exports = { // CSS themes "theme-light": "./src/skins/vector/css/themes/light.scss", "theme-dark": "./src/skins/vector/css/themes/dark.scss", + "theme-status": "./src/skins/vector/css/themes/status.scss", }, module: { preLoaders: [ From b28192cc0b63f24b7a00033d53b1725ae9edb64b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sun, 22 Oct 2017 15:21:58 +0100 Subject: [PATCH 03/50] fix (C) --- src/header | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/header b/src/header index 060709b8..6d367b04 100644 --- a/src/header +++ b/src/header @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From 01b3d6128c685765f727bcb89d30d501fb770515 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sun, 22 Oct 2017 17:03:39 +0100 Subject: [PATCH 04/50] move status theme into a dedicated dir, and make fonts work --- scripts/copy-res.js | 2 +- src/skins/vector/css/themes/status.scss | 3 - .../themes/status/css/_StatusLogin.scss | 291 ++++++++++++++++++ .../vector/themes/status/css/_status.scss | 155 ++++++++++ .../vector/themes/status/css/status.scss | 4 + src/skins/vector/themes/status/fonts/README | 1 + webpack.config.js | 2 +- 7 files changed, 453 insertions(+), 5 deletions(-) delete mode 100644 src/skins/vector/css/themes/status.scss create mode 100644 src/skins/vector/themes/status/css/_StatusLogin.scss create mode 100644 src/skins/vector/themes/status/css/_status.scss create mode 100644 src/skins/vector/themes/status/css/status.scss create mode 100644 src/skins/vector/themes/status/fonts/README diff --git a/scripts/copy-res.js b/scripts/copy-res.js index b461d030..c4b80709 100755 --- a/scripts/copy-res.js +++ b/scripts/copy-res.js @@ -45,7 +45,7 @@ const COPY_LIST = [ ["res/home/**", "webapp/home"], ["res/{media,vector-icons}/**", "webapp"], ["res/flags/*", "webapp/flags/"], - ["src/skins/vector/{fonts,img}/**", "webapp"], + ["src/skins/vector/{fonts,img,themes}/**", "webapp"], ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"], ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"], ["./config.json", "webapp", { directwatch: 1 }], diff --git a/src/skins/vector/css/themes/status.scss b/src/skins/vector/css/themes/status.scss deleted file mode 100644 index 391026b2..00000000 --- a/src/skins/vector/css/themes/status.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "_base.scss"; -@import "_status.scss"; -@import "../_components.scss"; diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss new file mode 100644 index 00000000..38c8a5ef --- /dev/null +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -0,0 +1,291 @@ +/* +Copyright 2017 New Vector Ltd + +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. +*/ + +// overrides for mx_Login* specific to Status. +// Ideally this would be all Status prefixes for a Status specific version of the component +// but given we're not doing Status as a dedicated 'skin' yet... +.mx_Login { + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + + overflow: auto; +} + +.mx_Login h2 { + color: $primary-fg-color; + font-weight: 300; + margin-top: 32px; + margin-bottom: 20px; +} + +.mx_Login_box { + width: 300px; + min-height: 450px; + padding-top: 50px; + padding-bottom: 50px; + margin: auto; +} + +.mx_Login_logo { + text-align: center; + height: 150px; + margin-bottom: 45px; +} + +.mx_Login_logo img { + max-height: 100% +} + +.mx_Login_support { + text-align: center; + font-size: 13px; + margin-top: 0px; + opacity: 0.7; +} + +.mx_Login_field { + width: 280px; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + padding: 9px; + margin-bottom: 14px; +} + +.mx_Login_field_disabled { + opacity: 0.3; +} + +.mx_Login_fieldLabel { + margin-top: -10px; + margin-left: 8px; + margin-bottom: 14px; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_submit { + margin-top: 35px; + margin-bottom: 24px; + width: 100%; + border-radius: 40px; + height: 40px; + border: 0px; + background-color: $accent-color; + font-size: 15px; + color: $accent-fg-color; +} + +.mx_Login_submit:disabled { + opacity: 0.3; +} + +.mx_Login_label { + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_checkbox, +.mx_Login_radio { + margin-right: 10px; +} + +.mx_Login_create { + display: block; + text-align: center; + width: 100%; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_create:link { + color: $primary-fg-color; +} + +.mx_Login_links { + display: block; + text-align: center; + margin-top: 15px; + width: 100%; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_links a:link { + color: $primary-fg-color; +} + +.mx_Login_prompt { + padding-top: 15px; + padding-bottom: 15px; + font-size: 13px; +} + +.mx_Login_forgot { + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_forgot:link { + color: $primary-fg-color; +} + +.mx_Login_loader { + display: inline; + position: relative; + top: 2px; + left: 8px; +} + +.mx_Login_loader .mx_Spinner { + display: inline; +} + +.mx_Login_loader .mx_Spinner img { + width: 16px; + height: 16px; +} + +.mx_Login_error { + color: $warning-color; + font-weight: bold; + text-align: center; +/* + height: 24px; +*/ + margin-top: 12px; + margin-bottom: 12px; +} + +.mx_Login_type_container { + display: flex; + margin-bottom: 14px; +} + +.mx_Login_type_label { + flex-grow: 1; + line-height: 35px; +} + +.mx_Login_type_dropdown { + display: inline-block; + min-width: 170px; + align-self: flex-end; + flex: 1 1 auto; +} + +.mx_Login_field_group { + display: flex; +} + +.mx_Login_field_prefix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-right: 0px; + border-radius: 3px 0px 0px 3px; + + text-align: center; +} + +.mx_Login_field_suffix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-left: 0px; + border-radius: 0px 3px 3px 0px; + + text-align: center; + flex-grow: 1; +} + +.mx_Login_username { + height: 16px; + flex-shrink: 1; + min-width: 0px; + border-radius: 3px; +} + +.mx_Login_phoneNumberField { + height: 16px; +} + +.mx_Login_field_has_prefix { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.mx_Login_field_has_suffix { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +.mx_Login_phoneSection { + display:flex; +} + +.mx_Login_phoneCountry { + margin-bottom: 14px; + width: 150px; + + /* To override mx_Login_field_prefix */ + text-align: left; + padding: 0px; + background-color: $primary-bg-color; +} + +.mx_Login_field_prefix .mx_Dropdown_input { + /* To use prefix border instead of dropdown border */ + border: 0; +} + +.mx_Login_phoneCountry .mx_Dropdown_option { + /* + To match height of mx_Login_field + 33px + 2px border from mx_Dropdown_option = 35px + */ + height: 33px; + line-height: 33px; +} + +.mx_Login_phoneCountry .mx_Dropdown_option img { + margin: 3px; + vertical-align: top; +} + +.mx_Login_language { + margin-left: auto; + margin-right: auto; + min-width: 60%; +} + +.mx_Login_language_div { + display: flex; + margin-top: 12px; + margin-bottom: 12px; +} + diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss new file mode 100644 index 00000000..d2ccee0d --- /dev/null +++ b/src/skins/vector/themes/status/css/_status.scss @@ -0,0 +1,155 @@ +@font-face { + font-family:PostGrotesk-Medium; + src:url('https://status.im/fonts/PostGrotesk-Medium.eot'); + src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family:PostGrotesk-Book; + src:url('https://status.im/fonts/PostGrotesk-Book.eot'); + src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg"); + font-weight: 400; + font-style: normal; +} + +// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss) +// N.B. that the status.im website uses: +// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; +// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now. + +$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; + +// typical text (dark-on-white in light skin) +$primary-fg-color: #70808D; +$primary-bg-color: #EEF2F5; + +// ***** Status theme specifics ****** +$header-color: #49555F; +$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; + +h1,h2,h3,h4,h5 { + color: $header-color; + font-family: $header-font-family; + font-weight: 400 ! important; +} + +// used for dialog box text +$light-fg-color: #747474; + +// used for focusing form controls +$focus-bg-color: #dddddd; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color: #76CFA6; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 125%; + +// red warning colour +$warning-color: #ff0064; +$mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); + +$group-alert-color: #774f7e; + +$preview-bar-bg-color: #f7f7f7; + +// left-panel style muted accent color +$secondary-accent-color: #eaf5f0; + +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255,255,255,0.5); + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #f7f7f7; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #f0f0f0; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; + +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + +$greyed-fg-color: #888; + +$neutral-badge-color: #dbdbdb; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + +$rte-bg-color: #e9e9e9; +$rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; + +// ******************** + +$roomtile-name-color: rgba(69, 69, 69, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); +$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); + +$roomsublist-label-fg-color: $h3-color; +$roomsublist-label-bg-color: #d3efe1; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event redaction +$event-redacted-img: url('../../img/redacted.jpg'); + +// event timestamp +$event-timestamp-color: #acacac; + +$edit-button-url: "../../img/icon_context_message.svg"; +$copy-button-url: "../../img/icon_copy_message.svg"; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; diff --git a/src/skins/vector/themes/status/css/status.scss b/src/skins/vector/themes/status/css/status.scss new file mode 100644 index 00000000..09f5c78f --- /dev/null +++ b/src/skins/vector/themes/status/css/status.scss @@ -0,0 +1,4 @@ +@import "../../../css/themes/_base.scss"; +@import "_status.scss"; +@import "../../../css/_components.scss"; +@import "_StatusLogin.scss"; diff --git a/src/skins/vector/themes/status/fonts/README b/src/skins/vector/themes/status/fonts/README new file mode 100644 index 00000000..d7900145 --- /dev/null +++ b/src/skins/vector/themes/status/fonts/README @@ -0,0 +1 @@ +We link out to status.im for fonts, although ideally we'd put them here. diff --git a/webpack.config.js b/webpack.config.js index 1e134495..2df82d9b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,7 +20,7 @@ module.exports = { // CSS themes "theme-light": "./src/skins/vector/css/themes/light.scss", "theme-dark": "./src/skins/vector/css/themes/dark.scss", - "theme-status": "./src/skins/vector/css/themes/status.scss", + "theme-status": "./src/skins/vector/themes/status/css/status.scss", }, module: { preLoaders: [ From 190811ac1cbf25e5af84414475c99fb83c1de27f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Mon, 23 Oct 2017 00:57:02 +0100 Subject: [PATCH 05/50] WIP --- docs/skinning thoughts.md | 68 ++++++++ .../views/login/VectorLoginFooter.js | 3 + .../views/login/VectorLoginHeader.js | 6 +- .../structures/login/_Login.scss | 1 - src/skins/vector/css/themes/_status.scss | 155 ------------------ .../themes/status/css/_StatusLogin.scss | 74 ++++++--- .../vector/themes/status/css/_status.scss | 7 +- src/skins/vector/themes/status/img/logo.svg | 16 ++ 8 files changed, 149 insertions(+), 181 deletions(-) create mode 100644 docs/skinning thoughts.md delete mode 100644 src/skins/vector/css/themes/_status.scss create mode 100644 src/skins/vector/themes/status/img/logo.svg diff --git a/docs/skinning thoughts.md b/docs/skinning thoughts.md new file mode 100644 index 00000000..bbaf18a2 --- /dev/null +++ b/docs/skinning thoughts.md @@ -0,0 +1,68 @@ +== Skinning refactor == + +matrix-react-sdk + - base images + - base CSS + - all the components needed to build a workable app (including the top layer) + +riot-web: the riot skin + - riot-specific classes (e.g. login header/footer) + - riot-specific themes + - light + - dark + +i.e. the only things which should go into riot-web are bits which apply vector-specific skinning +specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)" + - Questions: + - Electron app? (should probably be a separate repo in its own right? but might as well go here for now) + - index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?) + +ideally matrix-react-sdk itself should ship with a default skin which actually works built in. + +status skin (can go in the same app for now) + - has status theme + - which inherits from riot light theme + - how do we share graphics between skins? + - shove them into react-sdk, or... + - guess we do ../../vector/img + - this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images) + +out of scope: + - making the components more independent, so they can be used in isolation. + - that said, the bits which should probably be used by being embeded into a different app: + - login/reg + - RoomView + RoomSettings + - MessageComposer + - RoomList + - MemberList + - MemberInfo + - Voip UI + - UserSettings + - sharing different js-sdks between the different isolated modules + +other changes: + - how do we handle i18n? + - each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad. + - ability to associate components with a given skin + - skins/vector/src <-- components + - skins/vector/css + - skins/vector/img + - skins/vector/fonts + - gather together themes (per skin) into a single place too + - skins/vector/themes/foo/css + - skins/vector/themes/foo/img + - skins/vector/themes/foo/fonts + - ideally riot-web would contain almost nothing but skins/vector directory. + - ability to entirely replace CSS rather than override it for a given theme + - e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`. + +random thoughts; + - should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components? + - might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime + - if so, perhaps skins & themes should converge... + +----------------- + +Immediate plan for Status: + * Implement it as a theme for the riot skin + * Ideally move skins to a sensible level (possibly even including src?) diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js index b04dcdb5..5a97f524 100644 --- a/src/components/views/login/VectorLoginFooter.js +++ b/src/components/views/login/VectorLoginFooter.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); import { _t } from 'matrix-react-sdk/lib/languageHandler'; +import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore'; module.exports = React.createClass({ displayName: 'VectorLoginFooter', @@ -26,6 +27,8 @@ module.exports = React.createClass({ }, render: function() { + if (UserSettingsStore.getTheme() === 'status') return <div/>; + return ( <div className="mx_Login_links"> <a href="https://medium.com/@RiotChat">blog</a> · diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js index 3aa8811c..71093a96 100644 --- a/src/components/views/login/VectorLoginHeader.js +++ b/src/components/views/login/VectorLoginHeader.js @@ -33,8 +33,10 @@ module.exports = React.createClass({ render: function() { return ( - <div className="mx_Login_logo"> - <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/> + <div className="mx_Login_header"> + <div className="mx_Login_logo"> + <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/> + </div> </div> ); } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 86ab39be..63f483a5 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -26,7 +26,6 @@ limitations under the License. } .mx_Login h2 { - color: $primary-fg-color; font-weight: 300; margin-top: 32px; margin-bottom: 20px; diff --git a/src/skins/vector/css/themes/_status.scss b/src/skins/vector/css/themes/_status.scss deleted file mode 100644 index b1d8b0ef..00000000 --- a/src/skins/vector/css/themes/_status.scss +++ /dev/null @@ -1,155 +0,0 @@ -@font-face { - font-family:PostGrotesk-Medium; - src:url(../fonts/PostGrotesk-Medium.eot); - src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Medium.woff) format("woff"),url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family:PostGrotesk-Book; - src:url(../fonts/PostGrotesk-Book.eot); - src:url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Book.woff) format("woff"),url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); - font-weight: 400; - font-style: normal; -} - -// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss) -// N.B. that the status.im website uses: -// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; -// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now. - -$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #70808D; -$primary-bg-color: #EEF2F5; - -// ***** Status theme specifics ****** -$header-color: #49555F; -$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; - -h1,h2,h3,h4,h5 { - color: $header-color; - font-family: $header-font-family; - font-weight: 400 ! important; -} - -// used for dialog box text -$light-fg-color: #747474; - -// used for focusing form controls -$focus-bg-color: #dddddd; - -// button UI (white-on-green in light skin) -$accent-fg-color: #ffffff; -$accent-color: #76CFA6; - -$selection-fg-color: $primary-bg-color; - -$focus-brightness: 125%; - -// red warning colour -$warning-color: #ff0064; -$mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); - -$group-alert-color: #774f7e; - -$preview-bar-bg-color: #f7f7f7; - -// left-panel style muted accent color -$secondary-accent-color: #eaf5f0; - -// used by RoomDirectory permissions -$plinth-bg-color: $secondary-accent-color; - -// used by RoomDropTarget -$droptarget-bg-color: rgba(255,255,255,0.5); - -// used by AddressSelector -$selected-color: #eaf5f0; - -// selected for hoverover & selected event tiles -$event-selected-color: #f7f7f7; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #e5e5e5; - -// used for the border of input text fields -$input-border-color: #f0f0f0; - -// apart from login forms, which have stronger border -$strong-input-border-color: #c7c7c7; - -// used for UserSettings EditableText -$input-underline-color: rgba(151, 151, 151, 0.5); -$input-fg-color: rgba(74, 74, 74, 0.9); - -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #f6f6f6; - -$avatar-initial-color: #ffffff; - -$h3-color: #3d3b39; - -$dialog-background-bg-color: #e9e9e9; -$lightbox-background-bg-color: #000; - -$greyed-fg-color: #888; - -$neutral-badge-color: #dbdbdb; - -$preview-widget-bar-color: #ddd; -$preview-widget-fg-color: $greyed-fg-color; - -$blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; - -$settings-grey-fg-color: #a2a2a2; - -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; - -$rte-bg-color: #e9e9e9; -$rte-code-bg-color: rgba(0, 0, 0, 0.04); -$rte-room-pill-color: #aaa; - -// ******************** - -$roomtile-name-color: rgba(69, 69, 69, 0.8); -$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); - -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: #d3efe1; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-img: url('../../img/redacted.jpg'); - -// event timestamp -$event-timestamp-color: #acacac; - -$edit-button-url: "../../img/icon_context_message.svg"; -$copy-button-url: "../../img/icon_copy_message.svg"; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -// unused? -$progressbar-color: #000; diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 38c8a5ef..7cdc6939 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -17,40 +17,70 @@ limitations under the License. // overrides for mx_Login* specific to Status. // Ideally this would be all Status prefixes for a Status specific version of the component // but given we're not doing Status as a dedicated 'skin' yet... -.mx_Login { - width: 100%; - height: 100%; - display: flex; +.mx_Login { + flex-direction: column; align-items: center; justify-content: center; - - overflow: auto; -} - -.mx_Login h2 { - color: $primary-fg-color; - font-weight: 300; - margin-top: 32px; - margin-bottom: 20px; } .mx_Login_box { - width: 300px; - min-height: 450px; - padding-top: 50px; - padding-bottom: 50px; - margin: auto; + width: 350px; + min-height: initial; + padding-top: 20px; + padding-bottom: 10px; + padding-left: 33px; + padding-right: 33px; + border-radius: 8px; + margin: initial; + background-color: $form-bg-color; + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + position: relative; } .mx_Login_logo { - text-align: center; - height: 150px; - margin-bottom: 45px; + background-color: #fff; + width: 74px; + height: 74px; + border-radius: 37px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); + position: absolute; + top: -36px; + left: 50%; + margin-left: -36px; } .mx_Login_logo img { - max-height: 100% + width: 36px; + height: 36px; + padding: 19px; +} + +.mx_Login_box h2 { + text-align: center; + color: $form-fg-color; + font-size: 25px; +} + +.mx_LoginPageHeader_brand { + position: absolute; + top: 30px; + left: 30px; +} + +.mx_LoginPageHeader_title { + text-align: center; + margin-top: 90px; + margin-bottom: 50px; +} + +.mx_LoginPageHeader_title h1 { + font-size: 29px; + margin-bottom: 3px; +} + +.mx_LoginPageHeader_subtitle { + font-size: 18px; } .mx_Login_support { diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index d2ccee0d..eb8f1d94 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -25,7 +25,7 @@ $font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; $primary-fg-color: #70808D; $primary-bg-color: #EEF2F5; -// ***** Status theme specifics ****** +// ***** Start of Status theme specifics ****** $header-color: #49555F; $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; @@ -35,6 +35,11 @@ h1,h2,h3,h4,h5 { font-weight: 400 ! important; } +$form-bg-color: #4360DF; +$form-fg-color: #ffffff; + +// ***** End of Status theme specifics ****** + // used for dialog box text $light-fg-color: #747474; diff --git a/src/skins/vector/themes/status/img/logo.svg b/src/skins/vector/themes/status/img/logo.svg new file mode 100644 index 00000000..68e4a77a --- /dev/null +++ b/src/skins/vector/themes/status/img/logo.svg @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="211px" height="53px" viewBox="0 0 211 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch --> + <title>Status logo</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Status-logo"> + <g> + <path d="M66.843,12.101 C66.843,12.7730034 67.0914975,13.2699984 67.5885,13.592 C68.0855025,13.9140016 68.9849935,14.179999 70.287,14.39 C72.0510088,14.6840015 73.3494958,15.1599967 74.1825,15.818 C75.0155042,16.4760033 75.432,17.4559935 75.432,18.758 C75.432,20.1160068 74.9140052,21.2079959 73.878,22.034 C72.8419948,22.8600041 71.4770085,23.273 69.783,23.273 C68.0329912,23.273 66.6400052,22.8495042 65.604,22.0025 C64.5679948,21.1554958 64.0220003,20.1020063 63.966,18.842 L66.423,18.464 C66.4930004,19.2760041 66.8044972,19.9479973 67.3575,20.48 C67.9105028,21.0120027 68.7189947,21.278 69.783,21.278 C70.7350048,21.278 71.4874972,21.0715021 72.0405,20.6585 C72.5935028,20.2454979 72.87,19.6610038 72.87,18.905 C72.87,18.2329966 72.6180025,17.7150018 72.114,17.351 C71.6099975,16.9869982 70.7280063,16.7140009 69.468,16.532 C67.7739915,16.2799987 66.4895044,15.8320032 65.6145,15.188 C64.7394956,14.5439968 64.302,13.5850064 64.302,12.311 C64.302,10.9669933 64.7919951,9.91700378 65.772,9.161 C66.7520049,8.40499622 68.039992,8.027 69.636,8.027 C71.1340075,8.027 72.3729951,8.3769965 73.353,9.077 C74.3330049,9.7770035 74.9349989,10.7429938 75.159,11.975 L72.66,12.542 C72.4079987,10.8619916 71.379009,10.022 69.573,10.022 C68.6769955,10.022 67.9980023,10.2074981 67.536,10.5785 C67.0739977,10.9495019 66.843,11.4569968 66.843,12.101 Z M82.803,20.984 L83.454,22.853 C82.8939972,23.1330014 82.215004,23.273 81.417,23.273 C80.4789953,23.273 79.7475026,23.0280025 79.2225,22.538 C78.6974974,22.0479976 78.435,21.3480046 78.435,20.438 L78.435,14.81 L76.755,14.81 L76.755,13.046 L78.435,13.046 L78.435,10.211 L80.808,9.119 L80.808,13.046 L83.055,13.046 L83.055,14.81 L80.808,14.81 L80.808,20.144 C80.808,20.9280039 81.1229968,21.32 81.753,21.32 C82.0330014,21.32 82.3829979,21.2080011 82.803,20.984 Z M91.392,23 C91.2519993,22.7479987 91.182,22.321003 91.182,21.719 C90.4539964,22.7550052 89.3970069,23.273 88.011,23.273 C87.002995,23.273 86.194503,23.0175026 85.5855,22.5065 C84.976497,21.9954974 84.672,21.3060043 84.672,20.438 C84.672,19.7939968 84.8434983,19.2410023 85.1865,18.779 C85.5295017,18.3169977 86.0124969,17.9565013 86.6355,17.6975 C87.2585031,17.4384987 87.9409963,17.2530006 88.683,17.141 C89.4250037,17.0289994 90.2439955,16.973 91.14,16.973 L91.14,16.343 C91.14,15.7969973 90.9860015,15.3630016 90.678,15.041 C90.3699985,14.7189984 89.915003,14.558 89.313,14.558 C88.710997,14.558 88.2490016,14.7049985 87.927,14.999 C87.6049984,15.2930015 87.4370001,15.6639978 87.423,16.112 L85.113,15.776 C85.2110005,14.8379953 85.662496,14.1030027 86.4675,13.571 C87.272504,13.0389973 88.2489943,12.773 89.397,12.773 C90.6290062,12.773 91.6159963,13.0844969 92.358,13.7075 C93.1000037,14.3305031 93.471,15.2229942 93.471,16.385 L93.471,21.635 C93.471,22.0830022 93.5479992,22.5379977 93.702,23 L91.392,23 Z M88.662,21.509 C89.3340034,21.509 89.9149976,21.309502 90.405,20.9105 C90.8950025,20.511498 91.14,19.9830033 91.14,19.325 L91.14,18.506 C88.3959863,18.506 87.024,19.1009941 87.024,20.291 C87.024,20.683002 87.1744985,20.983999 87.4755,21.194 C87.7765015,21.404001 88.1719976,21.509 88.662,21.509 Z M101.199,20.984 L101.85,22.853 C101.289997,23.1330014 100.611004,23.273 99.813,23.273 C98.8749953,23.273 98.1435026,23.0280025 97.6185,22.538 C97.0934974,22.0479976 96.831,21.3480046 96.831,20.438 L96.831,14.81 L95.151,14.81 L95.151,13.046 L96.831,13.046 L96.831,10.211 L99.204,9.119 L99.204,13.046 L101.451,13.046 L101.451,14.81 L99.204,14.81 L99.204,20.144 C99.204,20.9280039 99.5189969,21.32 100.149,21.32 C100.429001,21.32 100.778998,21.2080011 101.199,20.984 Z M112.56,13.046 L112.56,23 L110.292,23 L110.292,21.509 C109.591997,22.6850059 108.563007,23.273 107.205,23.273 C106.210995,23.273 105.385003,22.9825029 104.727,22.4015 C104.068997,21.8204971 103.74,20.9980053 103.74,19.934 L103.74,13.046 L106.113,13.046 L106.113,19.346 C106.113,20.0180034 106.284498,20.5149984 106.6275,20.837 C106.970502,21.1590016 107.400997,21.32 107.919,21.32 C108.535003,21.32 109.066998,21.0540027 109.515,20.522 C109.963002,19.9899973 110.187,19.2550047 110.187,18.317 L110.187,13.046 L112.56,13.046 Z M117.39,15.692 C117.39,16.098002 117.557998,16.3919991 117.894,16.574 C118.230002,16.7560009 118.747996,16.9029994 119.448,17.015 C120.022003,17.0990004 120.522498,17.2039994 120.9495,17.33 C121.376502,17.4560006 121.785998,17.6309989 122.178,17.855 C122.570002,18.0790011 122.867499,18.3764981 123.0705,18.7475 C123.273501,19.1185019 123.375,19.5559975 123.375,20.06 C123.375,21.054005 122.986504,21.8379971 122.2095,22.412 C121.432496,22.9860029 120.393007,23.273 119.091,23.273 C117.844994,23.273 116.833504,23.0140026 116.0565,22.496 C115.279496,21.9779974 114.835001,21.2360048 114.723,20.27 L117.033,19.934 C117.131,20.9980053 117.823994,21.53 119.112,21.53 C119.686003,21.53 120.140998,21.4215011 120.477,21.2045 C120.813002,20.9874989 120.981,20.6620022 120.981,20.228 C120.981,19.835998 120.823502,19.5455009 120.5085,19.3565 C120.193498,19.1674991 119.616004,19.0100006 118.776,18.884 C117.543994,18.7019991 116.606003,18.3800023 115.962,17.918 C115.317997,17.4559977 114.996,16.7700045 114.996,15.86 C114.996,14.865995 115.391496,14.1030027 116.1825,13.571 C116.973504,13.0389973 117.942994,12.773 119.091,12.773 C120.197006,12.773 121.127996,13.0179976 121.884,13.508 C122.640004,13.9980025 123.087999,14.6629958 123.228,15.503 L120.918,15.986 C120.791999,14.991995 120.169006,14.495 119.049,14.495 C118.572998,14.495 118.177502,14.5999989 117.8625,14.81 C117.547498,15.020001 117.39,15.3139981 117.39,15.692 Z" id="Status" fill="#49555F"></path> + <path d="M68.31,32.5 L72.135,43 L70.77,43 L69.75,40.15 L65.58,40.15 L64.56,43 L63.285,43 L67.11,32.5 L68.31,32.5 Z M67.665,34.195 L67.635,34.195 L65.94,39.13 L69.39,39.13 C68.4299952,36.4099864 67.855001,34.7650029 67.665,34.195 Z M82.905,43 L81.78,43 C80.1199917,38.8699794 79.0300026,35.9650084 78.51,34.285 L78.48,34.285 L78.48,43 L77.295,43 L77.295,32.5 L79.02,32.5 C80.9700098,37.6500257 82.0949985,40.619996 82.395,41.41 L85.68,32.5 L87.39,32.5 L87.39,43 L86.205,43 L86.205,34.285 L86.175,34.285 C85.5449969,36.2050096 84.4550077,39.1099806 82.905,43 Z M92.805,35.74 C93.8650053,35.74 94.697497,36.0849965 95.3025,36.775 C95.907503,37.4650034 96.21,38.3599945 96.21,39.46 C96.21,40.5600055 95.907503,41.4549966 95.3025,42.145 C94.697497,42.8350035 93.8650053,43.18 92.805,43.18 C91.7449947,43.18 90.912503,42.8350035 90.3075,42.145 C89.702497,41.4549966 89.4,40.5600055 89.4,39.46 C89.4,38.3599945 89.702497,37.4650034 90.3075,36.775 C90.912503,36.0849965 91.7449947,35.74 92.805,35.74 Z M92.805,42.175 C93.4850034,42.175 94.0049982,41.9175026 94.365,41.4025 C94.7250018,40.8874974 94.905,40.2400039 94.905,39.46 C94.905,38.6799961 94.7250018,38.0325026 94.365,37.5175 C94.0049982,37.0024974 93.4850034,36.745 92.805,36.745 C92.1249966,36.745 91.6050018,37.0024974 91.245,37.5175 C90.8849982,38.0325026 90.705,38.6799961 90.705,39.46 C90.705,40.2400039 90.8849982,40.8874974 91.245,41.4025 C91.6050018,41.9175026 92.1249966,42.175 92.805,42.175 Z M101.58,35.74 C102.530005,35.74 103.309997,36.0774966 103.92,36.7525 C104.530003,37.4275034 104.835,38.3299943 104.835,39.46 C104.835,40.5900057 104.530003,41.4924966 103.92,42.1675 C103.309997,42.8425034 102.530005,43.18 101.58,43.18 C100.549995,43.18 99.7750026,42.7650041 99.255,41.935 L99.255,43 L98.07,43 L98.07,32.5 L99.33,32.5 L99.33,36.82 C99.9000029,36.0999964 100.649995,35.74 101.58,35.74 Z M99.33,38.98 L99.33,39.94 C99.33,40.6700036 99.5474978,41.2199982 99.9825,41.59 C100.417502,41.9600018 100.904997,42.145 101.445,42.145 C102.075003,42.145 102.579998,41.8925025 102.96,41.3875 C103.340002,40.8824975 103.53,40.2400039 103.53,39.46 C103.53,38.6799961 103.340002,38.0375025 102.96,37.5325 C102.579998,37.0274975 102.075003,36.775 101.445,36.775 C100.904997,36.775 100.417502,36.9599982 99.9825,37.33 C99.5474978,37.7000018 99.33,38.2499964 99.33,38.98 Z M106.5,33.16 C106.5,32.9099987 106.577499,32.7100007 106.7325,32.56 C106.887501,32.4099992 107.084999,32.335 107.325,32.335 C107.565001,32.335 107.762499,32.4099992 107.9175,32.56 C108.072501,32.7100007 108.15,32.9099987 108.15,33.16 C108.15,33.3800011 108.072501,33.5699992 107.9175,33.73 C107.762499,33.8900008 107.565001,33.97 107.325,33.97 C107.084999,33.97 106.887501,33.8900008 106.7325,33.73 C106.577499,33.5699992 106.5,33.3800011 106.5,33.16 Z M106.695,43 L106.695,35.92 L107.955,35.92 L107.955,43 L106.695,43 Z M110.355,43 L110.355,32.5 L111.615,32.5 L111.615,43 L110.355,43 Z M118.65,40.93 L119.76,41.38 C119.159997,42.580006 118.190007,43.18 116.85,43.18 C115.809995,43.18 114.987503,42.8325035 114.3825,42.1375 C113.777497,41.4424965 113.475,40.5450055 113.475,39.445 C113.475,38.3649946 113.777497,37.4775035 114.3825,36.7825 C114.987503,36.0874965 115.794995,35.74 116.805,35.74 C117.825005,35.74 118.612497,36.0824966 119.1675,36.7675 C119.722503,37.4525034 120,38.2849951 120,39.265 L120,39.685 L114.765,39.685 C114.795,40.4150037 114.982498,41.0174976 115.3275,41.4925 C115.672502,41.9675024 116.184997,42.205 116.865,42.205 C117.325002,42.205 117.689999,42.1000011 117.96,41.89 C118.230001,41.6799989 118.459999,41.3600021 118.65,40.93 Z M116.775,36.715 C116.224997,36.715 115.775002,36.9024981 115.425,37.2775 C115.074998,37.6525019 114.87,38.139997 114.81,38.74 L118.71,38.74 C118.68,38.1199969 118.487502,37.6275018 118.1325,37.2625 C117.777498,36.8974982 117.325003,36.715 116.775,36.715 Z M131.67,43 L125.415,43 L125.415,32.5 L131.565,32.5 L131.565,33.55 L126.72,33.55 L126.72,37.06 L131.25,37.06 L131.25,38.11 L126.72,38.11 L126.72,41.95 L131.67,41.95 L131.67,43 Z M136.605,41.905 L137.01,42.895 C136.679998,43.085001 136.255003,43.18 135.735,43.18 C135.144997,43.18 134.692502,43.0150017 134.3775,42.685 C134.062498,42.3549984 133.905,41.9400025 133.905,41.44 L133.905,36.88 L132.705,36.88 L132.705,35.92 L133.905,35.92 L133.905,33.895 L135.165,33.325 L135.165,35.92 L136.815,35.92 L136.815,36.88 L135.165,36.88 L135.165,41.32 C135.165,41.5700013 135.229999,41.7674993 135.36,41.9125 C135.490001,42.0575007 135.669999,42.13 135.9,42.13 C136.150001,42.13 136.384999,42.0550007 136.605,41.905 Z M138.585,43 L138.585,32.5 L139.845,32.5 L139.845,36.895 C140.345002,36.1249962 141.064995,35.74 142.005,35.74 C142.725004,35.74 143.324998,35.944998 143.805,36.355 C144.285002,36.765002 144.525,37.3449963 144.525,38.095 L144.525,43 L143.265,43 L143.265,38.29 C143.265,37.7899975 143.115002,37.4125013 142.815,37.1575 C142.514998,36.9024987 142.160002,36.775 141.75,36.775 C141.229997,36.775 140.782502,36.9924978 140.4075,37.4275 C140.032498,37.8625022 139.845,38.4349964 139.845,39.145 L139.845,43 L138.585,43 Z M151.485,40.93 L152.595,41.38 C151.994997,42.580006 151.025007,43.18 149.685,43.18 C148.644995,43.18 147.822503,42.8325035 147.2175,42.1375 C146.612497,41.4424965 146.31,40.5450055 146.31,39.445 C146.31,38.3649946 146.612497,37.4775035 147.2175,36.7825 C147.822503,36.0874965 148.629995,35.74 149.64,35.74 C150.660005,35.74 151.447497,36.0824966 152.0025,36.7675 C152.557503,37.4525034 152.835,38.2849951 152.835,39.265 L152.835,39.685 L147.6,39.685 C147.63,40.4150037 147.817498,41.0174976 148.1625,41.4925 C148.507502,41.9675024 149.019997,42.205 149.7,42.205 C150.160002,42.205 150.524999,42.1000011 150.795,41.89 C151.065001,41.6799989 151.294999,41.3600021 151.485,40.93 Z M149.61,36.715 C149.059997,36.715 148.610002,36.9024981 148.26,37.2775 C147.909998,37.6525019 147.705,38.139997 147.645,38.74 L151.545,38.74 C151.515,38.1199969 151.322502,37.6275018 150.9675,37.2625 C150.612498,36.8974982 150.160003,36.715 149.61,36.715 Z M158.7,35.905 L158.415,37.075 C158.194999,36.874999 157.925002,36.775 157.605,36.775 C157.114998,36.775 156.697502,36.9999977 156.3525,37.45 C156.007498,37.9000023 155.835,38.4749965 155.835,39.175 L155.835,43 L154.575,43 L154.575,35.92 L155.76,35.92 L155.76,37.03 C155.940001,36.6099979 156.214998,36.2900011 156.585,36.07 C156.955002,35.8499989 157.369998,35.74 157.83,35.74 C158.180002,35.74 158.469999,35.7949994 158.7,35.905 Z M164.61,40.93 L165.72,41.38 C165.119997,42.580006 164.150007,43.18 162.81,43.18 C161.769995,43.18 160.947503,42.8325035 160.3425,42.1375 C159.737497,41.4424965 159.435,40.5450055 159.435,39.445 C159.435,38.3649946 159.737497,37.4775035 160.3425,36.7825 C160.947503,36.0874965 161.754995,35.74 162.765,35.74 C163.785005,35.74 164.572497,36.0824966 165.1275,36.7675 C165.682503,37.4525034 165.96,38.2849951 165.96,39.265 L165.96,39.685 L160.725,39.685 C160.755,40.4150037 160.942498,41.0174976 161.2875,41.4925 C161.632502,41.9675024 162.144997,42.205 162.825,42.205 C163.285002,42.205 163.649999,42.1000011 163.92,41.89 C164.190001,41.6799989 164.419999,41.3600021 164.61,40.93 Z M162.735,36.715 C162.184997,36.715 161.735002,36.9024981 161.385,37.2775 C161.034998,37.6525019 160.83,38.139997 160.77,38.74 L164.67,38.74 C164.64,38.1199969 164.447502,37.6275018 164.0925,37.2625 C163.737498,36.8974982 163.285003,36.715 162.735,36.715 Z M173.505,35.92 L173.505,43 L172.32,43 L172.32,41.935 C171.779997,42.7650041 171.045005,43.18 170.115,43.18 C169.404996,43.18 168.812502,42.9750021 168.3375,42.565 C167.862498,42.154998 167.625,41.5750038 167.625,40.825 L167.625,35.92 L168.885,35.92 L168.885,40.63 C168.885,41.1300025 169.032499,41.5074987 169.3275,41.7625 C169.622501,42.0175013 169.969998,42.145 170.37,42.145 C170.880003,42.145 171.319998,41.9275022 171.69,41.4925 C172.060002,41.0574978 172.245,40.4850036 172.245,39.775 L172.245,35.92 L173.505,35.92 Z M175.905,43 L175.905,35.92 L177.09,35.92 L177.09,36.985 C177.590002,36.1549958 178.299995,35.74 179.22,35.74 C179.720002,35.74 180.157498,35.8524989 180.5325,36.0775 C180.907502,36.3025011 181.179999,36.6199979 181.35,37.03 C181.560001,36.6799982 181.872498,36.3775013 182.2875,36.1225 C182.702502,35.8674987 183.154998,35.74 183.645,35.74 C184.315003,35.74 184.872498,35.944998 185.3175,36.355 C185.762502,36.765002 185.985,37.3449963 185.985,38.095 L185.985,43 L184.725,43 L184.725,38.29 C184.725,37.7899975 184.592501,37.4125013 184.3275,37.1575 C184.062499,36.9024987 183.740002,36.775 183.36,36.775 C182.869998,36.775 182.450002,36.9924978 182.1,37.4275 C181.749998,37.8625022 181.575,38.4349964 181.575,39.145 L181.575,43 L180.315,43 L180.315,38.29 C180.315,37.7899975 180.180001,37.4125013 179.91,37.1575 C179.639999,36.9024987 179.315002,36.775 178.935,36.775 C178.454998,36.775 178.040002,36.9924978 177.69,37.4275 C177.339998,37.8625022 177.165,38.4349964 177.165,39.145 L177.165,43 L175.905,43 Z M191.43,37.75 C191.43,36.0899917 191.859996,34.7700049 192.72,33.79 C193.580004,32.8099951 194.709993,32.32 196.11,32.32 C197.510007,32.32 198.639996,32.8099951 199.5,33.79 C200.360004,34.7700049 200.79,36.0899917 200.79,37.75 C200.79,39.4100083 200.360004,40.7299951 199.5,41.71 C198.639996,42.6900049 197.510007,43.18 196.11,43.18 C194.709993,43.18 193.580004,42.6900049 192.72,41.71 C191.859996,40.7299951 191.43,39.4100083 191.43,37.75 Z M192.78,37.75 C192.78,39.0300064 193.067497,40.0774959 193.6425,40.8925 C194.217503,41.7075041 195.039995,42.115 196.11,42.115 C197.180005,42.115 198.002497,41.7075041 198.5775,40.8925 C199.152503,40.0774959 199.44,39.0300064 199.44,37.75 C199.44,36.4699936 199.152503,35.4225041 198.5775,34.6075 C198.002497,33.7924959 197.180005,33.385 196.11,33.385 C195.039995,33.385 194.217503,33.7924959 193.6425,34.6075 C193.067497,35.4225041 192.78,36.4699936 192.78,37.75 Z M203.955,35.17 C203.955,35.7100027 204.129998,36.1049988 204.48,36.355 C204.830002,36.6050013 205.484995,36.8099992 206.445,36.97 C207.695006,37.170001 208.624997,37.4974977 209.235,37.9525 C209.845003,38.4075023 210.15,39.0949954 210.15,40.015 C210.15,40.9650047 209.807503,41.7299971 209.1225,42.31 C208.437497,42.8900029 207.505006,43.18 206.325,43.18 C205.094994,43.18 204.132503,42.8875029 203.4375,42.3025 C202.742497,41.7174971 202.375,40.9650046 202.335,40.045 L203.625,39.85 C203.665,40.4900032 203.899998,41.0324978 204.33,41.4775 C204.760002,41.9225022 205.424995,42.145 206.325,42.145 C207.105004,42.145 207.707498,41.9650018 208.1325,41.605 C208.557502,41.2449982 208.77,40.7500031 208.77,40.12 C208.77,39.5399971 208.575002,39.1025015 208.185,38.8075 C207.794998,38.5124985 207.110005,38.2950007 206.13,38.155 C204.939994,37.9849992 204.055003,37.6750022 203.475,37.225 C202.894997,36.7749977 202.605,36.1300042 202.605,35.29 C202.605,34.3799954 202.934997,33.6575027 203.595,33.1225 C204.255003,32.5874973 205.124995,32.32 206.205,32.32 C207.235005,32.32 208.077497,32.5649976 208.7325,33.055 C209.387503,33.5450024 209.784999,34.2199957 209.925,35.08 L208.635,35.41 C208.444999,34.0499932 207.630007,33.37 206.19,33.37 C205.449996,33.37 204.892502,33.5324984 204.5175,33.8575 C204.142498,34.1825016 203.955,34.6199972 203.955,35.17 Z" id="A-Mobile-Ethereum-OS" fill="#49555F" opacity="0.400000006"></path> + <path d="M32.4973501,25.5505037 C38.4424686,25.2185283 42.0452893,22.1564608 41.7899347,17.5784494 C41.5299374,12.9215068 36.7362358,10.0521244 31.9425343,10.3214192 C24.1286847,10.7578625 18.383207,17.6411301 17.7378564,25.5063951 C18.7987386,25.2579939 19.9153344,25.1094174 20.9692523,25.0513798 C25.356708,24.8053 28.107573,25.7965834 32.4973501,25.5505037 M20.5026499,27.6653964 C14.5575314,27.9973719 10.9547107,31.0594393 11.2100653,35.6374507 C11.472384,40.2943933 16.2637642,43.1614542 21.0574657,42.8944809 C28.8713153,42.4580377 34.616793,35.57477 35.2621436,27.7071835 C34.2012614,27.9579063 33.0846656,28.1064827 32.0330691,28.1645204 C27.643292,28.4106001 24.892427,27.4193167 20.5026499,27.6653964 M18.0210678,0 L34.9789322,0 C40.8544085,0 42.7277824,0 45.3765056,0.88217258 C48.4686172,1.98720981 51.0128772,4.52693824 52.1155447,7.61918528 C53,10.2680245 53,12.1461235 53,18.0195357 L53,34.9804643 C53,40.8538765 53,42.7319755 52.1155447,45.3831362 C51.0128772,48.5055629 48.5034383,51.0127902 45.3811484,52.1178274 C42.7301038,53 40.8544085,53 34.9789322,53 L18.0210678,53 C12.1455915,53 10.2698962,53 7.61885156,52.1178274 C4.49656169,51.0127902 1.98944418,48.5055629 0.884455346,45.3831362 C0,42.7319755 0,40.8538765 0,34.9804643 L0,18.0195357 C0,12.1461235 0,10.2680245 0.884455346,7.61918528 C1.98712277,4.49675865 4.49656169,1.98720981 7.61885156,0.88217258 C10.2698962,0 12.1455915,0 18.0210678,0" id="Fill-1" fill="#4360DF"></path> + </g> + </g> + </g> +</svg> \ No newline at end of file From b053f08991260755cb2015313bdcbe988363a83d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Tue, 24 Oct 2017 23:42:52 +0100 Subject: [PATCH 06/50] switch to a LoginPage wrapper component > > as it's much nicer in the CSS to wrap the LoginBox as needed rather than have separate header & footer divs floating above and below it which need to be correctly vertically centered --- .../themes/status/css/_StatusLogin.scss | 553 ++++++++++-------- .../vector/themes/status/css/_status.scss | 6 +- 2 files changed, 298 insertions(+), 261 deletions(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 7cdc6939..a32251f5 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -18,304 +18,337 @@ limitations under the License. // Ideally this would be all Status prefixes for a Status specific version of the component // but given we're not doing Status as a dedicated 'skin' yet... -.mx_Login { - flex-direction: column; +.mx_StatusLogin { + + width: 100%; + height: 100%; + + display: flex; align-items: center; justify-content: center; -} -.mx_Login_box { - width: 350px; - min-height: initial; - padding-top: 20px; - padding-bottom: 10px; - padding-left: 33px; - padding-right: 33px; - border-radius: 8px; - margin: initial; - background-color: $form-bg-color; - box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); - position: relative; -} + overflow: auto; -.mx_Login_logo { - background-color: #fff; - width: 74px; - height: 74px; - border-radius: 37px; - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); - position: absolute; - top: -36px; - left: 50%; - margin-left: -36px; -} + .mx_StatusLogin_brand { + position: absolute; + top: 30px; + left: 30px; + } -.mx_Login_logo img { - width: 36px; - height: 36px; - padding: 19px; -} + .mx_StatusLogin_content { + margin: auto; + } -.mx_Login_box h2 { - text-align: center; - color: $form-fg-color; - font-size: 25px; -} + .mx_StatusLogin_header { + text-align: center; + margin-top: 70px; + margin-bottom: 50px; + } -.mx_LoginPageHeader_brand { - position: absolute; - top: 30px; - left: 30px; -} + .mx_StatusLogin_header h1 { + font-size: 29px; + margin-bottom: 3px; + } -.mx_LoginPageHeader_title { - text-align: center; - margin-top: 90px; - margin-bottom: 50px; -} + .mx_StatusLogin_subtitle { + font-size: 18px; + } -.mx_LoginPageHeader_title h1 { - font-size: 29px; - margin-bottom: 3px; -} + .mx_StatusLogin_footer { + margin-top: 30px; + margin-bottom: 30px; + text-align: center; + font-size: 16px; + color: $footer-color; + } -.mx_LoginPageHeader_subtitle { - font-size: 18px; -} + .mx_StatusLogin_footer p { + margin-top: 0.5em; + margin-bottom: 0.5em; + } -.mx_Login_support { - text-align: center; - font-size: 13px; - margin-top: 0px; - opacity: 0.7; -} + .mx_StatusLogin_footer_cta { + color: $callout-color; + font-family: $header-font-family; + letter-spacing: 1px; + font-size: 13px; + text-transform: uppercase; + text-decoration: none; + } -.mx_Login_field { - width: 280px; - border-radius: 3px; - border: 1px solid $strong-input-border-color; - font-weight: 300; - font-size: 13px; - padding: 9px; - margin-bottom: 14px; -} + // overrides of .mx_Login -.mx_Login_field_disabled { - opacity: 0.3; -} + .mx_Login_box { + width: 350px; + min-height: initial; + padding-top: 20px; + padding-bottom: 10px; + padding-left: 33px; + padding-right: 33px; + border-radius: 8px; + background-color: $form-bg-color; + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + position: relative; + } -.mx_Login_fieldLabel { - margin-top: -10px; - margin-left: 8px; - margin-bottom: 14px; - font-size: 13px; - opacity: 0.8; -} + .mx_Login_logo { + background-color: #fff; + width: 74px; + height: 74px; + border-radius: 37px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); + position: absolute; + top: -36px; + left: 50%; + margin-left: -36px; + } -.mx_Login_submit { - margin-top: 35px; - margin-bottom: 24px; - width: 100%; - border-radius: 40px; - height: 40px; - border: 0px; - background-color: $accent-color; - font-size: 15px; - color: $accent-fg-color; -} + .mx_Login_logo img { + width: 36px; + height: 36px; + padding: 19px; + } -.mx_Login_submit:disabled { - opacity: 0.3; -} + .mx_Login_box h2 { + text-align: center; + color: $form-fg-color; + font-size: 25px; + } -.mx_Login_label { - font-size: 13px; - opacity: 0.8; -} + .mx_Login_support { + text-align: center; + font-size: 13px; + margin-top: 0px; + opacity: 0.7; + } -.mx_Login_checkbox, -.mx_Login_radio { - margin-right: 10px; -} + .mx_Login_field { + width: 280px; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + padding: 9px; + margin-bottom: 14px; + } -.mx_Login_create { - display: block; - text-align: center; - width: 100%; - font-size: 13px; - opacity: 0.8; -} + .mx_Login_field_disabled { + opacity: 0.3; + } -.mx_Login_create:link { - color: $primary-fg-color; -} + .mx_Login_fieldLabel { + margin-top: -10px; + margin-left: 8px; + margin-bottom: 14px; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_links { - display: block; - text-align: center; - margin-top: 15px; - width: 100%; - font-size: 13px; - opacity: 0.8; -} + .mx_Login_submit { + margin-top: 35px; + margin-bottom: 24px; + width: 100%; + border-radius: 40px; + height: 40px; + border: 0px; + background-color: $accent-color; + font-size: 15px; + color: $accent-fg-color; + } -.mx_Login_links a:link { - color: $primary-fg-color; -} + .mx_Login_submit:disabled { + opacity: 0.3; + } -.mx_Login_prompt { - padding-top: 15px; - padding-bottom: 15px; - font-size: 13px; -} + .mx_Login_label { + font-size: 13px; + opacity: 0.8; + } -.mx_Login_forgot { - font-size: 13px; - opacity: 0.8; -} + .mx_Login_checkbox, + .mx_Login_radio { + margin-right: 10px; + } -.mx_Login_forgot:link { - color: $primary-fg-color; -} + .mx_Login_create { + display: block; + text-align: center; + width: 100%; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_loader { - display: inline; - position: relative; - top: 2px; - left: 8px; -} + .mx_Login_create:link { + color: $primary-fg-color; + } -.mx_Login_loader .mx_Spinner { - display: inline; -} + .mx_Login_links { + display: block; + text-align: center; + margin-top: 15px; + width: 100%; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_loader .mx_Spinner img { - width: 16px; - height: 16px; -} + .mx_Login_links a:link { + color: $primary-fg-color; + } -.mx_Login_error { - color: $warning-color; - font-weight: bold; - text-align: center; -/* - height: 24px; -*/ - margin-top: 12px; - margin-bottom: 12px; -} + .mx_Login_prompt { + padding-top: 15px; + padding-bottom: 15px; + font-size: 13px; + } -.mx_Login_type_container { - display: flex; - margin-bottom: 14px; -} + .mx_Login_forgot { + font-size: 13px; + opacity: 0.8; + } -.mx_Login_type_label { - flex-grow: 1; - line-height: 35px; -} + .mx_Login_forgot:link { + color: $primary-fg-color; + } -.mx_Login_type_dropdown { - display: inline-block; - min-width: 170px; - align-self: flex-end; - flex: 1 1 auto; -} + .mx_Login_loader { + display: inline; + position: relative; + top: 2px; + left: 8px; + } -.mx_Login_field_group { - display: flex; -} + .mx_Login_loader .mx_Spinner { + display: inline; + } -.mx_Login_field_prefix { - height: 34px; - padding: 0px 5px; - line-height: 33px; + .mx_Login_loader .mx_Spinner img { + width: 16px; + height: 16px; + } - background-color: #eee; - border: 1px solid #c7c7c7; - border-right: 0px; - border-radius: 3px 0px 0px 3px; - - text-align: center; -} - -.mx_Login_field_suffix { - height: 34px; - padding: 0px 5px; - line-height: 33px; - - background-color: #eee; - border: 1px solid #c7c7c7; - border-left: 0px; - border-radius: 0px 3px 3px 0px; - - text-align: center; - flex-grow: 1; -} - -.mx_Login_username { - height: 16px; - flex-shrink: 1; - min-width: 0px; - border-radius: 3px; -} - -.mx_Login_phoneNumberField { - height: 16px; -} - -.mx_Login_field_has_prefix { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; -} - -.mx_Login_field_has_suffix { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} - -.mx_Login_phoneSection { - display:flex; -} - -.mx_Login_phoneCountry { - margin-bottom: 14px; - width: 150px; - - /* To override mx_Login_field_prefix */ - text-align: left; - padding: 0px; - background-color: $primary-bg-color; -} - -.mx_Login_field_prefix .mx_Dropdown_input { - /* To use prefix border instead of dropdown border */ - border: 0; -} - -.mx_Login_phoneCountry .mx_Dropdown_option { + .mx_Login_error { + color: $warning-color; + font-weight: bold; + text-align: center; /* - To match height of mx_Login_field - 33px + 2px border from mx_Dropdown_option = 35px + height: 24px; */ - height: 33px; - line-height: 33px; -} + margin-top: 12px; + margin-bottom: 12px; + } -.mx_Login_phoneCountry .mx_Dropdown_option img { - margin: 3px; - vertical-align: top; -} + .mx_Login_type_container { + display: flex; + margin-bottom: 14px; + } -.mx_Login_language { - margin-left: auto; - margin-right: auto; - min-width: 60%; -} + .mx_Login_type_label { + flex-grow: 1; + line-height: 35px; + } -.mx_Login_language_div { - display: flex; - margin-top: 12px; - margin-bottom: 12px; -} + .mx_Login_type_dropdown { + display: inline-block; + min-width: 170px; + align-self: flex-end; + flex: 1 1 auto; + } + .mx_Login_field_group { + display: flex; + } + + .mx_Login_field_prefix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-right: 0px; + border-radius: 3px 0px 0px 3px; + + text-align: center; + } + + .mx_Login_field_suffix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-left: 0px; + border-radius: 0px 3px 3px 0px; + + text-align: center; + flex-grow: 1; + } + + .mx_Login_username { + height: 16px; + flex-shrink: 1; + min-width: 0px; + border-radius: 3px; + } + + .mx_Login_phoneNumberField { + height: 16px; + } + + .mx_Login_field_has_prefix { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } + + .mx_Login_field_has_suffix { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + } + + .mx_Login_phoneSection { + display:flex; + } + + .mx_Login_phoneCountry { + margin-bottom: 14px; + width: 150px; + + /* To override mx_Login_field_prefix */ + text-align: left; + padding: 0px; + background-color: $primary-bg-color; + } + + .mx_Login_field_prefix .mx_Dropdown_input { + /* To use prefix border instead of dropdown border */ + border: 0; + } + + .mx_Login_phoneCountry .mx_Dropdown_option { + /* + To match height of mx_Login_field + 33px + 2px border from mx_Dropdown_option = 35px + */ + height: 33px; + line-height: 33px; + } + + .mx_Login_phoneCountry .mx_Dropdown_option img { + margin: 3px; + vertical-align: top; + } + + .mx_Login_language { + margin-left: auto; + margin-right: auto; + min-width: 60%; + } + + .mx_Login_language_div { + display: flex; + margin-top: 12px; + margin-bottom: 12px; + } + +} diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index eb8f1d94..ceffa7a9 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5; $header-color: #49555F; $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; +$footer-color: #8D99A4; + h1,h2,h3,h4,h5 { color: $header-color; font-family: $header-font-family; font-weight: 400 ! important; } -$form-bg-color: #4360DF; +$callout-color: #4360DF; // or #4957b8 from status.im homepage + +$form-bg-color: $callout-color; $form-fg-color: #ffffff; // ***** End of Status theme specifics ****** From 73e7fe27646f14e07e32f877b62cebf6d4bfec9b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 01:30:39 +0100 Subject: [PATCH 07/50] finishish login page --- .../structures/login/_Login.scss | 1 - .../themes/status/css/_StatusLogin.scss | 78 +++++++++++-------- .../vector/themes/status/css/_status.scss | 26 ++++++- 3 files changed, 70 insertions(+), 35 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 63f483a5..dca14225 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -223,7 +223,6 @@ limitations under the License. height: 16px; flex-shrink: 1; min-width: 0px; - border-radius: 3px; } .mx_Login_phoneNumberField { diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index a32251f5..44a9e0a2 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -54,6 +54,10 @@ limitations under the License. font-size: 18px; } + .mx_StatusLogin_subtitle a { + color: $riot-link-color; + } + .mx_StatusLogin_footer { margin-top: 30px; margin-bottom: 30px; @@ -73,22 +77,22 @@ limitations under the License. letter-spacing: 1px; font-size: 13px; text-transform: uppercase; - text-decoration: none; } // overrides of .mx_Login .mx_Login_box { - width: 350px; + width: 330px; min-height: initial; - padding-top: 20px; - padding-bottom: 10px; - padding-left: 33px; - padding-right: 33px; + padding-top: 40px; + padding-bottom: 20px; + padding-left: 10px; + padding-right: 10px; border-radius: 8px; background-color: $form-bg-color; box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); position: relative; + text-align: center; } .mx_Login_logo { @@ -123,15 +127,31 @@ limitations under the License. } .mx_Login_field { - width: 280px; - border-radius: 3px; - border: 1px solid $strong-input-border-color; + width: 260px; + height: 27px; + padding: 9px 20px 9px 20px; + border-radius: 10px; + text-align: left; + border: none; + background-color: $form-field-bg-color; + color: $form-field-fg-color; font-weight: 300; - font-size: 13px; - padding: 9px; + font-size: 15px; margin-bottom: 14px; } + .mx_Login_field::-webkit-input-placeholder { + font-family: $font-family; + color: $form-field-fg-color; + opacity: 0.6; + } + + .mx_Login_field::-moz-placeholder { + font-family: $font-family; + color: $form-field-fg-color; + opacity: 0.6; + } + .mx_Login_field_disabled { opacity: 0.3; } @@ -145,15 +165,10 @@ limitations under the License. } .mx_Login_submit { - margin-top: 35px; - margin-bottom: 24px; - width: 100%; - border-radius: 40px; - height: 40px; - border: 0px; - background-color: $accent-color; - font-size: 15px; - color: $accent-fg-color; + @mixin mx_DialogButton; + width: 200px; + margin-top: 13px; + margin-bottom: 18px; } .mx_Login_submit:disabled { @@ -174,18 +189,19 @@ limitations under the License. display: block; text-align: center; width: 100%; - font-size: 13px; - opacity: 0.8; + font-size: 15px; + opacity: 1.0; } .mx_Login_create:link { - color: $primary-fg-color; + color: $form-fg-color; } .mx_Login_links { display: block; text-align: center; - margin-top: 15px; + margin-top: 10px; + margin-bottom: 10px; width: 100%; font-size: 13px; opacity: 0.8; @@ -202,12 +218,13 @@ limitations under the License. } .mx_Login_forgot { + display: block; font-size: 13px; opacity: 0.8; } .mx_Login_forgot:link { - color: $primary-fg-color; + color: $form-fg-color; } .mx_Login_loader { @@ -228,13 +245,12 @@ limitations under the License. .mx_Login_error { color: $warning-color; - font-weight: bold; + font-size: 18px; + width: 250px; + margin: auto; text-align: center; - /* - height: 24px; - */ margin-top: 12px; - margin-bottom: 12px; + margin-bottom: 16px; } .mx_Login_type_container { @@ -286,10 +302,8 @@ limitations under the License. } .mx_Login_username { - height: 16px; flex-shrink: 1; min-width: 0px; - border-radius: 3px; } .mx_Login_phoneNumberField { diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index ceffa7a9..b3680f7e 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -31,6 +31,12 @@ $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; $footer-color: #8D99A4; +$riot-link-color: #A26988; + +a { + text-decoration: none; +} + h1,h2,h3,h4,h5 { color: $header-color; font-family: $header-font-family; @@ -42,8 +48,12 @@ $callout-color: #4360DF; // or #4957b8 from status.im homepage $form-bg-color: $callout-color; $form-fg-color: #ffffff; +$form-field-bg-color: rgba(244, 242, 247, 0.12); +$form-field-fg-color: #ffffff; + // ***** End of Status theme specifics ****** + // used for dialog box text $light-fg-color: #747474; @@ -52,14 +62,14 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color: #76CFA6; +$accent-color: #6CC1F6; $selection-fg-color: $primary-bg-color; $focus-brightness: 125%; // red warning colour -$warning-color: #ff0064; +$warning-color: #F69E98; $mention-user-pill-bg-color: #ff0064; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); @@ -162,3 +172,15 @@ $lightbox-border-color: #ffffff; // unused? $progressbar-color: #000; + +@define-mixin mx_DialogButton { + border-radius: 8px; + height: 45px; + border: 1px solid rgba(199, 206, 209, 0.12); + background-color: $accent-color; + font-size: 13px; + font-family: $header-font-family; + text-transform: uppercase; + letter-spacing: 1px; + color: $accent-fg-color; +} From 29cfbba2ce76287e91b6b8fc5c8e59da7f4460a1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 02:04:17 +0100 Subject: [PATCH 08/50] tweak error layout --- src/skins/vector/themes/status/css/_StatusLogin.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 44a9e0a2..ad64546f 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -117,6 +117,7 @@ limitations under the License. text-align: center; color: $form-fg-color; font-size: 25px; + margin-bottom: 24px; } .mx_Login_support { @@ -132,7 +133,7 @@ limitations under the License. padding: 9px 20px 9px 20px; border-radius: 10px; text-align: left; - border: none; + border: 1px solid transparent; background-color: $form-field-bg-color; color: $form-field-fg-color; font-weight: 300; @@ -247,6 +248,10 @@ limitations under the License. color: $warning-color; font-size: 18px; width: 250px; + height: 44px; + display: flex; + justify-content: center; + align-items: center; margin: auto; text-align: center; margin-top: 12px; From eedcda1d0e224cbab9c6d806f9243dd009824c71 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 02:18:04 +0100 Subject: [PATCH 09/50] add dotty background --- src/skins/vector/themes/status/img/dot.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/skins/vector/themes/status/img/dot.svg diff --git a/src/skins/vector/themes/status/img/dot.svg b/src/skins/vector/themes/status/img/dot.svg new file mode 100644 index 00000000..45df23c0 --- /dev/null +++ b/src/skins/vector/themes/status/img/dot.svg @@ -0,0 +1 @@ +<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg> \ No newline at end of file From 9d86716b0f958c72e785af835ae94ca93f343c66 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 02:26:53 +0100 Subject: [PATCH 10/50] remove non-overridden stuff, and add dot svg --- .../themes/status/css/_StatusLogin.scss | 160 +----------------- 1 file changed, 1 insertion(+), 159 deletions(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index ad64546f..a3f3b0ef 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -90,6 +90,7 @@ limitations under the License. padding-right: 10px; border-radius: 8px; background-color: $form-bg-color; + background-image: url(../../themes/status/img/dot.svg); box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); position: relative; text-align: center; @@ -120,13 +121,6 @@ limitations under the License. margin-bottom: 24px; } - .mx_Login_support { - text-align: center; - font-size: 13px; - margin-top: 0px; - opacity: 0.7; - } - .mx_Login_field { width: 260px; height: 27px; @@ -157,14 +151,6 @@ limitations under the License. opacity: 0.3; } - .mx_Login_fieldLabel { - margin-top: -10px; - margin-left: 8px; - margin-bottom: 14px; - font-size: 13px; - opacity: 0.8; - } - .mx_Login_submit { @mixin mx_DialogButton; width: 200px; @@ -176,16 +162,6 @@ limitations under the License. opacity: 0.3; } - .mx_Login_label { - font-size: 13px; - opacity: 0.8; - } - - .mx_Login_checkbox, - .mx_Login_radio { - margin-right: 10px; - } - .mx_Login_create { display: block; text-align: center; @@ -212,12 +188,6 @@ limitations under the License. color: $primary-fg-color; } - .mx_Login_prompt { - padding-top: 15px; - padding-bottom: 15px; - font-size: 13px; - } - .mx_Login_forgot { display: block; font-size: 13px; @@ -228,22 +198,6 @@ limitations under the License. color: $form-fg-color; } - .mx_Login_loader { - display: inline; - position: relative; - top: 2px; - left: 8px; - } - - .mx_Login_loader .mx_Spinner { - display: inline; - } - - .mx_Login_loader .mx_Spinner img { - width: 16px; - height: 16px; - } - .mx_Login_error { color: $warning-color; font-size: 18px; @@ -258,116 +212,4 @@ limitations under the License. margin-bottom: 16px; } - .mx_Login_type_container { - display: flex; - margin-bottom: 14px; - } - - .mx_Login_type_label { - flex-grow: 1; - line-height: 35px; - } - - .mx_Login_type_dropdown { - display: inline-block; - min-width: 170px; - align-self: flex-end; - flex: 1 1 auto; - } - - .mx_Login_field_group { - display: flex; - } - - .mx_Login_field_prefix { - height: 34px; - padding: 0px 5px; - line-height: 33px; - - background-color: #eee; - border: 1px solid #c7c7c7; - border-right: 0px; - border-radius: 3px 0px 0px 3px; - - text-align: center; - } - - .mx_Login_field_suffix { - height: 34px; - padding: 0px 5px; - line-height: 33px; - - background-color: #eee; - border: 1px solid #c7c7c7; - border-left: 0px; - border-radius: 0px 3px 3px 0px; - - text-align: center; - flex-grow: 1; - } - - .mx_Login_username { - flex-shrink: 1; - min-width: 0px; - } - - .mx_Login_phoneNumberField { - height: 16px; - } - - .mx_Login_field_has_prefix { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - } - - .mx_Login_field_has_suffix { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - } - - .mx_Login_phoneSection { - display:flex; - } - - .mx_Login_phoneCountry { - margin-bottom: 14px; - width: 150px; - - /* To override mx_Login_field_prefix */ - text-align: left; - padding: 0px; - background-color: $primary-bg-color; - } - - .mx_Login_field_prefix .mx_Dropdown_input { - /* To use prefix border instead of dropdown border */ - border: 0; - } - - .mx_Login_phoneCountry .mx_Dropdown_option { - /* - To match height of mx_Login_field - 33px + 2px border from mx_Dropdown_option = 35px - */ - height: 33px; - line-height: 33px; - } - - .mx_Login_phoneCountry .mx_Dropdown_option img { - margin: 3px; - vertical-align: top; - } - - .mx_Login_language { - margin-left: auto; - margin-right: auto; - min-width: 60%; - } - - .mx_Login_language_div { - display: flex; - margin-top: 12px; - margin-bottom: 12px; - } - } From 79a9f2168b2961281263e6a656f4c3b4cfc41823 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 22:47:55 +0100 Subject: [PATCH 11/50] get rid of hardcoded font --- .../vector/img/button-text-formatting.svg | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/skins/vector/img/button-text-formatting.svg b/src/skins/vector/img/button-text-formatting.svg index d3fc3f5f..d697010d 100644 --- a/src/skins/vector/img/button-text-formatting.svg +++ b/src/skins/vector/img/button-text-formatting.svg @@ -1,18 +1,21 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="24px" height="18px" viewBox="0 0 24 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch --> - <title>F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9</title> - <desc>Created with sketchtool.</desc> - <defs></defs> - <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> - <g id="02_x-Chat-text-input-" transform="translate(-829.000000, -729.000000)"> - <g id="button_text_formatting" transform="translate(829.000000, 729.000000)"> - <rect id="Rectangle-111" fill="#F6F6F6" x="0" y="0" width="24" height="18" rx="9"></rect> - <text id="Aa" font-family="OpenSans-Bold, Open Sans" font-size="12" font-weight="bold" letter-spacing="-1.20000005" fill="#4A4A4A"> - <tspan x="5" y="13">A</tspan> - <tspan x="12.0792968" y="13" font-family="OpenSans-Italic, Open Sans" font-style="italic" font-weight="normal">a</tspan> - </text> - </g> - </g> - </g> -</svg> \ No newline at end of file +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 24 18" style="enable-background:new 0 0 24 18;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#F6F6F6;} + .st1{enable-background:new ;} + .st2{fill:#4A4A4A;} +</style> +<path id="Rectangle-111" class="st0" d="M9,0h6c5,0,9,4,9,9l0,0c0,5-4,9-9,9H9c-5,0-9-4-9-9l0,0C0,4,4,0,9,0z"/> +<g class="st1"> + <path class="st2" d="M11.3,13l-0.6-2H7.6L7,13H5l3-8.6h2.2l3,8.6H11.3z M10.3,9.4c-0.6-1.8-0.9-2.9-1-3.1S9.2,5.9,9.1,5.7 + C9,6.2,8.6,7.5,8,9.4H10.3z"/> +</g> +<g class="st1"> + <path class="st2" d="M15.8,6.5c0.4,0,0.7,0.1,1,0.3s0.5,0.5,0.7,0.8h0.1l0.4-1h0.7L17.3,13h-0.8l0.2-1.2h0 + c-0.7,0.9-1.4,1.3-2.2,1.3c-0.5,0-1-0.2-1.3-0.6s-0.5-0.9-0.5-1.6c0-0.8,0.1-1.6,0.4-2.3s0.7-1.2,1.1-1.6S15.2,6.5,15.8,6.5z + M14.7,12.3c0.4,0,0.8-0.2,1.1-0.5s0.7-0.8,0.9-1.4s0.4-1.2,0.4-1.7c0-0.4-0.1-0.7-0.3-1s-0.5-0.4-0.9-0.4c-0.4,0-0.8,0.2-1.1,0.5 + S14.2,8.6,14,9.2s-0.3,1.2-0.3,1.8c0,0.4,0.1,0.8,0.3,1S14.4,12.3,14.7,12.3z"/> +</g> +</svg> From 953398b486e9e866dd9330004aab092377bb5006 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 22:48:13 +0100 Subject: [PATCH 12/50] statusify main chat --- .../structures/_SearchBox.scss | 2 +- .../views/dialogs/_ChatInviteDialog.scss | 2 +- .../dialogs/_ConfirmUserActionDialog.scss | 2 +- .../views/dialogs/_EncryptedEventDialog.scss | 2 +- .../views/dialogs/_UnknownDeviceDialog.scss | 2 +- .../views/rooms/_MemberList.scss | 2 +- .../views/rooms/_MessageComposer.scss | 4 +- .../views/rooms/_SearchableEntityList.scss | 2 +- src/skins/vector/css/themes/_base.scss | 2 +- src/skins/vector/css/themes/_dark.scss | 1 + .../vector-web/structures/_RoomSubList.scss | 6 +-- .../vector/themes/status/css/_status.scss | 46 ++++++++++++++++--- 12 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 0f34f056..64dec826 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -38,7 +38,7 @@ limitations under the License. .mx_SearchBox_search { flex: 1 1 auto; width: 0px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 12px; margin-top: -2px; height: 24px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss index a950ea8d..84052cc9 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss @@ -28,7 +28,7 @@ limitations under the License. { height: 26px; font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; padding-left: 12px; padding-right: 12px; margin: 0 !important; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss index d12bcd37..b859d6bf 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss @@ -34,7 +34,7 @@ limitations under the License. } .mx_ConfirmUserActionDialog_reasonField { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 14px; color: $primary-fg-color; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss index cbc0195c..9fb2bf52 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss @@ -27,7 +27,7 @@ limitations under the License. border: solid 1px $accent-color; font-weight: 600; font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; margin-left: 0px; margin-right: 8px; padding-left: 1.5em; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss index 804b3f41..332cd571 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss @@ -49,7 +49,7 @@ limitations under the License. border: solid 1px $accent-color; font-weight: 600; font-size: 13px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; margin-left: 0px; margin-right: 8px; padding-left: 0.5em; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index dd41483b..83fc70ae 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_MemberList_query, .mx_GroupMemberList_query, .mx_GroupRoomList_query { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 14e75853..d95f6415 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -138,7 +138,7 @@ limitations under the License. max-height: 120px; overflow: auto; /* needed for FF */ - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; } /* hack for FF as vertical alignment of custom placeholder text is broken */ @@ -175,6 +175,8 @@ limitations under the License. .mx_MessageComposer_formatting { cursor: pointer; margin: 0 11px; + width: 24px; + height: 18px; } .mx_MessageComposer_formatbar_wrapper { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 6116dd92..37a66312 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -21,7 +21,7 @@ limitations under the License. } .mx_SearchableEntityList_query { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index a67d2001..2aa9baed 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -95,9 +95,9 @@ $rte-room-pill-color: #aaa; $roomtile-name-color: rgba(69, 69, 69, 0.8); $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); - $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #d3efe1; +$roomsublist-chevron-color: $accent-color; // ******************** diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index c22c5a44..a432f2c8 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -89,6 +89,7 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; +$roomsublist-chevron-color: $accent-color; // ******************** diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index 0d56d6c3..1a78e517 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -129,7 +129,7 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 6px solid $accent-color; + border-top: 6px solid $roomsublist-chevron-color; } .mx_RoomSubList_chevronUp { @@ -137,14 +137,14 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 6px solid $accent-color; + border-bottom: 6px solid $roomsublist-chevron-color; } .mx_RoomSubList_chevronRight { width: 0; height: 0; border-top: 5px solid transparent; - border-left: 6px solid $accent-color; + border-left: 6px solid $roomsublist-chevron-color; border-bottom: 5px solid transparent; } diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index b3680f7e..8eceb10e 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -78,7 +78,7 @@ $group-alert-color: #774f7e; $preview-bar-bg-color: #f7f7f7; // left-panel style muted accent color -$secondary-accent-color: #eaf5f0; +$secondary-accent-color: #586C7B; // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -137,12 +137,13 @@ $rte-room-pill-color: #aaa; // ******************** -$roomtile-name-color: rgba(69, 69, 69, 0.8); -$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); +$roomtile-name-color: #ffffff; +$roomtile-selected-bg-color: #465561; +$roomtile-focused-bg-color: #6d8597; -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: #d3efe1; +$roomsublist-label-fg-color: #ffffff; +$roomsublist-label-bg-color: $secondary-accent-color; +$roomsublist-chevron-color: #ffffff; // ******************** @@ -184,3 +185,36 @@ $progressbar-color: #000; letter-spacing: 1px; color: $accent-fg-color; } + +.mx_RoomSubList_label { + font-size: 13px; + font-family: $header-font-family; + letter-spacing: 1px; +} + +// FIXME: all these ! importants are horrid - we should instead go and define +// variables or something. +.mx_SearchBox_search { + color: #fff ! important; +} + +.mx_SearchBox_search::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.6) ! important; +} + +.mx_SearchBox_search::-moz-placeholder { + color: rgba(255, 255, 255, 0.6) ! important; +} + +.mx_RoomList_emptySubListTip { + font-size: 14px ! important; + border: 1.5px dashed rgba(0,0,0,0.2) ! important; + color: #fff ! important; + background-color: transparent ! important; + border-radius: 6px ! important; + margin-left: 6px ! important; + margin-right: 6px ! important; + margin-top: 8px ! important; + margin-bottom: 7px ! important; + padding: 8px ! important; +} \ No newline at end of file From a152eba0236e8cf2fbbd3bd53d193c4b53b22a3b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 22:55:32 +0100 Subject: [PATCH 13/50] fix panel-divider-color --- src/skins/vector/css/themes/_base.scss | 3 +++ src/skins/vector/css/themes/_dark.scss | 2 ++ src/skins/vector/css/vector-web/structures/_LeftPanel.scss | 2 +- src/skins/vector/themes/status/css/_status.scss | 2 ++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 2aa9baed..ec4a2f3c 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -95,10 +95,13 @@ $rte-room-pill-color: #aaa; $roomtile-name-color: rgba(69, 69, 69, 0.8); $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); + $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #d3efe1; $roomsublist-chevron-color: $accent-color; +$panel-divider-color: rgba(118, 207, 166, 0.2); + // ******************** // event tile lifecycle diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index a432f2c8..305330de 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -91,6 +91,8 @@ $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; $roomsublist-chevron-color: $accent-color; +$panel-divider-color: rgba(118, 207, 166, 0.2); + // ******************** // event tile lifecycle diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 418358dd..29786fad 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_LeftPanel .mx_BottomLeftMenu { order: 3; - border-top: 1px solid rgba(118, 207, 166, 0.2); + border-top: 1px solid $panel-divider-color; margin-left: 16px; /* gutter */ margin-right: 16px; /* gutter */ flex: 0 0 60px; diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 8eceb10e..48aa6f28 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -145,6 +145,8 @@ $roomsublist-label-fg-color: #ffffff; $roomsublist-label-bg-color: $secondary-accent-color; $roomsublist-chevron-color: #ffffff; +$panel-divider-color: rgba(0, 0, 0, 0.2); + // ******************** // event tile lifecycle From ea19096db368b4bde9f74f4c93b6155d30d2b859 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 25 Oct 2017 23:56:31 +0100 Subject: [PATCH 14/50] skin all the buttons --- src/skins/vector/css/_common.scss | 26 ++++--------------- .../structures/_UserSettings.scss | 23 +--------------- .../views/rooms/_MemberDeviceInfo.scss | 10 +------ .../views/rooms/_RoomHeader.scss | 16 ++---------- .../views/rooms/_RoomSettings.scss | 10 +------ src/skins/vector/css/themes/_base.scss | 24 +++++++++++++++++ .../vector/themes/status/css/_status.scss | 24 +++++++++++++++-- 7 files changed, 56 insertions(+), 77 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 0802c1ca..d5f2c0da 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -200,21 +200,13 @@ textarea { } .mx_Dialog button, .mx_Dialog input[type="submit"] { - border: 0px; - height: 36px; - border-radius: 40px; - border: solid 1px $accent-color; - font-weight: 600; - font-size: 14px; - font-family: $font-family; + @mixin mx_DialogButton; margin-left: 0px; margin-right: 8px; - padding-left: 1.5em; - padding-right: 1.5em; - outline: none; - cursor: pointer; + + // flip colours for the secondary ones color: $accent-color; - background-color: $primary-bg-color; + background-color: $accent-fg-color; /* align images in buttons (eg spinners) */ vertical-align: middle; @@ -282,16 +274,8 @@ textarea { color: $selection-fg-color; } -/** green button with rounded corners */ .mx_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - cursor: pointer; - display: inline; + @mixin mx_DialogButton_small; } .mx_button_row { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 66072538..3b9ab39d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -64,30 +64,9 @@ limitations under the License. } .mx_UserSettings_button { + @mixin mx_DialogButton; display: inline; - vertical-align: middle; - border: 0px; - border-radius: 36px; - font-weight: 400; - font-size: 16px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; margin: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; -} - -.mx_UserSettings_button.mx_UserSettings_buttonSmall { - height: 36px; - padding: 4px; - padding-left: 7px; - padding-right: 7px; - font-size: 12px; - margin-right: 5px; - line-height: 12px; } .mx_UserSettings_button.danger { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 2a5be325..4b1abead 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -26,15 +26,7 @@ limitations under the License. } .mx_MemberDeviceInfo_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - border: 0px; - font-size: 14px; - cursor: pointer; + @mixin mx_DialogButton_small; margin: 2px; flex: 1; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index b16cf8b6..475dcbea 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -42,22 +42,10 @@ limitations under the License. } .mx_RoomHeader_textButton { - height: 36px; - background-color: $accent-color; - border-radius: 36px; + @mixin mx_DialogButton; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - margin-top: -2px; - text-align: center; + margin-top: -5px; order: 2; - cursor: pointer; - -/* - flex: 0 0 90px; -*/ - padding-left: 12px; - padding-right: 12px; } .mx_RoomHeader_textButton_danger { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 9e269ac2..52013a6b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -22,17 +22,9 @@ limitations under the License. .mx_RoomSettings_leaveButton, .mx_RoomSettings_unbanButton { + @mixin mx_DialogButton; position: relative; - height: 36px; - background-color: $accent-color; - border-radius: 36px; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - text-align: center; - cursor: pointer; - padding-left: 12px; - padding-right: 12px; } .mx_RoomSettings_integrationsButton_error { position: relative; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index ec4a2f3c..785c246c 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -130,3 +130,27 @@ $lightbox-border-color: #ffffff; // unused? $progressbar-color: #000; + +// ***** Mixins! ***** + +@define-mixin mx_DialogButton { + vertical-align: middle; + border: 0px; + border-radius: 36px; + height: 33px; + font-weight: 400; + font-size: 16px; + color: $accent-fg-color; + background-color: $accent-color; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + height: auto; +} diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 48aa6f28..9b858d94 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -96,7 +96,7 @@ $event-selected-color: #f7f7f7; $primary-hairline-color: #e5e5e5; // used for the border of input text fields -$input-border-color: #f0f0f0; +$input-border-color: #c9cfd4; // apart from login forms, which have stronger border $strong-input-border-color: #c7c7c7; @@ -178,7 +178,6 @@ $progressbar-color: #000; @define-mixin mx_DialogButton { border-radius: 8px; - height: 45px; border: 1px solid rgba(199, 206, 209, 0.12); background-color: $accent-color; font-size: 13px; @@ -186,6 +185,22 @@ $progressbar-color: #000; text-transform: uppercase; letter-spacing: 1px; color: $accent-fg-color; + cursor: pointer; + outline: none; + padding: 14px; + box-sizing: border-box; + padding-left: 1.5em; + padding-right: 1.5em; + display: inline-block; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + height: auto; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 1em; + padding-right: 1em; } .mx_RoomSubList_label { @@ -219,4 +234,9 @@ $progressbar-color: #000; margin-top: 8px ! important; margin-bottom: 7px ! important; padding: 8px ! important; +} + +.mx_RoomDirectory_perm { + font-family: $header-font-family ! important; + background-color: #fff ! important; } \ No newline at end of file From f86b616769170e9d926de469c31bfe604e14ae83 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 01:38:07 +0100 Subject: [PATCH 15/50] status homepage --- config.sample.json | 1 + res/home-status.html | 184 +++++++++++++++++++++++ scripts/copy-res.js | 1 + src/skins/vector/themes/status/img/a.png | Bin 0 -> 3779 bytes src/skins/vector/themes/status/img/d.png | Bin 0 -> 3571 bytes src/skins/vector/themes/status/img/g.png | Bin 0 -> 3904 bytes src/skins/vector/themes/status/img/i.png | Bin 0 -> 3178 bytes src/skins/vector/themes/status/img/n.png | Bin 0 -> 3669 bytes 8 files changed, 186 insertions(+) create mode 100644 res/home-status.html create mode 100644 src/skins/vector/themes/status/img/a.png create mode 100644 src/skins/vector/themes/status/img/d.png create mode 100644 src/skins/vector/themes/status/img/g.png create mode 100644 src/skins/vector/themes/status/img/i.png create mode 100644 src/skins/vector/themes/status/img/n.png diff --git a/config.sample.json b/config.sample.json index a6378334..a4d854a6 100644 --- a/config.sample.json +++ b/config.sample.json @@ -7,6 +7,7 @@ "bug_report_endpoint_url": "https://riot.im/bugreports/submit", "enableLabs": true, "default_federate": true, + "welcomePageUrl": "home.html", "default_theme": "light", "roomDirectory": { "servers": [ diff --git a/res/home-status.html b/res/home-status.html new file mode 100644 index 00000000..f90d657d --- /dev/null +++ b/res/home-status.html @@ -0,0 +1,184 @@ +<style type="text/css"> + +/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid + * voodoo where we have to set display: none by default + */ + +.mx_HomePage_container { + text-align: center; + display: block ! important; + width: 690px; + margin: 20px; +} + +.mx_HomePage_header { + margin-top: 37px; + margin-left: 10px; + width: 670px; + box-sizing: border-box; + font-size: 18px; + background-color: #fff; + box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05); + border-radius: 5px; + padding: 20px 80px 20px 80px; + align-items: center; +} + +.mx_HomePage_header h1 { + font-size: 29px; + margin-bottom: 10px; +} + +.mx_HomePage_intro h2 { + margin-top: 32px; + font-size: 25px; + color: #49555F; +} + +.mx_HomePage_intro { + margin: auto; + width: 600px; + margin-top: 40px; + margin-bottom: 40px; + font-size: 18px; +} + +.mx_HomePage_coc { + font-size: 16px; +} + +.mx_HomePage_coc a { + color: #4360DF; +} + +.mx_HomePage_room, .mx_HomePage_telegram { + float: left; + background-color: #fff; + box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05); + border-radius: 5px; + margin: 10px; + width: 210px; + height: 250px; + display: flex; + flex-direction: column; + align-items: center; +} + +.mx_HomePage_telegram { + background-color: transparent; + border: 1px solid rgba(113, 129, 142, 0.2); + box-shadow: none; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + font-size: 16px; + line-height: 25px; + box-sizing: border-box; +} + +.mx_HomePage_telegram a { + text-transform: uppercase; + color: #4360DF; + font-size: 13px; + font-family: PostGrotesk-Medium; +} + +.mx_HomePage_room .mx_HomePage_icon { + margin-top: 24px; + margin-bottom: 16px; + width: 50px; + height: 50px; +} + +.mx_HomePage_room .mx_HomePage_name { + display: block; + font-family: PostGrotesk-Medium; + font-weight: 600; + font-size: 15px; + color: #49555F; + line-height: 25px; + margin: 0px 12px 0px 12px; +} + +.mx_HomePage_room .mx_HomePage_desc { + flex: 1; + display: block; + margin: 0px 12px 0px 12px; + font-size: 14px; + line-height: 20px; +} + +.mx_HomePage_button { + align-self: normal; + margin: 12px; + border-radius: 8px; + border: 1px solid rgba(199, 206, 209, 0.12); + background-color: #6CC1F6; + font-size: 13px; + font-family: PostGrotesk-Medium; + text-transform: uppercase; + letter-spacing: 1px; + color: #fff ! important; + cursor: pointer; + outline: none; + padding: 14px; + box-sizing: border-box; + padding-left: 1.5em; + padding-right: 1.5em; +} + +</style> + +<div class="mx_HomePage_container"> + <div class="mx_HomePage_header"> + <div> + <h1>Welcome to Status Community Chat, powered by Riot.</h1> + <p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p> + </div> + </div> + + <div class="mx_HomePage_intro"> + <h2>Our rooms</h2> + <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p> + <p class="mx_HomePage_coc">Before posting please refer to our <a href="#">Code of Conduct</a></p> + </div> + + + <div class="mx_HomePage_room"> + <img class="mx_HomePage_icon" src="themes/status/img/a.png"> + <span class="mx_HomePage_name">#announcements</span> + <span class="mx_HomePage_desc">Company wide announcements.</span> + <a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a> + </div> + <div class="mx_HomePage_room"> + <img class="mx_HomePage_icon" src="themes/status/img/i.png"> + <span class="mx_HomePage_name">#introductions</span> + <span class="mx_HomePage_desc">Newcomer introductions.</span> + <a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a> + </div> + <div class="mx_HomePage_room"> + <img class="mx_HomePage_icon" src="themes/status/img/g.png"> + <span class="mx_HomePage_name">#general</span> + <span class="mx_HomePage_desc">General discussions of Status.</span> + <a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a> + </div> + <div class="mx_HomePage_room"> + <img class="mx_HomePage_icon" src="themes/status/img/d.png"> + <span class="mx_HomePage_name">#dev-status</span> + <span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span> + <a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a> + </div> + <div class="mx_HomePage_room"> + <img class="mx_HomePage_icon" src="themes/status/img/n.png"> + <span class="mx_HomePage_name">#news-articles</span> + <span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span> + <a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a> + </div> + <div class="mx_HomePage_telegram"> + <p> + Interested in market and cryptocurrency type discussions? + </p> + <a href="#">Join Telegram</a> + </div> +</div> diff --git a/scripts/copy-res.js b/scripts/copy-res.js index c4b80709..1a685814 100755 --- a/scripts/copy-res.js +++ b/scripts/copy-res.js @@ -42,6 +42,7 @@ const INCLUDE_LANGS = [ const COPY_LIST = [ ["res/manifest.json", "webapp"], ["res/home.html", "webapp"], + ["res/home-status.html", "webapp"], ["res/home/**", "webapp/home"], ["res/{media,vector-icons}/**", "webapp"], ["res/flags/*", "webapp/flags/"], diff --git a/src/skins/vector/themes/status/img/a.png b/src/skins/vector/themes/status/img/a.png new file mode 100644 index 0000000000000000000000000000000000000000..defbcc4bcd9e0d1ccd9aaeb9b49fd733445ae0fe GIT binary patch literal 3779 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 literal 0 HcmV?d00001 diff --git a/src/skins/vector/themes/status/img/d.png b/src/skins/vector/themes/status/img/d.png new file mode 100644 index 0000000000000000000000000000000000000000..daeb0b0785863babae616972bed4be9acb9f8aaa GIT binary patch literal 3571 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 literal 0 HcmV?d00001 diff --git a/src/skins/vector/themes/status/img/g.png b/src/skins/vector/themes/status/img/g.png new file mode 100644 index 0000000000000000000000000000000000000000..f675a330229c983490030ae1a4dd30322d5c93ee GIT binary patch literal 3904 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 O0000<MNUMnLSTaWseH-+ literal 0 HcmV?d00001 diff --git a/src/skins/vector/themes/status/img/i.png b/src/skins/vector/themes/status/img/i.png new file mode 100644 index 0000000000000000000000000000000000000000..b63eeae13b90f0b5fdb4920b8835977111efb053 GIT binary patch literal 3178 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 QcK`qY07*qoM6N<$g0cP!n*aa+ literal 0 HcmV?d00001 diff --git a/src/skins/vector/themes/status/img/n.png b/src/skins/vector/themes/status/img/n.png new file mode 100644 index 0000000000000000000000000000000000000000..b8e33d41f7c9c4fc889a79d25ace2edaf6c1b176 GIT binary patch literal 3669 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 literal 0 HcmV?d00001 From 6212e805d230554beed926924f87241bd1e85fb8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 01:52:57 +0100 Subject: [PATCH 16/50] spell out fonts --- res/home-status.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/res/home-status.html b/res/home-status.html index f90d657d..4bbc1aa4 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -81,7 +81,8 @@ text-transform: uppercase; color: #4360DF; font-size: 13px; - font-family: PostGrotesk-Medium; + font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; + font-weight: 600; } .mx_HomePage_room .mx_HomePage_icon { @@ -93,7 +94,7 @@ .mx_HomePage_room .mx_HomePage_name { display: block; - font-family: PostGrotesk-Medium; + font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; font-weight: 600; font-size: 15px; color: #49555F; @@ -116,7 +117,8 @@ border: 1px solid rgba(199, 206, 209, 0.12); background-color: #6CC1F6; font-size: 13px; - font-family: PostGrotesk-Medium; + font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; + font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff ! important; From 13c1829cd4e0ba178942850266d79d2456cbb433 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 02:09:56 +0100 Subject: [PATCH 17/50] fix droptarget --- src/skins/vector/themes/status/css/_status.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 9b858d94..60bbcf9e 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -223,7 +223,8 @@ $progressbar-color: #000; color: rgba(255, 255, 255, 0.6) ! important; } -.mx_RoomList_emptySubListTip { +.mx_RoomList_emptySubListTip, +.mx_RoomDropTarget { font-size: 14px ! important; border: 1.5px dashed rgba(0,0,0,0.2) ! important; color: #fff ! important; From ebbb677f2c71c743a3f07447f280db5050511c8a Mon Sep 17 00:00:00 2001 From: David Baker <dave@matrix.org> Date: Thu, 26 Oct 2017 09:53:05 +0100 Subject: [PATCH 18/50] Update telegram link --- res/home-status.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/home-status.html b/res/home-status.html index 4bbc1aa4..0ce79739 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -181,6 +181,6 @@ <p> Interested in market and cryptocurrency type discussions? </p> - <a href="#">Join Telegram</a> + <a href="https://t.me/StatusNetworkChat">Join Telegram</a> </div> </div> From 8f0f34e7616a895a4339f45f65e9d0e1346fa352 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 14:42:41 +0100 Subject: [PATCH 19/50] fix buttons in other skins --- src/skins/vector/css/_common.scss | 5 ++--- src/skins/vector/css/themes/_base.scss | 9 +++++---- src/skins/vector/themes/status/css/_status.scss | 2 ++ 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index d5f2c0da..d1cd0992 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -205,11 +205,10 @@ textarea { margin-right: 8px; // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; color: $accent-color; background-color: $accent-fg-color; - - /* align images in buttons (eg spinners) */ - vertical-align: middle; } .mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index cc7e380d..b53cd905 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -137,12 +137,12 @@ $progressbar-color: #000; // ***** Mixins! ***** @define-mixin mx_DialogButton { + /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 36px; - height: 33px; - font-weight: 400; - font-size: 16px; + font-family: $font-family; + font-size: 14px; color: $accent-fg-color; background-color: $accent-color; width: auto; @@ -155,5 +155,6 @@ $progressbar-color: #000; @define-mixin mx_DialogButton_small { @mixin mx_DialogButton; - height: auto; + font-size: 15px; + padding: 0px 1.5em 0px 1.5em; } diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 60bbcf9e..922ac03b 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -177,6 +177,8 @@ $lightbox-border-color: #ffffff; $progressbar-color: #000; @define-mixin mx_DialogButton { + /* align images in buttons (eg spinners) */ + vertical-align: middle; border-radius: 8px; border: 1px solid rgba(199, 206, 209, 0.12); background-color: $accent-color; From a8f2980dcca2b636e36006c89e23e5e615fbce34 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 17:25:23 +0100 Subject: [PATCH 20/50] coc --- res/home-status.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/home-status.html b/res/home-status.html index 0ce79739..95cb64a2 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -143,7 +143,7 @@ <div class="mx_HomePage_intro"> <h2>Our rooms</h2> <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p> - <p class="mx_HomePage_coc">Before posting please refer to our <a href="#">Code of Conduct</a></p> + <p class="mx_HomePage_coc">Before posting please refer to our <a href="https://wiki.status.im/Code_of_conduct">Code of Conduct</a></p> </div> From e5b1ded7e345d160369f53c50ed03bc21d4b4fdd Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 17:31:36 +0100 Subject: [PATCH 21/50] fix default colour of loginbox text --- src/skins/vector/themes/status/css/_StatusLogin.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index a3f3b0ef..b663258d 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -89,6 +89,7 @@ limitations under the License. padding-left: 10px; padding-right: 10px; border-radius: 8px; + color: $form-fg-color; background-color: $form-bg-color; background-image: url(../../themes/status/img/dot.svg); box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); From ad9d78684ea36e30a3c02a546760b53093729d4d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 18:08:36 +0100 Subject: [PATCH 22/50] tweak emptySubListTip visuals --- .../vector/css/matrix-react-sdk/views/rooms/_RoomList.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index 35787ca0..d8a8d58a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -50,10 +50,11 @@ limitations under the License. color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; + line-height: 16px; } .mx_RoomList_emptySubListTip .mx_RoleButton { - vertical-align: -3px; + vertical-align: -2px; } .mx_RoomList_headerButtons { From b9cf2c6b6ccdabe712b293ebe8f6b89be4506b61 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 18:08:42 +0100 Subject: [PATCH 23/50] remove 'return to app' test --- test/app-tests/loading.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index 21619876..a7e7c985 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -546,6 +546,8 @@ describe('loading:', function () { ); }); + /* + // ILAG renders this obsolete. I think. it('should allow us to return to the app', function() { const login = ReactTestUtils.findRenderedComponentWithType( matrixChat, sdk.getComponent('structures.login.Login') @@ -568,6 +570,7 @@ describe('loading:', function () { matrixChat, sdk.getComponent('structures.HomePage')); }); }); + */ }); }); From ca74b098671b0c666fb437eb78b5ca6af36b6233 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 18:27:34 +0100 Subject: [PATCH 24/50] fix fugly noperm error --- .../css/matrix-react-sdk/views/rooms/_MessageComposer.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index d95f6415..c1af9e36 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -55,10 +55,12 @@ limitations under the License. .mx_MessageComposer_noperm_error { width: 100%; height: 60px; - text-align: center; font-style: italic; color: $greyed-fg-color; -} + display: flex; + align-items: center; + justify-content: center; +}} .mx_MessageComposer_input_wrapper { flex: 1; From 50b348c68e41cd34b3a7f2e631e358c4f1f0ca74 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Thu, 26 Oct 2017 18:59:05 +0100 Subject: [PATCH 25/50] try for slightly prettier redaction --- .../views/rooms/_EventTile.scss | 23 +++++++++---------- .../views/rooms/_MessageComposer.scss | 2 +- src/skins/vector/css/themes/_base.scss | 3 ++- src/skins/vector/css/themes/_dark.scss | 3 ++- .../vector/themes/status/css/_status.scss | 3 ++- 5 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index bb0ca959..cfc46e85 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -156,18 +156,17 @@ limitations under the License. .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody { display: block; width: 100%; - height: 36px; - background-image: $event-redacted-img; - background-repeat: no-repeat; - background-size: contain; -} - -.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line { - /* - Prevent changing colour of the background because - $event-redacted-img matches $primary-bg-color - */ - background-color: initial !important; + height: 22px; + width: 250px; + border-radius: 11px; + background: repeating-linear-gradient( + -45deg, + $event-redacted-fg-color, + $event-redacted-fg-color 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px $event-redacted-border-color inset; } .mx_EventTile_highlight, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index c1af9e36..4a84d161 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -60,7 +60,7 @@ limitations under the License. display: flex; align-items: center; justify-content: center; -}} +} .mx_MessageComposer_input_wrapper { flex: 1; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index b53cd905..6df64cb8 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -113,7 +113,8 @@ $event-sending-color: #ddd; $event-notsent-color: #f44; // event redaction -$event-redacted-img: url('../../img/redacted.jpg'); +$event-redacted-fg-color: #e2e2e2; +$event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 8e6a65fe..73f1bafa 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -104,7 +104,8 @@ $event-sending-color: #888; $event-notsent-color: #f44; // event redaction -$event-redacted-img: url('../../img/redacted-dark.jpg'); +$event-redacted-fg-color: #606060; +$event-redacted-border-color: #000000; // event timestamp $event-timestamp-color: #acacac; diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 922ac03b..e8bfae2f 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -155,7 +155,8 @@ $event-sending-color: #ddd; $event-notsent-color: #f44; // event redaction -$event-redacted-img: url('../../img/redacted.jpg'); +$event-redacted-fg-color: #e2e2e2; +$event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; From 468f8ccab812c106c9cb2265ad07386199af0462 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 00:02:52 +0100 Subject: [PATCH 26/50] dirty hack to make FF work --- src/vector/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/index.html b/src/vector/index.html index 864377ee..29052039 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -26,7 +26,7 @@ if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); %> - <link rel="alternate stylesheet" title="<%= title %>" + <link rel="<% if (match[1] !== 'status') { %>alternate<% } %> stylesheet" title="<%= title %>" href="<%= file %>"> <% } else { %> <link rel="stylesheet" href="<%= file %>"> From 26d142f89334d4186d0c0525c1195e56b40bda7d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 00:14:12 +0100 Subject: [PATCH 27/50] fix snafu on login submit button --- .../css/matrix-react-sdk/structures/login/_Login.scss | 9 ++------- src/skins/vector/themes/status/css/_StatusLogin.scss | 1 - 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index dca14225..aae572e8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -79,15 +79,10 @@ limitations under the License. } .mx_Login_submit { + @mixin mx_DialogButton; + width: 100%; margin-top: 35px; margin-bottom: 24px; - width: 100%; - border-radius: 40px; - height: 40px; - border: 0px; - background-color: $accent-color; - font-size: 15px; - color: $accent-fg-color; } .mx_Login_submit:disabled { diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index b663258d..c9af7c8a 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -153,7 +153,6 @@ limitations under the License. } .mx_Login_submit { - @mixin mx_DialogButton; width: 200px; margin-top: 13px; margin-bottom: 18px; From 1798bff8f572294c1a2cf1951c1a4fc0bfbfa4a1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 01:02:43 +0100 Subject: [PATCH 28/50] cosmetic fixes & hoverovers --- src/skins/vector/css/_common.scss | 8 ++++++++ .../matrix-react-sdk/structures/_UserSettings.scss | 4 ++++ .../css/matrix-react-sdk/structures/login/_Login.scss | 7 +++++-- .../views/rooms/_MemberDeviceInfo.scss | 4 ++++ .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss | 4 ++++ .../matrix-react-sdk/views/rooms/_RoomSettings.scss | 6 ++++++ src/skins/vector/css/themes/_base.scss | 3 +++ src/skins/vector/themes/status/css/_StatusLogin.scss | 11 ++++++++--- src/skins/vector/themes/status/css/_status.scss | 11 +++++++++++ 9 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index d1cd0992..876c5b97 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -211,6 +211,10 @@ textarea { background-color: $accent-fg-color; } +.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover { + @mixin mx_DialogButton_hover; +} + .mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus { filter: brightness($focus-brightness); } @@ -277,6 +281,10 @@ textarea { @mixin mx_DialogButton_small; } +.mx_textButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_button_row { margin-top: 69px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 3b9ab39d..f6341dd6 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -69,6 +69,10 @@ limitations under the License. margin: auto; } +.mx_UserSettings_button:hover { + @mixin mx_DialogButton_hover; +} + .mx_UserSettings_button.danger { background-color: $warning-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index aae572e8..84b8306a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -85,6 +85,10 @@ limitations under the License. margin-bottom: 24px; } +.mx_Login_submit:hover { + @mixin mx_DialogButton_hover; +} + .mx_Login_submit:disabled { opacity: 0.3; } @@ -131,8 +135,7 @@ limitations under the License. } .mx_Login_forgot { - font-size: 13px; - opacity: 0.8; + font-size: 15px; } .mx_Login_forgot:link { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 4b1abead..5888820e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -31,6 +31,10 @@ limitations under the License. flex: 1; } +.mx_MemberDeviceInfo_textButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_MemberDeviceInfo_deviceId { font-size: 13px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 5b78703a..8dbad92a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -48,6 +48,10 @@ limitations under the License. order: 2; } +.mx_RoomHeader_textButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_RoomHeader_textButton_danger { background-color: $warning-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 52013a6b..4013af4c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -26,6 +26,12 @@ limitations under the License. position: relative; margin-right: 8px; } + +.mx_RoomSettings_leaveButton:hover, +.mx_RoomSettings_unbanButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_RoomSettings_integrationsButton_error { position: relative; cursor: not-allowed; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 6df64cb8..a8bb4d89 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -154,6 +154,9 @@ $progressbar-color: #000; display: inline-block; } +@define-mixin mx_DialogButton_hover { +} + @define-mixin mx_DialogButton_small { @mixin mx_DialogButton; font-size: 15px; diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index c9af7c8a..fcbc2e17 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -102,7 +102,7 @@ limitations under the License. width: 74px; height: 74px; border-radius: 37px; - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); + box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2); position: absolute; top: -36px; left: 50%; @@ -134,6 +134,12 @@ limitations under the License. font-weight: 300; font-size: 15px; margin-bottom: 14px; + transition: background-color .2s ease; + } + + .mx_Login_field:focus { + border: 1px solid transparent; + background-color: $form-field-bg-hover-color; } .mx_Login_field::-webkit-input-placeholder { @@ -190,8 +196,7 @@ limitations under the License. .mx_Login_forgot { display: block; - font-size: 13px; - opacity: 0.8; + font-size: 15px; } .mx_Login_forgot:link { diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index e8bfae2f..fa2a64c7 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -37,6 +37,10 @@ a { text-decoration: none; } +a:hover { + text-decoration: underline; +} + h1,h2,h3,h4,h5 { color: $header-color; font-family: $header-font-family; @@ -49,6 +53,7 @@ $form-bg-color: $callout-color; $form-fg-color: #ffffff; $form-field-bg-color: rgba(244, 242, 247, 0.12); +$form-field-bg-hover-color: rgba(255, 255, 255, 0.2); $form-field-fg-color: #ffffff; // ***** End of Status theme specifics ****** @@ -63,6 +68,7 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; $accent-color: #6CC1F6; +$accent-hover-color: #84cfff; $selection-fg-color: $primary-bg-color; @@ -195,6 +201,11 @@ $progressbar-color: #000; padding-left: 1.5em; padding-right: 1.5em; display: inline-block; + transition: background-color .2s ease; +} + +@define-mixin mx_DialogButton_hover { + background-color: $accent-hover-color; } @define-mixin mx_DialogButton_small { From b65ee5f28e2ac8d6c519bbc793c5c00e6ecd05ea Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 01:09:46 +0100 Subject: [PATCH 29/50] tg hoverover --- res/home-status.html | 6 ++++++ src/skins/vector/themes/status/css/_StatusLogin.scss | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/res/home-status.html b/res/home-status.html index 95cb64a2..7d50470a 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -83,6 +83,12 @@ font-size: 13px; font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; font-weight: 600; + opacity: 1.0; + transition: opacity .2s ease; +} + +.mx_HomePage_telegram a:hover { + opacity: 0.5; } .mx_HomePage_room .mx_HomePage_icon { diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index fcbc2e17..d652b934 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -77,6 +77,13 @@ limitations under the License. letter-spacing: 1px; font-size: 13px; text-transform: uppercase; + opacity: 1.0; + transition: opacity .2s ease; + } + + .mx_StatusLogin_footer_cta:hover { + opacity: 0.5; + text-decoration: none; } // overrides of .mx_Login From 3ffebfbf0b54f4794e6879445440c63c51b172b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 01:24:11 +0100 Subject: [PATCH 30/50] fix spacing of login aux buttons --- src/skins/vector/themes/status/css/_StatusLogin.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index d652b934..603b7ece 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -165,10 +165,14 @@ limitations under the License. opacity: 0.3; } + .mx_Login_prompt { + font-size: 16px; + } + .mx_Login_submit { width: 200px; margin-top: 13px; - margin-bottom: 18px; + margin-bottom: 10px; } .mx_Login_submit:disabled { @@ -176,6 +180,7 @@ limitations under the License. } .mx_Login_create { + margin-top: 10px; display: block; text-align: center; width: 100%; From ca0092469bd7477d6c78862d04ba0cee367e810a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 01:31:14 +0100 Subject: [PATCH 31/50] tweak spacing for login --- src/skins/vector/themes/status/css/_StatusLogin.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 603b7ece..0cced779 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -91,7 +91,7 @@ limitations under the License. .mx_Login_box { width: 330px; min-height: initial; - padding-top: 40px; + padding-top: 50px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; @@ -126,6 +126,7 @@ limitations under the License. text-align: center; color: $form-fg-color; font-size: 25px; + margin-top: 5px; margin-bottom: 24px; } @@ -170,7 +171,8 @@ limitations under the License. } .mx_Login_submit { - width: 200px; + min-width: 200px; + width: auto; margin-top: 13px; margin-bottom: 10px; } From c26aaa8d01e49fc0abeae523c67f24fd7313cedd Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 01:35:06 +0100 Subject: [PATCH 32/50] revert previous & fix font size --- src/skins/vector/themes/status/css/_StatusLogin.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 0cced779..e6a0584f 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -91,12 +91,13 @@ limitations under the License. .mx_Login_box { width: 330px; min-height: initial; - padding-top: 50px; + padding-top: 40px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; border-radius: 8px; color: $form-fg-color; + font-size: 16px; background-color: $form-bg-color; background-image: url(../../themes/status/img/dot.svg); box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); @@ -126,7 +127,6 @@ limitations under the License. text-align: center; color: $form-fg-color; font-size: 25px; - margin-top: 5px; margin-bottom: 24px; } From ce2d40b775958f122a808684b8231e1aa4260e51 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 10:47:15 +0100 Subject: [PATCH 33/50] more tweaks from Denis --- src/skins/vector/themes/status/css/_StatusLogin.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index e6a0584f..4bf46179 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -98,6 +98,7 @@ limitations under the License. border-radius: 8px; color: $form-fg-color; font-size: 16px; + line-height: 25px; background-color: $form-bg-color; background-image: url(../../themes/status/img/dot.svg); box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); @@ -133,7 +134,7 @@ limitations under the License. .mx_Login_field { width: 260px; height: 27px; - padding: 9px 20px 9px 20px; + padding: 8px 20px 10px 20px; border-radius: 10px; text-align: left; border: 1px solid transparent; From 7e9b63822bb0560f1cdca4f35a5c3bc9d8a543a6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 11:11:59 +0100 Subject: [PATCH 34/50] fix visited state of links --- .../themes/status/css/_StatusLogin.scss | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 4bf46179..3619d612 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -191,24 +191,13 @@ limitations under the License. opacity: 1.0; } - .mx_Login_create:link { + .mx_Login_create:link, + .mx_Login_create:hover, + .mx_Login_create:visited + { color: $form-fg-color; } - .mx_Login_links { - display: block; - text-align: center; - margin-top: 10px; - margin-bottom: 10px; - width: 100%; - font-size: 13px; - opacity: 0.8; - } - - .mx_Login_links a:link { - color: $primary-fg-color; - } - .mx_Login_forgot { display: block; font-size: 15px; From d4696345d124d5c95bcca2aa5b5c8930cf6e598f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 12:17:04 +0100 Subject: [PATCH 35/50] fix more visited state of links --- src/skins/vector/themes/status/css/_StatusLogin.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 3619d612..8c7d9b26 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -203,7 +203,10 @@ limitations under the License. font-size: 15px; } - .mx_Login_forgot:link { + .mx_Login_forgot:link, + .mx_Login_forgot:hover, + .mx_Login_forgot:visited + { color: $form-fg-color; } From 8ad9728bef511255845eec8d8d48810194101981 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 14:23:33 +0100 Subject: [PATCH 36/50] css for HS userid warnings --- src/skins/vector/themes/status/css/_StatusLogin.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 8c7d9b26..68727274 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -213,7 +213,7 @@ limitations under the License. .mx_Login_error { color: $warning-color; font-size: 18px; - width: 250px; + width: 300px; height: 44px; display: flex; justify-content: center; @@ -224,4 +224,9 @@ limitations under the License. margin-bottom: 16px; } + .mx_Login_smallError { + font-size: 13px; + line-height: initial; + } + } From 5063fef4f5de8c22c778710409f72006aa3a9748 Mon Sep 17 00:00:00 2001 From: David Baker <dave@matrix.org> Date: Fri, 27 Oct 2017 19:08:35 +0100 Subject: [PATCH 37/50] Redirect to instructions page if user on mobile --- src/vector/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index f775d1b3..4a44cbdc 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -250,16 +250,20 @@ async function loadApp() { if (!preventRedirect) { if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { - if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { + window.location = "https://status.im/join-riot.html"; + return; + /*if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067"; return; - } + }*/ } else if (/Android/.test(navigator.userAgent)) { - if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { + window.location = "https://status.im/join-riot.html"; + return; + /*if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha"; return; - } + }*/ } } From b87fad991f0b2471d729411ffebf7f7636d8451f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 22:47:51 +0100 Subject: [PATCH 38/50] get rid of hardcoded colour >:( --- .../vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss | 2 +- src/skins/vector/css/themes/_base.scss | 1 + src/skins/vector/css/themes/_dark.scss | 1 + src/skins/vector/themes/status/css/_status.scss | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss index 320efda0..ee2d9c19 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss @@ -31,5 +31,5 @@ limitations under the License. .mx_BaseAvatar_image { border-radius: 40px; vertical-align: top; - background-color: #fff; + background-color: $avatar-bg-color; } diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index a8bb4d89..ce9bec30 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -68,6 +68,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; $avatar-initial-color: #ffffff; +$avatar-bg-color: #ffffff; $h3-color: #3d3b39; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 73f1bafa..987ce066 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -60,6 +60,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; $avatar-initial-color: #2d2d2d; +$avatar-bg-color: #ffffff; $h3-color: $primary-fg-color; diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index fa2a64c7..409bca66 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -116,6 +116,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; $avatar-initial-color: #ffffff; +$avatar-bg-color: transparent; $h3-color: #3d3b39; From 5d3caf81577039ec81bda93a18614c8538d7b214 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Fri, 27 Oct 2017 23:45:10 +0100 Subject: [PATCH 39/50] tweak badges --- src/skins/vector/themes/status/css/_status.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 409bca66..6b205b58 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -255,4 +255,11 @@ $progressbar-color: #000; .mx_RoomDirectory_perm { font-family: $header-font-family ! important; background-color: #fff ! important; -} \ No newline at end of file +} + +.mx_RoomTile_badge, +.mx_RoomSubList_badge { + height: 12px ! important; + padding-top: 1px ! important; + padding-bottom: 1px ! important; +} From 1b7e42f5e8fece10be6e5dde81fcbbda2c9cd940 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Tue, 31 Oct 2017 22:45:19 +0000 Subject: [PATCH 40/50] add og:image --- src/skins/vector/img/logos/riot-im-logo-1.png | Bin 0 -> 14121 bytes src/vector/index.html | 1 + 2 files changed, 1 insertion(+) create mode 100644 src/skins/vector/img/logos/riot-im-logo-1.png diff --git a/src/skins/vector/img/logos/riot-im-logo-1.png b/src/skins/vector/img/logos/riot-im-logo-1.png new file mode 100644 index 0000000000000000000000000000000000000000..768679da66cf043898dfefbff7fb6f6cb0b5f362 GIT binary patch literal 14121 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 H#zFrFTbOL! literal 0 HcmV?d00001 diff --git a/src/vector/index.html b/src/vector/index.html index 29052039..a411cb79 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,6 +20,7 @@ <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png"> <meta name="msapplication-config" content="vector-icons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> + <meta property="og:image" content="img/logos/riot-im-logo-1.png" /> <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); From df58bdd5291b7e401ba01adf8fce0639d9ef6ff4 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Tue, 31 Oct 2017 22:56:57 +0000 Subject: [PATCH 41/50] use absolute url for og:image --- src/vector/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/index.html b/src/vector/index.html index a411cb79..e32f6313 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,7 +20,7 @@ <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png"> <meta name="msapplication-config" content="vector-icons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> - <meta property="og:image" content="img/logos/riot-im-logo-1.png" /> + <meta property="og:image" content="https://chat.status.im/img/logos/riot-im-logo-1.png" /> <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); From 8f289519e10da664c0bbc6341541e28118623912 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 1 Nov 2017 15:25:23 +0000 Subject: [PATCH 42/50] fix chevron cosmetics --- src/skins/vector/themes/status/css/_status.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 6b205b58..fc620586 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -263,3 +263,7 @@ $progressbar-color: #000; padding-top: 1px ! important; padding-bottom: 1px ! important; } + +.mx_RoomSubList_chevron { + top: 8px ! important; +} \ No newline at end of file From adedf23cfb8e94894e5dc8ded2a031160007da63 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sat, 4 Nov 2017 22:19:06 +0000 Subject: [PATCH 43/50] remove unnamespaced CSS fail --- src/components/views/globals/NewVersionBar.js | 2 +- src/skins/vector/css/_common.scss | 5 ----- .../vector/css/vector-web/views/globals/_MatrixToolbar.scss | 4 ++++ 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/views/globals/NewVersionBar.js b/src/components/views/globals/NewVersionBar.js index f56d1a51..2aedf392 100644 --- a/src/components/views/globals/NewVersionBar.js +++ b/src/components/views/globals/NewVersionBar.js @@ -42,7 +42,7 @@ export default React.createClass({ const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog'); Modal.createTrackedDialog('Display release notes', '', QuestionDialog, { title: _t("What's New"), - description: <pre className="changelog_text">{releaseNotes}</pre>, + description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>, button: _t("Update"), onFinished: (update) => { if(update && PlatformPeg.get()) { diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index c1eb8fab..57043954 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -294,11 +294,6 @@ textarea { margin-top: 69px; } -.changelog_text { - // why on earth is this needed? and with the wrong namespacing? >:( - font-family: $font-family; -} - .mx_Beta { color: red; margin-right: 10px; diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 1a7b1c16..be69b15f 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -56,3 +56,7 @@ limitations under the License. .mx_MatrixToolbar_action { margin-right: 16px; } + +.mx_MatrixToolbar_changelog { + white-space: pre; +} \ No newline at end of file From 9a0bbfb8715ba793590b1820413a7e8503fe1c11 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sat, 4 Nov 2017 23:43:34 +0000 Subject: [PATCH 44/50] tint the colours in the theme rather than hardcode vector green --- src/skins/vector/css/_common.scss | 14 ++++++++++++++ src/vector/index.html | 2 ++ 2 files changed, 16 insertions(+) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 57043954..8a333071 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -1,6 +1,7 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +Copyright 2017 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -118,6 +119,19 @@ textarea { transition: height 120ms ease-out ! important; } +// These are magic constants which are excluded from tinting, to let themes +// (which only have CSS, unlike skins) tell the app what their non-tinted +// colourscheme is by inspecting the stylesheet DOM. +// +// They are not used for layout!! +#mx_theme_accentColor { + color: $accent-color; +} + +#mx_theme_secondaryAccentColor { + color: $secondary-accent-color; +} + .mx_Dialog_wrapper { position: fixed; z-index: 4000; diff --git a/src/vector/index.html b/src/vector/index.html index e32f6313..14efb0b2 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -73,5 +73,7 @@ <source src="media/busy.mp3" type="audio/mpeg" /> </audio> <audio id="remoteAudio"/> + <!-- let CSS themes pass constants to the app --> + <div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div> </body> </html> From 555847e5e9adc30028ce55837169afe48e72d409 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sun, 5 Nov 2017 00:40:13 +0000 Subject: [PATCH 45/50] make default theme actually work --- src/vector/index.html | 3 +-- src/vector/index.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index 14efb0b2..36047aca 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -27,8 +27,7 @@ if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); %> - <link rel="<% if (match[1] !== 'status') { %>alternate<% } %> stylesheet" title="<%= title %>" - href="<%= file %>"> + <link rel="stylesheet" disabled title="<%= title %>" href="<%= file %>"> <% } else { %> <link rel="stylesheet" href="<%= file %>"> <% } diff --git a/src/vector/index.js b/src/vector/index.js index 4a44cbdc..5e3718ea 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -294,8 +294,8 @@ async function loadApp() { const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); if (match) { if (match[1] === (configJson.default_theme || 'light')) { - // remove the alternative flag off the stylesheet - a.setAttribute("rel", "stylesheet"); + // remove the disabled flag off the stylesheet + a.removeAttribute("disabled"); } } } From d14285eb0868123ccb4cd8543674a17d5c46f2df Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sun, 5 Nov 2017 02:20:12 +0000 Subject: [PATCH 46/50] fix secondary accent color tinting --- src/skins/vector/themes/status/css/_status.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index fc620586..2962ee9d 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -86,6 +86,13 @@ $preview-bar-bg-color: #f7f7f7; // left-panel style muted accent color $secondary-accent-color: #586C7B; +// stop the tinter trying to change the secondary accent color +// by overriding the key to something untintable +// XXX: this is a bit of a hack. +#mx_theme_secondaryAccentColor { + color: #586C7C ! important; // deliberately off by one +} + // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; From 2fa1f16284d6307f70d668838c120c1073d80f7e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Wed, 8 Nov 2017 06:55:30 -0800 Subject: [PATCH 47/50] use new theme-aware tinter api --- src/vector/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 5e3718ea..9e05259a 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -78,6 +78,7 @@ import {parseQs, parseQsFromFragment} from './url_utils'; import Platform from './platform'; import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; +import Tinter from 'matrix-react-sdk/lib/Tinter'; var lastLocationHashSet = null; @@ -288,19 +289,25 @@ async function loadApp() { // as quickly as we possibly can, set a default theme... const styleElements = Object.create(null); let a; + const theme = configJson.default_theme || 'light'; for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) { const href = a.getAttribute("href"); // shouldn't we be using the 'title' tag rather than the href? const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); if (match) { - if (match[1] === (configJson.default_theme || 'light')) { + if (match[1] === theme) { // remove the disabled flag off the stylesheet a.removeAttribute("disabled"); + + // in case the Tinter.tint() in MatrixChat fires before the + // CSS has actually loaded (which in practice happens) + a.onload = () => { + Tinter.setTheme(theme); + Tinter.tint(); + }; } } } - // XXX: do we also need to call MatrixChat.setTheme here to do any random fixups (e.g. svg tint) - if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) { console.log('User has previously accepted risks in using an unsupported browser'); From 5abee4fddc0e448adc9b95ad1c3e0709a8af1094 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Sat, 11 Nov 2017 23:47:03 +0000 Subject: [PATCH 48/50] replace some of the status.im theme with general config options --- config.sample.json | 4 ++++ src/components/views/login/VectorLoginFooter.js | 1 + src/vector/index.js | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/config.sample.json b/config.sample.json index 9e69c1c3..016517cd 100644 --- a/config.sample.json +++ b/config.sample.json @@ -1,6 +1,10 @@ { "default_hs_url": "https://matrix.org", "default_is_url": "https://vector.im", + "disable_custom_urls": false, + "disable_guests": false, + "disable_login_language_selector": false, + "disable_3pid_login": false, "brand": "Riot", "integrations_ui_url": "https://scalar.vector.im/", "integrations_rest_url": "https://scalar.vector.im/api", diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js index 5a97f524..e5243f8e 100644 --- a/src/components/views/login/VectorLoginFooter.js +++ b/src/components/views/login/VectorLoginFooter.js @@ -27,6 +27,7 @@ module.exports = React.createClass({ }, render: function() { + // FIXME: replace this with a proper Status skin if (UserSettingsStore.getTheme() === 'status') return <div/>; return ( diff --git a/src/vector/index.js b/src/vector/index.js index 9e05259a..0577ac82 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -332,7 +332,7 @@ async function loadApp() { config={configJson} realQueryParams={params} startingFragmentQueryParams={fragparts.params} - enableGuest={true} + enableGuest={!configJson.disable_guests} onTokenLoginCompleted={onTokenLoginCompleted} initialScreenAfterLogin={getScreenFromLocation(window.location)} defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()} From 0a80774066916eff424a72933d2348a7ffb6f697 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Mon, 13 Nov 2017 16:26:26 +0000 Subject: [PATCH 49/50] unstatusify redirects --- src/vector/index.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 0577ac82..b85e90f6 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -251,20 +251,28 @@ async function loadApp() { if (!preventRedirect) { if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { - window.location = "https://status.im/join-riot.html"; - return; - /*if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { - window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067"; + if (UserSettingsStore.getTheme() === 'status') { + window.location = "https://status.im/join-riot.html"; return; - }*/ + } + else { + if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { + window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067"; + return; + } + } } else if (/Android/.test(navigator.userAgent)) { - window.location = "https://status.im/join-riot.html"; - return; - /*if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { - window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha"; + if (UserSettingsStore.getTheme() === 'status') { + window.location = "https://status.im/join-riot.html"; return; - }*/ + } + else { + if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) { + window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha"; + return; + } + } } } From 809dd0856ff8cfcb3f1d0c01e870606172b1bd1c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson <matthew@matrix.org> Date: Mon, 13 Nov 2017 16:35:39 +0000 Subject: [PATCH 50/50] add more fixmes --- src/vector/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/vector/index.js b/src/vector/index.js index b85e90f6..18c0d74f 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -251,6 +251,7 @@ async function loadApp() { if (!preventRedirect) { if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { + // FIXME: ugly status hardcoding if (UserSettingsStore.getTheme() === 'status') { window.location = "https://status.im/join-riot.html"; return; @@ -263,6 +264,7 @@ async function loadApp() { } } else if (/Android/.test(navigator.userAgent)) { + // FIXME: ugly status hardcoding if (UserSettingsStore.getTheme() === 'status') { window.location = "https://status.im/join-riot.html"; return;