Browse Source

Remove Status theme

pull/8540/head
J. Ryan Stinnett 3 years ago
parent
commit
7b9de1dbf2
  1. 192
      res/home-status.html
  2. 232
      res/themes/status/css/_StatusLogin.scss
  3. 15
      res/themes/status/css/_fonts.scss
  4. 5
      res/themes/status/css/_paths.scss
  5. 292
      res/themes/status/css/_status.scss
  6. 6
      res/themes/status/css/status.scss
  7. 1
      res/themes/status/fonts/README
  8. BIN
      res/themes/status/img/a.png
  9. BIN
      res/themes/status/img/d.png
  10. 1
      res/themes/status/img/dot.svg
  11. BIN
      res/themes/status/img/g.png
  12. BIN
      res/themes/status/img/i.png
  13. 16
      res/themes/status/img/logo.svg
  14. BIN
      res/themes/status/img/n.png
  15. 1
      scripts/copy-res.js
  16. 1
      webpack.config.js

192
res/home-status.html

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

232
res/themes/status/css/_StatusLogin.scss

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

15
res/themes/status/css/_fonts.scss

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

5
res/themes/status/css/_paths.scss

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

292
res/themes/status/css/_status.scss

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

6
res/themes/status/css/status.scss

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

1
res/themes/status/fonts/README

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

BIN
res/themes/status/img/a.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
res/themes/status/img/d.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

1
res/themes/status/img/dot.svg

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

BIN
res/themes/status/img/g.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
res/themes/status/img/i.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

16
res/themes/status/img/logo.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
res/themes/status/img/n.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

1
scripts/copy-res.js

@ -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"],

1
webpack.config.js

@ -18,7 +18,6 @@ module.exports = {
// CSS themes
"theme-dharma": "./node_modules/matrix-react-sdk/res/themes/dharma/css/dharma.scss",
"theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
//"theme-status": "./res/themes/status/css/status.scss",
},
module: {
rules: [

Loading…
Cancel
Save