From 6fa2d356300767c17d2bd26968b8cad4c6089455 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 a4477ea1ed..a63783348b 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 49c2979ed1..864377eea4 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'; %> - <% } else { %> diff --git a/src/vector/index.js b/src/vector/index.js index a08397ce5a..f775d1b3cd 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 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 bf742cd0c5..0802c1cab2 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 a13c517bd0..a67d200158 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 0000000000..b1d8b0ef2e --- /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 0000000000..391026b2b7 --- /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 5d4fef72a9..1e134495ce 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 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 060709b82e..6d367b04e8 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 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 b461d030fd..c4b80709ae 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 391026b2b7..0000000000 --- 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 0000000000..38c8a5ef5c --- /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 0000000000..d2ccee0d27 --- /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 0000000000..09f5c78f17 --- /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 0000000000..d7900145ed --- /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 1e134495ce..2df82d9b23 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 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 0000000000..bbaf18a284 --- /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 b04dcdb597..5a97f524df 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
; + return (
blog  ·   diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js index 3aa8811c40..71093a96c2 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 ( -
- Riot +
+
+ Riot +
); } 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 86ab39be1b..63f483a56e 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 b1d8b0ef2e..0000000000 --- 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 38c8a5ef5c..7cdc69394b 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 d2ccee0d27..eb8f1d941b 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 0000000000..68e4a77a5c --- /dev/null +++ b/src/skins/vector/themes/status/img/logo.svg @@ -0,0 +1,16 @@ + + + + Status logo + Created with Sketch. + + + + + \ No newline at end of file From b053f08991260755cb2015313bdcbe988363a83d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 7cdc69394b..a32251f517 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 eb8f1d941b..ceffa7a919 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 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 63f483a56e..dca1422534 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 a32251f517..44a9e0a2e6 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 ceffa7a919..b3680f7e5c 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 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 44a9e0a2e6..ad64546f87 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 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 0000000000..45df23c049 --- /dev/null +++ b/src/skins/vector/themes/status/img/dot.svg @@ -0,0 +1 @@ +Artboard \ No newline at end of file From 9d86716b0f958c72e785af835ae94ca93f343c66 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 ad64546f87..a3f3b0ef3b 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 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 d3fc3f5f54..d697010d40 100644 --- a/src/skins/vector/img/button-text-formatting.svg +++ b/src/skins/vector/img/button-text-formatting.svg @@ -1,18 +1,21 @@ - - - - F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9 - Created with sketchtool. - - - - - - - A - a - - - - - \ No newline at end of file + + + + + + + + + + + + From 953398b486e9e866dd9330004aab092377bb5006 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 0f34f056a5..64dec8260a 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 a950ea8d12..84052cc9a7 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 d12bcd3712..b859d6bf4d 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 cbc0195cac..9fb2bf525e 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 804b3f419e..332cd571d9 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 dd41483b6c..83fc70aefb 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 14e758535e..d95f6415ec 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 6116dd92ca..37a663123d 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 a67d200158..2aa9baed35 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 c22c5a4442..a432f2c852 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 0d56d6c378..1a78e51731 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 b3680f7e5c..8eceb10efd 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 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 2aa9baed35..ec4a2f3c0f 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 a432f2c852..305330de82 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 418358dd65..29786fadda 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 8eceb10efd..48aa6f28e1 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 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 0802c1cab2..d5f2c0da71 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 6607253886..3b9ab39df5 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 2a5be3250d..4b1abead9e 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 b16cf8b6a4..475dcbeaec 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 9e269ac2b5..52013a6bf4 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 ec4a2f3c0f..785c246c78 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 48aa6f28e1..9b858d9420 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 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 a63783348b..a4d854a6d4 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 0000000000..f90d657d8c --- /dev/null +++ b/res/home-status.html @@ -0,0 +1,184 @@ + + +
+
+
+

Welcome to Status Community Chat, powered by Riot.

+

For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.

+
+
+ +
+

Our rooms

