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

Merge pull request #4477 from urbit/james/blockquote-spacing

Browse Source 
chat: blockquote spacing
This commit is contained in:
matildepark 2021-02-22 15:52:48 -05:00 committed by GitHub
commit 390a17b706
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 125 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -188,7 +188,8 @@ export default class ChatMessage extends Component<ChatMessageProps> {
<Box <Box
ref={this.divRef} ref={this.divRef}
pt={renderSigil ? 2 : 0} pt={renderSigil ? 2 : 0}
pb={2} pb={isLastMessage ? 4 : 2}
pr={5}
className={containerClass} className={containerClass}
style={style} style={style}
> >

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

@ -5,6 +5,7 @@ import RemarkDisableTokenizers from 'remark-disable-tokenizers';
import urbitOb from 'urbit-ob'; import urbitOb from 'urbit-ob';
import { Text } from '@tlon/indigo-react'; import { Text } from '@tlon/indigo-react';
import { GroupLink } from '~/views/components/GroupLink'; import { GroupLink } from '~/views/components/GroupLink';
import { Row } from '@tlon/indigo-react';
const DISABLED_BLOCK_TOKENS = [ const DISABLED_BLOCK_TOKENS = [
'indentedCode', 'indentedCode',
@ -79,7 +80,7 @@ const MessageMarkdown = React.memo((props) => {
return lines.map((line, i) => ( return lines.map((line, i) => (
<> <>
{i !== 0 && <br />} {i !== 0 && <Row height={2} />}
<ReactMarkdown <ReactMarkdown
{...rest} {...rest}
source={line} source={line}

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

@ -4,7 +4,8 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
html, body { html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
@ -21,7 +22,17 @@ html, body {
overflow: hidden; overflow: hidden;
} }
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button { p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
input,
textarea,
button {
margin-block-end: unset; margin-block-end: unset;
margin-block-start: unset; margin-block-start: unset;
-webkit-margin-before: unset; -webkit-margin-before: unset;
@ -30,7 +41,9 @@ p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
padding: 0; padding: 0;
} }
textarea, input, button { textarea,
input,
button {
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
border: none; border: none;
@ -64,11 +77,11 @@ h2 {
} }
.mono { .mono {
font-family: "Source Code Pro", monospace; font-family: 'Source Code Pro', monospace;
} }
.bg-welcome-green { .bg-welcome-green {
background-color: #ECF6F2; background-color: #ecf6f2;
} }
.c-default { .c-default {
@ -92,7 +105,7 @@ h2 {
} }
.placeholder-inter::placeholder { .placeholder-inter::placeholder {
font-family: "Inter", sans-serif; font-family: 'Inter', sans-serif;
} }
.embed-container iframe { .embed-container iframe {
@ -105,7 +118,7 @@ h2 {
/* toggler checkbox */ /* toggler checkbox */
.toggle::after { .toggle::after {
content: ""; content: '';
height: 12px; height: 12px;
width: 12px; width: 12px;
background: white; background: white;
@ -116,7 +129,7 @@ h2 {
} }
.toggle.checked::after { .toggle.checked::after {
content: ""; content: '';
height: 12px; height: 12px;
width: 12px; width: 12px;
background: white; background: white;
@ -134,7 +147,6 @@ h2 {
border-radius: 0.25rem 0.25rem 0 0; border-radius: 0.25rem 0.25rem 0 0;
} }
.green3 { .green3 {
color: #7ea899; color: #7ea899;
} }
@ -179,22 +191,16 @@ h2 {
} }
blockquote { blockquote {
padding-left: 24px; padding: 0 0 0 16px;
padding-top: 8px; margin: 0;
padding-bottom: 8px;
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-bottom: 8px;
border-left: 1px solid black; border-left: 1px solid black;
} }
:root { :root {
--dark-gray: #555555; --dark-gray: #555555;
--gray: #7F7F7F; --gray: #7f7f7f;
--medium-gray: #CCCCCC; --medium-gray: #cccccc;
--light-gray: rgba(0,0,0,0.08); --light-gray: rgba(0, 0, 0, 0.08);
} }
.chat .react-codemirror2 { .chat .react-codemirror2 {
width: 100%; width: 100%;
@ -208,7 +214,7 @@ blockquote {
} }
.chat .CodeMirror * { .chat .CodeMirror * {
font-family: 'Inter'; font-family: 'Inter';
} }
.chat .cm-s-tlon.CodeMirror { .chat .cm-s-tlon.CodeMirror {
@ -220,43 +226,105 @@ blockquote {
} }
.chat .CodeMirror.cm-s-code.chat * { .chat .CodeMirror.cm-s-code.chat * {
font-family: 'Source Code Pro'; font-family: 'Source Code Pro';
} }
.chat .CodeMirror-selected { background:#BAE3FE !important; color: black; } .chat .CodeMirror-selected {
pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } background: #bae3fe !important;
color: black;
}
pre.CodeMirror-placeholder.CodeMirror-line-like {
color: var(--gray);
}
.chat .cm-s-tlon span { font-family: "Inter"} .chat .cm-s-tlon span {
.chat .cm-s-tlon span.cm-meta { color: var(--gray); } font-family: 'Inter';
.chat .cm-s-tlon span.cm-number { color: var(--gray); } }
.chat .cm-s-tlon span.cm-quote { color: var(--gray); } .chat .cm-s-tlon span.cm-meta {
.chat .cm-s-tlon span.cm-keyword { line-height: 1em; font-weight: bold; color: var(--gray); } color: var(--gray);
.chat .cm-s-tlon span.cm-atom { font-weight: bold; color: var(--gray); } }
.chat .cm-s-tlon span.cm-def { color: black; } .chat .cm-s-tlon span.cm-number {
.chat .cm-s-tlon span.cm-variable { color: black; } color: var(--gray);
.chat .cm-s-tlon span.cm-variable-2 { color: black; } }
.chat .cm-s-tlon span.cm-variable-3, .chat .cm-s-tlon span.cm-type { color: black; } .chat .cm-s-tlon span.cm-quote {
.chat .cm-s-tlon span.cm-property { color: black; } color: var(--gray);
.chat .cm-s-tlon span.cm-operator { color: black; } }
.chat .cm-s-tlon span.cm-comment { font-family: 'Source Code Pro'; color: black; background-color: var(--light-gray); display: inline-block; border-radius: 2px;} .chat .cm-s-tlon span.cm-keyword {
.chat .cm-s-tlon span.cm-string { color: var(--dark-gray); } line-height: 1em;
.chat .cm-s-tlon span.cm-string-2 { color: var(--gray); } font-weight: bold;
.chat .cm-s-tlon span.cm-qualifier { color: #555; } color: var(--gray);
.chat .cm-s-tlon span.cm-error { color: #FF0000; } }
.chat .cm-s-tlon span.cm-attribute { color: var(--gray); } .chat .cm-s-tlon span.cm-atom {
.chat .cm-s-tlon span.cm-tag { color: var(--gray); } font-weight: bold;
.chat .cm-s-tlon span.cm-link { color: var(--dark-gray); text-decoration: none;} color: var(--gray);
.chat .cm-s-tlon .CodeMirror-activeline-background { background: var(--gray); } }
.chat .cm-s-tlon span.cm-def {
color: black;
}
.chat .cm-s-tlon span.cm-variable {
color: black;
}
.chat .cm-s-tlon span.cm-variable-2 {
color: black;
}
.chat .cm-s-tlon span.cm-variable-3,
.chat .cm-s-tlon span.cm-type {
color: black;
}
.chat .cm-s-tlon span.cm-property {
color: black;
}
.chat .cm-s-tlon span.cm-operator {
color: black;
}
.chat .cm-s-tlon span.cm-comment {
font-family: 'Source Code Pro';
color: black;
background-color: var(--light-gray);
display: inline-block;
border-radius: 2px;
}
.chat .cm-s-tlon span.cm-string {
color: var(--dark-gray);
}
.chat .cm-s-tlon span.cm-string-2 {
color: var(--gray);
}
.chat .cm-s-tlon span.cm-qualifier {
color: #555;
}
.chat .cm-s-tlon span.cm-error {
color: #ff0000;
}
.chat .cm-s-tlon span.cm-attribute {
color: var(--gray);
}
.chat .cm-s-tlon span.cm-tag {
color: var(--gray);
}
.chat .cm-s-tlon span.cm-link {
color: var(--dark-gray);
text-decoration: none;
}
.chat .cm-s-tlon .CodeMirror-activeline-background {
background: var(--gray);
}
.chat .cm-s-tlon .CodeMirror-cursor { .chat .cm-s-tlon .CodeMirror-cursor {
border-left: 2px solid #3687FF; border-left: 2px solid #3687ff;
} }
.chat .cm-s-tlon span.cm-builtin { color: var(--gray); } .chat .cm-s-tlon span.cm-builtin {
.chat .cm-s-tlon span.cm-bracket { color: var(--gray); } color: var(--gray);
}
.chat .cm-s-tlon span.cm-bracket {
color: var(--gray);
}
/* .chat .cm-s-tlon { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;} */ /* .chat .cm-s-tlon { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;} */
.chat .cm-s-tlon .CodeMirror-matchingbracket {
.chat .cm-s-tlon .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } outline: 1px solid grey;
color: black !important;
}
.chat .CodeMirror-hints.tlon { .chat .CodeMirror-hints.tlon {
/* font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; */ /* font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; */
@ -271,7 +339,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
.title-input[placeholder]:empty:before { .title-input[placeholder]:empty:before {
content: attr(placeholder); content: attr(placeholder);
color: #7F7F7F; color: #7f7f7f;
} }
/* dark */ /* dark */
@ -324,7 +392,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
filter: invert(1); filter: invert(1);
} }
.o-80-d { .o-80-d {
opacity: .8; opacity: 0.8;
} }
.focus-b--white-d:focus { .focus-b--white-d:focus {
border-color: #fff; border-color: #fff;
@ -347,7 +415,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
background: none; background: none;
} }
/* codemirror */ /* codemirror */
.chat .cm-s-tlon.CodeMirror { .chat .cm-s-tlon.CodeMirror {
color: #fff; color: #fff;
@ -378,7 +445,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
color: white; color: white;
} }
.chat .cm-s-tlon span.cm-string { .chat .cm-s-tlon span.cm-string {
color: var(--gray); color: var(--gray);
} }
@ -409,7 +475,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
color: black; color: black;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
background-color: rgba(255,255,255, 0.3); background-color: rgba(255, 255, 255, 0.3);
border-radius: 2px; border-radius: 2px;
} }
} }