urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-23 19:05:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

settings: allow picking indigo theme

Browse Source
This commit is contained in:
Matilde Park 2021-03-02 21:55:59 -05:00
parent fef4284219
commit 7bb9c3851e
14 changed files with 70 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/logic/state/local.tsx
View File

@ -7,6 +7,7 @@ import { BackgroundConfig, RemoteContentPolicy, TutorialProgress, tutorialProgre
export interface LocalState {
theme: "light" | "dark" | "auto";
hideAvatars: boolean;
hideNicknames: boolean;
remoteContentPolicy: RemoteContentPolicy;
@ -35,6 +36,7 @@ export const selectLocalState =
const useLocalState = create<LocalStateZus>(persist((set, get) => ({
dark: false,
background: undefined,
theme: "auto",
hideAvatars: false,
hideNicknames: false,
hideLeapCats: [],

4
pkg/interface/src/logic/state/settings.tsx
View File

@ -11,6 +11,7 @@ export interface SettingsState {
backgroundType: 'none' | 'url' | 'color';
background?: string;
dark: boolean;
theme: "light" | "dark" | "auto";
};
calm: {
hideNicknames: boolean;
@ -33,11 +34,14 @@ export const selectSettingsState =
export const selectCalmState = (s: SettingsState) => s.calm;
export const selectDisplayState = (s: SettingsState) => s.display;
const useSettingsState = create<SettingsStateZus>((set) => ({
display: {
backgroundType: 'none',
background: undefined,
dark: false,
theme: "auto"
},
calm: {
hideNicknames: false,

15
pkg/interface/src/views/App.js
View File

@ -47,6 +47,10 @@ const Root = withSettingsState(styled.div`
display: flex;
flex-flow: column nowrap;
a {
text-decoration: none;
}
* {
scrollbar-width: thin;
scrollbar-color: ${ p => p.theme.colors.gray } transparent;
@ -68,7 +72,6 @@ const Root = withSettingsState(styled.div`
`, ['display']);
const StatusBarWithRouter = withRouter(StatusBar);
class App extends React.Component {
constructor(props) {
super(props);
@ -135,13 +138,14 @@ class App extends React.Component {
const { state, props } = this;
const associations = state.associations ?
state.associations : { contacts: {} };
const theme = props.dark ? dark : light;
const background = this.props.background;
const theme =
((props.dark && props?.display?.theme == "auto") ||
props?.display?.theme == "dark"
) ? dark : light;
const notificationsCount = state.notificationsCount || 0;
const doNotDisturb = state.doNotDisturb || false;
const ourContact = this.state.contacts[`~${this.ship}`] || null;
return (
<ThemeProvider theme={theme}>
<Helmet>
@ -196,5 +200,4 @@ class App extends React.Component {
}
}
export default withLocalState(process.env.NODE_ENV === 'production' ? App : hot(App));
export default withSettingsState(withLocalState(process.env.NODE_ENV === 'production' ? App : hot(App)), ['display']);

12
pkg/interface/src/views/apps/chat/components/content/text.js
View File

@ -40,6 +40,18 @@ const renderers = {
</Text>
);
},
blockquote: ({ children }) => {
return (
<Text
lineHeight="20px"
display="block"
borderLeft="1px solid"
color="black"
paddingLeft={2}>
{children}
</Text>
)
},
paragraph: ({ children }) => {
return (
<Text fontSize='1' lineHeight={'20px'}>

109
pkg/interface/src/views/apps/chat/css/custom.css
View File

@ -50,12 +50,6 @@ button {
background-color: #fff;
}
a {
color: #000;
font-weight: 400;
text-decoration: none;
}
h2 {
font-weight: 400;
}
@ -80,10 +74,6 @@ h2 {
font-family: 'Source Code Pro', monospace;
}
.bg-welcome-green {
background-color: #ecf6f2;
}
.c-default {
cursor: default;
}
@ -158,38 +148,11 @@ h2 {
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-full-s {
flex-basis: 100%;
}
.h-100-minus-96-s {
height: calc(100% - 96px);
}
.unread-notice {
top: 96px;
}
}
@media all and (min-width: 34.375em) and (max-width: 46.875em) {
.flex-basis-250-m {
flex-basis: 250px;
}
}
@media all and (min-width: 46.875em) and (max-width: 60em) {
.flex-basis-250-l {
flex-basis: 250px;
}
}
@media all and (min-width: 60em) {
.flex-basis-250-xl {
flex-basis: 250px;
}
}
blockquote {
padding: 0 0 0 16px;
margin: 0;
@ -345,79 +308,13 @@ pre.CodeMirror-placeholder.CodeMirror-line-like {
/* dark */
@media (prefers-color-scheme: dark) {
.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--gray1-d {
border-color: #4d4d4d;
}
.b--gray2-d {
border-color: #7f7f7f;
}
.b--white-d {
border-color: #fff;
}
.b--green2-d {
border-color: #2aa779;
}
.bb-d {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.invert-d {
filter: invert(1);
}
.o-80-d {
opacity: 0.8;
}
.focus-b--white-d:focus {
border-color: #fff;
}
a {
color: #fff;
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
blockquote {
border-left: 1px solid white;
}
.contrast-10-d {
filter: contrast(0.1);
}
.bg-none-d {
background: none;
border-left: 1px solid inherit;
}
/* codemirror */
.chat .cm-s-tlon.CodeMirror {
color: #fff;
color: inherit;
}
.chat .cm-s-tlon span.cm-def {
@ -468,7 +365,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like {
/* set rules w/ both color & bg-color last to preserve legibility */
.chat .CodeMirror-selected {
background: var(--medium-gray) !important;
color: white;
color: inherit;
}
.chat .cm-s-tlon span.cm-comment {

1
pkg/interface/src/views/apps/launch/components/tiles/custom.js
View File

@ -17,7 +17,6 @@ export default class CustomTile extends React.PureComponent {
>
<BaseImage
position='absolute'
className="invert-d"
style={{ left: 38, top: 38 }}
src='/~launch/img/UnknownCustomTile.png'
width='48px'

15
pkg/interface/src/views/apps/launch/css/custom.css
View File

@ -53,25 +53,10 @@ button {
/* dark */
@media all and (prefers-color-scheme: dark) {
.bg-gray0-d {
background-color: #333;
}
.bg-gray1-d {
background-color: #4d4d4d;
}
.bg-gray2-d {
background-color: #7f7f7f;
}
.b--gray1-d {
border-color: #4d4d4d;
}
.white-d {
color: #fff;
}
.invert-d {
filter: invert(1);
}
.hover-bg-gray1-d:hover {
background-color: #4d4d4d;
}
}

19
pkg/interface/src/views/apps/links/css/custom.css
View File

@ -16,23 +16,4 @@
left: 0;
width: 100%;
height: 100%;
}
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s, .flex-basis-full-s {
flex-basis: 100%;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-30-ns {
flex-basis: 30vw;
}
}

9
pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
View File

@ -3,7 +3,7 @@ import moment from 'moment';
import { Link } from 'react-router-dom';
import { BigInteger } from 'big-integer';
import { Box } from '@tlon/indigo-react';
import { Box, Text } from '@tlon/indigo-react';
import { Graph } from '@urbit/api';
import { getLatestRevision } from '~/logic/lib/publish';
@ -24,13 +24,14 @@ function NavigationItem(props: {
textAlign={props.prev ? 'left' : 'right'}
>
<Link to={props.url}>
<Box color="gray" mb={2}>
<Text display='block' color="gray">
{props.prev ? 'Previous' : 'Next'}
</Box>
<Box mb={1}>{props.title}</Box>
</Text>
<Text display='block' lineHeight="tall">{props.title}</Text>
<Timestamp
stamp={moment(props.date)}
time={false}
fontSize="1"
justifyContent={props.prev ? 'flex-start' : 'flex-end'}
/>
</Link>

102
pkg/interface/src/views/apps/publish/css/custom.css
View File

@ -5,41 +5,6 @@
--light-gray: rgba(0,0,0,0.08);
}
.bg-welcome-green {
background-color: #ECF6F2;
}
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s, .flex-basis-full-s {
flex-basis: 100%;
}
.h-100-m-40-s {
height: calc(100% - 40px);
}
.black-s {
color: #000;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-250-ns {
flex-basis: 250px;
}
.h-100-m-40-ns {
height: calc(100% - 40px);
}
}
.bg-light-green {
background: rgba(42, 167, 121, 0.1);
}
.NotebookButton {
border-radius:2px;
cursor: pointer;
@ -207,57 +172,6 @@
}
@media all and (prefers-color-scheme: dark) {
.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--gray1-d {
border-color: #4d4d4d;
}
.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;
}
@ -266,32 +180,32 @@
}
.publish .cm-s-tlon.CodeMirror {
background: unset;
color: #fff;
color: inherit;
}
.publish .cm-s-tlon span.cm-def {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable-2 {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-variable-3,
.publish .cm-s-tlon span.cm-type {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-property {
color: white;
color: inherit;
}
.publish .cm-s-tlon span.cm-operator {
color: white;
color: inherit;
}
@ -325,7 +239,7 @@
color: black;
display: inline-block;
padding: 0;
background-color: rgba(255,255,255, 0.3);
background-color: rgba(0,255,255, 0.3);
border-radius: 2px;
}
}

17
pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
View File

@ -3,6 +3,8 @@ import React from "react";
import {
Col,
Text,
Label,
ManagedRadioButtonField as Radio
} from "@tlon/indigo-react";
import { Formik, Form } from "formik";
import * as Yup from "yup";
@ -20,13 +22,16 @@ const formSchema = Yup.object().shape({
.oneOf(["none", "color", "url"], "invalid")
.required("Required"),
background: Yup.string(),
theme: Yup.string()
.oneOf(["light", "dark", "auto"])
.required("Required")
});
interface FormSchema {
bgType: BgType;
bgColor: string | undefined;
bgUrl: string | undefined;
theme: string;
}
interface DisplayFormProps {
@ -43,6 +48,7 @@ export default function DisplayForm(props: DisplayFormProps) {
display: {
background,
backgroundType,
theme
}
} = useSettingsState(settingsSel);
@ -63,13 +69,13 @@ export default function DisplayForm(props: DisplayFormProps) {
{
bgType: backgroundType,
bgColor: bgColor || "",
bgUrl
bgUrl,
theme
} as FormSchema
}
onSubmit={async (values, actions) => {
let promises = [] as Promise<any>[];
promises.push(api.settings.putEntry('display', 'backgroundType', values.bgType));
promises.push(
api.settings.putEntry('display', 'background',
values.bgType === "color"
@ -79,6 +85,7 @@ export default function DisplayForm(props: DisplayFormProps) {
: false
));
promises.push(api.settings.putEntry('display', 'theme', values.theme));
await Promise.all(promises);
actions.setStatus({ success: null });
@ -103,6 +110,10 @@ export default function DisplayForm(props: DisplayFormProps) {
api={api}
s3={s3}
/>
<Label>Theme</Label>
<Radio name="theme" id="light" label="Light"/>
<Radio name="theme" id="dark" label="Dark" />
<Radio name="theme" id="auto" label="Auto" />
<AsyncButton primary width="fit-content" type="submit">
Save
</AsyncButton>

12
pkg/interface/src/views/components/RichText.js
View File

@ -46,6 +46,18 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
}
return linkText;
},
blockquote: (blockquoteProps) => {
return (
<Text
lineHeight="20px"
display="block"
borderLeft="1px solid"
color="black"
paddingLeft={2} {...props}>
{blockquoteProps.children}
</Text>
)
},
paragraph: (paraProps) => {
return <Text display={props.inline ? 'inline' : 'block'} mb='2' {...props}>{paraProps.children}</Text>;
}

2
pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
View File

@ -88,7 +88,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
display={['block', 'none']}
flexShrink={0}
>
<Link to={`/~landscape${workspace}`}> {'<- Back'}</Link>
<Link to={`/~landscape${workspace}`}><Text>{'<- Back'}</Text></Link>
</Box>
<Box px={1} mr={2} minWidth={0} display="flex" flexShrink={[1, 0]}>
<Text

25
pkg/interface/src/views/landscape/css/custom.css
View File

@ -4,29 +4,4 @@
.m0a {
margin: 0 auto;
}
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
display: none;
}
.flex-basis-100-s {
flex-basis: 100%;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-30-ns {
flex-basis: 30vw;
}
}
@media all and (prefers-color-scheme: dark) {
.o-60-d {
opacity: .6;
}
}