witine/lookingglass
1
0
Fork 0
forked from mirrors/thatmattlove-hyperglass
Code Issues Pull requests Releases Activity

fix logo alignment on small screens; closes #258

Browse source
This commit is contained in:
thatmattlove 2024-06-01 15:40:49 -04:00
parent aab4ada723
commit 6b37ce96f6
2 changed files with 4 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
hyperglass/ui/components/header/header.tsx
View file

@ -1,6 +1,6 @@
import { Flex, ScaleFade } from '@chakra-ui/react'; import { Flex, ScaleFade } from '@chakra-ui/react';
import { motionChakra } from '~/elements'; import { motionChakra } from '~/elements';
import { useBooleanValue, useFormInteractive, useBreakpointValue } from '~/hooks'; import { useBooleanValue, useBreakpointValue, useFormInteractive } from '~/hooks';
import { Title } from './title'; import { Title } from './title';
const Wrapper = motionChakra('header', { const Wrapper = motionChakra('header', {
@ -16,8 +16,6 @@ export const Header = (): JSX.Element => {
{ base: '75%', lg: '75%' }, { base: '75%', lg: '75%' },
); );
const justify = useBreakpointValue({ base: 'flex-start', lg: 'center' });
return ( return (
<Wrapper layout="position"> <Wrapper layout="position">
<ScaleFade in initialScale={0.5} style={{ width: '100%' }}> <ScaleFade in initialScale={0.5} style={{ width: '100%' }}>
@ -25,8 +23,8 @@ export const Header = (): JSX.Element => {
height="100%" height="100%"
maxW={titleWidth} maxW={titleWidth}
// This is here for the logo // This is here for the logo
justifyContent={justify} justifyContent="center"
mx={{ base: formInteractive ? 'auto' : 0, lg: 'auto' }} mx="auto"
> >
<Title /> <Title />
</Flex> </Flex>

2
hyperglass/ui/components/header/title.tsx
View file

@ -46,7 +46,7 @@ const DWrapper = (props: DWrapperProps): JSX.Element => {
animate={formInteractive} animate={formInteractive}
transition={{ damping: 15, type: 'spring', stiffness: 100 }} transition={{ damping: 15, type: 'spring', stiffness: 100 }}
variants={{ results: { scale: 0.5 }, form: { scale: 1 } }} variants={{ results: { scale: 0.5 }, form: { scale: 1 } }}
maxWidth="25%" maxWidth="75%"
{...props} {...props}
/> />
); );