Status.im theme #5578
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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? | ||
|
There was a problem hiding this comment. What about color pickers for now? Not like just tint but changing different parts of the Design without needing to change the code |
||
| - 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?) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note to self: These should be pulled into GranularSettings when it lands
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
decided to not make these granular - they are app-level anyways and affect people who aren't logged in, so granularity isn't feasible.