Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed icon and text position to be centered inside highlight bar

Browse Source
This commit is contained in:
Rupin Khandelwal
2022-06-23 09:48:16 -07:00
parent 560853fb1d
commit 3761893aa3
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/components/patterns/HighlightBar.tsx
View File

@ -72,7 +72,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
background: '$grayBg',
borderRadius: '4px',
border: '1px solid $grayBorder',
boxShadow: theme.shadows.cardBoxShadow.toString(),
boxShadow: '$cardBoxShadow',
}}
<BarContent {...props} />
</Box>
@ -124,7 +124,6 @@ function BarContent(props: HighlightBarProps): JSX.Element {
height: '100%',
m: 0,
p: 0,
pt: '6px',
alignItems: 'baseline',
}}
>
@ -133,7 +132,6 @@ function BarContent(props: HighlightBarProps): JSX.Element {
<StyledText
style="body"
css={{
pb: '4px',
pl: '12px',
m: '0px',
color: '$readerFont',
@ -150,7 +148,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
style="plainIcon"
title="Remove Highlight"
onClick={() => props.handleButtonClick('delete')}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px'}}
>
<TrashIcon
size={28}
@ -163,14 +161,13 @@ function BarContent(props: HighlightBarProps): JSX.Element {
style="plainIcon"
title="Add Note to Highlight"
onClick={() => props.handleButtonClick('comment')}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
css={{ color: '$readerFont', height: '100%', m: 0, p: 0}}
>
<HStack css={{ height: '100%', alignItems: 'center' }}>
<Note size={24} color={theme.colors.readerFont.toString()} />
<StyledText
style="body"
css={{
pb: '4px',
pl: '12px',
m: '0px',
color: '$readerFont',