mirror of
https://github.com/ilyakooo0/urbit.git
synced 2025-01-05 22:03:50 +03:00
Logan
GitHub
commit
4ade3884bd
@ -276,7 +276,7 @@ h2 {
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
.hover-black-d:hover {
|
||||
color: #000;
|
||||
.hover-bg-gray1-d:hover {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,11 +78,11 @@ class UrbitApi {
|
||||
}
|
||||
|
||||
groupsAction(data) {
|
||||
this.action("group-store", "group-action", data);
|
||||
return this.action("group-store", "group-action", data);
|
||||
}
|
||||
|
||||
groupAdd(members, path) {
|
||||
this.groupsAction({
|
||||
return this.groupsAction({
|
||||
add: {
|
||||
members, path
|
||||
}
|
||||
@ -152,7 +152,7 @@ class UrbitApi {
|
||||
chatViewJoin(ship, path, askHistory) {
|
||||
this.chatViewAction({
|
||||
join: {
|
||||
ship,
|
||||
ship,
|
||||
'app-path': path,
|
||||
'ask-history': askHistory
|
||||
}
|
||||
|
||||
@ -1,40 +1,25 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Sigil } from '/components/lib/icons/sigil';
|
||||
import { deSig } from '/lib/util';
|
||||
import urbitOb from 'urbit-ob';
|
||||
import { InviteSearch } from './invite-search';
|
||||
|
||||
|
||||
export class InviteElement extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
members: '',
|
||||
members: [],
|
||||
error: false,
|
||||
success: false
|
||||
};
|
||||
this.setInvite = this.setInvite.bind(this);
|
||||
}
|
||||
|
||||
modifyMembers() {
|
||||
const { props, state } = this;
|
||||
|
||||
let aud = [];
|
||||
let isValid = true;
|
||||
if (state.members.length > 2) {
|
||||
aud = state.members
|
||||
.split(',')
|
||||
.map((mem) => `~${deSig(mem.trim())}`);
|
||||
let aud = state.members.map(mem => `~${mem}`);
|
||||
|
||||
aud.forEach((mem) => {
|
||||
if (!urbitOb.isValidPatp(mem)) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!isValid || (state.members.length > 0 && state.members.length < 3)) {
|
||||
if (state.members.length === 0) {
|
||||
this.setState({
|
||||
error: true,
|
||||
success: false
|
||||
@ -42,40 +27,27 @@ export class InviteElement extends Component {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.textarea) {
|
||||
this.textarea.value = '';
|
||||
}
|
||||
props.api.setSpinner(true);
|
||||
|
||||
this.setState({
|
||||
error: false,
|
||||
success: true,
|
||||
members: ''
|
||||
members: []
|
||||
}, () => {
|
||||
props.api.groups.add(aud, props.path);
|
||||
props.api.groups.add(aud, props.path).then(() => {
|
||||
props.api.setSpinner(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
modifyMembersChange(e) {
|
||||
this.setState({
|
||||
members: e.target.value
|
||||
});
|
||||
setInvite(invite) {
|
||||
this.setState({members: invite.ships});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state} = this;
|
||||
let errorElem = !!state.error ? (
|
||||
<p className="pt2 red2 f8">Invalid ship name.</p>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
const { props, state } = this;
|
||||
|
||||
let successElem = !!state.success ? (
|
||||
<p className="pt2 green2 f8">Success!</p>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
|
||||
let modifyButtonClasses = "db f9 ba pa2 white-d bg-gray0-d b--black b--gray2-d pointer";
|
||||
let modifyButtonClasses = "mt4 db f9 ba pa2 white-d bg-gray0-d b--black b--gray2-d pointer";
|
||||
if (state.error) {
|
||||
modifyButtonClasses = modifyButtonClasses + ' gray3';
|
||||
}
|
||||
@ -89,23 +61,21 @@ export class InviteElement extends Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<textarea
|
||||
ref={ e => { this.textarea = e; } }
|
||||
className="f7 mono ba b--gray3 bg-gray0-d white-d pa3 mb4 db w-100"
|
||||
style={{
|
||||
resize: 'none',
|
||||
height: 50
|
||||
}}
|
||||
spellCheck="false"
|
||||
placeholder="~zod, ~bus"
|
||||
onChange={this.modifyMembersChange.bind(this)}></textarea>
|
||||
<InviteSearch
|
||||
groups={{}}
|
||||
contacts={props.contacts}
|
||||
groupResults={false}
|
||||
invites={{
|
||||
groups: [],
|
||||
ships: this.state.members
|
||||
}}
|
||||
setInvite={this.setInvite}
|
||||
/>
|
||||
<button
|
||||
onClick={this.modifyMembers.bind(this)}
|
||||
className={modifyButtonClasses}>
|
||||
{buttonText}
|
||||
</button>
|
||||
{errorElem}
|
||||
{successElem}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -222,8 +222,8 @@ export class InviteSearch extends Component {
|
||||
<li
|
||||
key={group}
|
||||
className={
|
||||
"list mono white-d f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d"
|
||||
"list mono mix-blend-diff white f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-bg-gray1-d"
|
||||
}
|
||||
onClick={e => this.addGroup(group)}>
|
||||
{group}
|
||||
@ -233,14 +233,16 @@ export class InviteSearch extends Component {
|
||||
|
||||
let shipResults = state.searchResults.ships.map(ship => {
|
||||
let nicknames = (this.state.contacts.has(ship))
|
||||
? this.state.contacts.get(ship).join(", ")
|
||||
? this.state.contacts.get(ship)
|
||||
.filter(e => { return !(e === "") })
|
||||
.join(", ")
|
||||
: "";
|
||||
return (
|
||||
<li
|
||||
key={ship}
|
||||
className={
|
||||
"list mono white-d f8 pv1 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d relative"
|
||||
" hover-bg-gray4 hover-bg-gray1-d relative"
|
||||
}
|
||||
onClick={e => this.addShip(ship)}>
|
||||
<Sigil
|
||||
@ -249,8 +251,8 @@ export class InviteSearch extends Component {
|
||||
color="#000000"
|
||||
classes="mix-blend-diff v-mid"
|
||||
/>
|
||||
<span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</span>
|
||||
<span className="v-mid ml2 mw5 truncate dib mix-blend-diff white">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1 mix-blend-diff white">{nicknames}</span>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
@ -29,9 +29,12 @@ export class MemberScreen extends Component {
|
||||
modifyText = 'Invite someone to this chat.';
|
||||
}
|
||||
|
||||
let contacts = (props.station in props.contacts)
|
||||
? props.contacts[props.station] : {};
|
||||
|
||||
let members = perm.map((mem) => {
|
||||
let contact = (mem in props.contacts)
|
||||
? props.contacts[mem] : false;
|
||||
let contact = (mem in contacts)
|
||||
? contacts[mem] : false;
|
||||
|
||||
return (
|
||||
<MemberElement
|
||||
@ -55,7 +58,7 @@ export class MemberScreen extends Component {
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<div
|
||||
className={`pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative
|
||||
className={`pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative
|
||||
overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
|
||||
style={{ height: 48 }}>
|
||||
<SidebarSwitcher
|
||||
@ -91,6 +94,7 @@ export class MemberScreen extends Component {
|
||||
<InviteElement
|
||||
path={props.station}
|
||||
permissions={props.permission}
|
||||
contacts={props.contacts}
|
||||
api={props.api}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@ -203,8 +203,6 @@ export class Root extends Component {
|
||||
};
|
||||
let popout = props.match.url.includes("/popout/");
|
||||
|
||||
let roomContacts = (station in contacts)
|
||||
? contacts[station] : {};
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
@ -219,7 +217,7 @@ export class Root extends Component {
|
||||
api={api}
|
||||
station={station}
|
||||
permission={permission}
|
||||
contacts={roomContacts}
|
||||
contacts={contacts}
|
||||
permissions={state.permissions}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
|
||||
@ -113,9 +113,56 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
/* dark */
|
||||
/* @media all and (prefers-color-scheme: dark) {
|
||||
@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 {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
}
|
||||
@ -313,7 +313,8 @@ export class ContactCard extends Component {
|
||||
style={{ width: "fit-content" }}>
|
||||
<p className="f9 gray2 lh-copy">Sigil Color</p>
|
||||
<textarea
|
||||
className="b--gray4 black f7 ba db pl2 focus-b--black"
|
||||
className={"b--gray4 b--gray2-d black white-d bg-gray0-d f7 ba db pl2 " +
|
||||
"focus-b--black focus-b--white-d"}
|
||||
onChange={this.sigilColorSet}
|
||||
defaultValue={defaultColor}
|
||||
key={"default" + defaultColor}
|
||||
@ -499,7 +500,8 @@ export class ContactCard extends Component {
|
||||
//TODO "Share card" if it's /me -> sends to /~/default of recipient
|
||||
return (
|
||||
<div className="w-100 h-100 overflow-hidden">
|
||||
<div className="flex justify-between w-100 bg-white bb b--gray4 ">
|
||||
<div className={"flex justify-between w-100 bg-white bg-gray0-d " +
|
||||
"bb b--gray4 b--gray2-d "}>
|
||||
<div className="w-100 h2 dn-m dn-l dn-xl inter pb6 pl3 pt3 f8">
|
||||
<Link to="/~contacts/">{"⟵"}</Link>
|
||||
</div>
|
||||
@ -512,16 +514,16 @@ export class ContactCard extends Component {
|
||||
this.editToggle();
|
||||
}
|
||||
}}
|
||||
className={`ml3 mt2 mb2 f9 pa1 pointer` + ourOpt}>
|
||||
className={`white-d bg-gray0-d ml3 mt2 mb2 f9 pa1 pointer ` + ourOpt}>
|
||||
{editInfoText}
|
||||
</button>
|
||||
<button className={`ml3 mt2 mb2 f9 pa1 pointer` + localOpt}>
|
||||
<button className={`white-d bg-gray0-d ml3 mt2 mb2 f9 pa1 pointer ` + localOpt}>
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className={
|
||||
`pr4 mt4 mb4 f9 red2 pointer ` + adminOpt
|
||||
`bg-gray0-d pr4 mt4 mb4 f9 red2 pointer ` + adminOpt
|
||||
}
|
||||
onClick={this.removeFromGroup}>
|
||||
{(
|
||||
@ -530,7 +532,7 @@ export class ContactCard extends Component {
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-100 w-100 overflow-x-hidden pb8">{card}</div>
|
||||
<div className="h-100 w-100 overflow-x-hidden pb8 white-d">{card}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ export class ContactItem extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
|
||||
let selectedClass = (props.selected) ? "bg-gray4" : "";
|
||||
let selectedClass = (props.selected) ? "bg-gray4 bg-gray1-d" : "";
|
||||
let hexColor = uxToHex(props.color);
|
||||
let name = (props.nickname) ? props.nickname : "~" + props.ship;
|
||||
|
||||
|
||||
@ -51,7 +51,8 @@ export class ContactSidebar extends Component {
|
||||
return (
|
||||
<div
|
||||
key={member}
|
||||
className="pl4 pt1 pb1 f9 flex justify-start content-center bg-white">
|
||||
className={"pl4 pt1 pb1 f9 flex justify-start content-center " +
|
||||
"bg-white bg-gray0-d"}>
|
||||
<Sigil
|
||||
ship={member}
|
||||
color="#000000"
|
||||
|
||||
@ -29,7 +29,8 @@ export class EditElement extends Component {
|
||||
<div className="w-100 flex">
|
||||
<textarea
|
||||
ref={props.title}
|
||||
className="w-100 ba pl3 b--gray4 focus-b--black"
|
||||
className={"w-100 ba pl3 white-d bg-gray0-d b--gray4 b--gray2-d " +
|
||||
"focus-b--black focus-b--white-d"}
|
||||
style={ inputStyles }
|
||||
onChange={(e) => {
|
||||
let val = (' ' + e.target.value).slice(1);
|
||||
@ -43,7 +44,7 @@ export class EditElement extends Component {
|
||||
{!!props.showButtons ? (
|
||||
<button
|
||||
className={
|
||||
"f9 pointer ml3 ba pa2 pl3 pr3 b--red2 red2 " +
|
||||
"bg-gray0-d f9 pointer ml3 ba pa2 pl3 pr3 b--red2 red2 " +
|
||||
(showDelete ? "dn" : "dib")
|
||||
}
|
||||
onClick={() => {
|
||||
@ -57,8 +58,8 @@ export class EditElement extends Component {
|
||||
{!!props.showButtons ? (
|
||||
<button
|
||||
className={
|
||||
"pointer db mv2 f9 ba pa2 pl3 pr3 " +
|
||||
(allowSave ? "b--black" : "b--gray4 gray4")
|
||||
"bg-gray0-d white-d pointer db mv2 f9 ba pa2 pl3 pr3 " +
|
||||
(allowSave ? "b--black b--white-d" : "b--gray4 gray4 b--gray2-d gray2-d")
|
||||
}
|
||||
onClick={() => {
|
||||
if (!allowSave) { return; }
|
||||
|
||||
@ -56,7 +56,7 @@ export class GroupDetail extends Component {
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className={"h-100 w-100 overflow-x-hidden bg-white pa4 "
|
||||
<div className={"h-100 w-100 overflow-x-hidden bg-white bg-gray0-d white-d pa4 "
|
||||
+ responsiveClass}>
|
||||
<div className="pb5 f8 db dn-m dn-l dn-xl">
|
||||
<Link to={backLink}>⟵ Contacts</Link>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
|
||||
export class GroupItem extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
|
||||
let selectedClass = (props.selected) ? "bg-gray4" : "";
|
||||
let selectedClass = (props.selected) ? "bg-gray4 bg-gray1-d" : "";
|
||||
let memberCount = Math.max(
|
||||
props.group.size,
|
||||
Object.keys(props.contacts).length
|
||||
|
||||
@ -12,7 +12,7 @@ export class GroupSidebar extends Component {
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let selectedClass = (props.selected === "me") ? "bg-gray4" : "bg-white";
|
||||
let selectedClass = (props.selected === "me") ? "bg-gray4 bg-gray1-d" : "bg-white bg-gray0-d";
|
||||
|
||||
let rootIdentity = <Link
|
||||
key={1}
|
||||
@ -78,9 +78,9 @@ export class GroupSidebar extends Component {
|
||||
let activeClasses = (this.props.activeDrawer === "groups") ? "" : "dn-s";
|
||||
|
||||
return (
|
||||
<div className={`bn br-m br-l br-xl b--gray3 lh-copy h-100 flex-basis-100-s
|
||||
flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl
|
||||
relative overflow-hidden ` + activeClasses}>
|
||||
<div className={"bn br-m br-l br-xl b--gray2 lh-copy h-100 flex-basis-100-s " +
|
||||
"flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl " +
|
||||
"relative overflow-hidden " + activeClasses}>
|
||||
{/*TODO Add invite items */}
|
||||
<a className="db dn-m dn-l dn-xl f8 pb6 pl3" href="/">⟵ Landscape</a>
|
||||
<div className="overflow-auto pb8 h-100">
|
||||
|
||||
@ -222,8 +222,8 @@ export class InviteSearch extends Component {
|
||||
<li
|
||||
key={group}
|
||||
className={
|
||||
"list mono white-d f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d"
|
||||
"list mono mix-blend-diff white f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-bg-gray1-d"
|
||||
}
|
||||
onClick={e => this.addGroup(group)}>
|
||||
{group}
|
||||
@ -233,14 +233,16 @@ export class InviteSearch extends Component {
|
||||
|
||||
let shipResults = state.searchResults.ships.map(ship => {
|
||||
let nicknames = (this.state.contacts.has(ship))
|
||||
? this.state.contacts.get(ship).join(", ")
|
||||
? this.state.contacts.get(ship)
|
||||
.filter(e => {return !(e === "")})
|
||||
.join(", ")
|
||||
: "";
|
||||
return (
|
||||
<li
|
||||
key={ship}
|
||||
className={
|
||||
"list mono white-d f8 pv1 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d relative"
|
||||
" hover-bg-gray4 hover-bg-gray1-d relative"
|
||||
}
|
||||
onClick={e => this.addShip(ship)}>
|
||||
<Sigil
|
||||
@ -249,8 +251,8 @@ export class InviteSearch extends Component {
|
||||
color="#000000"
|
||||
classes="mix-blend-diff v-mid"
|
||||
/>
|
||||
<span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</span>
|
||||
<span className="v-mid ml2 mw5 truncate dib mix-blend-diff white">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1 mix-blend-diff white">{nicknames}</span>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
@ -22,11 +22,11 @@ export class ShareSheet extends Component {
|
||||
path={props.path}
|
||||
selected={props.selected}
|
||||
share={true} />
|
||||
<p className="pt2 pb3 pl4 pr4 f9">
|
||||
<p className="pt2 pb3 pl4 pr4 f9 white-d">
|
||||
Your personal information is hidden to others in this group
|
||||
by default.
|
||||
</p>
|
||||
<p className="pl4 pr4 f9">
|
||||
<p className="pl4 pr4 f9 white-d">
|
||||
Share whenever you are ready, or edit its contents for this group.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -91,7 +91,7 @@ export class NewScreen extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 flex flex-column overflow-y-scroll">
|
||||
<div className="h-100 w-100 flex flex-column overflow-y-scroll white-d">
|
||||
<div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 pl3 pt3 f8">
|
||||
<Link to="/~contacts/">{"⟵ All Groups"}</Link>
|
||||
</div>
|
||||
@ -102,7 +102,8 @@ export class NewScreen extends Component {
|
||||
Alphanumeric characters and hyphens only
|
||||
</p>
|
||||
<textarea
|
||||
className="f7 ba b--gray3 w-100 pa3 ml3 mt2 focus-b--black"
|
||||
className={"f7 bg-gray0-d white-d ba b--gray3 w-100 pa3 ml3 mt2 " +
|
||||
"focus-b--black focus-b--white-d"}
|
||||
rows={1}
|
||||
placeholder="example-group-name"
|
||||
style={{
|
||||
|
||||
@ -81,12 +81,12 @@ export class ChannelsSidebar extends Component {
|
||||
: "dn")}>
|
||||
<a className="db dn-m dn-l dn-xl f8 pb3 pl3" href="/">⟵ Landscape</a>
|
||||
<div className="overflow-y-scroll h-100">
|
||||
<h2 className={`f8 f9-m f9-l f9-xl
|
||||
pt1 pt4-m pt4-l pt4-xl
|
||||
pr4 pb3 pb3-m pb3-l pb3-xl
|
||||
pl3 pl4-m pl4-l pl4-xl
|
||||
black-s gray2 white-d c-default
|
||||
bb b--gray4 mb2 mb0-m mb0-l mb0-xl`}>
|
||||
<h2 className={"f8 f9-m f9-l f9-xl " +
|
||||
"pt1 pt4-m pt4-l pt4-xl " +
|
||||
"pr4 pb3 pb3-m pb3-l pb3-xl " +
|
||||
"pl3 pl4-m pl4-l pl4-xl " +
|
||||
"black-s gray2 white-d c-default " +
|
||||
"bb b--gray4 b--gray2-d mb2 mb0-m mb0-l mb0-xl"}>
|
||||
Your Collections
|
||||
</h2>
|
||||
{privateChannel}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -222,8 +222,8 @@ export class InviteSearch extends Component {
|
||||
<li
|
||||
key={group}
|
||||
className={
|
||||
"list mono white-d f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d"
|
||||
"list mono mix-blend-diff white f8 pv2 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-bg-gray1-d"
|
||||
}
|
||||
onClick={e => this.addGroup(group)}>
|
||||
{group}
|
||||
@ -233,14 +233,16 @@ export class InviteSearch extends Component {
|
||||
|
||||
let shipResults = state.searchResults.ships.map(ship => {
|
||||
let nicknames = (this.state.contacts.has(ship))
|
||||
? this.state.contacts.get(ship).join(", ")
|
||||
? this.state.contacts.get(ship)
|
||||
.filter(e => { return !(e === "") })
|
||||
.join(", ")
|
||||
: "";
|
||||
return (
|
||||
<li
|
||||
key={ship}
|
||||
className={
|
||||
"list mono white-d f8 pv1 ph3 pointer" +
|
||||
" hover-bg-gray4 hover-black-d relative"
|
||||
" hover-bg-gray4 hover-bg-gray1-d relative"
|
||||
}
|
||||
onClick={e => this.addShip(ship)}>
|
||||
<Sigil
|
||||
@ -249,8 +251,8 @@ export class InviteSearch extends Component {
|
||||
color="#000000"
|
||||
classes="mix-blend-diff v-mid"
|
||||
/>
|
||||
<span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</span>
|
||||
<span className="v-mid ml2 mw5 truncate dib mix-blend-diff white">{"~" + ship}</span>
|
||||
<span className="absolute right-1 di truncate mw4 inter f9 pt1 mix-blend-diff white">{nicknames}</span>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
|
||||
@ -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={{
|
||||
|
||||
@ -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`;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"})}
|
||||
}
|
||||
|
||||
@ -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)}
|
||||
}];
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user