diff --git a/docs/skinning thoughts.md b/docs/skinning thoughts.md new file mode 100644 index 00000000..bbaf18a2 --- /dev/null +++ b/docs/skinning thoughts.md @@ -0,0 +1,68 @@ +== Skinning refactor == + +matrix-react-sdk + - base images + - base CSS + - all the components needed to build a workable app (including the top layer) + +riot-web: the riot skin + - riot-specific classes (e.g. login header/footer) + - riot-specific themes + - light + - dark + +i.e. the only things which should go into riot-web are bits which apply vector-specific skinning +specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)" + - Questions: + - Electron app? (should probably be a separate repo in its own right? but might as well go here for now) + - index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?) + +ideally matrix-react-sdk itself should ship with a default skin which actually works built in. + +status skin (can go in the same app for now) + - has status theme + - which inherits from riot light theme + - how do we share graphics between skins? + - shove them into react-sdk, or... + - guess we do ../../vector/img + - this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images) + +out of scope: + - making the components more independent, so they can be used in isolation. + - that said, the bits which should probably be used by being embeded into a different app: + - login/reg + - RoomView + RoomSettings + - MessageComposer + - RoomList + - MemberList + - MemberInfo + - Voip UI + - UserSettings + - sharing different js-sdks between the different isolated modules + +other changes: + - how do we handle i18n? + - each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad. + - ability to associate components with a given skin + - skins/vector/src <-- components + - skins/vector/css + - skins/vector/img + - skins/vector/fonts + - gather together themes (per skin) into a single place too + - skins/vector/themes/foo/css + - skins/vector/themes/foo/img + - skins/vector/themes/foo/fonts + - ideally riot-web would contain almost nothing but skins/vector directory. + - ability to entirely replace CSS rather than override it for a given theme + - e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`. + +random thoughts; + - should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components? + - might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime + - if so, perhaps skins & themes should converge... + +----------------- + +Immediate plan for Status: + * Implement it as a theme for the riot skin + * Ideally move skins to a sensible level (possibly even including src?) diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js index b04dcdb5..5a97f524 100644 --- a/src/components/views/login/VectorLoginFooter.js +++ b/src/components/views/login/VectorLoginFooter.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); import { _t } from 'matrix-react-sdk/lib/languageHandler'; +import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore'; module.exports = React.createClass({ displayName: 'VectorLoginFooter', @@ -26,6 +27,8 @@ module.exports = React.createClass({ }, render: function() { + if (UserSettingsStore.getTheme() === 'status') return
; + return (
blog  ·   diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js index 3aa8811c..71093a96 100644 --- a/src/components/views/login/VectorLoginHeader.js +++ b/src/components/views/login/VectorLoginHeader.js @@ -33,8 +33,10 @@ module.exports = React.createClass({ render: function() { return ( -
- Riot +
+
+ Riot +
); } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 86ab39be..63f483a5 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -26,7 +26,6 @@ limitations under the License. } .mx_Login h2 { - color: $primary-fg-color; font-weight: 300; margin-top: 32px; margin-bottom: 20px; diff --git a/src/skins/vector/css/themes/_status.scss b/src/skins/vector/css/themes/_status.scss deleted file mode 100644 index b1d8b0ef..00000000 --- a/src/skins/vector/css/themes/_status.scss +++ /dev/null @@ -1,155 +0,0 @@ -@font-face { - font-family:PostGrotesk-Medium; - src:url(../fonts/PostGrotesk-Medium.eot); - src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Medium.woff) format("woff"),url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family:PostGrotesk-Book; - src:url(../fonts/PostGrotesk-Book.eot); - src:url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Book.woff) format("woff"),url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); - font-weight: 400; - font-style: normal; -} - -// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss) -// N.B. that the status.im website uses: -// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; -// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now. - -$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #70808D; -$primary-bg-color: #EEF2F5; - -// ***** Status theme specifics ****** -$header-color: #49555F; -$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; - -h1,h2,h3,h4,h5 { - color: $header-color; - font-family: $header-font-family; - font-weight: 400 ! important; -} - -// used for dialog box text -$light-fg-color: #747474; - -// used for focusing form controls -$focus-bg-color: #dddddd; - -// button UI (white-on-green in light skin) -$accent-fg-color: #ffffff; -$accent-color: #76CFA6; - -$selection-fg-color: $primary-bg-color; - -$focus-brightness: 125%; - -// red warning colour -$warning-color: #ff0064; -$mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); - -$group-alert-color: #774f7e; - -$preview-bar-bg-color: #f7f7f7; - -// left-panel style muted accent color -$secondary-accent-color: #eaf5f0; - -// used by RoomDirectory permissions -$plinth-bg-color: $secondary-accent-color; - -// used by RoomDropTarget -$droptarget-bg-color: rgba(255,255,255,0.5); - -// used by AddressSelector -$selected-color: #eaf5f0; - -// selected for hoverover & selected event tiles -$event-selected-color: #f7f7f7; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #e5e5e5; - -// used for the border of input text fields -$input-border-color: #f0f0f0; - -// apart from login forms, which have stronger border -$strong-input-border-color: #c7c7c7; - -// used for UserSettings EditableText -$input-underline-color: rgba(151, 151, 151, 0.5); -$input-fg-color: rgba(74, 74, 74, 0.9); - -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #f6f6f6; - -$avatar-initial-color: #ffffff; - -$h3-color: #3d3b39; - -$dialog-background-bg-color: #e9e9e9; -$lightbox-background-bg-color: #000; - -$greyed-fg-color: #888; - -$neutral-badge-color: #dbdbdb; - -$preview-widget-bar-color: #ddd; -$preview-widget-fg-color: $greyed-fg-color; - -$blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; - -$settings-grey-fg-color: #a2a2a2; - -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; - -$rte-bg-color: #e9e9e9; -$rte-code-bg-color: rgba(0, 0, 0, 0.04); -$rte-room-pill-color: #aaa; - -// ******************** - -$roomtile-name-color: rgba(69, 69, 69, 0.8); -$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); - -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: #d3efe1; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-img: url('../../img/redacted.jpg'); - -// event timestamp -$event-timestamp-color: #acacac; - -$edit-button-url: "../../img/icon_context_message.svg"; -$copy-button-url: "../../img/icon_copy_message.svg"; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -// unused? -$progressbar-color: #000; diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 38c8a5ef..7cdc6939 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -17,40 +17,70 @@ limitations under the License. // overrides for mx_Login* specific to Status. // Ideally this would be all Status prefixes for a Status specific version of the component // but given we're not doing Status as a dedicated 'skin' yet... -.mx_Login { - width: 100%; - height: 100%; - display: flex; +.mx_Login { + flex-direction: column; align-items: center; justify-content: center; - - overflow: auto; -} - -.mx_Login h2 { - color: $primary-fg-color; - font-weight: 300; - margin-top: 32px; - margin-bottom: 20px; } .mx_Login_box { - width: 300px; - min-height: 450px; - padding-top: 50px; - padding-bottom: 50px; - margin: auto; + width: 350px; + min-height: initial; + padding-top: 20px; + padding-bottom: 10px; + padding-left: 33px; + padding-right: 33px; + border-radius: 8px; + margin: initial; + background-color: $form-bg-color; + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + position: relative; } .mx_Login_logo { - text-align: center; - height: 150px; - margin-bottom: 45px; + background-color: #fff; + width: 74px; + height: 74px; + border-radius: 37px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); + position: absolute; + top: -36px; + left: 50%; + margin-left: -36px; } .mx_Login_logo img { - max-height: 100% + width: 36px; + height: 36px; + padding: 19px; +} + +.mx_Login_box h2 { + text-align: center; + color: $form-fg-color; + font-size: 25px; +} + +.mx_LoginPageHeader_brand { + position: absolute; + top: 30px; + left: 30px; +} + +.mx_LoginPageHeader_title { + text-align: center; + margin-top: 90px; + margin-bottom: 50px; +} + +.mx_LoginPageHeader_title h1 { + font-size: 29px; + margin-bottom: 3px; +} + +.mx_LoginPageHeader_subtitle { + font-size: 18px; } .mx_Login_support { diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index d2ccee0d..eb8f1d94 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -25,7 +25,7 @@ $font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif; $primary-fg-color: #70808D; $primary-bg-color: #EEF2F5; -// ***** Status theme specifics ****** +// ***** Start of Status theme specifics ****** $header-color: #49555F; $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; @@ -35,6 +35,11 @@ h1,h2,h3,h4,h5 { font-weight: 400 ! important; } +$form-bg-color: #4360DF; +$form-fg-color: #ffffff; + +// ***** End of Status theme specifics ****** + // used for dialog box text $light-fg-color: #747474; diff --git a/src/skins/vector/themes/status/img/logo.svg b/src/skins/vector/themes/status/img/logo.svg new file mode 100644 index 00000000..68e4a77a --- /dev/null +++ b/src/skins/vector/themes/status/img/logo.svg @@ -0,0 +1,16 @@ + + + + Status logo + Created with Sketch. + + + + + \ No newline at end of file