ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-01 11:33:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

publish: add dark mode

Browse Source
This commit is contained in:
Matilde Park 2020-02-28 01:26:01 -05:00
parent 909a2ebf05
commit bc072790ec
16 changed files with 112 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
pkg/interface/publish/src/css/custom.css
View File

@ -143,7 +143,7 @@ a {
font-family: 'Source Code Pro';
}
.CodeMirror-selected { background:#BAE3FE !important; }
.CodeMirror-selected { background:#BAE3FE !important; color: black; }
.cm-s-tlon span { font-family: "Source Code Pro"}
.cm-s-tlon span.cm-meta { color: var(--gray); }
@ -192,6 +192,14 @@ a {
color: #7F7F7F;
}
.options.open {
background-color: #e6e6e6;
}
.options.closed {
background-color: white;
}
.options::after {
content: "⌃";
transform: rotate(180deg);
@ -276,4 +284,68 @@ md img {
.mix-blend-diff {
mix-blend-mode: difference;
}
@media all and (prefers-color-scheme: dark) {
body {
background-color: #333;
}
.bg-black-d {
background-color: black;
}
.white-d {
color: white;
}
.gray1-d {
color: #4d4d4d;
}
.gray2-d {
color: #7f7f7f;
}
.gray3-d {
color: #b1b2b3;
}
.gray4-d {
color: #e6e6e6;
}
.bg-gray0-d {
background-color: #333;
}
.bg-gray1-d {
background-color: #4d4d4d;
}
.b--gray0-d {
border-color: #333;
}
.b--gray2-d {
border-color: #7f7f7f;
}
.b--white-d {
border-color: #fff;
}
.invert-d {
filter: invert(1);
}
.o-60-d {
opacity: .6;
}
a {
color: #fff;
}
.focus-b--white-d:focus {
border-color: #fff;
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
.options.open {
background-color: #4d4d4d;
}
.options.closed {
background-color: #333;
}
.cm-s-tlon.CodeMirror {
background: #333;
color: #fff;
}
}

2
pkg/interface/publish/src/js/components/lib/comment-item.js
View File

@ -53,7 +53,7 @@ export class CommentItem extends Component {
return (
<div>
<div className="flex mv3 bg-white">
<div className="flex mv3 bg-white bg-gray0-d">
<Sigil
ship={commentData.author}
size={24}

6
pkg/interface/publish/src/js/components/lib/comments.js
View File

@ -53,8 +53,8 @@ export class Comments extends Component {
let disableComment = ((this.state.commentBody === '') || (this.state.disabled === true));
let commentClass = (disableComment)
? "f9 pa2 bg-white br1 ba b--gray2 gray2"
: "f9 pa2 bg-white br1 ba b--gray2 black pointer";
? "bg-transparent f9 pa2 br1 ba b--gray2 gray2"
: "bg-transparent f9 pa2 br1 ba b--gray2 black white-d pointer";
return (
<div>
@ -66,7 +66,7 @@ export class Comments extends Component {
name="comment"
placeholder="Leave a comment here"
className={"f9 db border-box w-100 ba b--gray3 pt3 ph3 pb8 br1 " +
"mb2 focus-b--black"}
"b--gray2-d mb2 focus-b--black focus-b--white-d white-d bg-gray0-d"}
aria-describedby="comment-desc"
onChange={this.commentChange}>
</textarea>

11
pkg/interface/publish/src/js/components/lib/dropdown.js
View File

@ -43,8 +43,8 @@ export class Dropdown extends Component {
let display = (this.state.open)
? "block" : "none";
let optionsColor = (this.state.open)
? '#e6e6e6' : 'white';
let optionsClass = (this.state.open)
? "open" : "closed";
let leftAlign = "";
let rightAlign = "0";
@ -64,14 +64,13 @@ export class Dropdown extends Component {
});
return (
<div className="options relative dib"
<div className={"options relative dib " + optionsClass}
ref={(el) => {this.optsButton = el}}>
<button className="pr3 mb1 pointer br2 pa2 pr4"
style={{backgroundColor: optionsColor}}
<button className="bg-transparent white-d pr3 mb1 pointer br2 pa2 pr4"
onClick={this.toggleDropdown}>
{this.props.buttonText}
</button>
<div className="absolute flex flex-column pv2 ba b--gray4 br2 z-1 bg-white"
<div className="absolute flex flex-column pv2 ba b--gray4 br2 z-1 bg-white bg-gray0-d"
ref={(el) => {this.optsList = el}}
style={{left: leftAlign, right: rightAlign, width:this.props.width, display: display}}>
{optionsList}

4
pkg/interface/publish/src/js/components/lib/header-bar.js
View File

@ -26,14 +26,14 @@ export class HeaderBar extends Component {
}
return (
<div className={"bg-white w-100 justify-between relative tc pt3 "
<div className={"bg-white bg-gray0-d white-d w-100 justify-between relative tc pt3 "
+ popout}
style={{ height: 40 }}>
<a className="dib gray2 f9 inter absolute left-0"
href='/'
style={{top: 14}}>
<IconHome classes={spinnerClasses}/>
<span className="ml2 v-top lh-title"
<span className="ml2 v-top lh-title white-d"
style={{paddingTop: 3}}>
Home
</span>

5
pkg/interface/publish/src/js/components/lib/icons/icon-home.js
View File

@ -6,7 +6,10 @@ export class IconHome extends Component {
let classes = !!this.props.classes ? this.props.classes : "";
return (
<img className={classes} src="/~publish/Home.png" width={16} height={16} />
<img className={"invert-d " + classes}
src="/~publish/Home.png"
width={16}
height={16} />
);
}
}

2
pkg/interface/publish/src/js/components/lib/icons/icon-sidebar-switch.js
View File

@ -16,7 +16,7 @@ export class SidebarSwitcher extends Component {
api.sidebarToggle();
}}>
<img
className={`pr3 invert-d dn ` + popoutSwitcher}
className={`pr3 dn ` + popoutSwitcher}
src={
this.props.sidebarShown
? "/~link/img/SwitcherOpen.png"

2
pkg/interface/publish/src/js/components/lib/join.js
View File

@ -137,7 +137,7 @@ export class JoinScreen extends Component {
<textarea
ref={ e => { this.textarea = e; } }
className={"f7 mono ba bg-gray0-d white-d pa3 mb2 db " +
"focus-b--black b--gray3 b--gray2-d nowrap "}
"focus-b--black focus-b--white-d b--gray3 b--gray2-d nowrap "}
placeholder="~zod/dream-journal"
spellCheck="false"
rows={1}

4
pkg/interface/publish/src/js/components/lib/new-post.js
View File

@ -105,7 +105,7 @@ export class NewPost extends Component {
popout={props.popout}
/>
<button
className={"v-mid w-100 mw6 tl h1 pl4"}
className={"bg-transparent v-mid w-100 mw6 tl h1 pl4"}
disabled={!state.submit}
style={submitStyle}
onClick={this.postSubmit}>
@ -126,7 +126,7 @@ export class NewPost extends Component {
<input
autoFocus
type="text"
className="w-100 pb2"
className="bg-transparent white-d w-100 pb2"
onChange={this.titleChange}
placeholder="New Post"
/>

6
pkg/interface/publish/src/js/components/lib/new.js
View File

@ -139,7 +139,7 @@ export class NewScreen extends Component {
return (
<div
className={
"h-100 w-100 mw6 pa3 pt4 overflow-x-hidden flex flex-column"
"h-100 w-100 mw6 pa3 pt4 overflow-x-hidden flex flex-column white-d"
}>
<div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
<Link to="/~publish/">{"⟵ All Notebooks"}</Link>
@ -152,7 +152,7 @@ export class NewScreen extends Component {
</p>
<textarea
className={"f7 ba bg-gray0-d white-d pa3 db w-100 " +
"focus-b--black b--gray3 b--gray2-d"}
"focus-b--black focus-b--white-d b--gray3 b--gray2-d"}
placeholder="eg. My Journal"
rows={1}
style={{
@ -169,7 +169,7 @@ export class NewScreen extends Component {
<p className="f9 gray2 db mb2 pt1">What's your notebook about?</p>
<textarea
className={"f7 ba bg-gray0-d white-d pa3 db w-100 " +
"focus-b--black b--gray3 b--gray2-d"}
"focus-b--black focus-b--white-d b--gray3 b--gray2-d"}
placeholder="Notebook description"
rows={1}
style={{

2
pkg/interface/publish/src/js/components/lib/notebook-item.js
View File

@ -5,7 +5,7 @@ export class NotebookItem extends Component {
render() {
let { props } = this;
let selectedClass = (props.selected) ? "bg-gray5 b--gray4" : "b--gray4";
let selectedClass = (props.selected) ? "bg-gray5 bg-gray1-d b--gray4 b--gray2-d" : "b--gray4 b--gray2-d";
let postCount = (props.total === 1)
? `${props.total} post` : `${props.total} posts`;

14
pkg/interface/publish/src/js/components/lib/notebook.js
View File

@ -81,12 +81,12 @@ export class Notebook extends Component {
let notebook = props.notebooks[props.ship][props.book];
let tabStyles = {
posts: "bb b--gray4 gray2 pv4 ph2",
about: "bb b--gray4 gray2 pv4 ph2",
subscribers: "bb b--gray4 gray2 pv4 ph2",
settings: "bb b--gray4 pr2 gray2 pv4 ph2",
posts: "bb b--gray4 b--gray2-d gray2 pv4 ph2",
about: "bb b--gray4 b--gray2-d gray2 pv4 ph2",
subscribers: "bb b--gray4 b--gray2-d gray2 pv4 ph2",
settings: "bb b--gray4 b--gray2-d pr2 gray2 pv4 ph2",
};
tabStyles[props.view] = "bb b--black black pv4 ph2";
tabStyles[props.view] = "bb b--black b--white-d black white-d pv4 ph2";
let inner = null;
switch (props.view) {
@ -154,7 +154,7 @@ export class Notebook extends Component {
let unsub = (window.ship === props.ship.slice(1))
? null
: <button onClick={this.unsubscribe}
className="NotebookButton bg-white black ba b--black ml3">
className="NotebookButton bg-white bg-gray0-d black white-d ba b--black b--gray2-d ml3">
Unsubscribe
</button>
@ -224,7 +224,7 @@ export class Notebook extends Component {
</Link>
{subsComponent}
{settingsComponent}
<div className="bb b--gray4 gray2 pv4 ph2"
<div className="bb b--gray4 b--gray2-d gray2 pv4 ph2"
style={{ flexGrow: 1 }}></div>
</div>

2
pkg/interface/publish/src/js/components/lib/settings.js
View File

@ -24,7 +24,7 @@ export class Settings extends Component {
<p className="f9 gray2 db mb4">
Permanently delete this notebook. (All current members will no longer see this notebook)
</p>
<button className="b--red2 red2 pointer dib f9 ba pa2"
<button className="bg-transparent b--red2 red2 pointer dib f9 ba pa2"
onClick={this.deleteNotebook}>
Delete this notebook
</button>

10
pkg/interface/publish/src/js/components/lib/sidebar.js
View File

@ -155,28 +155,28 @@ export class Sidebar extends Component {
<Link to="/~publish/join" className="f9 gray2">
Join Notebook
</Link>
<div className="pl2 pv2 bb b--gray4">
<div className="pl2 pv2 bb b--gray4 b--gray2-d">
<Dropdown
width="16rem"
align="left"
options={[
{
cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
cls: "white-d w-100 tl pointer db ph2 pv3 hover-bg-gray4 hover-bg-gray1-d bg-transparent",
txt: "Oldest",
action: () => {this.setState({sort: "oldest"})}
},
{
cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
cls: "white-d w-100 tl pointer db ph2 pv3 hover-bg-gray4 hover-bg-gray1-d bg-transparent",
txt: "Newest",
action: () => {this.setState({sort: "newest"})}
},
{
cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
cls: "white-d w-100 tl pointer db ph2 pv3 hover-bg-gray4 hover-bg-gray1-d bg-transparent",
txt: "A -> Z",
action: () => {this.setState({sort: "alphabetical"})}
},
{
cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
cls: "white-d w-100 tl pointer db ph2 pv3 hover-bg-gray4 hover-bg-gray1-d bg-transparent",
txt: "Z -> A",
action: () => {this.setState({sort: "reverseAlphabetical"})}
}

4
pkg/interface/publish/src/js/components/lib/subscribers.js
View File

@ -54,14 +54,14 @@ export class Subscribers extends Component {
width = 258;
let url = `/~contacts${writePath}`;
options = [{
cls: "tl pointer w-100 db hover-bg-gray4 ph2 pv3",
cls: "bg-transparent white-d tl pointer w-100 db hover-bg-gray4 hover-bg-gray1-d ph2 pv3",
txt: "Manage this group in the contacts view",
action: () => {this.redirect(url)}
}];
} else {
width = 157;
options = [{
cls: "tl pointer w-100 db hover-bg-gray4 ph2 pv3",
cls: "bg-transparent white-d tl pointer w-100 db hover-bg-gray4 hover-bg-gray1-d ph2 pv3",
txt: "Demote to subscriber",
action: () => {this.removeUser(`~${who}`, writePath)}
}];

2
pkg/interface/publish/src/js/components/skeleton.js
View File

@ -31,7 +31,7 @@ export class Skeleton extends Component {
path={props.path}
invites={props.invites}
/>
<div className={"h-100 w-100 relative " + rightPanelHide} style={{
<div className={"h-100 w-100 relative white-d " + rightPanelHide} style={{
flexGrow: 1,
}}>
{props.children}