From 06750bf856d7b0c9d0d05833712f8322d51c9fe7 Mon Sep 17 00:00:00 2001 From: James Acklin Date: Mon, 22 Feb 2021 12:13:44 -0500 Subject: [PATCH 1/3] chat: lints custom.css Fixes urbit/landscape#473 --- .../src/views/apps/chat/css/custom.css | 167 +++++++++++++----- 1 file changed, 119 insertions(+), 48 deletions(-) diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css index 702106082d..dcc1e1dfa7 100644 --- a/pkg/interface/src/views/apps/chat/css/custom.css +++ b/pkg/interface/src/views/apps/chat/css/custom.css @@ -4,7 +4,8 @@ -webkit-overflow-scrolling: touch; } -html, body { +html, +body { height: 100%; width: 100%; margin: 0; @@ -21,7 +22,17 @@ html, body { 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-start: unset; -webkit-margin-before: unset; @@ -30,7 +41,9 @@ p, h1, h2, h3, h4, h5, h6, a, input, textarea, button { padding: 0; } -textarea, input, button { +textarea, +input, +button { outline: none; -webkit-appearance: none; border: none; @@ -64,11 +77,11 @@ h2 { } .mono { - font-family: "Source Code Pro", monospace; + font-family: 'Source Code Pro', monospace; } .bg-welcome-green { - background-color: #ECF6F2; + background-color: #ecf6f2; } .c-default { @@ -92,7 +105,7 @@ h2 { } .placeholder-inter::placeholder { - font-family: "Inter", sans-serif; + font-family: 'Inter', sans-serif; } .embed-container iframe { @@ -105,7 +118,7 @@ h2 { /* toggler checkbox */ .toggle::after { - content: ""; + content: ''; height: 12px; width: 12px; background: white; @@ -116,7 +129,7 @@ h2 { } .toggle.checked::after { - content: ""; + content: ''; height: 12px; width: 12px; background: white; @@ -134,7 +147,6 @@ h2 { border-radius: 0.25rem 0.25rem 0 0; } - .green3 { color: #7ea899; } @@ -189,12 +201,11 @@ blockquote { border-left: 1px solid black; } - :root { --dark-gray: #555555; - --gray: #7F7F7F; - --medium-gray: #CCCCCC; - --light-gray: rgba(0,0,0,0.08); + --gray: #7f7f7f; + --medium-gray: #cccccc; + --light-gray: rgba(0, 0, 0, 0.08); } .chat .react-codemirror2 { width: 100%; @@ -208,7 +219,7 @@ blockquote { } .chat .CodeMirror * { - font-family: 'Inter'; + font-family: 'Inter'; } .chat .cm-s-tlon.CodeMirror { @@ -220,43 +231,105 @@ blockquote { } .chat .CodeMirror.cm-s-code.chat * { - font-family: 'Source Code Pro'; + font-family: 'Source Code Pro'; } -.chat .CodeMirror-selected { background:#BAE3FE !important; color: black; } -pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } +.chat .CodeMirror-selected { + 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.cm-meta { color: var(--gray); } -.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-keyword { line-height: 1em; font-weight: bold; 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-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 span { + font-family: 'Inter'; +} +.chat .cm-s-tlon span.cm-meta { + color: var(--gray); +} +.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-keyword { + line-height: 1em; + font-weight: bold; + 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-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 { - 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-bracket { color: var(--gray); } +.chat .cm-s-tlon span.cm-builtin { + 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 .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } +.chat .cm-s-tlon .CodeMirror-matchingbracket { + outline: 1px solid grey; + color: black !important; +} .chat .CodeMirror-hints.tlon { /* font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; */ @@ -271,7 +344,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } .title-input[placeholder]:empty:before { content: attr(placeholder); - color: #7F7F7F; + color: #7f7f7f; } /* dark */ @@ -324,7 +397,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } filter: invert(1); } .o-80-d { - opacity: .8; + opacity: 0.8; } .focus-b--white-d:focus { border-color: #fff; @@ -347,7 +420,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } background: none; } - /* codemirror */ .chat .cm-s-tlon.CodeMirror { color: #fff; @@ -378,7 +450,6 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } color: white; } - .chat .cm-s-tlon span.cm-string { color: var(--gray); } @@ -409,7 +480,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); } color: black; display: inline-block; padding: 0; - background-color: rgba(255,255,255, 0.3); + background-color: rgba(255, 255, 255, 0.3); border-radius: 2px; } } From b6cdbf60c5ac16e07971bc7fc3d6b7a38ef185cf Mon Sep 17 00:00:00 2001 From: James Acklin Date: Mon, 22 Feb 2021 12:15:01 -0500 Subject: [PATCH 2/3] chat: eliminate blockquote padding and newline break, pad last message Fixes urbit/landscape#473 --- .../src/views/apps/chat/components/ChatMessage.tsx | 11 +++++------ .../src/views/apps/chat/components/content/text.js | 3 ++- pkg/interface/src/views/apps/chat/css/custom.css | 9 ++------- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index dd1cfea7f5..49c256682e 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -188,7 +188,8 @@ export default class ChatMessage extends Component { @@ -237,10 +238,7 @@ export const MessageAuthor = ({ const contact = `~${msg.author}` in contacts ? contacts[`~${msg.author}`] : false; const showNickname = useShowNickname(contact); - const { hideAvatars } = - useLocalState(({ hideAvatars }) => - ({ hideAvatars }) - ); + const { hideAvatars } = useLocalState(({ hideAvatars }) => ({ hideAvatars })); const shipName = showNickname ? contact.nickname : cite(msg.author); const copyNotice = 'Copied'; const color = contact @@ -276,7 +274,8 @@ export const MessageAuthor = ({ return () => clearTimeout(timer); }, [shipName, displayName]); - const img = contact?.avatar && !hideAvatars ? ( + const img = + contact?.avatar && !hideAvatars ? ( { return lines.map((line, i) => ( <> - {i !== 0 &&
} + {i !== 0 && } Date: Mon, 22 Feb 2021 15:29:24 -0500 Subject: [PATCH 3/3] chat: address PR comments Fixes urbit/landscape#473 --- pkg/interface/src/views/apps/chat/components/ChatMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 49c256682e..1bf7234328 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -188,7 +188,7 @@ export default class ChatMessage extends Component {