From b7b19ea1ddea981f0ea9f6de89a03b155c344982 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Fri, 20 Jan 2023 12:02:03 +0100 Subject: [PATCH 1/4] add shadow to notes on light theme --- src/Element/Note.css | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/Element/Note.css b/src/Element/Note.css index a9b12739..a57b2b46 100644 --- a/src/Element/Note.css +++ b/src/Element/Note.css @@ -1,8 +1,23 @@ +.note { + margin-bottom: 12px; + border-radius: 16px; + background-color: var(--note-bg); + padding: 12px; + min-height: 110px; +} +@media (min-width: 720px) { + .note { margin-bottom: 24px; padding: 24px; } +} +@media (prefers-color-scheme: light) { + .note { + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); + } +} + .note.thread { border-bottom: none; } - .note > .header .reply { font-size: var(--font-size-tiny); color: var(--font-secondary-color); @@ -86,11 +101,6 @@ font-feature-settings: "tnum"; } -.trash-icon { - color: var(--error); - margin-right: auto; -} - .reaction-pill .reaction-pill-number { margin-left: 8px; } @@ -103,6 +113,11 @@ cursor: pointer; } +.trash-icon { + color: var(--error); + margin-right: auto; +} + .note.active > .header .reply { color: var(--font-tertiary-color); } From c6e0c2b7c901009679bfeaa684b7d85f80ea119b Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Fri, 20 Jan 2023 12:19:38 +0100 Subject: [PATCH 2/4] remove borders from autocomplete dialog --- src/Element/Textarea.css | 14 +++++++++++++- src/Element/Textarea.tsx | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/Element/Textarea.css b/src/Element/Textarea.css index a3ccd992..5175b589 100644 --- a/src/Element/Textarea.css +++ b/src/Element/Textarea.css @@ -1,5 +1,17 @@ +.rta__list { + border: none; +} +.rta__item:not(:last-child) { + border: none; +} +.rta__entity--selected .user-item, .rta__entity--selected .emoji-item { + text-decoration: none; + background: var(--gray-secondary); +} + .user-item, .emoji-item { - background: var(--gray); + color: var(--font-color); + background: var(--note-bg); display: flex; flex-direction: row; align-items: center; diff --git a/src/Element/Textarea.tsx b/src/Element/Textarea.tsx index 99915ae7..79397df2 100644 --- a/src/Element/Textarea.tsx +++ b/src/Element/Textarea.tsx @@ -63,7 +63,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => { const emojiDataProvider = (token: string) => { return emoji(token) - .slice(0, 10) + .slice(0, 5) .map(({ name, char }) => ({ name, char })); } From 6f1a4c0cd0ebb6cea763af455e6fab50ef7f8e03 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Fri, 20 Jan 2023 16:57:45 +0100 Subject: [PATCH 3/4] note adjustments --- src/Element/Copy.css | 2 +- src/Element/Note.css | 28 +++++++++------------------- src/Element/NoteCreator.css | 11 +++++++---- src/Element/ProfileImage.css | 4 ++-- src/Element/Text.css | 8 ++++++++ src/index.css | 12 +++++++++--- 6 files changed, 36 insertions(+), 29 deletions(-) diff --git a/src/Element/Copy.css b/src/Element/Copy.css index 2ed09ebc..35af72ab 100644 --- a/src/Element/Copy.css +++ b/src/Element/Copy.css @@ -7,7 +7,7 @@ .copy .body { font-family: monospace; font-size: 14px; - background: var(--gray-secondary); + background: var(--note-bg); color: var(--font-color); padding: 2px 4px; border-radius: 10px; diff --git a/src/Element/Note.css b/src/Element/Note.css index a57b2b46..11184951 100644 --- a/src/Element/Note.css +++ b/src/Element/Note.css @@ -1,19 +1,3 @@ -.note { - margin-bottom: 12px; - border-radius: 16px; - background-color: var(--note-bg); - padding: 12px; - min-height: 110px; -} -@media (min-width: 720px) { - .note { margin-bottom: 24px; padding: 24px; } -} -@media (prefers-color-scheme: light) { - .note { - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); - } -} - .note.thread { border-bottom: none; } @@ -31,6 +15,7 @@ .note > .body { margin-top: 12px; + padding-left: 56px; text-overflow: ellipsis; white-space: pre-wrap; word-break: normal; @@ -38,6 +23,10 @@ overflow-y: visible; } +.note > .footer { + padding-left: 46px; +} + .note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover { cursor: pointer; } @@ -130,6 +119,10 @@ color: var(--font-tertiary-color); } +.note.active > .footer > .reaction-pill.reacted { + color: var(--highlight); +} + @media (prefers-color-scheme: light) { .indented .active { background-color: var(--gray-secondary); @@ -143,7 +136,4 @@ .note.active > .footer > .reaction-pill { color: var(--font-secondary-color); } - .note.active > .footer > .reaction-pill.reacted { - color: var(--highlight); - } } diff --git a/src/Element/NoteCreator.css b/src/Element/NoteCreator.css index b7d24db3..c415376d 100644 --- a/src/Element/NoteCreator.css +++ b/src/Element/NoteCreator.css @@ -1,7 +1,9 @@ .note-creator { margin-bottom: 10px; - background-color: var(--gray); + background-color: var(--note-bg); + border: 1px solid var(--gray); border-radius: 10px; + padding: 6px; } .note-reply { @@ -12,6 +14,7 @@ outline: none; resize: none; min-height: 40px; + background-color: var(--note-bg); border-radius: 10px 10px 0 0; max-width: -webkit-fill-available; max-width: -moz-available; @@ -43,7 +46,7 @@ .note-creator .btn { border-radius: 20px; font-weight: bold; - background-color: var(--gray-secondary); - color: var(--gray-superlight); - border-color: var(--gray-superlight); + background-color: var(--bg-color); + color: var(--font-color); + font-size: var(--font-size); } diff --git a/src/Element/ProfileImage.css b/src/Element/ProfileImage.css index 4624cc37..62e7a5ea 100644 --- a/src/Element/ProfileImage.css +++ b/src/Element/ProfileImage.css @@ -9,8 +9,8 @@ .pfp .avatar { border-width: 1px; - width: 40px; - height: 40px; + width: 48px; + height: 48px; cursor: pointer; } diff --git a/src/Element/Text.css b/src/Element/Text.css index 4f50fcc1..dc5c2afb 100644 --- a/src/Element/Text.css +++ b/src/Element/Text.css @@ -1,5 +1,9 @@ .text a { color: var(--highlight); + text-decoration: none; +} +.text a:hover { + text-decoration: underline; } .text h1 { @@ -26,6 +30,10 @@ margin-bottom: 4px; } +.text p:last-child { + margin-bottom: 0; +} + .text pre { margin: 0; } diff --git a/src/index.css b/src/index.css index 38cfe07a..ea93f862 100644 --- a/src/index.css +++ b/src/index.css @@ -4,7 +4,7 @@ --bg-color: #000; --font-color: #FFF; --font-secondary-color: #555; - --font-tertiary-color: #999; + --font-tertiary-color: #666; --font-size: 16px; --font-size-small: 14px; --font-size-tiny: 12px; @@ -88,10 +88,15 @@ code { margin-bottom: 12px; border-radius: 16px; background-color: var(--note-bg); - padding: 12px; + padding: 6px 12px; } @media (min-width: 720px) { - .card { margin-bottom: 24px; padding: 24px; } + .card { margin-bottom: 24px; padding: 12px 24px; } +} +@media (prefers-color-scheme: light) { + .card { + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); + } } .card .header { @@ -112,6 +117,7 @@ code { cursor: pointer; user-select: none; background-color: var(--bg-color); + color: var(--font-color); border: 1px solid; display: inline-block; } From d37a3f42527ee7874e5cbd8a7bf95469a0bcde89 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Fri, 20 Jan 2023 16:57:59 +0100 Subject: [PATCH 4/4] light color scheme --- src/Pages/Layout.css | 3 ++- src/index.css | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/Pages/Layout.css b/src/Pages/Layout.css index a6a0dddc..76462f49 100644 --- a/src/Pages/Layout.css +++ b/src/Pages/Layout.css @@ -12,8 +12,9 @@ line-height: 1.5em; top: -10px; left: -10px; - font-size: small; + font-size: var(--font-size-small); background-color: var(--error); + color: var(--note-bg); font-weight: bold; text-align: center; } diff --git a/src/index.css b/src/index.css index ea93f862..7aa4c505 100644 --- a/src/index.css +++ b/src/index.css @@ -30,15 +30,17 @@ @media (prefers-color-scheme: light) { :root { - --bg-color: #FFF; - --font-color: #000; - --font-secondary-color: #444; - --font-tertiary-color: #666; - --highlight-light: #FFC852; - --highlight: #FF9B00; - --highlight-dark: #944F05; + --bg-color: #F1F1F1; + --font-color: #57534E; + --font-secondary-color: #B9B9B9; + --font-tertiary-color: #F3F3F3; + + --highlight-light: #16AAC1; + --highlight: #0284C7; + --highlight-dark: #0A52B5; --modal-bg-color: rgba(240, 240, 240, 0.8); - --note-bg: #EEE; + + --note-bg: white; --gray: #CCC; --gray-secondary: #DDD;