diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 7e1d380cb..ba4adf39f 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,3 +1,5 @@
+
+
-
F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9
- Created with sketchtool.
-
-
-
-
-
-
- A
- a
-
-
-
-
-
\ No newline at end of file
+
+
+
diff --git a/src/skins/vector/img/camera_green.svg b/src/skins/vector/img/camera_green.svg
new file mode 100644
index 000000000..5aae5502c
--- /dev/null
+++ b/src/skins/vector/img/camera_green.svg
@@ -0,0 +1,15 @@
+
+
+
+
diff --git a/src/skins/vector/img/cancel_green.svg b/src/skins/vector/img/cancel_green.svg
new file mode 100644
index 000000000..2e3d759be
--- /dev/null
+++ b/src/skins/vector/img/cancel_green.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/edit.svg b/src/skins/vector/img/edit.svg
index a0be3454e..9ba006077 100644
--- a/src/skins/vector/img/edit.svg
+++ b/src/skins/vector/img/edit.svg
@@ -1,13 +1,11 @@
-
diff --git a/src/skins/vector/img/edit_green.svg b/src/skins/vector/img/edit_green.svg
new file mode 100644
index 000000000..f7f4c7adc
--- /dev/null
+++ b/src/skins/vector/img/edit_green.svg
@@ -0,0 +1,11 @@
+
+
+
diff --git a/src/skins/vector/img/icon-delete-pink.svg b/src/skins/vector/img/icon-delete-pink.svg
index 9d9907d81..aafa87f1b 100644
--- a/src/skins/vector/img/icon-delete-pink.svg
+++ b/src/skins/vector/img/icon-delete-pink.svg
@@ -1,10 +1,19 @@
-
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 000000000..768679da6
Binary files /dev/null and b/src/skins/vector/img/logos/riot-im-logo-1.png differ
diff --git a/src/skins/vector/img/maximize.svg b/src/skins/vector/img/maximize.svg
new file mode 100644
index 000000000..4f9e10191
--- /dev/null
+++ b/src/skins/vector/img/maximize.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/src/skins/vector/img/minimize.svg b/src/skins/vector/img/minimize.svg
new file mode 100644
index 000000000..410b0bc08
--- /dev/null
+++ b/src/skins/vector/img/minimize.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/src/skins/vector/img/warning_yellow.svg b/src/skins/vector/img/warning_yellow.svg
new file mode 100644
index 000000000..4d227517d
--- /dev/null
+++ b/src/skins/vector/img/warning_yellow.svg
@@ -0,0 +1,34 @@
+
+
+
+
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 000000000..687272742
--- /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 000000000..be4c3c7fd
--- /dev/null
+++ b/src/skins/vector/themes/status/css/_status.scss
@@ -0,0 +1,286 @@
+@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;
+$tertiary-accent-color: #DBEBF6;
+
+// 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: $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-background: #465561;
+$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);
+
+// ********************
+
+$widget-menu-bar-bg-color: #f7f7f7;
+
+// ********************
+
+// 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 000000000..09f5c78f1
--- /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 000000000..d7900145e
--- /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 000000000..defbcc4bc
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 000000000..daeb0b078
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 000000000..45df23c04
--- /dev/null
+++ b/src/skins/vector/themes/status/img/dot.svg
@@ -0,0 +1 @@
+
\ 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 000000000..f675a3302
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 000000000..b63eeae13
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 000000000..68e4a77a5
--- /dev/null
+++ b/src/skins/vector/themes/status/img/logo.svg
@@ -0,0 +1,16 @@
+
+
\ 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 000000000..b8e33d41f
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 19668f6f9..25e817a09 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 { %>
<% }
@@ -72,6 +71,8 @@
-
+
+
+