Merge pull request #8540 from vector-im/jryans/dark-theme-redesign

Revive building dark theme
pull/8566/head
J. Ryan Stinnett 2019-02-13 11:45:37 +00:00 committed by GitHub
commit d0080b4ba8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 3 additions and 771 deletions

View File

@ -1,192 +0,0 @@
<style type="text/css">
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
* voodoo where we have to set display: none by default
*/
.mx_HomePage_container {
text-align: center;
display: block ! important;
width: 690px;
margin: 20px;
}
.mx_HomePage_header {
margin-top: 37px;
margin-left: 10px;
width: 670px;
box-sizing: border-box;
font-size: 18px;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
border-radius: 5px;
padding: 20px 80px 20px 80px;
align-items: center;
}
.mx_HomePage_header h1 {
font-size: 29px;
margin-bottom: 10px;
}
.mx_HomePage_intro h2 {
margin-top: 32px;
font-size: 25px;
color: #49555F;
}
.mx_HomePage_intro {
margin: auto;
width: 600px;
margin-top: 40px;
margin-bottom: 40px;
font-size: 18px;
}
.mx_HomePage_coc {
font-size: 16px;
}
.mx_HomePage_coc a {
color: #4360DF;
}
.mx_HomePage_room, .mx_HomePage_telegram {
float: left;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
border-radius: 5px;
margin: 10px;
width: 210px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
}
.mx_HomePage_telegram {
background-color: transparent;
border: 1px solid rgba(113, 129, 142, 0.2);
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 16px;
line-height: 25px;
box-sizing: border-box;
}
.mx_HomePage_telegram a {
text-transform: uppercase;
color: #4360DF;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
font-weight: 600;
opacity: 1.0;
transition: opacity .2s ease;
}
.mx_HomePage_telegram a:hover {
opacity: 0.5;
}
.mx_HomePage_room .mx_HomePage_icon {
margin-top: 24px;
margin-bottom: 16px;
width: 50px;
height: 50px;
}
.mx_HomePage_room .mx_HomePage_name {
display: block;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
font-weight: 600;
font-size: 15px;
color: #49555F;
line-height: 25px;
margin: 0px 12px 0px 12px;
}
.mx_HomePage_room .mx_HomePage_desc {
flex: 1;
display: block;
margin: 0px 12px 0px 12px;
font-size: 14px;
line-height: 20px;
}
.mx_HomePage_button {
align-self: normal;
margin: 12px;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff ! important;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
}
</style>
<div class="mx_HomePage_container">
<div class="mx_HomePage_header">
<div>
<h1>Welcome to Status Community Chat, powered by Riot.</h1>
<p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
</div>
</div>
<div class="mx_HomePage_intro">
<h2>Our rooms</h2>
<p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
<p class="mx_HomePage_coc">Before posting please refer to our <a href="https://wiki.status.im/Code_of_conduct">Code of Conduct</a></p>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/a.png">
<span class="mx_HomePage_name">#announcements</span>
<span class="mx_HomePage_desc">Company wide announcements.</span>
<a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/i.png">
<span class="mx_HomePage_name">#introductions</span>
<span class="mx_HomePage_desc">Newcomer introductions.</span>
<a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/g.png">
<span class="mx_HomePage_name">#general</span>
<span class="mx_HomePage_desc">General discussions of Status.</span>
<a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/d.png">
<span class="mx_HomePage_name">#dev-status</span>
<span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
<a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
</div>
<div class="mx_HomePage_room">
<img class="mx_HomePage_icon" src="themes/status/img/n.png">
<span class="mx_HomePage_name">#news-articles</span>
<span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
<a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
</div>
<div class="mx_HomePage_telegram">
<p>
Interested in market and cryptocurrency type discussions?
</p>
<a href="https://t.me/StatusNetworkChat">Join Telegram</a>
</div>
</div>

View File

@ -1,232 +0,0 @@
/*
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_AuthPage_modal {
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("$(status)/img/dot.svg");
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
position: relative;
text-align: center;
}
.mx_AuthHeader_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_AuthHeader_logo img {
width: 36px;
height: 36px;
padding: 19px;
}
.mx_AuthPage_modal 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;
}
}

View File

@ -1,15 +0,0 @@
@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;
}

View File

@ -1,5 +0,0 @@
// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
$res: ../../../../node_modules/matrix-react-sdk/res;
// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
$status: ..;

View File

@ -1,292 +0,0 @@
// 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-color-alt: $accent-color;
$accent-color-50pct: #6CC1F67F;
$accent-hover-color: #84cfff;
$selection-fg-color: $primary-bg-color;
$focus-brightness: 125%;
// red warning colour
$warning-color: #F69E98;
$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);
$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;
$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;
// 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;
$menu-selected-color: #f5f8fa;
$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;
$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: #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: "$(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;
// 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;
}
.mx_MemberInfo .mx_RoomTile_name {
color: $primary-fg-color ! important;
}

View File

@ -1,6 +0,0 @@
@import "_paths.scss";
@import "_fonts.scss";
@import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
@import "_status.scss";
@import "../../../../node_modules/matrix-react-sdk/res/css/_components.scss";
@import "_StatusLogin.scss";

View File

@ -1 +0,0 @@
We link out to status.im for fonts, although ideally we'd put them here.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -1 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg>

Before

Width:  |  Height:  |  Size: 189 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -51,7 +51,6 @@ const INCLUDE_LANGS = [
const COPY_LIST = [
["res/manifest.json", "webapp"],
["res/welcome.html", "webapp"],
["res/home-status.html", "webapp"],
["res/welcome/**", "webapp/welcome"],
["res/themes/**", "webapp/themes"],
["res/vector-icons/**", "webapp/vector-icons"],

View File

@ -19,7 +19,6 @@ limitations under the License.
const React = require('react');
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore';
module.exports = React.createClass({
displayName: 'VectorAuthFooter',
@ -28,10 +27,6 @@ module.exports = React.createClass({
},
render: function() {
// FIXME: replace this with a proper Status skin
// ...except then we wouldn't be able to switch to the Status theme at runtime.
if (SettingsStore.getValue("theme") === 'status') return <div />;
return (
<div className="mx_AuthFooter">
<a href="https://medium.com/@RiotChat" target="_blank" rel="noopener">blog</a>

View File

@ -281,7 +281,7 @@ async function loadApp() {
// as quickly as we possibly can, set a default theme...
let a;
const theme = "dharma";//SettingsStore.getValue("theme");
const theme = SettingsStore.getValue("theme");
for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
const href = a.getAttribute("href");
if (!href) continue;

View File

@ -16,10 +16,8 @@ module.exports = {
"mobileguide": "./src/vector/mobile_guide/index.js",
// CSS themes
//"theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
//"theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
"theme-dharma": "./node_modules/matrix-react-sdk/res/themes/dharma/css/dharma.scss",
//"theme-status": "./res/themes/status/css/status.scss",
"theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
"theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
},
module: {
rules: [