prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Formatting on highlight notes

Browse source
This commit is contained in:
Jackson Harper 2023-03-31 15:44:07 +08:00
parent 86c3e08355
commit 579bc45237
3 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/web/components/patterns/HighlightNotes.tsx
View file

@ -55,6 +55,7 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
text={props.text}
saveText={saveText}
lastSaved={lastSaved}
fillBackground={false}
/>
)
}
@ -101,6 +102,7 @@ export function HighlightViewNote(props: HighlightViewNoteProps): JSX.Element {
text={props.text}
saveText={saveText}
lastSaved={lastSaved}
fillBackground={true}
/>
)
}
@ -113,6 +115,7 @@ type MarkdownNote = {
setEditMode: (set: 'edit' | 'preview') => void
text: string | undefined
fillBackground: boolean | undefined
lastSaved: Date | undefined
saveText: (text: string, updateTime: Date) => void
@ -286,14 +289,28 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
<>
<SpanBox
css={{
borderRadius: '3px',
p: '5px',
width: '100%',
marginTop: '15px',
color: '#898989',
fontSize: '13px',
border: '1px solid $thBorderColor',
fontSize: '15px',
borderRadius: '2px',
marginTop: props.fillBackground || !props.text ? '10px' : '0px',
paddingLeft:
props.fillBackground && props.text
? '10px'
: props.fillBackground
? '5px'
: '0px',
paddingRight:
props.fillBackground && props.text
? '10px'
: props.fillBackground
? '5px'
: '0px',
color: props.text ? '$thHighContrast' : '#898989',
border: props.text ? 'unset' : '1px solid $thBorderColor',
background:
props.text && props.fillBackground ? '$thBackground5' : 'unset',
'> *': {
m: '0px',
},

4
packages/web/components/patterns/HighlightView.tsx
View file

@ -98,7 +98,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
))}
</Box>
<HStack
css={{ width: '100%', height: '100%' }}
css={{ width: '100%', height: '100%', pt: '15px' }}
alignment="start"
distribution="start"
>
@ -115,7 +115,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
css={{
lineHeight: '1',
marginLeft: '20px',
marginTop: '20px',
marginTop: '15px',
cursor: 'pointer',
borderRadius: '1000px',
'&:hover': {

2
packages/web/components/tokens/stitches.config.ts
View file

@ -168,6 +168,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
thBackground2: '#F3F3F3',
thBackground3: '#FFFFFF',
thBackground4: '#EBEBEB',
thBackground5: '#F5F5F5',
thBackgroundActive: '#F9F9F9',
thBackgroundContrast: '#FFFFFF',
@ -254,6 +255,7 @@ const darkThemeSpec = {
thBackground2: '#3D3D3D',
thBackground3: '#242424',
thBackground4: '#3D3D3D',
thBackground5: '#3D3D3D',
thBackgroundActive: '#2E2E2E',
thBackgroundContrast: '#000000',