+

Please abide by the channels discussion categories and remain on topic to the specific category details listed.

+

Before posting please refer to our Code of Conduct

+
+ + +
+ + #announcements + Company wide announcements. + Join +
+
+ + #introductions + Newcomer introductions. + Join +
+
+ + #general + General discussions of Status. + Join +
+
+ + #dev-status + Contributing to our codebase? Building a DApp or a chatbot? We're here to help. + Join +
+
+ + #news-articles + Share news, articles related to Ethereum or projects you're excited about + Join +
+
+

+ Interested in market and cryptocurrency type discussions? +

+ Join Telegram +
+
diff --git a/scripts/copy-res.js b/scripts/copy-res.js index c4b80709ae..1a68581444 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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 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 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 f90d657d8c..4bbc1aa423 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 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 9b858d9420..60bbcf9ec2 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 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 4bbc1aa423..0ce7973915 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -181,6 +181,6 @@

Interested in market and cryptocurrency type discussions?

- Join Telegram + Join Telegram
From 8f0f34e7616a895a4339f45f65e9d0e1346fa352 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 d5f2c0da71..d1cd099224 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 cc7e380d95..b53cd905b0 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 60bbcf9ec2..922ac03b9e 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 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 0ce7973915..95cb64a2b9 100644 --- a/res/home-status.html +++ b/res/home-status.html @@ -143,7 +143,7 @@

Our rooms

Please abide by the channels discussion categories and remain on topic to the specific category details listed.

-

Before posting please refer to our Code of Conduct

+

Before posting please refer to our Code of Conduct

From e5b1ded7e345d160369f53c50ed03bc21d4b4fdd Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 a3f3b0ef3b..b663258db7 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 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 35787ca0c4..d8a8d58a9c 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 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 2161987688..a7e7c9851b 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 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 d95f6415ec..c1af9e367f 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 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 bb0ca9594b..cfc46e85ab 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 c1af9e367f..4a84d161bb 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 b53cd905b0..6df64cb8e7 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 8e6a65fefb..73f1bafa1c 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 922ac03b9e..e8bfae2f47 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 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 864377eea4..290520390a 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); %> - <% } else { %> From 26d142f89334d4186d0c0525c1195e56b40bda7d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 dca1422534..aae572e8d7 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 b663258db7..c9af7c8ae8 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 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 d1cd099224..876c5b97e3 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 3b9ab39df5..f6341dd6cd 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 aae572e8d7..84b8306a74 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 4b1abead9e..5888820e0d 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 5b78703aa6..8dbad92a44 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 52013a6bf4..4013af4c7c 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 6df64cb8e7..a8bb4d89e1 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 c9af7c8ae8..fcbc2e17b9 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 e8bfae2f47..fa2a64c7da 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 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 95cb64a2b9..7d50470a22 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 fcbc2e17b9..d652b9348e 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 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 d652b9348e..603b7ece92 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 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 603b7ece92..0cced779d2 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 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 0cced779d2..e6a0584fdc 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 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 e6a0584fdc..4bf4617925 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 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 4bf4617925..3619d612e6 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 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 3619d612e6..8c7d9b26b6 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 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 8c7d9b26b6..6872727423 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 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 f775d1b3cd..4a44cbdc5f 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 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 320efda043..ee2d9c190f 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 a8bb4d89e1..ce9bec301f 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 73f1bafa1c..987ce066f9 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 fa2a64c7da..409bca665f 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 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 409bca665f..6b205b5823 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 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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 + <% 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 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 a411cb79b6..e32f63133d 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,7 +20,7 @@ - + <% 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 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 6b205b5823..fc62058643 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 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 f56d1a51b7..2aedf39204 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: 
{releaseNotes}
, + description:
{releaseNotes}
, 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 c1eb8fab00..570439543a 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 1a7b1c1646..be69b15f37 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 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 570439543a..8a333071cd 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 e32f63133d..14efb0b201 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -73,5 +73,7 @@