Make description text style more consistent

- links and blockquotes have light font weight, like other text
- font size in editor matches font size in description
- old descriptions have same style as new
- placeholder text matches editor style
- decrease line-height a bit
This commit is contained in:
Sinclair Chen 2022-07-18 14:02:27 -07:00
parent e2a72dd0a2
commit 781de79b97

View File

@ -21,7 +21,8 @@ import { FileUploadButton } from './file-upload-button'
import { linkClass } from './site-link' import { linkClass } from './site-link'
const proseClass = clsx( const proseClass = clsx(
'prose prose-p:my-2 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless font-light' 'prose prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
'font-light prose-a:font-light prose-blockquote:font-light'
) )
export function useTextEditor(props: { export function useTextEditor(props: {
@ -34,7 +35,7 @@ export function useTextEditor(props: {
const editorClass = clsx( const editorClass = clsx(
proseClass, proseClass,
'box-content min-h-[6em] textarea textarea-bordered' 'box-content min-h-[6em] textarea textarea-bordered text-base'
) )
const editor = useEditor({ const editor = useEditor({
@ -98,7 +99,7 @@ export function TextEditor(props: {
{editor && ( {editor && (
<FloatingMenu <FloatingMenu
editor={editor} editor={editor}
className="-ml-2 mr-2 w-full text-sm text-slate-300" className={clsx(proseClass, '-ml-2 mr-2 w-full text-slate-300 ')}
> >
Type <em>*markdown*</em>. Paste or{' '} Type <em>*markdown*</em>. Paste or{' '}
<FileUploadButton <FileUploadButton
@ -155,7 +156,7 @@ function RichContent(props: { content: JSONContent }) {
export function Content(props: { content: JSONContent | string }) { export function Content(props: { content: JSONContent | string }) {
const { content } = props const { content } = props
return typeof content === 'string' ? ( return typeof content === 'string' ? (
<div className="whitespace-pre-line break-words"> <div className="whitespace-pre-line font-light leading-relaxed">
<Linkify text={content} /> <Linkify text={content} />
</div> </div>
) : ( ) : (