diff --git a/config.sample.json b/config.sample.json index 9cb2b5e727..016517cd2c 100644 --- a/config.sample.json +++ b/config.sample.json @@ -1,6 +1,10 @@ { "default_hs_url": "https://matrix.org", "default_is_url": "https://vector.im", + "disable_custom_urls": false, + "disable_guests": false, + "disable_login_language_selector": false, + "disable_3pid_login": false, "brand": "Riot", "integrations_ui_url": "https://scalar.vector.im/", "integrations_rest_url": "https://scalar.vector.im/api", @@ -10,6 +14,8 @@ "feature_pinning": "labs" }, "default_federate": true, + "welcomePageUrl": "home.html", + "default_theme": "light", "roomDirectory": { "servers": [ "matrix.org" diff --git a/docs/skinning thoughts.md b/docs/skinning thoughts.md new file mode 100644 index 0000000000..bbaf18a284 --- /dev/null +++ b/docs/skinning thoughts.md @@ -0,0 +1,68 @@ +== Skinning refactor == + +matrix-react-sdk + - base images + - base CSS + - all the components needed to build a workable app (including the top layer) + +riot-web: the riot skin + - riot-specific classes (e.g. login header/footer) + - riot-specific themes + - light + - dark + +i.e. the only things which should go into riot-web are bits which apply vector-specific skinning +specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)" + - Questions: + - Electron app? (should probably be a separate repo in its own right? but might as well go here for now) + - index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?) + +ideally matrix-react-sdk itself should ship with a default skin which actually works built in. + +status skin (can go in the same app for now) + - has status theme + - which inherits from riot light theme + - how do we share graphics between skins? + - shove them into react-sdk, or... + - guess we do ../../vector/img + - this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images) + +out of scope: + - making the components more independent, so they can be used in isolation. + - that said, the bits which should probably be used by being embeded into a different app: + - login/reg + - RoomView + RoomSettings + - MessageComposer + - RoomList + - MemberList + - MemberInfo + - Voip UI + - UserSettings + - sharing different js-sdks between the different isolated modules + +other changes: + - how do we handle i18n? + - each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad. + - ability to associate components with a given skin + - skins/vector/src <-- components + - skins/vector/css + - skins/vector/img + - skins/vector/fonts + - gather together themes (per skin) into a single place too + - skins/vector/themes/foo/css + - skins/vector/themes/foo/img + - skins/vector/themes/foo/fonts + - ideally riot-web would contain almost nothing but skins/vector directory. + - ability to entirely replace CSS rather than override it for a given theme + - e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`. + +random thoughts; + - should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components? + - might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime + - if so, perhaps skins & themes should converge... + +----------------- + +Immediate plan for Status: + * Implement it as a theme for the riot skin + * Ideally move skins to a sensible level (possibly even including src?) diff --git a/res/home-status.html b/res/home-status.html new file mode 100644 index 0000000000..7d50470a22 --- /dev/null +++ b/res/home-status.html @@ -0,0 +1,192 @@ + + +
+
+
+

Welcome to Status Community Chat, powered by Riot.

+

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

+
+
+ +
+

Our rooms

+

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

+

Before posting please refer to our Code of Conduct

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

+ Interested in market and cryptocurrency type discussions? +

+ Join Telegram +
+
diff --git a/scripts/copy-res.js b/scripts/copy-res.js index b461d030fd..1a68581444 100755 --- a/scripts/copy-res.js +++ b/scripts/copy-res.js @@ -42,10 +42,11 @@ const INCLUDE_LANGS = [ const COPY_LIST = [ ["res/manifest.json", "webapp"], ["res/home.html", "webapp"], + ["res/home-status.html", "webapp"], ["res/home/**", "webapp/home"], ["res/{media,vector-icons}/**", "webapp"], ["res/flags/*", "webapp/flags/"], - ["src/skins/vector/{fonts,img}/**", "webapp"], + ["src/skins/vector/{fonts,img,themes}/**", "webapp"], ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"], ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"], ["./config.json", "webapp", { directwatch: 1 }], diff --git a/src/components/views/globals/NewVersionBar.js b/src/components/views/globals/NewVersionBar.js index f56d1a51b7..2aedf39204 100644 --- a/src/components/views/globals/NewVersionBar.js +++ b/src/components/views/globals/NewVersionBar.js @@ -42,7 +42,7 @@ export default React.createClass({ const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog'); Modal.createTrackedDialog('Display release notes', '', QuestionDialog, { title: _t("What's New"), - description: 
{releaseNotes}
, + description:
{releaseNotes}
, button: _t("Update"), onFinished: (update) => { if(update && PlatformPeg.get()) { diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js index b04dcdb597..e5243f8ec6 100644 --- a/src/components/views/login/VectorLoginFooter.js +++ b/src/components/views/login/VectorLoginFooter.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); import { _t } from 'matrix-react-sdk/lib/languageHandler'; +import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore'; module.exports = React.createClass({ displayName: 'VectorLoginFooter', @@ -26,6 +27,9 @@ module.exports = React.createClass({ }, render: function() { + // FIXME: replace this with a proper Status skin + if (UserSettingsStore.getTheme() === 'status') return
; + return (
blog  ·   diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js index 3aa8811c40..71093a96c2 100644 --- a/src/components/views/login/VectorLoginHeader.js +++ b/src/components/views/login/VectorLoginHeader.js @@ -33,8 +33,10 @@ module.exports = React.createClass({ render: function() { return ( -
- Riot +
+
+ Riot +
); } diff --git a/src/header b/src/header index 060709b82e..6d367b04e8 100644 --- a/src/header +++ b/src/header @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index a9b8092848..8a333071cd 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -1,6 +1,7 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +Copyright 2017 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -23,12 +24,7 @@ html { } body { - /* Open Sans lacks combining diacritics, so these will fall through - to the next font. Helevetica's diacritics however do not combine - nicely with Open Sans (on OSX, at least) and result in a huge - horizontal mess. Arial empirically gets it right, hence prioritising - Arial here. */ - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 15px; background-color: $primary-bg-color; color: $primary-fg-color; @@ -73,7 +69,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { /* Required by Firefox */ textarea { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; } /* Prevent ugly dotted highlight around selected elements in Firefox */ @@ -123,6 +119,19 @@ textarea { transition: height 120ms ease-out ! important; } +// These are magic constants which are excluded from tinting, to let themes +// (which only have CSS, unlike skins) tell the app what their non-tinted +// colourscheme is by inspecting the stylesheet DOM. +// +// They are not used for layout!! +#mx_theme_accentColor { + color: $accent-color; +} + +#mx_theme_secondaryAccentColor { + color: $secondary-accent-color; +} + .mx_Dialog_wrapper { position: fixed; z-index: 4000; @@ -210,24 +219,19 @@ textarea { } .mx_Dialog button, .mx_Dialog input[type="submit"] { - border: 0px; - height: 36px; - border-radius: 40px; - border: solid 1px $accent-color; - font-weight: 600; - font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + @mixin mx_DialogButton; margin-left: 0px; margin-right: 8px; - padding-left: 1.5em; - padding-right: 1.5em; - outline: none; - cursor: pointer; - color: $accent-color; - background-color: $primary-bg-color; - /* align images in buttons (eg spinners) */ - vertical-align: middle; + // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; + color: $accent-color; + background-color: $accent-fg-color; +} + +.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover { + @mixin mx_DialogButton_hover; } .mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus { @@ -292,26 +296,18 @@ textarea { color: $selection-fg-color; } -/** green button with rounded corners */ .mx_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - cursor: pointer; - display: inline; + @mixin mx_DialogButton_small; +} + +.mx_textButton:hover { + @mixin mx_DialogButton_hover; } .mx_button_row { margin-top: 69px; } -.changelog_text { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; -} - .mx_Beta { color: red; margin-right: 10px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 0f34f056a5..64dec8260a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -38,7 +38,7 @@ limitations under the License. .mx_SearchBox_search { flex: 1 1 auto; width: 0px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 12px; margin-top: -2px; height: 24px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 6607253886..f6341dd6cd 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -64,30 +64,13 @@ limitations under the License. } .mx_UserSettings_button { + @mixin mx_DialogButton; display: inline; - vertical-align: middle; - border: 0px; - border-radius: 36px; - font-weight: 400; - font-size: 16px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; margin: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; } -.mx_UserSettings_button.mx_UserSettings_buttonSmall { - height: 36px; - padding: 4px; - padding-left: 7px; - padding-right: 7px; - font-size: 12px; - margin-right: 5px; - line-height: 12px; +.mx_UserSettings_button:hover { + @mixin mx_DialogButton_hover; } .mx_UserSettings_button.danger { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 86ab39be1b..84b8306a74 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -26,7 +26,6 @@ limitations under the License. } .mx_Login h2 { - color: $primary-fg-color; font-weight: 300; margin-top: 32px; margin-bottom: 20px; @@ -80,15 +79,14 @@ limitations under the License. } .mx_Login_submit { + @mixin mx_DialogButton; + width: 100%; margin-top: 35px; margin-bottom: 24px; - width: 100%; - border-radius: 40px; - height: 40px; - border: 0px; - background-color: $accent-color; - font-size: 15px; - color: $accent-fg-color; +} + +.mx_Login_submit:hover { + @mixin mx_DialogButton_hover; } .mx_Login_submit:disabled { @@ -137,8 +135,7 @@ limitations under the License. } .mx_Login_forgot { - font-size: 13px; - opacity: 0.8; + font-size: 15px; } .mx_Login_forgot:link { @@ -224,7 +221,6 @@ limitations under the License. height: 16px; flex-shrink: 1; min-width: 0px; - border-radius: 3px; } .mx_Login_phoneNumberField { diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss index 320efda043..ee2d9c190f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss @@ -31,5 +31,5 @@ limitations under the License. .mx_BaseAvatar_image { border-radius: 40px; vertical-align: top; - background-color: #fff; + background-color: $avatar-bg-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss index 8730c94f72..6fc211743d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss @@ -28,7 +28,7 @@ limitations under the License. { height: 26px; font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; padding-left: 12px; padding-right: 12px; margin: 0 !important; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss index d12bcd3712..b859d6bf4d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss @@ -34,7 +34,7 @@ limitations under the License. } .mx_ConfirmUserActionDialog_reasonField { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; font-size: 14px; color: $primary-fg-color; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss index cbc0195cac..9fb2bf525e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss @@ -27,7 +27,7 @@ limitations under the License. border: solid 1px $accent-color; font-weight: 600; font-size: 14px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; margin-left: 0px; margin-right: 8px; padding-left: 1.5em; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss index 804b3f419e..332cd571d9 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss @@ -49,7 +49,7 @@ limitations under the License. border: solid 1px $accent-color; font-weight: 600; font-size: 13px; - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; margin-left: 0px; margin-right: 8px; padding-left: 0.5em; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index bb0ca9594b..cfc46e85ab 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -156,18 +156,17 @@ limitations under the License. .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody { display: block; width: 100%; - height: 36px; - background-image: $event-redacted-img; - background-repeat: no-repeat; - background-size: contain; -} - -.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line { - /* - Prevent changing colour of the background because - $event-redacted-img matches $primary-bg-color - */ - background-color: initial !important; + height: 22px; + width: 250px; + border-radius: 11px; + background: repeating-linear-gradient( + -45deg, + $event-redacted-fg-color, + $event-redacted-fg-color 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px $event-redacted-border-color inset; } .mx_EventTile_highlight, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 2a5be3250d..5888820e0d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -26,19 +26,15 @@ limitations under the License. } .mx_MemberDeviceInfo_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - border: 0px; - font-size: 14px; - cursor: pointer; + @mixin mx_DialogButton_small; margin: 2px; flex: 1; } +.mx_MemberDeviceInfo_textButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_MemberDeviceInfo_deviceId { font-size: 13px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index dd41483b6c..83fc70aefb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_MemberList_query, .mx_GroupMemberList_query, .mx_GroupRoomList_query { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 14e758535e..4a84d161bb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -55,9 +55,11 @@ limitations under the License. .mx_MessageComposer_noperm_error { width: 100%; height: 60px; - text-align: center; font-style: italic; color: $greyed-fg-color; + display: flex; + align-items: center; + justify-content: center; } .mx_MessageComposer_input_wrapper { @@ -138,7 +140,7 @@ limitations under the License. max-height: 120px; overflow: auto; /* needed for FF */ - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; } /* hack for FF as vertical alignment of custom placeholder text is broken */ @@ -175,6 +177,8 @@ limitations under the License. .mx_MessageComposer_formatting { cursor: pointer; margin: 0 11px; + width: 24px; + height: 18px; } .mx_MessageComposer_formatbar_wrapper { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 79ada70b23..9c1349adbc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -42,22 +42,14 @@ limitations under the License. } .mx_RoomHeader_textButton { - height: 36px; - background-color: $accent-color; - border-radius: 36px; + @mixin mx_DialogButton; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - margin-top: -2px; - text-align: center; + margin-top: -5px; order: 2; - cursor: pointer; +} -/* - flex: 0 0 90px; -*/ - padding-left: 12px; - padding-right: 12px; +.mx_RoomHeader_textButton:hover { + @mixin mx_DialogButton_hover; } .mx_RoomHeader_textButton_danger { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index 35787ca0c4..d8a8d58a9c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -50,10 +50,11 @@ limitations under the License. color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; + line-height: 16px; } .mx_RoomList_emptySubListTip .mx_RoleButton { - vertical-align: -3px; + vertical-align: -2px; } .mx_RoomList_headerButtons { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 9e269ac2b5..4013af4c7c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -22,18 +22,16 @@ limitations under the License. .mx_RoomSettings_leaveButton, .mx_RoomSettings_unbanButton { + @mixin mx_DialogButton; position: relative; - height: 36px; - background-color: $accent-color; - border-radius: 36px; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - text-align: center; - cursor: pointer; - padding-left: 12px; - padding-right: 12px; } + +.mx_RoomSettings_leaveButton:hover, +.mx_RoomSettings_unbanButton:hover { + @mixin mx_DialogButton_hover; +} + .mx_RoomSettings_integrationsButton_error { position: relative; cursor: not-allowed; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 6116dd92ca..37a663123d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -21,7 +21,7 @@ limitations under the License. } .mx_SearchableEntityList_query { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: $font-family; border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 3a7eac5627..a3346d1074 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -1,3 +1,9 @@ +/* Open Sans lacks combining diacritics, so these will fall through + to the next font. Helevetica's diacritics however do not combine + nicely with Open Sans (on OSX, at least) and result in a huge + horizontal mess. Arial empirically gets it right, hence prioritising + Arial here. */ +$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; // typical text (dark-on-white in light skin) $primary-fg-color: #454545; @@ -65,6 +71,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; $avatar-initial-color: #ffffff; +$avatar-bg-color: #ffffff; $h3-color: #3d3b39; @@ -98,6 +105,9 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #d3efe1; +$roomsublist-chevron-color: $accent-color; + +$panel-divider-color: rgba(118, 207, 166, 0.2); // ******************** @@ -107,7 +117,8 @@ $event-sending-color: #ddd; $event-notsent-color: #f44; // event redaction -$event-redacted-img: url('../../img/redacted.jpg'); +$event-redacted-fg-color: #e2e2e2; +$event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; @@ -127,3 +138,31 @@ $lightbox-border-color: #ffffff; // unused? $progressbar-color: #000; + +// ***** 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; +} + +@define-mixin mx_DialogButton_hover { +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + font-size: 15px; + padding: 0px 1.5em 0px 1.5em; +} diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index d6fa88d6ce..595783c377 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -60,6 +60,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; $avatar-initial-color: #2d2d2d; +$avatar-bg-color: #ffffff; $h3-color: $primary-fg-color; @@ -92,6 +93,9 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; +$roomsublist-chevron-color: $accent-color; + +$panel-divider-color: rgba(118, 207, 166, 0.2); // ******************** @@ -101,7 +105,8 @@ $event-sending-color: #888; $event-notsent-color: #f44; // event redaction -$event-redacted-img: url('../../img/redacted-dark.jpg'); +$event-redacted-fg-color: #606060; +$event-redacted-border-color: #000000; // event timestamp $event-timestamp-color: #acacac; diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 418358dd65..29786fadda 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -49,7 +49,7 @@ limitations under the License. .mx_LeftPanel .mx_BottomLeftMenu { order: 3; - border-top: 1px solid rgba(118, 207, 166, 0.2); + border-top: 1px solid $panel-divider-color; margin-left: 16px; /* gutter */ margin-right: 16px; /* gutter */ flex: 0 0 60px; diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index 0d56d6c378..1a78e51731 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -129,7 +129,7 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 6px solid $accent-color; + border-top: 6px solid $roomsublist-chevron-color; } .mx_RoomSubList_chevronUp { @@ -137,14 +137,14 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 6px solid $accent-color; + border-bottom: 6px solid $roomsublist-chevron-color; } .mx_RoomSubList_chevronRight { width: 0; height: 0; border-top: 5px solid transparent; - border-left: 6px solid $accent-color; + border-left: 6px solid $roomsublist-chevron-color; border-bottom: 5px solid transparent; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 1a7b1c1646..be69b15f37 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -56,3 +56,7 @@ limitations under the License. .mx_MatrixToolbar_action { margin-right: 16px; } + +.mx_MatrixToolbar_changelog { + white-space: pre; +} \ No newline at end of file diff --git a/src/skins/vector/img/button-text-formatting.svg b/src/skins/vector/img/button-text-formatting.svg index d3fc3f5f54..d697010d40 100644 --- a/src/skins/vector/img/button-text-formatting.svg +++ b/src/skins/vector/img/button-text-formatting.svg @@ -1,18 +1,21 @@ - - - - F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9 - Created with sketchtool. - - - - - - - A - a - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/src/skins/vector/img/logos/riot-im-logo-1.png b/src/skins/vector/img/logos/riot-im-logo-1.png new file mode 100644 index 0000000000..768679da66 Binary files /dev/null and b/src/skins/vector/img/logos/riot-im-logo-1.png differ diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss new file mode 100644 index 0000000000..6872727423 --- /dev/null +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -0,0 +1,232 @@ +/* +Copyright 2017 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// overrides for mx_Login* specific to Status. +// Ideally this would be all Status prefixes for a Status specific version of the component +// but given we're not doing Status as a dedicated 'skin' yet... + +.mx_StatusLogin { + + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + + overflow: auto; + + .mx_StatusLogin_brand { + position: absolute; + top: 30px; + left: 30px; + } + + .mx_StatusLogin_content { + margin: auto; + } + + .mx_StatusLogin_header { + text-align: center; + margin-top: 70px; + margin-bottom: 50px; + } + + .mx_StatusLogin_header h1 { + font-size: 29px; + margin-bottom: 3px; + } + + .mx_StatusLogin_subtitle { + font-size: 18px; + } + + .mx_StatusLogin_subtitle a { + color: $riot-link-color; + } + + .mx_StatusLogin_footer { + margin-top: 30px; + margin-bottom: 30px; + text-align: center; + font-size: 16px; + color: $footer-color; + } + + .mx_StatusLogin_footer p { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .mx_StatusLogin_footer_cta { + color: $callout-color; + font-family: $header-font-family; + letter-spacing: 1px; + font-size: 13px; + text-transform: uppercase; + opacity: 1.0; + transition: opacity .2s ease; + } + + .mx_StatusLogin_footer_cta:hover { + opacity: 0.5; + text-decoration: none; + } + + // overrides of .mx_Login + + .mx_Login_box { + width: 330px; + min-height: initial; + padding-top: 40px; + padding-bottom: 20px; + padding-left: 10px; + padding-right: 10px; + border-radius: 8px; + color: $form-fg-color; + font-size: 16px; + line-height: 25px; + background-color: $form-bg-color; + background-image: url(../../themes/status/img/dot.svg); + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + position: relative; + text-align: center; + } + + .mx_Login_logo { + background-color: #fff; + width: 74px; + height: 74px; + border-radius: 37px; + box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2); + position: absolute; + top: -36px; + left: 50%; + margin-left: -36px; + } + + .mx_Login_logo img { + width: 36px; + height: 36px; + padding: 19px; + } + + .mx_Login_box h2 { + text-align: center; + color: $form-fg-color; + font-size: 25px; + margin-bottom: 24px; + } + + .mx_Login_field { + width: 260px; + height: 27px; + padding: 8px 20px 10px 20px; + border-radius: 10px; + text-align: left; + border: 1px solid transparent; + background-color: $form-field-bg-color; + color: $form-field-fg-color; + font-weight: 300; + font-size: 15px; + margin-bottom: 14px; + transition: background-color .2s ease; + } + + .mx_Login_field:focus { + border: 1px solid transparent; + background-color: $form-field-bg-hover-color; + } + + .mx_Login_field::-webkit-input-placeholder { + font-family: $font-family; + color: $form-field-fg-color; + opacity: 0.6; + } + + .mx_Login_field::-moz-placeholder { + font-family: $font-family; + color: $form-field-fg-color; + opacity: 0.6; + } + + .mx_Login_field_disabled { + opacity: 0.3; + } + + .mx_Login_prompt { + font-size: 16px; + } + + .mx_Login_submit { + min-width: 200px; + width: auto; + margin-top: 13px; + margin-bottom: 10px; + } + + .mx_Login_submit:disabled { + opacity: 0.3; + } + + .mx_Login_create { + margin-top: 10px; + display: block; + text-align: center; + width: 100%; + font-size: 15px; + opacity: 1.0; + } + + .mx_Login_create:link, + .mx_Login_create:hover, + .mx_Login_create:visited + { + color: $form-fg-color; + } + + .mx_Login_forgot { + display: block; + font-size: 15px; + } + + .mx_Login_forgot:link, + .mx_Login_forgot:hover, + .mx_Login_forgot:visited + { + color: $form-fg-color; + } + + .mx_Login_error { + color: $warning-color; + font-size: 18px; + width: 300px; + height: 44px; + display: flex; + justify-content: center; + align-items: center; + margin: auto; + text-align: center; + margin-top: 12px; + margin-bottom: 16px; + } + + .mx_Login_smallError { + font-size: 13px; + line-height: initial; + } + +} diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss new file mode 100644 index 0000000000..2962ee9d4b --- /dev/null +++ b/src/skins/vector/themes/status/css/_status.scss @@ -0,0 +1,276 @@ +@font-face { + font-family:PostGrotesk-Medium; + src:url('https://status.im/fonts/PostGrotesk-Medium.eot'); + src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family:PostGrotesk-Book; + src:url('https://status.im/fonts/PostGrotesk-Book.eot'); + src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg"); + font-weight: 400; + font-style: normal; +} + +// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss) +// N.B. that the status.im website uses: +// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; +// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now. + +$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; + +// typical text (dark-on-white in light skin) +$primary-fg-color: #70808D; +$primary-bg-color: #EEF2F5; + +// ***** Start of Status theme specifics ****** +$header-color: #49555F; +$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; + +$footer-color: #8D99A4; + +$riot-link-color: #A26988; + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1,h2,h3,h4,h5 { + color: $header-color; + font-family: $header-font-family; + font-weight: 400 ! important; +} + +$callout-color: #4360DF; // or #4957b8 from status.im homepage + +$form-bg-color: $callout-color; +$form-fg-color: #ffffff; + +$form-field-bg-color: rgba(244, 242, 247, 0.12); +$form-field-bg-hover-color: rgba(255, 255, 255, 0.2); +$form-field-fg-color: #ffffff; + +// ***** End of Status theme specifics ****** + + +// 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: #6CC1F6; +$accent-hover-color: #84cfff; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 125%; + +// red warning colour +$warning-color: #F69E98; +$mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); + +$group-alert-color: #774f7e; + +$preview-bar-bg-color: #f7f7f7; + +// left-panel style muted accent color +$secondary-accent-color: #586C7B; + +// stop the tinter trying to change the secondary accent color +// by overriding the key to something untintable +// XXX: this is a bit of a hack. +#mx_theme_secondaryAccentColor { + color: #586C7C ! important; // deliberately off by one +} + +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255,255,255,0.5); + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #f7f7f7; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #c9cfd4; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; +$avatar-bg-color: transparent; + +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + +$greyed-fg-color: #888; + +$neutral-badge-color: #dbdbdb; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + +$rte-bg-color: #e9e9e9; +$rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; + +// ******************** + +$roomtile-name-color: #ffffff; +$roomtile-selected-bg-color: #465561; +$roomtile-focused-bg-color: #6d8597; + +$roomsublist-label-fg-color: #ffffff; +$roomsublist-label-bg-color: $secondary-accent-color; +$roomsublist-chevron-color: #ffffff; + +$panel-divider-color: rgba(0, 0, 0, 0.2); + +// ******************** + +// event tile lifecycle +$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: "../../img/icon_context_message.svg"; +$copy-button-url: "../../img/icon_copy_message.svg"; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; + +@define-mixin mx_DialogButton { + /* align images in buttons (eg spinners) */ + vertical-align: middle; + border-radius: 8px; + border: 1px solid rgba(199, 206, 209, 0.12); + background-color: $accent-color; + font-size: 13px; + font-family: $header-font-family; + text-transform: uppercase; + letter-spacing: 1px; + color: $accent-fg-color; + cursor: pointer; + outline: none; + padding: 14px; + box-sizing: border-box; + padding-left: 1.5em; + padding-right: 1.5em; + display: inline-block; + transition: background-color .2s ease; +} + +@define-mixin mx_DialogButton_hover { + background-color: $accent-hover-color; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + height: auto; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 1em; + padding-right: 1em; +} + +.mx_RoomSubList_label { + font-size: 13px; + font-family: $header-font-family; + letter-spacing: 1px; +} + +// FIXME: all these ! importants are horrid - we should instead go and define +// variables or something. +.mx_SearchBox_search { + color: #fff ! important; +} + +.mx_SearchBox_search::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.6) ! important; +} + +.mx_SearchBox_search::-moz-placeholder { + color: rgba(255, 255, 255, 0.6) ! important; +} + +.mx_RoomList_emptySubListTip, +.mx_RoomDropTarget { + font-size: 14px ! important; + border: 1.5px dashed rgba(0,0,0,0.2) ! important; + color: #fff ! important; + background-color: transparent ! important; + border-radius: 6px ! important; + margin-left: 6px ! important; + margin-right: 6px ! important; + margin-top: 8px ! important; + margin-bottom: 7px ! important; + padding: 8px ! important; +} + +.mx_RoomDirectory_perm { + font-family: $header-font-family ! important; + background-color: #fff ! important; +} + +.mx_RoomTile_badge, +.mx_RoomSubList_badge { + height: 12px ! important; + padding-top: 1px ! important; + padding-bottom: 1px ! important; +} + +.mx_RoomSubList_chevron { + top: 8px ! important; +} \ No newline at end of file diff --git a/src/skins/vector/themes/status/css/status.scss b/src/skins/vector/themes/status/css/status.scss new file mode 100644 index 0000000000..09f5c78f17 --- /dev/null +++ b/src/skins/vector/themes/status/css/status.scss @@ -0,0 +1,4 @@ +@import "../../../css/themes/_base.scss"; +@import "_status.scss"; +@import "../../../css/_components.scss"; +@import "_StatusLogin.scss"; diff --git a/src/skins/vector/themes/status/fonts/README b/src/skins/vector/themes/status/fonts/README new file mode 100644 index 0000000000..d7900145ed --- /dev/null +++ b/src/skins/vector/themes/status/fonts/README @@ -0,0 +1 @@ +We link out to status.im for fonts, although ideally we'd put them here. diff --git a/src/skins/vector/themes/status/img/a.png b/src/skins/vector/themes/status/img/a.png new file mode 100644 index 0000000000..defbcc4bcd Binary files /dev/null and b/src/skins/vector/themes/status/img/a.png differ diff --git a/src/skins/vector/themes/status/img/d.png b/src/skins/vector/themes/status/img/d.png new file mode 100644 index 0000000000..daeb0b0785 Binary files /dev/null and b/src/skins/vector/themes/status/img/d.png differ diff --git a/src/skins/vector/themes/status/img/dot.svg b/src/skins/vector/themes/status/img/dot.svg new file mode 100644 index 0000000000..45df23c049 --- /dev/null +++ b/src/skins/vector/themes/status/img/dot.svg @@ -0,0 +1 @@ +Artboard \ No newline at end of file diff --git a/src/skins/vector/themes/status/img/g.png b/src/skins/vector/themes/status/img/g.png new file mode 100644 index 0000000000..f675a33022 Binary files /dev/null and b/src/skins/vector/themes/status/img/g.png differ diff --git a/src/skins/vector/themes/status/img/i.png b/src/skins/vector/themes/status/img/i.png new file mode 100644 index 0000000000..b63eeae13b Binary files /dev/null and b/src/skins/vector/themes/status/img/i.png differ diff --git a/src/skins/vector/themes/status/img/logo.svg b/src/skins/vector/themes/status/img/logo.svg new file mode 100644 index 0000000000..68e4a77a5c --- /dev/null +++ b/src/skins/vector/themes/status/img/logo.svg @@ -0,0 +1,16 @@ + + + + Status logo + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/skins/vector/themes/status/img/n.png b/src/skins/vector/themes/status/img/n.png new file mode 100644 index 0000000000..b8e33d41f7 Binary files /dev/null and b/src/skins/vector/themes/status/img/n.png differ diff --git a/src/vector/index.html b/src/vector/index.html index 49c2979ed1..36047aca7a 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,15 +20,14 @@ + <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); - var light = match[1] == 'light'; %> - + <% } else { %> <% } @@ -73,5 +72,7 @@