ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-16 10:49:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: smoothen dark theme

Browse Source 
Lowers contrast in dark theme; raises the opacity of images in chat.

In general, creates a smoother dark variant of our default Chat look.
This commit is contained in:
Matilde Park 2020-01-27 20:33:15 -05:00
parent 389def3479
commit 0ef3d9f7fa
11 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/chat/css/index.css
View File

File diff suppressed because one or more lines are too long

2
pkg/arvo/app/chat/js/index.js
View File

File diff suppressed because one or more lines are too long

7
pkg/interface/chat/src/css/custom.css
View File

@ -205,8 +205,8 @@ h2 {
.invert-d {
filter: invert(1);
}
.o-60-d {
opacity: .6;
.o-80-d {
opacity: .8;
}
a {
color: #fff;
@ -214,4 +214,7 @@ h2 {
.b--white-d {
border-color: #fff;
}
.bn-d {
border: 0;
}
}

2
pkg/interface/chat/src/js/components/chat.js
View File

@ -230,7 +230,7 @@ export class ChatScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link>
</div>
<div
className={`pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll
className={`pl3 pt2 bb b--gray4 b--gray0-d bg-black-d flex relative overflow-x-scroll
overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
style={{ height: 48 }}>
<SidebarSwitcher

2
pkg/interface/chat/src/js/components/join.js
View File

@ -107,7 +107,7 @@ export class JoinScreen extends Component {
<p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p>
<textarea
ref={ e => { this.textarea = e; } }
className="f7 mono ba b--gray3 b--gray2-d bg-black-d white-d pa3 mb2 db"
className="f7 mono ba b--gray3 b--gray0-d bg-black-d white-d pa3 mb2 db"
placeholder="~zod/chatroom"
spellCheck="false"
rows={1}

2
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -175,7 +175,7 @@ export class ChatInput extends Component {
this.bindShortcuts();
return (
<div className="pa3 cf flex black white-d bt b--gray4 b--gray2-d bg-black-d" style={{ flexGrow: 1 }}>
<div className="pa3 cf flex black white-d bt b--gray4 b--gray0-d bg-black-d" style={{ flexGrow: 1 }}>
<div
className="fl"
style={{

2
pkg/interface/chat/src/js/components/lib/message.js
View File

@ -60,7 +60,7 @@ export class Message extends Component {
if (imgMatch) {
contents = (
<img
className="o-60-d"
className="o-80-d"
src={letter.url}
style={{
width: "50%",

4
pkg/interface/chat/src/js/components/lib/sidebar-item.js
View File

@ -58,11 +58,11 @@ export class SidebarItem extends Component {
let description = this.getLetter(props.description);
let selectedCss = !!props.selected ? 'bg-gray5 bg-gray0-d gray3-d' : 'bg-white bg-black-d gray3-d pointer';
let selectedCss = !!props.selected ? 'bg-gray5 bg-gray0-d gray3-d bn-d' : 'bg-white bg-black-d gray3-d b--gray0-d pointer';
return (
<div
className={"z1 pa3 pt4 pb4 bb b--gray4 b--gray2-d " + selectedCss}
className={"z1 pa3 pt4 pb4 bb b--gray4 " + selectedCss}
onClick={this.onClick.bind(this)}>
<div className="w-100 v-mid">
<p className={"dib mono f8 " + unreadElem }>

2
pkg/interface/chat/src/js/components/new.js
View File

@ -204,7 +204,7 @@ export class NewScreen extends Component {
Lowercase alphanumeric characters, dashes, and slashes only
</p>
<textarea
className="f7 ba b--gray3 b--gray2-d bg-black-d white-d pa3 db w-100"
className="f7 ba b--gray3 b--gray0-d bg-black-d white-d pa3 db w-100"
placeholder="secret-chat"
rows={1}
style={{

4
pkg/interface/chat/src/js/components/settings.js
View File

@ -58,7 +58,7 @@ export class SettingsScreen extends Component {
<p className="f8 mt3 lh-copy db">Leave Chat</p>
<p className="f9 gray2 db mb4">Remove this chat from your chat list. You will need to request for access again.</p>
<a onClick={(!chatOwner) ? this.deleteChat.bind(this) : null}
className={"dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray2-d " + leaveButtonClasses}>Leave this chat</a>
className={"dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray0-d " + leaveButtonClasses}>Leave this chat</a>
</div>
<div className={"w-100 fl mt3 " + ((!chatOwner) ? 'o-30' : '')}>
<p className="f8 mt3 lh-copy db">Delete Chat</p>
@ -90,7 +90,7 @@ export class SettingsScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link>
</div>
<div
className="pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
className="pl3 pt2 bb b--gray4 b--gray0-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
style={{ height: 48 }}>
<SidebarSwitcher
sidebarShown={this.props.sidebarShown}

4
pkg/interface/chat/src/js/components/skeleton.js
View File

@ -29,7 +29,7 @@ export class Skeleton extends Component {
? "h-100"
: "h-100-minus-48-m h-100-minus-48-l h-100-minus-48-xl")}>
<div className={
`fl h-100 br b--gray4 b--gray2-d overflow-x-hidden
`fl h-100 br b--gray4 b--gray0-d overflow-x-hidden
flex-basis-full-s flex-basis-300-m flex-basis-300-l
flex-basis-300-xl ` +
sidebarHide + " " +
@ -43,7 +43,7 @@ export class Skeleton extends Component {
<a className="pl3 pb6" href="/">
{"⟵ Landscape"}
</a>
<div className="bb b--gray4 white-d inter f8 pl3 pt6 pb3">All Chats</div>
<div className="bb b--gray4 b--gray0-d white-d inter f8 pl3 pt6 pb3">All Chats</div>
</div>
{this.props.sidebar}
</div>