From 4a46a3e4e0cb2e5a4857afe9d2c7f12d5a6d930a Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Mon, 11 Feb 2019 13:54:52 +0000 Subject: [PATCH 01/44] Fix mx_RoomTile_name weighting --- res/css/views/rooms/_RoomTile.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 2024a503ae..20b24a8088 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -157,6 +157,8 @@ limitations under the License. font-weight: 700 !important; .mx_RoomTile_name { + // Parent weighting won't apply to this because the above mx_RoomTile_name overrides. + font-weight: 700; color: $roomtile-selected-color; } } From 56bb6c870adaeb52052c5e66a2a1a5e1ea9ccc09 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Tue, 12 Feb 2019 12:06:23 +0000 Subject: [PATCH 02/44] You are no longer needed --- res/css/views/rooms/_RoomTile.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 20b24a8088..a98a81048d 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -154,8 +154,6 @@ limitations under the License. } .mx_RoomTile_unread, .mx_RoomTile_highlight { - font-weight: 700 !important; - .mx_RoomTile_name { // Parent weighting won't apply to this because the above mx_RoomTile_name overrides. font-weight: 700; From 946a910692578a3d113de82af6c0262a53a05aef Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Tue, 12 Feb 2019 12:06:53 +0000 Subject: [PATCH 03/44] Probably could reduce it to this? --- res/css/views/rooms/_RoomTile.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index a98a81048d..8c0b4a5c14 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -153,12 +153,9 @@ limitations under the License. background-color: $warning-color; } -.mx_RoomTile_unread, .mx_RoomTile_highlight { - .mx_RoomTile_name { - // Parent weighting won't apply to this because the above mx_RoomTile_name overrides. - font-weight: 700; - color: $roomtile-selected-color; - } +.mx_RoomTile_unread, .mx_RoomTile_highlight .mx_RoomTile_name { + font-weight: 700; + color: $roomtile-selected-color; } .mx_RoomTile_selected { From e2cecad535041093f8127c8104f46e894a3fd7af Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Tue, 12 Feb 2019 19:21:31 +0000 Subject: [PATCH 04/44] Update _RoomTile.scss --- res/css/views/rooms/_RoomTile.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 8c0b4a5c14..39071b6f9d 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -153,9 +153,11 @@ limitations under the License. background-color: $warning-color; } -.mx_RoomTile_unread, .mx_RoomTile_highlight .mx_RoomTile_name { - font-weight: 700; - color: $roomtile-selected-color; +.mx_RoomTile_unread, .mx_RoomTile_highlight { + .mx_RoomTile_name { + font-weight: 700; + color: $roomtile-selected-color; + } } .mx_RoomTile_selected { From 215995de887bcb7dac9c1b13828baf8f79e33413 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:00:09 +0000 Subject: [PATCH 05/44] Resume reading default theme from config --- src/settings/handlers/ConfigSettingsHandler.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/settings/handlers/ConfigSettingsHandler.js b/src/settings/handlers/ConfigSettingsHandler.js index 67fff51e5b..a54ad1cef6 100644 --- a/src/settings/handlers/ConfigSettingsHandler.js +++ b/src/settings/handlers/ConfigSettingsHandler.js @@ -1,5 +1,6 @@ /* Copyright 2017 Travis Ralston +Copyright 2019 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. @@ -27,7 +28,7 @@ export default class ConfigSettingsHandler extends SettingsHandler { // Special case themes if (settingName === "theme") { - return "dharma"; // config["default_theme"]; + return config["default_theme"]; } const settingsConfig = config["settingDefaults"]; From df2f520d72892126be008234a88582aba03b49f5 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:10:00 +0000 Subject: [PATCH 06/44] Fix up any unsupported themes when read from settings --- src/settings/Settings.js | 2 ++ src/settings/controllers/ThemeController.js | 33 +++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/settings/controllers/ThemeController.js diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 671f46b366..4b9918632d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -22,6 +22,7 @@ import { NotificationsEnabledController, } from "./controllers/NotificationControllers"; import CustomStatusController from "./controllers/CustomStatusController"; +import ThemeController from './controllers/ThemeController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config']; @@ -233,6 +234,7 @@ export const SETTINGS = { "theme": { supportedLevels: ['config'], default: "dharma", + controller: new ThemeController(), }, "webRtcForcePeerToPeer": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, diff --git a/src/settings/controllers/ThemeController.js b/src/settings/controllers/ThemeController.js new file mode 100644 index 0000000000..7feff9b7ae --- /dev/null +++ b/src/settings/controllers/ThemeController.js @@ -0,0 +1,33 @@ +/* +Copyright 2019 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. +*/ + +import SettingController from "./SettingController"; + +const SUPPORTED_THEMES = [ + "dharma", + "dark", +]; + +export default class ThemeController extends SettingController { + getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) { + // Override in case some no longer supported theme is stored here + if (!SUPPORTED_THEMES.includes(calculatedValue)) { + return "dharma"; + } + + return null; // no override + } +} From e401b8f77ae60efd42c0aa6d9064228d4a0c760d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:10:42 +0000 Subject: [PATCH 07/44] Make default and dark the only theme options --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 5 +---- src/i18n/strings/en_EN.json | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index bfcc7b945c..f368ce93f0 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -138,17 +138,14 @@ export default class GeneralUserSettingsTab extends React.Component { } _renderThemeSection() { - // TODO: Re-enable theme selection once the themes actually work const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); return (
{_t("Theme")} - + - -
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7376b35fe5..74c32e2b30 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -522,10 +522,8 @@ "Phone numbers": "Phone numbers", "Language and region": "Language and region", "Theme": "Theme", - "Light theme": "Light theme", + "Default theme": "Default theme", "Dark theme": "Dark theme", - "2018 theme": "2018 theme", - "Status.im theme": "Status.im theme", "Account management": "Account management", "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", "Close Account": "Close Account", From 204d6e2c3d31cb40d86bd5cc530c4412a51277e1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:11:28 +0000 Subject: [PATCH 08/44] Enable theme setting --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index f368ce93f0..ab5b46bb7a 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -142,7 +142,7 @@ export default class GeneralUserSettingsTab extends React.Component { return (
{_t("Theme")} - From f5e56708d59aea9ee35e301311b3993566130d72 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:15:57 +0000 Subject: [PATCH 09/44] Re-enable dynamic theme changes --- src/components/structures/MatrixChat.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 4bb4e34033..e534ced577 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -654,11 +654,9 @@ export default React.createClass({ }); break; } - // case 'set_theme': - // disable changing the theme for now - // as other themes are not compatible with dharma - // this._onSetTheme(payload.value); - // break; + case 'set_theme': + this._onSetTheme(payload.value); + break; case 'on_logging_in': // We are now logging in, so set the state to reflect that // NB. This does not touch 'ready' since if our dispatches From 3b200705ed0b9b37158ff758268a4531e8b5b29d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 08:48:27 +0000 Subject: [PATCH 10/44] Remove light theme --- res/themes/dark/css/dark.scss | 6 +- res/themes/{light => dharma}/css/_paths.scss | 0 res/themes/dharma/css/dharma.scss | 2 +- res/themes/light/css/_base.scss | 276 ------------------- res/themes/light/css/_fonts.scss | 67 ----- res/themes/light/css/light.scss | 4 - 6 files changed, 4 insertions(+), 351 deletions(-) rename res/themes/{light => dharma}/css/_paths.scss (100%) delete mode 100644 res/themes/light/css/_base.scss delete mode 100644 res/themes/light/css/_fonts.scss delete mode 100644 res/themes/light/css/light.scss diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index a7d18fa1a6..a869dc39e3 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -1,5 +1,5 @@ -@import "../../light/css/_paths.scss"; -@import "../../light/css/_fonts.scss"; -@import "../../light/css/_base.scss"; +@import "../../dharma/css/_paths.scss"; +@import "../../dharma/css/_fonts.scss"; +@import "../../dharma/css/_dharma.scss"; @import "_dark.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_paths.scss b/res/themes/dharma/css/_paths.scss similarity index 100% rename from res/themes/light/css/_paths.scss rename to res/themes/dharma/css/_paths.scss diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/dharma/css/dharma.scss index 24dc0ce18d..032154f999 100644 --- a/res/themes/dharma/css/dharma.scss +++ b/res/themes/dharma/css/dharma.scss @@ -1,4 +1,4 @@ -@import "../../light/css/_paths.scss"; +@import "_paths.scss"; @import "_fonts.scss"; @import "_dharma.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss deleted file mode 100644 index e2aa005b68..0000000000 --- a/res/themes/light/css/_base.scss +++ /dev/null @@ -1,276 +0,0 @@ -/* 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; -$primary-bg-color: #ffffff; - -// 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; -$accent-color-alt: $accent-color; -$accent-color-50pct: #76CFA67F; - -$selection-fg-color: $primary-bg-color; - -$focus-brightness: 125%; - -// red warning colour -$warning-color: #ff0064; -// background colour for warnings -$warning-bg-color: #DF2A8B; -$info-bg-color: #2A9EDF; -$mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); - -// pinned events indicator -$pinned-unread-color: #ff0064; // $warning-color -$pinned-color: #888; - -// informational plinth -$info-plinth-bg-color: #f7f7f7; -$info-plinth-fg-color: #888; - -$preview-bar-bg-color: #f7f7f7; - -// left-panel style muted accent color -$secondary-accent-color: #eaf5f0; -$tertiary-accent-color: #d3efe1; - -$tagpanel-bg-color: $tertiary-accent-color; - -// 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: $secondary-accent-color; - -// 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; -$input-border-dark-color: #b8b8b8; - -$input-darker-bg-color: #c1c9d6; -$input-darker-fg-color: #9fa9ba; -$button-bg-color: #7ac9a1; -$button-fg-color: white; -// apart from login forms, which have stronger border -$strong-input-border-color: #c7c7c7; -$input-focused-border-color: #238cf5; -$input-valid-border-color: #7ac9a1; - -$field-focused-label-bg-color: #ffffff; - -// used for UserSettings EditableText -$input-underline-color: rgba(151, 151, 151, 0.5); -$input-fg-color: rgba(74, 74, 74, 0.9); -// scrollbars -$scrollbar-thumb-color: rgba(0, 0, 0, 0.2); -$scrollbar-track-color: transparent; -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #f6f6f6; -$menu-selected-color: #f5f8fa; - -$avatar-initial-color: #ffffff; -$avatar-bg-color: #ffffff; - -$h3-color: #3d3b39; - -$dialog-title-fg-color: #454545; -$dialog-backdrop-color: rgba(46, 48, 51, 0.38); -$dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #9fa9ba; - -$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; -$settings-profile-placeholder-bg-color: #e7e7e7; -$settings-profile-overlay-bg-color: #000; -$settings-profile-overlay-placeholder-bg-color: transparent; -$settings-profile-overlay-fg-color: #fff; -$settings-profile-overlay-placeholder-fg-color: #454545; -$settings-subsection-fg-color: #61708b; - -$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; -$rte-group-pill-color: #aaa; - -$topleftmenu-color: $primary-fg-color; -$roomheader-color: $primary-fg-color; -$roomheader-addroom-color: $primary-bg-color; -$roomtopic-color: $settings-grey-fg-color; -$eventtile-meta-color: $roomtopic-color; - -$composer-e2e-icon-color: #c9ced6; -$header-divider-color: #e6eaee; -// ******************** - -$roomtile-name-color: rgba(69, 69, 69, 0.8); -$roomtile-selected-color: $roomtile-name-color; -$roomtile-notified-color: $roomtile-name-color; -$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); - -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; - -$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); - -$roomsublist-background: rgba(0, 0, 0, 0.05); -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: $tertiary-accent-color; -$roomsublist-chevron-color: $accent-color; - -$panel-divider-color: rgba(118, 207, 166, 0.2); - -// ******************** - -$widget-menu-bar-bg-color: $tertiary-accent-color; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-fg-color: #e2e2e2; -$event-redacted-border-color: #cccccc; - -// event timestamp -$event-timestamp-color: #acacac; - -$edit-button-url: "$(res)/img/icon_context_message.svg"; -$copy-button-url: "$(res)/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; - -$imagebody-giflabel: rgba(0, 0, 0, 0.7); -$imagebody-giflabel-border: rgba(0, 0, 0, 0.2); -$imagebody-giflabel-color: rgba(255, 255, 255, 1); - -// Tabbed views -$tab-label-fg-color: #45474a; -$tab-label-active-fg-color: #ffffff; -$tab-label-bg-color: transparent; -$tab-label-active-bg-color: #7ac9a1; -$tab-label-icon-bg-color: #454545; -$tab-label-active-icon-bg-color: #ffffff; - -// Buttons -$button-primary-fg-color: #ffffff; -$button-primary-bg-color: #7ac9a1; -$button-primary-disabled-fg-color: #ffffff; -$button-primary-disabled-bg-color: #bce4d0; -$button-danger-fg-color: #ffffff; -$button-danger-bg-color: #f56679; -$button-danger-disabled-fg-color: #ffffff; -$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color - -// Toggle switch -$togglesw-off-color: #c1c9d6; -$togglesw-on-color: #7ac9a1; -$togglesw-ball-color: #fff; - -// unused? -$progressbar-color: #000; - -$room-warning-bg-color: #fff8e3; - -$memberstatus-placeholder-color: $roomtile-name-color; - -$authpage-bg-color: #2e3649; -$authpage-modal-bg-color: rgba(255, 255, 255, 0.59); -$authpage-body-bg-color: #ffffff; -$authpage-lang-color: #4e5054; -$authpage-body-color: #61708b; - -// ***** Mixins! ***** - -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 36px; - font-family: $font-family; - font-size: 14px; - 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; - outline: none; -} - -@define-mixin mx_DialogButton_danger { - background-color: $warning-color; -} - -@define-mixin mx_DialogButton_hover { -} - -@define-mixin mx_DialogButton_small { - @mixin mx_DialogButton; - font-size: 15px; - padding: 0px 1.5em 0px 1.5em; -} - -@define-mixin mx_DialogButton_secondary { - // flip colours for the secondary ones - font-weight: 600; - border: 1px solid $accent-color ! important; - color: $accent-color; - background-color: $accent-fg-color; -} diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss deleted file mode 100644 index c080663acf..0000000000 --- a/res/themes/light/css/_fonts.scss +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Open Sans - * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets - */ - -/* the 'src' links are relative to the bundle.css, which is in a subdirectory. - */ -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); - font-weight: 600; - font-style: italic; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; -} - -/* - * Fira Mono - * Used for monospace copy, i.e. code - */ - -@font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss deleted file mode 100644 index 6ac8d0feba..0000000000 --- a/res/themes/light/css/light.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "_paths.scss"; -@import "_fonts.scss"; -@import "_base.scss"; -@import "../../../../res/css/_components.scss"; From 19e94b9e323edac73568608d9dd97f812417cd55 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 09:13:39 +0000 Subject: [PATCH 11/44] Allow storing the theme settting again --- src/settings/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 4b9918632d..6ab3cab80c 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -232,7 +232,7 @@ export const SETTINGS = { invertedSettingName: 'TagPanel.disableTagPanel', }, "theme": { - supportedLevels: ['config'], + supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: "dharma", controller: new ThemeController(), }, From fb7913580e9347f6d2e035b5221dbff261ddc6c5 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 09:17:24 +0000 Subject: [PATCH 12/44] Theme setting needs to update local state --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index ab5b46bb7a..6109f74f35 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -54,6 +54,7 @@ export default class GeneralUserSettingsTab extends React.Component { if (this.state.theme === newTheme) return; SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme); + this.setState({theme: newTheme}); dis.dispatch({action: 'set_theme', value: newTheme}); }; From dda755dd5a98a3d5d92c292cd921602ff1499af9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 10:03:42 +0000 Subject: [PATCH 13/44] Fix up syntax in default theme --- res/themes/dharma/css/_dharma.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 424532a609..c1abf1bb09 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -271,9 +271,9 @@ $authpage-body-color: #61708b; border: none; flex: 1; color: $primary-fg-color; - }, + } input::placeholder { - color: $roomsublist-label-fg-color; + color: $roomsublist-label-fg-color; } } } From 6e2cef10d99939ddf9ab660a947df93de0444c78 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 10:35:50 +0000 Subject: [PATCH 14/44] Remove incorrect unused comment --- res/themes/dharma/css/_dharma.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c1abf1bb09..2800b7767d 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -225,7 +225,6 @@ $togglesw-off-color: #c1c9d6; $togglesw-on-color: #7ac9a1; $togglesw-ball-color: #fff; -// unused? $progressbar-color: #000; $room-warning-bg-color: #fff8e3; From f2db509394bc89a2c342b7de7acdeaa60043410a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 12:38:55 +0000 Subject: [PATCH 15/44] Update username variants --- res/themes/dharma/css/_dharma.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 2800b7767d..87e2983c80 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -153,14 +153,14 @@ $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; $roomtile-focused-bg-color: #fff; -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; +$username-variant1-color: #368bd6; +$username-variant2-color: #ac3ba8; +$username-variant3-color: #03b381; +$username-variant4-color: #e64f7a; +$username-variant5-color: #ff812d; +$username-variant6-color: #2dc2c5; +$username-variant7-color: #5c56f5; +$username-variant8-color: #74d12c; $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); From fe364d414023a97d946c237a75d1c258dc997245 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 13:02:21 +0000 Subject: [PATCH 16/44] Update global colors in default theme --- res/themes/dharma/css/_dharma.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 87e2983c80..9ae5cf71dd 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -6,6 +6,12 @@ Arial here. */ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif; +// unified palette +// try to use these colors when possible +$accent-color: #03b381; +$notice-primary-color: #ff4b55; +$notice-secondary-color: #61708b; + // typical text (dark-on-white in light skin) $primary-fg-color: #454545; $primary-bg-color: #ffffff; @@ -18,7 +24,6 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color: #7ac9a1; $accent-color-50pct: #92caad; $accent-color-alt: #238CF5; @@ -35,8 +40,8 @@ $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // pinned events indicator -$pinned-unread-color: #ff0064; // $warning-color -$pinned-color: #888; +$pinned-unread-color: $notice-primary-color; +$pinned-color: $notice-secondary-color; // informational plinth $info-plinth-bg-color: #f7f7f7; @@ -72,11 +77,11 @@ $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; $input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: #7ac9a1; +$input-valid-border-color: $accent-color; $field-focused-label-bg-color: #ffffff; -$button-bg-color: #7ac9a1; +$button-bg-color: $accent-color; $button-fg-color: white; // apart from login forms, which have stronger border @@ -206,13 +211,13 @@ $lightbox-border-color: #ffffff; $tab-label-fg-color: #45474a; $tab-label-active-fg-color: #ffffff; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: #7ac9a1; +$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; $tab-label-active-icon-bg-color: #ffffff; // Buttons $button-primary-fg-color: #ffffff; -$button-primary-bg-color: #7ac9a1; +$button-primary-bg-color: $accent-color; $button-primary-disabled-fg-color: #ffffff; $button-primary-disabled-bg-color: #bce4d0; $button-danger-fg-color: #ffffff; @@ -222,7 +227,7 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color // Toggle switch $togglesw-off-color: #c1c9d6; -$togglesw-on-color: #7ac9a1; +$togglesw-on-color: $accent-color; $togglesw-ball-color: #fff; $progressbar-color: #000; From d7fb39fd08d8d1f0e531b10b40bd715a73def9c8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 15:40:06 +0000 Subject: [PATCH 17/44] First pass at dark theme colors --- res/css/_common.scss | 2 +- res/css/structures/_ContextualMenu.scss | 2 +- res/css/views/elements/_AccessibleButton.scss | 8 +- res/css/views/elements/_Field.scss | 1 + res/themes/dark/css/_dark.scss | 325 ++++++++---------- res/themes/dharma/css/_dharma.scss | 6 +- 6 files changed, 155 insertions(+), 189 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index aaefb859e4..cd2b0c09cd 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -242,7 +242,7 @@ textarea { font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } .mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover { diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 001c405e15..3788929bf3 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_ContextualMenu { border-radius: 4px; - box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);; + box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index 8de0b82554..25ad51a3fb 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -40,8 +40,7 @@ limitations under the License. } .mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled { - color: $button-primary-disabled-fg-color; - background-color: $button-primary-disabled-bg-color; + opacity: 0.4; } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm { @@ -51,8 +50,7 @@ limitations under the License. } .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled { - color: $button-primary-disabled-fg-color; - background-color: $button-primary-disabled-bg-color; + opacity: 0.4; } .mx_AccessibleButton_kind_danger { @@ -74,4 +72,4 @@ limitations under the License. .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { color: $button-danger-disabled-fg-color; background-color: $button-danger-disabled-bg-color; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 6ce6b33a05..de6636e116 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -31,6 +31,7 @@ limitations under the License. transition: border-color 0.25s; border: 1px solid $input-border-color; padding: 8px 9px; + color: $primary-fg-color; background-color: $primary-bg-color; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index ee5e1cf5d6..09510244a5 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,186 +1,188 @@ +// unified palette +// try to use these colors when possible +$bg-color: #181b21; +$base-color: #15171b; +$base-text-color: #edf3ff; +$header-panel-bg-color: #181b21; +$header-panel-border-color: #1c212b; +$header-panel-text-primary-color: #a1b2d1; +$header-panel-text-secondary-color: #c8c8cd; +$text-primary-color: #edf3ff; +$text-secondary-color: #a1b2d1; +$search-bg-color: #22262e; +$search-placeholder-color: #61708b; +$room-highlight-color: #22262e; // typical text (dark-on-white in light skin) -$primary-fg-color: #212121; -$primary-bg-color: #2d2d2d; - -// used for focusing form controls -$focus-bg-color: #101010; +$primary-fg-color: $text-primary-color; +$primary-bg-color: $bg-color; // used for dialog box text -$light-fg-color: #747474; +$light-fg-color: $header-panel-text-secondary-color; -// button UI (white-on-green in light skin) -$accent-fg-color: $primary-bg-color; -$accent-color: #76CFA6; -$accent-color-alt: $accent-color; -$accent-color-50pct: #76CFA67F; +// used for focusing form controls +$focus-bg-color: $room-highlight-color; -$selection-fg-color: $primary-fg-color; +// informational plinth +$info-plinth-bg-color: $header-panel-bg-color; +$info-plinth-fg-color: #888; -$focus-brightness: 200%; +$preview-bar-bg-color: $header-panel-bg-color; -// red warning colour -$warning-color: #ff0064; -$warning-bg-color: #DF2A8B; -$info-bg-color: #2A9EDF; - -// groups -$info-plinth-bg-color: #454545; - -$other-user-pill-bg-color: rgba(255, 255, 255, 0.1); - -$preview-bar-bg-color: #333; - -// left-panel style muted accent color -$secondary-accent-color: $primary-bg-color; -$tertiary-accent-color: #454545; - -// stop the tinter trying to change the secondary accent color -// by overriding the key to something untintable -// XXX: this is a bit of a hack. -#mx_theme_secondaryAccentColor { - color: #c0ffee ! important; -} - -#mx_theme_tertiaryAccentColor { - color: #c0ffee ! important; -} - -// used by RoomDirectory permissions -$plinth-bg-color: #474747; - -// used by RoomDropTarget -$droptarget-bg-color: rgba(45,45,45,0.5); - -// used by AddressSelector -$selected-color: #000000; +$tagpanel-bg-color: $base-color; // selected for hoverover & selected event tiles -$event-selected-color: #353535; +$event-selected-color: $search-bg-color; // used for the hairline dividers in RoomView -$primary-hairline-color: #474747; +$primary-hairline-color: $header-panel-border-color; // used for the border of input text fields -$input-border-color: #3a3a3a; +$input-border-color: #e7e7e7; +$input-darker-bg-color: $search-bg-color; +$input-darker-fg-color: $search-placeholder-color; +$input-lighter-bg-color: #f2f5f8; +$input-lighter-fg-color: $input-darker-fg-color; +$input-focused-border-color: #238cf5; +$input-valid-border-color: $accent-color; -$input-darker-bg-color: #c1c9d6; -$input-darker-fg-color: #9fa9ba; -$button-bg-color: #7ac9a1; -$button-fg-color: white; -// apart from login forms, which have stronger border -$strong-input-border-color: #656565; +$field-focused-label-bg-color: $bg-color; -// used for UserSettings EditableText -$input-underline-color: $primary-fg-color; -$input-fg-color: $primary-fg-color; // scrollbars $scrollbar-thumb-color: rgba(255, 255, 255, 0.2); $scrollbar-track-color: transparent; + // context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #373737; -$menu-selected-color: #f5f8fa; +$menu-border-color: $header-panel-border-color; +$menu-bg-color: $header-panel-bg-color; +$menu-box-shadow-color: $menu-bg-color; +$menu-selected-color: $room-highlight-color; -$avatar-initial-color: #2d2d2d; -$avatar-bg-color: #ffffff; -$menu-selected-color: #f5f8fa; +$avatar-initial-color: #ffffff; +$avatar-bg-color: $bg-color; -$h3-color: $primary-fg-color; - -$dialog-background-bg-color: #000; +$dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; -$greyed-fg-color: #888; - -$neutral-badge-color: #888; - -$preview-widget-bar-color: $menu-bg-color; -$preview-widget-fg-color: $greyed-fg-color; - -$blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; - $settings-grey-fg-color: #a2a2a2; +$settings-profile-placeholder-bg-color: #e7e7e7; +$settings-profile-overlay-bg-color: #000; +$settings-profile-overlay-placeholder-bg-color: transparent; +$settings-profile-overlay-fg-color: #fff; +$settings-profile-overlay-placeholder-fg-color: #454545; +$settings-subsection-fg-color: $text-secondary-color; -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; +$topleftmenu-color: $text-primary-color; +$roomheader-color: $text-primary-color; +$roomheader-addroom-color: $header-panel-text-primary-color; +$roomtopic-color: $text-secondary-color; +$eventtile-meta-color: $roomtopic-color; -$rte-bg-color: #353535; -$rte-code-bg-color: #000; +$roomtile-name-color: $header-panel-text-primary-color; +$roomtile-selected-color: $text-primary-color; +$roomtile-notified-color: $text-primary-color; +$roomtile-selected-bg-color: $room-highlight-color; +$roomtile-focused-bg-color: $room-highlight-color; -$room-warning-bg-color: #2d2d2d; +$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); -// ******************** +$panel-divider-color: $header-panel-border-color; -$roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: #333; -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.2); - -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; - -$roomsublist-background: rgba(0, 0, 0, 0.2); -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: $tertiary-accent-color; -$roomsublist-chevron-color: $accent-color; - -$panel-divider-color: rgba(118, 207, 166, 0.2); - -// ******************** - -$widget-menu-bar-bg-color: $tertiary-accent-color; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: rgba(171, 221, 188, 0.4); -$event-sending-color: #888; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-fg-color: #606060; -$event-redacted-border-color: #000000; +$widget-menu-bar-bg-color: $search-bg-color; // event timestamp -$event-timestamp-color: #acacac; +$event-timestamp-color: $text-secondary-color; -$edit-button-url: "$(res)/img/icon_context_message_dark.svg"; -$copy-button-url: "$(res)/img/icon_copy_message_dark.svg"; +// Tabbed views +$tab-label-fg-color: $text-primary-color; +$tab-label-active-fg-color: $text-primary-color; +$tab-label-bg-color: transparent; +$tab-label-active-bg-color: $accent-color; +$tab-label-icon-bg-color: $text-primary-color; +$tab-label-active-icon-bg-color: $text-primary-color; -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; +// Buttons +$button-primary-fg-color: #ffffff; +$button-primary-bg-color: $accent-color; +$button-secondary-bg-color: transparent; +$button-danger-fg-color: #ffffff; +$button-danger-bg-color: #f56679; +$button-danger-disabled-fg-color: #ffffff; +$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; +$room-warning-bg-color: $header-panel-bg-color; -$imagebody-giflabel: rgba(1, 1, 1, 0.7); -$imagebody-giflabel-border: rgba(1, 1, 1, 0.2); -$imagebody-giflabel-color: rgba(0, 0, 0, 1); +/*** form elements ***/ -// unused? -$progressbar-color: #000; +// .mx_textinput is a container for a text input +// + some other controls like buttons, ... +// it has the appearance of a text box so the controls +// appear to be part of the input + +.mx_Dialog, .mx_MatrixChat { + + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + background-color: transparent; + color: $input-darker-fg-color; + border: 1px solid #c1c1c1; + } + + .mx_textinput { + > input[type=text], + > input[type=search] { + color: $primary-fg-color; + } + input::placeholder { + color: $roomsublist-label-fg-color; + } + } +} + +/*** panels ***/ +.dark-panel { + background-color: $primary-bg-color; +} + +.dark-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-darker-fg-color; + background-color: $input-darker-bg-color; + border: none; + } +} + +.light-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-lighter-fg-color; + background-color: $input-lighter-bg-color; + border: none; + } +} + +.input[type=text]::-webkit-input-placeholder, +.input[type=text]::-moz-placeholder, +.input[type=search]::-webkit-input-placeholder, +.input[type=search]::-moz-placeholder { + color: #a5aab2; +} + +// ***** Mixins! ***** -// XXX: copypasted from _base in order to pick up the right FG color... @define-mixin mx_DialogButton { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; - border-radius: 36px; + border-radius: 4px; font-family: $font-family; font-size: 14px; - color: $accent-fg-color; - background-color: $accent-color; + color: $button-fg-color; + background-color: $button-bg-color; width: auto; padding: 7px; padding-left: 1.5em; @@ -190,50 +192,15 @@ $progressbar-color: #000; outline: none; } +@define-mixin mx_DialogButton_danger { + background-color: $accent-color; +} + @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } -// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it -// better match the theme. Typically applied to dark grey 'off' buttons or -// light grey 'on' buttons. -.mx_filterFlipColor { - filter: invert(1); -} - -.gm-scrollbar .thumb { - filter: invert(1); -} - -// markdown overrides: -.mx_EventTile_content .markdown-body pre:hover { - border-color: #808080 !important; // inverted due to rules below -} -.mx_EventTile_content .markdown-body { - pre, code { - filter: invert(1); - } - - pre code { - filter: none; - } - - table { - tr { - background-color: #000000; - } - - tr:nth-child(2n) { - background-color: #080808; - } - } -} - -// Add a line to the right side of the left panel to distinguish it from the middle panel -.mx_LeftPanel { - border-right: 1px solid $tertiary-accent-color; -} diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 9ae5cf71dd..bd4f525050 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -96,6 +96,7 @@ $scrollbar-track-color: transparent; // context menus $menu-border-color: #ebedf8; $menu-bg-color: #fff; +$menu-box-shadow-color: rgba(118, 131, 156, 0.6); $menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; @@ -218,8 +219,7 @@ $tab-label-active-icon-bg-color: #ffffff; // Buttons $button-primary-fg-color: #ffffff; $button-primary-bg-color: $accent-color; -$button-primary-disabled-fg-color: #ffffff; -$button-primary-disabled-bg-color: #bce4d0; +$button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: #ffffff; $button-danger-bg-color: #f56679; $button-danger-disabled-fg-color: #ffffff; @@ -391,5 +391,5 @@ textarea::placeholder { font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } From c00495304ff1be2f37d6aeaf4d5c67dd37db68e3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 16:05:31 +0000 Subject: [PATCH 18/44] Explicit color for tagpanel buttons --- res/css/structures/_TagPanelButtons.scss | 2 +- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss index f7cb189e25..323d77a405 100644 --- a/res/css/structures/_TagPanelButtons.scss +++ b/res/css/structures/_TagPanelButtons.scss @@ -38,7 +38,7 @@ limitations under the License. height: 40px; width: 40px; border-radius: 20px; - background-color: $roomheader-addroom-color; + background-color: $tagpanel-button-color; position: relative; /* overwrite mx_RoleButton inline-block */ display: block !important; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 09510244a5..74ce28d491 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -75,6 +75,7 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; +$tagpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index bd4f525050..86b90ff6d7 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -145,6 +145,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; +$tagpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; From 8652a094f35f985296210fa6ab055cde63b9565a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 16:42:11 +0000 Subject: [PATCH 19/44] Allow theming room header buttons --- res/css/views/rooms/_RoomHeader.scss | 32 +++++++++++++++---- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + .../views/elements/ManageIntegsButton.js | 8 +++-- src/components/views/rooms/RoomHeader.js | 26 +++++++++------ 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 1359bc5f57..2e3a5e5ef6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -58,7 +58,6 @@ limitations under the License. .mx_RoomHeader_buttons { display: flex; - align-items: center; background-color: $primary-bg-color; padding-right: 5px; } @@ -116,10 +115,6 @@ limitations under the License. opacity: 0.6; } -.mx_RoomHeader_settingsButton object { - pointer-events: none; -} - .mx_RoomHeader_name, .mx_RoomHeader_avatar, .mx_RoomHeader_avatarPicker, @@ -199,10 +194,32 @@ limitations under the License. .mx_RoomHeader_button { margin-left: 10px; cursor: pointer; + height: 20px; + width: 20px; + background-color: $roomheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_RoomHeader_button object { - pointer-events: none; +.mx_RoomHeader_settingsButton { + mask-image: url('$(res)/img/feather-icons/settings.svg'); +} + +.mx_RoomHeader_forgetButton { + mask-image: url('$(res)/img/leave.svg'); + width: 26px; +} + +.mx_RoomHeader_searchButton { + mask-image: url('$(res)/img/feather-icons/search.svg'); +} + +.mx_RoomHeader_shareButton { + mask-image: url('$(res)/img/feather-icons/share.svg'); +} + +.mx_RoomHeader_manageIntegsButton { + mask-image: url('$(res)/img/feather-icons/grid.svg'); } .mx_RoomHeader_showPanel { @@ -219,6 +236,7 @@ limitations under the License. .mx_RoomHeader_pinnedButton { position: relative; + mask-image: url('$(res)/img/icons-pin.svg'); } .mx_RoomHeader_pinsIndicator { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 74ce28d491..ab636e4218 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -76,6 +76,7 @@ $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; +$roomheader-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 86b90ff6d7..3a20cc8f0c 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -146,6 +146,7 @@ $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; +$roomheader-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js index e5cc21d85e..3240050b6a 100644 --- a/src/components/views/elements/ManageIntegsButton.js +++ b/src/components/views/elements/ManageIntegsButton.js @@ -24,7 +24,6 @@ import ScalarMessaging from '../../../ScalarMessaging'; import Modal from "../../../Modal"; import { _t } from '../../../languageHandler'; import AccessibleButton from './AccessibleButton'; -import TintableSvg from './TintableSvg'; export default class ManageIntegsButton extends React.Component { constructor(props) { @@ -76,6 +75,7 @@ export default class ManageIntegsButton extends React.Component { if (this.scalarClient !== null) { const integrationsButtonClasses = classNames({ mx_RoomHeader_button: true, + mx_RoomHeader_manageIntegsButton: true, mx_ManageIntegsButton_error: !!this.state.scalarError, }); @@ -94,8 +94,10 @@ export default class ManageIntegsButton extends React.Component { } integrationsButton = ( - - + { integrationsWarningTriangle } { integrationsErrorPopup } diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 6e5ccab7f9..5e56f59425 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -154,7 +154,6 @@ module.exports = React.createClass({ render: function() { const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const EmojiText = sdk.getComponent('elements.EmojiText'); let searchStatus = null; @@ -228,8 +227,10 @@ module.exports = React.createClass({ if (this.props.onSettingsClick) { settingsButton = - - + ; } @@ -245,7 +246,6 @@ module.exports = React.createClass({ { pinsIndicator } - ; } @@ -260,24 +260,30 @@ module.exports = React.createClass({ let forgetButton; if (this.props.onForgetClick) { forgetButton = - - + ; } let searchButton; if (this.props.onSearchClick && this.props.inRoom) { searchButton = - - + ; } let shareRoomButton; if (this.props.inRoom) { shareRoomButton = - - + ; } From 3cba5edd6f367d31fd401fd5070cc6e290658d58 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 17:31:47 +0000 Subject: [PATCH 20/44] Allow theming right panel header buttons --- res/css/structures/_RightPanel.scss | 33 ++++++++++++++----- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + .../views/right_panel/GroupHeaderButtons.js | 6 ++-- .../views/right_panel/HeaderButton.js | 11 +++---- .../views/right_panel/RoomHeaderButtons.js | 9 +++-- 6 files changed, 42 insertions(+), 19 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 592eea067e..895382d714 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -25,9 +25,7 @@ limitations under the License. .mx_RightPanel_header { order: 1; - border-bottom: 1px solid $primary-hairline-color; - flex: 0 0 52px; } @@ -45,16 +43,35 @@ limitations under the License. cursor: pointer; flex: 0 0 auto; vertical-align: top; - margin-top: 4px; - padding-left: 5px; - padding-right: 5px; + margin-left: 5px; + margin-right: 5px; text-align: center; - position: relative; border-bottom: 2px solid transparent; + height: 20px; + width: 20px; + background-color: $rightpanel-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_RightPanel_headerButton object { - pointer-events: none; +.mx_RightPanel_membersButton { + mask-image: url('$(res)/img/feather-icons/user.svg'); +} + +.mx_RightPanel_filesButton { + mask-image: url('$(res)/img/feather-icons/files.svg'); +} + +.mx_RightPanel_notifsButton { + mask-image: url('$(res)/img/feather-icons/notifications.svg'); +} + +.mx_RightPanel_groupMembersButton { + mask-image: url('$(res)/img/icons-people.svg'); +} + +.mx_RightPanel_roomsButton { + mask-image: url('$(res)/img/icons-room-nobg.svg'); } .mx_RightPanel_headerButton_highlight { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index ab636e4218..d281476e37 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; +$rightpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 3a20cc8f0c..c90ffe77a9 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -147,6 +147,7 @@ $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; +$rightpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 6867b0bb9d..13379d49e3 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -65,12 +65,14 @@ export default class GroupHeaderButtons extends HeaderButtons { ]; return [ - , - - - ; + onClick={this.onClick}> + ; } } @@ -62,14 +61,14 @@ HeaderButton.propTypes = { isHighlighted: PropTypes.bool.isRequired, // The phase to swap to when the button is clicked clickPhase: PropTypes.string.isRequired, - // The source file of the icon to display - iconSrc: PropTypes.string.isRequired, // The badge to display above the icon badge: PropTypes.node, // The parameters to track the click event analytics: PropTypes.arrayOf(PropTypes.string).isRequired, + // Button name + name: PropTypes.string.isRequired, // Button title title: PropTypes.string.isRequired, }; diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 1985909f4a..8d10094637 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -52,17 +52,20 @@ export default class RoomHeaderButtons extends HeaderButtons { ]; return [ - , - , - Date: Tue, 12 Feb 2019 17:48:27 +0000 Subject: [PATCH 21/44] Allow theming group header buttons --- res/css/structures/_GroupView.scss | 17 +++++++++++++---- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + src/components/structures/GroupView.js | 23 +++++++++++++++-------- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index ace310ee5b..1c477a959a 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -44,13 +44,22 @@ limitations under the License. } .mx_GroupHeader_button { - margin-left: 12px; + margin-left: 5px; + margin-right: 5px; cursor: pointer; + height: 20px; + width: 20px; + background-color: $groupheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_GroupHeader_button object { - // prevents clicks from being swallowed by svg in 'object' tag - pointer-events: none; +.mx_GroupHeader_editButton { + mask-image: url('$(res)/img/icons-settings-room.svg'); +} + +.mx_GroupHeader_shareButton { + mask-image: url('$(res)/img/icons-share.svg'); } .mx_GroupView_editable { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index d281476e37..41aaeae50a 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; +$groupheader-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c90ffe77a9..7cc6a2ce88 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -147,6 +147,7 @@ $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; +$groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 530a200a18..89fce9c718 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1157,7 +1157,6 @@ export default React.createClass({ render: function() { const GroupAvatar = sdk.getComponent("avatars.GroupAvatar"); const Spinner = sdk.getComponent("elements.Spinner"); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); if (this.state.summaryLoading && this.state.error === null || this.state.saving) { @@ -1248,13 +1247,17 @@ export default React.createClass({ if (this.state.editing) { rightButtons.push( { _t('Save') } , ); rightButtons.push( - + {_t("Cancel")} , @@ -1262,16 +1265,20 @@ export default React.createClass({ } else { if (summary.user && summary.user.membership === 'join') { rightButtons.push( - - , ); } rightButtons.push( - - + , ); } From 6c954dadc852dcccd8a46d1e8d3527d7d52985cb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 18:05:19 +0000 Subject: [PATCH 22/44] Allow theming message composer buttons --- res/css/views/rooms/_MessageComposer.scss | 43 +++++++++++-------- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + src/components/views/rooms/MessageComposer.js | 30 ++++++++----- src/components/views/rooms/Stickerpicker.js | 13 +++--- 5 files changed, 54 insertions(+), 34 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 7ee7efcaff..db8eb4995d 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -180,27 +180,36 @@ limitations under the License. color: $accent-color; } -.mx_MessageComposer_upload, -.mx_MessageComposer_hangup, -.mx_MessageComposer_voicecall, -.mx_MessageComposer_videocall, -.mx_MessageComposer_apps, -.mx_MessageComposer_stickers { - /*display: table-cell;*/ - /*vertical-align: middle;*/ - /*padding-left: 10px;*/ - padding-right: 12px; +.mx_MessageComposer_button { + margin-right: 12px; cursor: pointer; padding-top: 4px; + height: 20px; + width: 20px; + background-color: $composer-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; } -.mx_MessageComposer_upload object, -.mx_MessageComposer_hangup object, -.mx_MessageComposer_voicecall object, -.mx_MessageComposer_videocall object, -.mx_MessageComposer_apps object, -.mx_MessageComposer_stickers object { - pointer-events: none; +.mx_MessageComposer_upload { + mask-image: url('$(res)/img/feather-icons/paperclip.svg'); +} + +.mx_MessageComposer_hangup { + mask-image: url('$(res)/img/hangup.svg'); +} + +.mx_MessageComposer_voicecall { + mask-image: url('$(res)/img/feather-icons/phone.svg'); +} + +.mx_MessageComposer_videocall { + mask-image: url('$(res)/img/feather-icons/video.svg'); +} + +.mx_MessageComposer_stickers { + mask-image: url('$(res)/img/feather-icons/face.svg'); } .mx_MessageComposer_formatting { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 41aaeae50a..a8f1ae49e2 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -79,6 +79,7 @@ $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color; +$composer-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 7cc6a2ce88..b4626eb7c3 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -149,6 +149,7 @@ $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; +$composer-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 7117825d76..10142b2b4b 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -306,7 +306,6 @@ export default class MessageComposer extends React.Component { render() { const uploadInputStyle = {display: 'none'}; const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput"); const controls = []; @@ -335,17 +334,26 @@ export default class MessageComposer extends React.Component { // Call buttons if (this.props.callState && this.props.callState !== 'ended') { hangupButton = - - {_t('Hangup')} + ; } else { callButton = - - + ; videoCallButton = - - + ; } @@ -385,9 +393,11 @@ export default class MessageComposer extends React.Component { // check separately for whether we can call, but this is slightly // complex because of conference calls. const uploadButton = ( - - + - + title={_t("Hide Stickers")} + > ; } else { // Show show-stickers button @@ -360,10 +359,10 @@ export default class Stickerpicker extends React.Component { - + title={_t("Show Stickers")} + > ; } return
From b0d08b9a251635cbcf1e9136e199ea95d84aff7c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 09:45:20 +0000 Subject: [PATCH 23/44] Rename dharma theme to light theme --- res/css/views/elements/_Field.scss | 2 +- res/themes/dark/css/dark.scss | 6 +++--- res/themes/{dharma => light}/css/_fonts.scss | 0 .../{dharma/css/_dharma.scss => light/css/_light.scss} | 0 res/themes/{dharma => light}/css/_paths.scss | 0 res/themes/{dharma/css/dharma.scss => light/css/light.scss} | 2 +- .../views/settings/tabs/GeneralUserSettingsTab.js | 2 +- src/settings/Settings.js | 2 +- src/settings/controllers/ThemeController.js | 4 ++-- 9 files changed, 9 insertions(+), 9 deletions(-) rename res/themes/{dharma => light}/css/_fonts.scss (100%) rename res/themes/{dharma/css/_dharma.scss => light/css/_light.scss} (100%) rename res/themes/{dharma => light}/css/_paths.scss (100%) rename res/themes/{dharma/css/dharma.scss => light/css/light.scss} (79%) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index de6636e116..075bd28a11 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* TODO: Consider unifying with general input styles in _dharma.scss */ +/* TODO: Consider unifying with general input styles in _light.scss */ .mx_Field { position: relative; diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index a869dc39e3..e7ae7c8cf8 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -1,5 +1,5 @@ -@import "../../dharma/css/_paths.scss"; -@import "../../dharma/css/_fonts.scss"; -@import "../../dharma/css/_dharma.scss"; +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; @import "_dark.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/dharma/css/_fonts.scss b/res/themes/light/css/_fonts.scss similarity index 100% rename from res/themes/dharma/css/_fonts.scss rename to res/themes/light/css/_fonts.scss diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/light/css/_light.scss similarity index 100% rename from res/themes/dharma/css/_dharma.scss rename to res/themes/light/css/_light.scss diff --git a/res/themes/dharma/css/_paths.scss b/res/themes/light/css/_paths.scss similarity index 100% rename from res/themes/dharma/css/_paths.scss rename to res/themes/light/css/_paths.scss diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/light/css/light.scss similarity index 79% rename from res/themes/dharma/css/dharma.scss rename to res/themes/light/css/light.scss index 032154f999..6acb2d9d94 100644 --- a/res/themes/dharma/css/dharma.scss +++ b/res/themes/light/css/light.scss @@ -1,4 +1,4 @@ @import "_paths.scss"; @import "_fonts.scss"; -@import "_dharma.scss"; +@import "_light.scss"; @import "../../../../res/css/_components.scss"; diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index 6109f74f35..378a54a51a 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -145,7 +145,7 @@ export default class GeneralUserSettingsTab extends React.Component { {_t("Theme")} - + diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 6ab3cab80c..bd9d81996d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -233,7 +233,7 @@ export const SETTINGS = { }, "theme": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: "dharma", + default: "light", controller: new ThemeController(), }, "webRtcForcePeerToPeer": { diff --git a/src/settings/controllers/ThemeController.js b/src/settings/controllers/ThemeController.js index 7feff9b7ae..615fc4c192 100644 --- a/src/settings/controllers/ThemeController.js +++ b/src/settings/controllers/ThemeController.js @@ -17,7 +17,7 @@ limitations under the License. import SettingController from "./SettingController"; const SUPPORTED_THEMES = [ - "dharma", + "light", "dark", ]; @@ -25,7 +25,7 @@ export default class ThemeController extends SettingController { getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) { // Override in case some no longer supported theme is stored here if (!SUPPORTED_THEMES.includes(calculatedValue)) { - return "dharma"; + return "light"; } return null; // no override From 932b377dc5f31b17da358c493fe2014b2f312834 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:06:18 +0000 Subject: [PATCH 24/44] Restore color inversion from old dark theme --- res/themes/dark/css/_dark.scss | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index a8f1ae49e2..6782322cbe 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -209,3 +209,37 @@ $room-warning-bg-color: $header-panel-bg-color; background-color: $button-secondary-bg-color; } +// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it +// better match the theme. Typically applied to dark grey 'off' buttons or +// light grey 'on' buttons. +.mx_filterFlipColor { + filter: invert(1); +} + +.gm-scrollbar .thumb { + filter: invert(1); +} + +// markdown overrides: +.mx_EventTile_content .markdown-body pre:hover { + border-color: #808080 !important; // inverted due to rules below +} +.mx_EventTile_content .markdown-body { + pre, code { + filter: invert(1); + } + + pre code { + filter: none; + } + + table { + tr { + background-color: #000000; + } + + tr:nth-child(2n) { + background-color: #080808; + } + } +} From a7bae3083795b8244aeecff72b9b2d6e0abc78c1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:16:01 +0000 Subject: [PATCH 25/44] Tweak create community for dark theme --- res/css/views/dialogs/_CreateGroupDialog.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss index 500e12ee49..128eacc3ce 100644 --- a/res/css/views/dialogs/_CreateGroupDialog.scss +++ b/res/css/views/dialogs/_CreateGroupDialog.scss @@ -43,10 +43,9 @@ limitations under the License. .mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix { - height: 35px; padding: 0px 5px; line-height: 37px; - background-color: $input-border-color; + background-color: $input-darker-bg-color; border: 1px solid $input-border-color; text-align: center; } From b13baf89269deb178700d1cef8d7a2c8271e4d9c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:30:38 +0000 Subject: [PATCH 26/44] Tweak start a chat for dark theme --- res/css/_common.scss | 1 + res/themes/dark/css/_dark.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index cd2b0c09cd..8d18eac931 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -62,6 +62,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { /* Required by Firefox */ textarea { font-family: $font-family; + color: $primary-fg-color; } /* Prevent ugly dotted highlight around selected elements in Firefox */ diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6782322cbe..63aff91806 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -31,6 +31,9 @@ $preview-bar-bg-color: $header-panel-bg-color; $tagpanel-bg-color: $base-color; +// used by AddressSelector +$selected-color: $room-highlight-color; + // selected for hoverover & selected event tiles $event-selected-color: $search-bg-color; From 72f1b79b1db29e8fbb117f0cb81e4d51ca7c87a9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:33:30 +0000 Subject: [PATCH 27/44] Tweak create key backup input for dark theme --- res/css/_common.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index 8d18eac931..1f973c28d2 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -52,6 +52,7 @@ a:visited { input[type=text], input[type=password], textarea { background-color: transparent; + color: $primary-fg-color; } input[type=text]:focus, input[type=password]:focus, textarea:focus { From 7bad8d594daee57c8697971ba39c185bc9dbc524 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:39:10 +0000 Subject: [PATCH 28/44] Move common input styles out of themes --- res/css/_common.scss | 45 ++++++++++++++++++++++++++++++++ res/themes/dark/css/_dark.scss | 7 ----- res/themes/light/css/_light.scss | 13 +-------- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1f973c28d2..4399fb224e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -50,6 +50,51 @@ a:visited { color: $accent-color-alt; } +input[type=text], +input[type=search], +input[type=password] { + padding: 9px; + font-family: $font-family; + font-size: 14px; + font-weight: 600; + min-width: 0; +} + +input[type=text].mx_textinput_icon, +input[type=search].mx_textinput_icon { + padding-left: 36px; + background-repeat: no-repeat; + background-position: 10px center; +} + +// FIXME THEME - Tint by CSS rather than referencing a duplicate asset +input[type=text].mx_textinput_icon.mx_textinput_search, +input[type=search].mx_textinput_icon.mx_textinput_search { + background-image: url('$(res)/img/feather-icons/search-input.svg'); +} + +// dont search UI as not all browsers support it, +// we implement it ourselves where needed instead +input[type=search]::-webkit-search-decoration, +input[type=search]::-webkit-search-cancel-button, +input[type=search]::-webkit-search-results-button, +input[type=search]::-webkit-search-results-decoration { + display: none; +} + +.input[type=text]::-webkit-input-placeholder, +.input[type=text]::-moz-placeholder, +.input[type=search]::-webkit-input-placeholder, +.input[type=search]::-moz-placeholder { + color: #a5aab2; +} + +// Override Firefox's UA style so we get a consistent look across browsers +input::placeholder, +textarea::placeholder { + opacity: initial; +} + input[type=text], input[type=password], textarea { background-color: transparent; color: $primary-fg-color; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 63aff91806..8a4e25d689 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -173,13 +173,6 @@ $room-warning-bg-color: $header-panel-bg-color; } } -.input[type=text]::-webkit-input-placeholder, -.input[type=text]::-moz-placeholder, -.input[type=search]::-webkit-input-placeholder, -.input[type=search]::-moz-placeholder { - color: #a5aab2; -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index b4626eb7c3..9911f30d7b 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -287,16 +287,6 @@ $authpage-body-color: #61708b; } } -input[type=text], -input[type=search], -input[type=password] { - padding: 9px; - font-family: $font-family; - font-size: 14px; - font-weight: 600; - min-width: 0; -} - /*** panels ***/ .dark-panel { background-color: $secondary-accent-color; @@ -329,7 +319,6 @@ input[type=search].mx_textinput_icon { background-position: 10px center; } - // FIXME THEME - Tint by CSS rather than referencing a duplicate asset input[type=text].mx_textinput_icon.mx_textinput_search, input[type=search].mx_textinput_icon.mx_textinput_search { @@ -342,7 +331,7 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { - display: none; + display: none; } .input[type=text]::-webkit-input-placeholder, From 1359ac62cbc68a32e65029c24588ba257c2a5631 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:52:03 +0000 Subject: [PATCH 29/44] Tweak header divider line --- res/css/structures/_HeaderButtons.scss | 2 +- res/themes/dark/css/_dark.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index 3c33b325ff..a93cd0336a 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_HeaderButtons::before { content: ""; background-color: $header-divider-color; - margin: 2px 20px 5px 15px ; + margin: 0 15px; border-radius: 2px; width: 2px; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8a4e25d689..1ec289645f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -86,6 +86,8 @@ $composer-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; +$header-divider-color: $header-panel-border-color; + $roomtile-name-color: $header-panel-text-primary-color; $roomtile-selected-color: $text-primary-color; $roomtile-notified-color: $text-primary-color; From 59b58cbbaceed9596beb15fccec25d24bf3fb364 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 11:31:30 +0000 Subject: [PATCH 30/44] Restore highlighted right panel marker --- res/css/structures/_RightPanel.scss | 30 ++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 895382d714..474040a626 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -49,33 +49,49 @@ limitations under the License. border-bottom: 2px solid transparent; height: 20px; width: 20px; + position: relative; +} + +.mx_RightPanel_headerButton::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; background-color: $rightpanel-button-color; mask-repeat: no-repeat; mask-size: contain; } -.mx_RightPanel_membersButton { +.mx_RightPanel_membersButton::before { mask-image: url('$(res)/img/feather-icons/user.svg'); } -.mx_RightPanel_filesButton { +.mx_RightPanel_filesButton::before { mask-image: url('$(res)/img/feather-icons/files.svg'); } -.mx_RightPanel_notifsButton { +.mx_RightPanel_notifsButton::before { mask-image: url('$(res)/img/feather-icons/notifications.svg'); } -.mx_RightPanel_groupMembersButton { +.mx_RightPanel_groupMembersButton::before { mask-image: url('$(res)/img/icons-people.svg'); } -.mx_RightPanel_roomsButton { +.mx_RightPanel_roomsButton::before { mask-image: url('$(res)/img/icons-room-nobg.svg'); } -.mx_RightPanel_headerButton_highlight { - border-color: $button-bg-color; +.mx_RightPanel_headerButton_highlight::after { + content: ''; + position: absolute; + bottom: -6px; + left: 0; + right: 0; + height: 2px; + background-color: $button-bg-color; } .mx_RightPanel_headerButton_badge { From 26287067fc4f3083370a5c7fbb6df2049f968d27 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 13 Feb 2019 11:51:32 +0000 Subject: [PATCH 31/44] Security: Force TURN setting was inverted In making the settings more positive, we flipped 'disable peer to peer' but didn't change the caption, so the setting was inverted from what it was labelled as. Also, forcing p2p isn't the inverse of forcing turn. Change the setting to be 'allow p2p' and the label to match. --- src/MatrixClientPeg.js | 2 +- src/components/views/settings/tabs/VoiceSettingsTab.js | 2 +- src/i18n/strings/en_EN.json | 5 ++--- src/settings/Settings.js | 4 ++-- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index f283eb84a5..e36034c69d 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -177,7 +177,7 @@ class MatrixClientPeg { userId: creds.userId, deviceId: creds.deviceId, timelineSupport: true, - forceTURN: !SettingsStore.getValue('webRtcForcePeerToPeer', false), + forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false), verificationMethods: [verificationMethods.SAS] }; diff --git a/src/components/views/settings/tabs/VoiceSettingsTab.js b/src/components/views/settings/tabs/VoiceSettingsTab.js index 65f38c7841..aefb114dd3 100644 --- a/src/components/views/settings/tabs/VoiceSettingsTab.js +++ b/src/components/views/settings/tabs/VoiceSettingsTab.js @@ -174,7 +174,7 @@ export default class VoiceSettingsTab extends React.Component { {microphoneDropdown} {webcamDropdown} - +
); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7376b35fe5..b5a6542cd7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -292,7 +292,7 @@ "Automatically replace plain text Emoji": "Automatically replace plain text Emoji", "Mirror local video feed": "Mirror local video feed", "Enable Community Filter Panel": "Enable Community Filter Panel", - "Disable Peer-to-Peer for 1:1 calls": "Disable Peer-to-Peer for 1:1 calls", + "Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls", "Send analytics data": "Send analytics data", "Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device", "Never send encrypted messages to unverified devices in this room from this device": "Never send encrypted messages to unverified devices in this room from this device", @@ -1205,6 +1205,7 @@ "Quote": "Quote", "Source URL": "Source URL", "Collapse Reply Thread": "Collapse Reply Thread", + "End-to-end encryption information": "End-to-end encryption information", "Failed to set Direct Message status of room": "Failed to set Direct Message status of room", "unknown error code": "unknown error code", "Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s", @@ -1475,7 +1476,6 @@ "unencrypted": "unencrypted", "Decryption error": "Decryption error", "Session ID": "Session ID", - "End-to-end encryption information": "End-to-end encryption information", "Event information": "Event information", "Sender device information": "Sender device information", "Passphrases must match": "Passphrases must match", @@ -1536,7 +1536,6 @@ "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "This device is encrypting history using the new recovery method.": "This device is encrypting history using the new recovery method.", "Go to Settings": "Go to Settings", - "Setting up Secure Messages on this device will re-encrypt this device's message history with the new recovery method.": "Setting up Secure Messages on this device will re-encrypt this device's message history with the new recovery method.", "Set up Secure Messages": "Set up Secure Messages", "Recovery Method Removed": "Recovery Method Removed", "This device has detected that your recovery passphrase and key for Secure Messages have been removed.": "This device has detected that your recovery passphrase and key for Secure Messages have been removed.", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 671f46b366..9d8c3f741b 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -234,9 +234,9 @@ export const SETTINGS = { supportedLevels: ['config'], default: "dharma", }, - "webRtcForcePeerToPeer": { + "webRtcAllowPeerToPeer": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, - displayName: _td('Disable Peer-to-Peer for 1:1 calls'), + displayName: _td('Allow Peer-to-Peer for 1:1 calls'), default: true, invertedSettingName: 'webRtcForceTURN', }, From 84641556638bd261e1bda4ab93062ccbcb8a088b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 13 Feb 2019 12:16:04 +0000 Subject: [PATCH 32/44] fix topic & room name alignment in header --- res/css/views/rooms/_RoomHeader.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 2e3a5e5ef6..93f984e65b 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -155,6 +155,7 @@ limitations under the License. font-weight: 400; font-size: 13px; margin: 0 7px; + margin-top: 4px; // to align baseline of topic with room name overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; From 3eb5c71b75da4fbe809702a36ebe9d0036ac557f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 13 Feb 2019 12:24:04 +0000 Subject: [PATCH 33/44] rename 'Close Account' back to 'Deactivate Account'. the word close on a red button makes you feel like you're going to close the settings dialog, not terminate your account... --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 2 +- src/i18n/strings/bg.json | 2 +- src/i18n/strings/de_DE.json | 2 +- src/i18n/strings/en_EN.json | 2 +- src/i18n/strings/eu.json | 2 +- src/i18n/strings/fr.json | 2 +- src/i18n/strings/hu.json | 2 +- src/i18n/strings/ru.json | 2 +- src/i18n/strings/sq.json | 2 +- src/i18n/strings/zh_Hant.json | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index 378a54a51a..2364475239 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -162,7 +162,7 @@ export default class GeneralUserSettingsTab extends React.Component { {_t("Deactivating your account is a permanent action - be careful!")} - {_t("Close Account")} + {_t("Deactivate Account")} ); diff --git a/src/i18n/strings/bg.json b/src/i18n/strings/bg.json index 06e36d8283..7e3b2b6bd0 100644 --- a/src/i18n/strings/bg.json +++ b/src/i18n/strings/bg.json @@ -1515,7 +1515,7 @@ "2018 theme": "Тема 2018", "Account management": "Управление на акаунта", "Deactivating your account is a permanent action - be careful!": "Деактивирането на акаунта е необратимо действие - внимавайте!", - "Close Account": "Затвори акаунта", + "Deactivate Account": "Затвори акаунта", "For help with using Riot, click here.": "За помощ при използването на Riot, кликнете тук.", "For help with using Riot, click here or start a chat with our bot using the button below.": "За помощ при използването на Riot, кликнете тук или започнете чат с бота ни използвайки бутона по-долу.", "Chat with Riot Bot": "Чати с Riot Bot", diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json index d5ae97ee3b..8c85581e10 100644 --- a/src/i18n/strings/de_DE.json +++ b/src/i18n/strings/de_DE.json @@ -1516,7 +1516,7 @@ "Theme": "Design", "2018 theme": "2018 Design", "Account management": "Benutzerkontenverwaltung", - "Close Account": "Benutzerkonto schließen", + "Deactivate Account": "Benutzerkonto schließen", "For help with using Riot, click here.": "Um Hilfe zur Benutzung von Riot zu erhalten, klicke hier.", "For help with using Riot, click here or start a chat with our bot using the button below.": "Um Hilfe zur Benutzung von Riot zu erhalten, klicke hier oder beginne einen Chat mit unserem Bot, indem du den unteren Button klickst.", "Chat with Riot Bot": "Chatte mit dem Riot Bot", diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 74c32e2b30..6c38d6e4f6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -526,7 +526,7 @@ "Dark theme": "Dark theme", "Account management": "Account management", "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", - "Close Account": "Close Account", + "Deactivate Account": "Deactivate Account", "Legal": "Legal", "For help with using Riot, click here.": "For help with using Riot, click here.", "For help with using Riot, click here or start a chat with our bot using the button below.": "For help with using Riot, click here or start a chat with our bot using the button below.", diff --git a/src/i18n/strings/eu.json b/src/i18n/strings/eu.json index 4851e3c8fb..a53b4e2f24 100644 --- a/src/i18n/strings/eu.json +++ b/src/i18n/strings/eu.json @@ -1586,7 +1586,7 @@ "2018 theme": "2018ko itxura", "Account management": "Kontuen kudeaketa", "Deactivating your account is a permanent action - be careful!": "Kontua desgaitzea behin betiko ekintza bat da, kontuz ibili!", - "Close Account": "Itxi kontua", + "Deactivate Account": "Itxi kontua", "For help with using Riot, click here.": "Riot erabiltzeko laguntza behar baduzu, egin klik hemen.", "For help with using Riot, click here or start a chat with our bot using the button below.": "Riot erabiltzeko laguntza behar baduzu, egin klik hemen edo hasi txat bat gure botarekin beheko botoia sakatuz.", "Chat with Riot Bot": "Txateatu Riot botarekin", diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json index 91719094dc..af81555f1f 100644 --- a/src/i18n/strings/fr.json +++ b/src/i18n/strings/fr.json @@ -1526,7 +1526,7 @@ "2018 theme": "Thème 2018", "Account management": "Gestion du compte", "Deactivating your account is a permanent action - be careful!": "La désactivation du compte est une action permanente. Soyez prudent !", - "Close Account": "Fermer le compte", + "Deactivate Account": "Fermer le compte", "For help with using Riot, click here.": "Pour obtenir de l'aide sur l'utilisation de Riot, cliquez ici.", "For help with using Riot, click here or start a chat with our bot using the button below.": "Pour obtenir de l'aide sur l'utilisation de Riot, cliquez ici ou commencez une discussion avec notre bot en utilisant le bouton ci-dessous.", "Start a chat with Riot Bot": "Commencer une discussion avec le bot Riot", diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json index 29939b20c6..2dbba24ade 100644 --- a/src/i18n/strings/hu.json +++ b/src/i18n/strings/hu.json @@ -1525,7 +1525,7 @@ "2018 theme": "2018-as téma", "Account management": "Fiók menedzsment", "Deactivating your account is a permanent action - be careful!": "A fiók felfüggesztése végleges - légy óvatos!", - "Close Account": "Fiók bezárása", + "Deactivate Account": "Fiók bezárása", "For help with using Riot, click here.": "A Riot használatában való segítséghez kattints ide.", "For help with using Riot, click here or start a chat with our bot using the button below.": "A Riot használatában való segítségér kattints ide vagy kezdj beszélgetni a botunkkal az alábbi gombra kattintva.", "Start a chat with Riot Bot": "Csevegés kezdése a Riot Bottal", diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json index c24af068ed..9f766b9bf1 100644 --- a/src/i18n/strings/ru.json +++ b/src/i18n/strings/ru.json @@ -1393,7 +1393,7 @@ "Developer options": "Параметры разработчика", "General": "Основной", "Set a new account password...": "Установить новый пароль учетной записи...", - "Close Account": "Закрыть аккаунт", + "Deactivate Account": "Закрыть аккаунт", "Legal": "Правовой", "At this time it is not possible to reply with an emote.": "В настоящее время невозможно ответить с помощью эмоции.", "Room avatar": "Аватар комнаты", diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json index 7fa8895c15..abef2825fc 100644 --- a/src/i18n/strings/sq.json +++ b/src/i18n/strings/sq.json @@ -1490,7 +1490,7 @@ "2018 theme": "Temë e 2018-s", "Account management": "Administrim llogarish", "Deactivating your account is a permanent action - be careful!": "Çaktivizimi i llogarisë tuaj është një veprim i pakthyeshëm - hapni sytë!", - "Close Account": "Mbylleni Llogarinë", + "Deactivate Account": "Mbylleni Llogarinë", "For help with using Riot, click here.": "Për ndihmë rreth përdorimit të Riot-it, klikoni këtu.", "For help with using Riot, click here or start a chat with our bot using the button below.": "Për ndihmë rreth përdorimit të Riot-it, klikoni këtu, ose nisni një fjalosje me robotin tonë duke përdorur butonin më poshtë.", "Help & About": "Ndihmë & Rreth", diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json index 96485d3f28..6a95c64ce3 100644 --- a/src/i18n/strings/zh_Hant.json +++ b/src/i18n/strings/zh_Hant.json @@ -1524,7 +1524,7 @@ "Account management": "帳號管理", "2018 theme": "2018 主題", "Deactivating your account is a permanent action - be careful!": "停用您的帳號是永久動作，請小心！", - "Close Account": "關閉帳號", + "Deactivate Account": "關閉帳號", "For help with using Riot, click here.": "對於使用 Riot 的說明，點選這裡。", "For help with using Riot, click here or start a chat with our bot using the button below.": "對於使用 Riot 的說明，點選這裡或是使用下面的按鈕開始與我們的機器人聊天。", "Chat with Riot Bot": "與 Riot 機器人聊天", From 4c56b45a9f1a85d348a053a77560ff7438ba2764 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 13 Feb 2019 12:46:08 +0000 Subject: [PATCH 34/44] back out bold unread --- res/css/views/rooms/_RoomTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 39071b6f9d..6b2e2573e5 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -155,7 +155,7 @@ limitations under the License. .mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_RoomTile_name { - font-weight: 700; + // font-weight: 700; // bold is too loud in the end color: $roomtile-selected-color; } } From e09963cdfb660019377f9046ddbe151e0e6949e5 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 13:10:55 +0000 Subject: [PATCH 35/44] Tweak dark theme color values --- res/themes/dark/css/_dark.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 1ec289645f..75693892b7 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,17 +1,17 @@ // unified palette // try to use these colors when possible $bg-color: #181b21; -$base-color: #15171b; +$base-color: #1b1f25; $base-text-color: #edf3ff; -$header-panel-bg-color: #181b21; -$header-panel-border-color: #1c212b; +$header-panel-bg-color: #22262e; +$header-panel-border-color: #000000; $header-panel-text-primary-color: #a1b2d1; $header-panel-text-secondary-color: #c8c8cd; $text-primary-color: #edf3ff; $text-secondary-color: #a1b2d1; -$search-bg-color: #22262e; +$search-bg-color: #181b21; $search-placeholder-color: #61708b; -$room-highlight-color: #22262e; +$room-highlight-color: #343a46; // typical text (dark-on-white in light skin) $primary-fg-color: $text-primary-color; From c8edd6b41749eec9ff9b3a208bd502753ee723ff Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 13:17:50 +0000 Subject: [PATCH 36/44] Route header panel bg color to left and right panels --- res/themes/dark/css/_dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 75693892b7..53fdefc403 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -152,7 +152,7 @@ $room-warning-bg-color: $header-panel-bg-color; /*** panels ***/ .dark-panel { - background-color: $primary-bg-color; + background-color: $header-panel-bg-color; } .dark-panel { From fb4fd54f6fa2ae9374272b64a31abc739cdd15d8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 13:48:56 +0000 Subject: [PATCH 37/44] Stop gradients at panel bg color --- res/css/structures/_RoomSubList.scss | 2 +- res/css/views/rooms/_RoomBreadcrumbs.scss | 2 +- res/themes/light/css/_light.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 9791be902f..bef7ddc450 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -152,7 +152,7 @@ limitations under the License. &.mx_IndicatorScrollbar_topOverflow::before { top: 0; transition: background-image 0.1s ease-in; - background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1)); + background: linear-gradient(to top, rgba(242,245,248,0), $header-panel-bg-color); } /* diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index ba4aec3b6e..296850c266 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -36,7 +36,7 @@ limitations under the License. top: 0; right: 0; height: 100%; - background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1)); + background: linear-gradient(to right, rgba(242,245,248,0), $header-panel-bg-color); } .mx_RoomBreadcrumbs_animate { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 9911f30d7b..fa83a0bdfb 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -11,6 +11,7 @@ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif; $accent-color: #03b381; $notice-primary-color: #ff4b55; $notice-secondary-color: #61708b; +$header-panel-bg-color: #f2f5f8; // typical text (dark-on-white in light skin) $primary-fg-color: #454545; From 4409636c0b969d12785eaee4e3d127ebcfdf4381 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 13:57:59 +0000 Subject: [PATCH 38/44] Tweak panel button divider color --- res/css/structures/_HeaderButtons.scss | 1 + res/themes/dark/css/_dark.scss | 2 +- res/themes/light/css/_light.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index a93cd0336a..c896b7f527 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -21,6 +21,7 @@ limitations under the License. .mx_HeaderButtons::before { content: ""; background-color: $header-divider-color; + opacity: 0.5; margin: 0 15px; border-radius: 2px; width: 2px; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 53fdefc403..32fb275a32 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -86,7 +86,7 @@ $composer-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; -$header-divider-color: $header-panel-border-color; +$header-divider-color: $header-panel-text-primary-color; $roomtile-name-color: $header-panel-text-primary-color; $roomtile-selected-color: $text-primary-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index fa83a0bdfb..eec98258b4 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -155,7 +155,7 @@ $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; $composer-e2e-icon-color: #c9ced6; -$header-divider-color: #e6eaee; +$header-divider-color: #91A1C0; // ******************** From feb92957c0aca8782455a8eff83cae885613e87a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 14:05:45 +0000 Subject: [PATCH 39/44] Use notice colors for E2E icons --- res/themes/dark/css/_dark.scss | 2 +- res/themes/light/css/_light.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 32fb275a32..b5ae93c696 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -116,7 +116,7 @@ $button-primary-fg-color: #ffffff; $button-primary-bg-color: $accent-color; $button-secondary-bg-color: transparent; $button-danger-fg-color: #ffffff; -$button-danger-bg-color: #f56679; +$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index eec98258b4..ac5813ba88 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -33,7 +33,7 @@ $selection-fg-color: $primary-bg-color; $focus-brightness: 105%; // red warning colour -$warning-color: #f56679; +$warning-color: $notice-primary-color; // background colour for warnings $warning-bg-color: #DF2A8B; $info-bg-color: #2A9EDF; @@ -227,7 +227,7 @@ $button-primary-fg-color: #ffffff; $button-primary-bg-color: $accent-color; $button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: #ffffff; -$button-danger-bg-color: #f56679; +$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color From 93324896f39f5a0110cb7d336b35d4c1e5966657 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 14:24:03 +0000 Subject: [PATCH 40/44] Force authpage to act like light theme --- res/css/structures/auth/_Login.scss | 2 +- res/css/views/auth/_AuthBody.scss | 26 +++++++++++++++++++-- res/css/views/auth/_ServerTypeSelector.scss | 4 ++-- res/themes/light/css/_light.scss | 3 ++- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index b48021c27a..d4b5e7402c 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -79,7 +79,7 @@ limitations under the License. .mx_Login_type_container { display: flex; margin-bottom: 14px; - color: $primary-fg-color; + color: $authpage-primary-color; } .mx_Login_type_label { diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index fd54cd135a..6216bdd4b8 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -21,19 +21,41 @@ limitations under the License. padding: 25px 60px; box-sizing: border-box; font-size: 12px; - color: $authpage-body-color; + color: $authpage-secondary-color; } .mx_AuthBody h2 { font-size: 24px; font-weight: 600; margin-top: 8px; + color: $authpage-primary-color; } .mx_AuthBody h3 { font-size: 14px; font-weight: 600; - color: $primary-fg-color; + color: $authpage-primary-color; +} + +.mx_AuthBody input[type=text], +.mx_AuthBody input[type=password] { + color: $authpage-primary-color; +} + +.mx_AuthBody .mx_Field input, +.mx_AuthBody .mx_Field select { + color: $authpage-primary-color; + background-color: $authpage-body-bg-color; +} + +.mx_AuthBody .mx_Field label { + color: $authpage-primary-color; +} + +.mx_AuthBody .mx_Field input:focus + label, +.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, +.mx_AuthBody .mx_Field select + label /* Always show a select's label on top to not collide with the value */ { + background-color: $authpage-body-bg-color; } .mx_AuthBody_editServerDetails { diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss index 03f5386501..ed781726b7 100644 --- a/res/css/views/auth/_ServerTypeSelector.scss +++ b/res/css/views/auth/_ServerTypeSelector.scss @@ -34,7 +34,7 @@ limitations under the License. .mx_ServerTypeSelector_label { text-align: center; font-weight: 600; - color: $primary-fg-color; + color: $authpage-primary-color; margin: 8px 0; } @@ -54,7 +54,7 @@ limitations under the License. height: 18px; margin-bottom: 12px; font-weight: 600; - color: $primary-fg-color; + color: $authpage-primary-color; } .mx_ServerTypeSelector_logo > div { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ac5813ba88..08913cec80 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -246,7 +246,8 @@ $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-body-bg-color: #ffffff; $authpage-lang-color: #4e5054; -$authpage-body-color: #61708b; +$authpage-primary-color: #454545; +$authpage-secondary-color: #61708b; /*** form elements ***/ From 4028d775baf25f68721e3aeb19934c0c6ffb851d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 13 Feb 2019 14:35:56 +0000 Subject: [PATCH 41/44] remove unicode percentages --- src/i18n/strings/ja.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/i18n/strings/ja.json b/src/i18n/strings/ja.json index b1ed91e9ab..2f04e39104 100644 --- a/src/i18n/strings/ja.json +++ b/src/i18n/strings/ja.json @@ -300,10 +300,10 @@ "Add rooms to the community": "コミュニティに部屋を追加します", "Room name or alias": "部屋名またはエイリアス", "Add to community": "コミュニティに追加", - "Failed to invite the following users to %(groupId)s:": "次のユーザーを ％(groupId)s に招待できませんでした:", + "Failed to invite the following users to %(groupId)s:": "次のユーザーを %(groupId)s に招待できませんでした:", "Failed to invite users to community": "ユーザーをコミュニティに招待できませんでした", "Failed to invite users to %(groupId)s": "ユーザーを %(groupId)s に招待できませんでした", - "Failed to add the following rooms to %(groupId)s:": "次の部屋を ％(groupId)s に追加できませんでした:", + "Failed to add the following rooms to %(groupId)s:": "次の部屋を %(groupId)s に追加できませんでした:", "Riot does not have permission to send you notifications - please check your browser settings": "Riotに通知を送信する権限がありません - ブラウザの設定を確認してください", "Riot was not given permission to send notifications - please try again": "Riotに通知を送信する権限がありませんでした。もう一度お試しください", "Unable to enable Notifications": "通知を有効にできません", @@ -323,7 +323,7 @@ "Send Invites": "招待状を送る", "Failed to invite user": "ユーザーを招待できませんでした", "Failed to invite": "招待できませんでした", - "Failed to invite the following users to the %(roomName)s room:": "次のユーザーを ％(roomName)s の部屋に招待できませんでした:", + "Failed to invite the following users to the %(roomName)s room:": "次のユーザーを %(roomName)s の部屋に招待できませんでした:", "You need to be logged in.": "ログインする必要があります。", "You need to be able to invite users to do that.": "それをするためにユーザーを招待できる必要があります。", "Unable to create widget.": "ウィジェットを作成できません。", @@ -363,9 +363,9 @@ "Unknown (user, device) pair:": "不明な(ユーザー、端末) ペア:", "Device already verified!": "端末はすでに確認済みです！", "WARNING: Device already verified, but keys do NOT MATCH!": "警告：端末はすでに検証済みですが、キーは一致しません！", - "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "警告: キー確認が失敗しました! %(userId)s と端末 ％(deviceId)s の署名鍵は、提供された鍵 \"％(fingerprint)s\" と一致しない \"%(fprint)s\" です。 通信が傍受されている可能性があります!", + "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "警告: キー確認が失敗しました! %(userId)s と端末 %(deviceId)s の署名鍵は、提供された鍵 \"%(fingerprint)s\" と一致しない \"%(fprint)s\" です。 通信が傍受されている可能性があります!", "Verified key": "確認済みのキー", - "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "指定した署名鍵は、％(userId)s の端末％(deviceId)s から受け取った署名鍵と一致します。端末を検証済みとしてマークしました。", + "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "指定した署名鍵は、%(userId)s の端末%(deviceId)s から受け取った署名鍵と一致します。端末を検証済みとしてマークしました。", "Displays action": "アクションを表示", "Forces the current outbound group session in an encrypted room to be discarded": "暗号化されたルーム内の現在のアウトバウンドグループセッションを強制的に破棄します", "Unrecognised command:": "認識できないコマンド:", @@ -609,7 +609,7 @@ "Replying": "返信中", "Failed to set avatar.": "アバターを設定できませんでした。", "Save": "保存", - "(~%(count)s results)|other": "(~％(count)s 結果)", + "(~%(count)s results)|other": "(~%(count)s 結果)", "(~%(count)s results)|one": "(~%(count)s 結果)", "Join Room": "部屋に入る", "Remove avatar": "アバターを削除", @@ -641,7 +641,7 @@ "Rejoin": "再参加", "You have been kicked from %(roomName)s by %(userName)s.": "あなたは %(userName)s により %(roomName)s から追放されました。", "You have been kicked from this room by %(userName)s.": "あなたは %(userName)s によりこの部屋から追放されました。", - "You have been banned from %(roomName)s by %(userName)s.": "あなたは ％(userName)s により %(roomName)s からブロックされました。", + "You have been banned from %(roomName)s by %(userName)s.": "あなたは %(userName)s により %(roomName)s からブロックされました。", "You have been banned from this room by %(userName)s.": "あなたは %(userName)s によってこの部屋からブロックされました。", "This room": "この部屋", "%(roomName)s does not exist.": "%(roomName)s は存在しません。", From f64f39f773cbe484d2dbeb1c1d2cb78d607f7574 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 14:56:28 +0000 Subject: [PATCH 42/44] Tweak box shadow on dark theme --- res/themes/dark/css/_dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index b5ae93c696..ac91d8e749 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -58,7 +58,7 @@ $scrollbar-track-color: transparent; // context menus $menu-border-color: $header-panel-border-color; $menu-bg-color: $header-panel-bg-color; -$menu-box-shadow-color: $menu-bg-color; +$menu-box-shadow-color: $bg-color; $menu-selected-color: $room-highlight-color; $avatar-initial-color: #ffffff; From 5f6907c85eafd5083e000bf4b977a492544e547c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 15:06:24 +0000 Subject: [PATCH 43/44] Improve gradients for Safari --- res/css/structures/_RoomSubList.scss | 2 +- res/css/views/rooms/_RoomBreadcrumbs.scss | 2 +- res/themes/dark/css/_dark.scss | 2 ++ res/themes/light/css/_light.scss | 2 ++ 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index bef7ddc450..f76df1f683 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -152,7 +152,7 @@ limitations under the License. &.mx_IndicatorScrollbar_topOverflow::before { top: 0; transition: background-image 0.1s ease-in; - background: linear-gradient(to top, rgba(242,245,248,0), $header-panel-bg-color); + background: linear-gradient(to top, $panel-gradient); } /* diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index 296850c266..c5a149d5cd 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -36,7 +36,7 @@ limitations under the License. top: 0; right: 0; height: 100%; - background: linear-gradient(to right, rgba(242,245,248,0), $header-panel-bg-color); + background: linear-gradient(to right, $panel-gradient); } .mx_RoomBreadcrumbs_animate { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index ac91d8e749..a59eec30fb 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -122,6 +122,8 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $room-warning-bg-color: $header-panel-bg-color; +$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); + /*** form elements ***/ // .mx_textinput is a container for a text input diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 08913cec80..7bd84d6191 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -249,6 +249,8 @@ $authpage-lang-color: #4e5054; $authpage-primary-color: #454545; $authpage-secondary-color: #61708b; +$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); + /*** form elements ***/ // .mx_textinput is a container for a text input From 422750082d16017599625df04637bfb1f4050c15 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 15:11:29 +0000 Subject: [PATCH 44/44] Tweak pill bg color for dark theme --- res/themes/dark/css/_dark.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index a59eec30fb..c0d0f15613 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -23,6 +23,9 @@ $light-fg-color: $header-panel-text-secondary-color; // used for focusing form controls $focus-bg-color: $room-highlight-color; +$mention-user-pill-bg-color: $warning-color; +$other-user-pill-bg-color: $room-highlight-color; + // informational plinth $info-plinth-bg-color: $header-panel-bg-color; $info-plinth-fg-color: #888;