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

Merge pull request #1073 from omnivore-app/fix/library-top-layout

Browse source 
Improve layout of library page headers
This commit is contained in:
Jackson Harper 2022-08-15 11:58:25 +08:00 committed by GitHub
commit 28c7d7be90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/templates/library/LibraryAvatar.tsx
View file

@ -10,7 +10,7 @@ type AvatarProps = {
export function LibraryAvatar(props: AvatarProps): JSX.Element {
return (
<VStack alignment="center" distribution="start" css={{ pl: '8px', pt: '20px', width: '100%', height: '100%' }}>
<VStack alignment="center" distribution="start" css={{ pl: '8px', width: '100%', height: '100%' }}>
<VStack css={{ height: '100%' }}>
<StyledAvatar
css={{

4
packages/web/components/templates/library/LibraryContainer.tsx
View file

@ -17,7 +17,9 @@ export function LibraryContainer(): JSX.Element {
<>
<VStack alignment="start" distribution="start" css={{ width: '100vw', height: '100vh', overflow: 'hidden', bg: '$libraryBackground' }}>
<HStack alignment="start" distribution="start" css={{ width: '100%' }}>
<LibrarySearchBar />
<SpanBox css={{ width: '100%', height: '90px' }}>
<LibrarySearchBar />
</SpanBox>
<SpanBox css={{ marginLeft: 'auto', width: '130px', height: '100%' }}>
<LibraryAvatar viewer={viewerData?.me} />
</SpanBox>

2
packages/web/components/templates/library/LibrarySearchBar.tsx
View file

@ -19,7 +19,7 @@ export function LibrarySearchBar(): JSX.Element {
return (
<>
<VStack alignment="start" distribution="start" css={{ pl: '32px', pt: '20px', width: '100%', height: '110px' }}>
<VStack alignment="start" distribution="start" css={{ pl: '32px', width: '100%', height: '100%' }}>
<HStack alignment="start" distribution="start" css={{ width: '100%' }}>
<form
style={{ width: '100%' }}

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

@ -157,8 +157,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
tooltipIcons: '#FDFAEC',
textSubtle: '#605F5D',
libraryActive: '#F8F8F8',
libraryBackground: '#FFFFFF',
libraryActiveMenuItem: '#F8F8F8',
border: '#F0F0F0',
@ -215,8 +215,8 @@ const darkThemeSpec = {
avatarFont: 'rgba(255, 255, 255, 0.8)',
textSubtle: '#AAAAAA',
libraryActive: '#3B3938',
libraryBackground: '#252525',
libraryActiveMenuItem: '#3B3938',
border: '#323232',
//utility