introduce imgHeight as prop to page wrapper

This commit is contained in:
Ivana Andersson 2023-09-01 13:33:42 +03:00
parent a5c551760b
commit 17c5b91ecf
4 changed files with 14 additions and 4 deletions

View File

@ -8,6 +8,7 @@ type PageWrapperShadowProps = {
rightImageSrc?: string rightImageSrc?: string
rightImageLogo?: boolean rightImageLogo?: boolean
children: ReactNode children: ReactNode
imgHeight?: string
} }
const PageWrapperShadow = ({ const PageWrapperShadow = ({
@ -15,6 +16,7 @@ const PageWrapperShadow = ({
rightImageSrc, rightImageSrc,
rightImageLogo, rightImageLogo,
children, children,
imgHeight,
}: PageWrapperShadowProps) => { }: PageWrapperShadowProps) => {
const theme = useTheme() const theme = useTheme()
@ -28,7 +30,12 @@ const PageWrapperShadow = ({
</section> </section>
<section className="layout-right"> <section className="layout-right">
<div className="image-container"> <div className="image-container">
<img src={rightImageSrc} alt="background" className="background-img" /> <img
src={rightImageSrc}
alt="background"
className="background-img"
style={{ height: imgHeight }}
/>
{rightImageLogo ? <NimbusLogoMark /> : null} {rightImageLogo ? <NimbusLogoMark /> : null}
</div> </div>
</section> </section>

View File

@ -16,7 +16,7 @@ const DeviceHealthCheck = () => {
const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
return ( return (
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png"> <PageWrapperShadow rightImageSrc="./background-images/eye-background.png" imgHeight="100%">
<YStack <YStack
space={'$4'} space={'$4'}
style={{ style={{

View File

@ -23,7 +23,10 @@ const DeviceSyncStatus = () => {
) )
}, [dispatch]) }, [dispatch])
return ( return (
<PageWrapperShadow rightImageSrc="./background-images/sync-status-background.png"> <PageWrapperShadow
rightImageSrc="./background-images/sync-status-background.png"
imgHeight="120%"
>
<YStack <YStack
space={'$4'} space={'$4'}
style={{ style={{

View File

@ -17,7 +17,7 @@ const LandingPage = () => {
return ( return (
<> <>
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png"> <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png" imgHeight="150%">
<YStack className="landing-page"> <YStack className="landing-page">
<XStack pt={'70px'}> <XStack pt={'70px'}>
<NimbusLogo /> <NimbusLogo />