diff --git a/src/components/Editor/components/Editor.module.scss b/src/components/Editor/components/Editor.module.scss new file mode 100644 index 00000000..894a9dea --- /dev/null +++ b/src/components/Editor/components/Editor.module.scss @@ -0,0 +1,7 @@ +.error { + display: none; +} + +.markdown { + white-space: pre-wrap; +} diff --git a/src/components/Editor/components/Editor.tsx b/src/components/Editor/components/Editor.tsx index 7df08ee5..3bdcbf3d 100644 --- a/src/components/Editor/components/Editor.tsx +++ b/src/components/Editor/components/Editor.tsx @@ -3,18 +3,21 @@ import type { EditorState } from 'prosemirror-state' import { useState } from '../store/context' import { ProseMirror } from './ProseMirror' import '../styles/Editor.scss' +import styles from './Editor.module.scss' +import { clsx } from 'clsx' export const Editor = () => { const [store, ctrl] = useState() const onInit = (text: EditorState, editorView: EditorView) => ctrl.setState({ editorView, text }) const onReconfigure = (text: EditorState) => ctrl.setState({ text }) const onChange = (text: EditorState) => ctrl.setState({ text, lastModified: new Date() }) - // const editorCss = (config) => css`` - const style = () => (store.error ? `display: none;` : store.markdown ? `white-space: pre-wrap;` : '') + return ( editorView?: Store extensions?: Store @@ -60,7 +59,7 @@ export const ProseMirror = (props: ProseMirrorProps) => { [props.text, props.extensions] ) - return
+ return
} const createEditorState = ( diff --git a/src/components/Editor/components/Sidebar.tsx b/src/components/Editor/components/Sidebar.tsx index 33c7e2dd..a3b1b7e0 100644 --- a/src/components/Editor/components/Sidebar.tsx +++ b/src/components/Editor/components/Sidebar.tsx @@ -34,7 +34,30 @@ export const Sidebar = () => { document.body.classList.toggle('dark') ctrl.updateConfig({ theme: document.body.className }) } - const collabText = () => (store.collab?.started ? 'Stop' : store.collab?.error ? 'Restart 🚨' : 'Start') + const collabText = () => { + if (store.collab?.started) { + return 'Stop' + } + + if (store.collab?.error) { + return 'Restart 🚨' + } + + return 'Start' + } + + const discardText = () => { + if (store.path) { + return 'Close' + } + + if (store.drafts.length > 0 && isEmpty(store.text)) { + return 'Delete ⚠️' + } + + return 'Clear' + } + const editorView = () => unwrap(store.editorView) const onToggleMarkdown = () => ctrl.toggleMarkdown() const onOpenDraft = (draft: Draft) => ctrl.openDraft(unwrap(draft)) @@ -144,12 +167,7 @@ export const Sidebar = () => { disabled={!store.path && store.drafts.length === 0 && isEmpty(store.text)} data-testid="discard" > - {store.path - ? 'Close' - : store.drafts.length > 0 && isEmpty(store.text) - ? 'Delete ⚠️' - : 'Clear'}{' '} - + {discardText()} Undo diff --git a/src/components/Editor/styles/ArticlesList.scss b/src/components/Editor/styles/ArticlesList.scss index ac19ec82..1060015f 100644 --- a/src/components/Editor/styles/ArticlesList.scss +++ b/src/components/Editor/styles/ArticlesList.scss @@ -10,6 +10,7 @@ .article__title { @include font-size(2.4rem); + line-height: 1.25; } @@ -31,10 +32,11 @@ } .article__controls { + @include font-size(1.4rem); + align-content: baseline; display: flex; flex-wrap: wrap; - @include font-size(1.4rem); padding-top: 2em; } diff --git a/src/components/Editor/styles/Button.scss b/src/components/Editor/styles/Button.scss index 7328725f..ed5dae5f 100644 --- a/src/components/Editor/styles/Button.scss +++ b/src/components/Editor/styles/Button.scss @@ -8,14 +8,14 @@ button { align-items: center; outline: none; text-decoration: none; - font-family: 'JetBrains Mono'; + background: none; + font-family: Muller, Arial, Helvetica, sans-serif; + color: var(--foreground); + border: 1px solid var(--foreground); + &:hover { opacity: 0.8; } - background: none; - font-family: 'Muller'; - color: var(--foreground); - border: 1px solid var(--foreground); } button.primary { diff --git a/src/components/Editor/styles/Error.scss b/src/components/Editor/styles/Error.scss index c8c244fa..1a8973d6 100644 --- a/src/components/Editor/styles/Error.scss +++ b/src/components/Editor/styles/Error.scss @@ -3,7 +3,6 @@ overflow: y-auto; padding: 50px; display: flex; - font-family: 'JetBrains Mono'; justify-content: center; ::-webkit-scrollbar { display: none; diff --git a/src/components/Editor/styles/Layout.scss b/src/components/Editor/styles/Layout.scss index 41cdb09b..4bb4bd13 100644 --- a/src/components/Editor/styles/Layout.scss +++ b/src/components/Editor/styles/Layout.scss @@ -1,6 +1,5 @@ .layout { display: flex; - font-family: 'Muller'; font-size: 18px; background: var(--background); color: var(--foreground); diff --git a/src/stores/auth.ts b/src/stores/auth.ts index 69b37c50..39a691d0 100644 --- a/src/stores/auth.ts +++ b/src/stores/auth.ts @@ -69,12 +69,6 @@ export const confirmEmail = async (token: string) => { setSession(authResult) } -export const confirmEmail = async (token: string) => { - const authResult = await apiClient.confirmEmail({ token }) - setToken(authResult.token) - setSession(authResult) -} - export const useAuthStore = () => { return { session, emailChecks } }