WIP

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?)

src/components/views/login/VectorLoginFooter.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 
 module.exports = React.createClass({
     displayName: 'VectorLoginFooter',
@@ -26,6 +27,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        if (UserSettingsStore.getTheme() === 'status') return <div/>;
+        
         return (
             <div className="mx_Login_links">
                 <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;

src/components/views/login/VectorLoginHeader.js

@@ -33,8 +33,10 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_Login_logo">
+            <div className="mx_Login_header">
-                <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
+                <div className="mx_Login_logo">
+                    <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
+                </div>
             </div>
         );
     }

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;

src/skins/vector/css/themes/_status.scss

@@ -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;

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;
+    width: 350px;
-    min-height: 450px;
+    min-height: initial;
-    padding-top: 50px;
+    padding-top: 20px;
-    padding-bottom: 50px;
+    padding-bottom: 10px;
-    margin: auto;
+    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;
+    background-color: #fff;
-    height: 150px;
+    width: 74px;
-    margin-bottom: 45px;
+    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 {

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;