Skip to content

Commit

Permalink
try new app view
Browse files Browse the repository at this point in the history
  • Loading branch information
@wbglaeser
wbglaeser committed Nov 10, 2024
1 parent b36384b commit aec7700
Show file tree
Hide file tree
Showing 7 changed files with 77 additions and 60 deletions.
24 changes: 13 additions & 11 deletions src/components/AppScreenWrapper.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
import React from "react";
import VStack from "./VStack";
import AppScreenHeader from "./AppScreenHeader";
import globalStyles from "../styles/styles";

const AppScreenWrapper = ({isDesktop, isTop = true, children, back=false}) => {
const horizontalPadding = isDesktop ? '60px' : '30px';
const verticalPadding = isDesktop
? isTop
? '32px'
: '60px'
: isTop
? '16px'
: '60px';
const AppScreenWrapper = ({isDesktop, children, back = false}) => {
const horizontalPadding = isDesktop ? '15px' : '16px';
const verticalPadding = isDesktop ? '15px' : '16px';
const desktopGradient = isDesktop ? `linear-gradient(
to bottom,
${globalStyles.primaryColor}33 0%,
${globalStyles.primaryColor}80 100%)` : 'none';
return (
<VStack alignItems={'center'} sx={{
width: '100%',
paddingLeft: horizontalPadding,
paddingRight: horizontalPadding,
paddingTop: verticalPadding,
paddingBottom: verticalPadding,
borderRadius: '4px',
minHeight: '100%',
boxSizing: 'border-box',
background: desktopGradient
}}>
{isDesktop ? (
<VStack sx={{
width: '780px',
width: '840px',
padding: '32px',
backgroundColor: 'white'
}}>
{back && <AppScreenHeader/>}
{children}
Expand Down
33 changes: 10 additions & 23 deletions src/components/ClickCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ const ClickCard = ({
link,
title,
subtitle,
backgroundImage,
backgroundColor,
time = null,
cardHeight = '175px',
cardHeight = '150px',
icon = AccessTimeIcon,
iconColor = "green"
}) => {
Expand All @@ -24,25 +22,14 @@ const ClickCard = ({
sx={{
...styles.card,
minHeight: cardHeight,
backgroundColor: backgroundColor,
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundColor: 'white',
backgroundPosition: 'center',
position: 'relative',
overflow: 'hidden',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
},
'& > *': {
position: 'relative',
zIndex: 2,
borderStyle: 'solid',
borderWidth: '1px',
borderColor: globalStyles.primaryColor,
':hover': {
backgroundColor: globalStyles.primaryColor
}
}}>
<Link to={link} style={{textDecoration: 'none', color: "black", width: '100%'}}>
Expand Down Expand Up @@ -81,13 +68,13 @@ const styles = {
padding: "16px",
},
cardContentTitle: {
fontSize: '36px',
fontSize: '28px',
fontWeight: 'bold',
color: 'white',
color: 'black',
},
cardContentSubTitle: {
fontSize: '16px',
fontWeight: '400',
color: 'white',
color: 'black',
}
};
2 changes: 1 addition & 1 deletion src/components/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Layout = ({children, isApp = false, logo = true, back = null}) => {
<VStack gap={0}>
<HeaderBar isDesktop={isDesktop} isApp={isApp} logo={logo} back={back}/>
<VStack data-testid={'layout-container'}>
<VStack sx={styles.contentContainerStyle} data-testid="main-parent container">
<VStack sx={styles.contentContainerStyle} data-testid="main-parent container" alignItems={'center'}>
{children}
</VStack>
</VStack>
Expand Down
3 changes: 2 additions & 1 deletion src/language/translations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,8 @@ const translations = {
},
discoverChoice: {
header: "Deine Wahl",
text: "Zwei Möglichkeiten, um Leistungen für dich zu entdecken",
text: "Du hast zwei Möglichkeiten, um Leistungen für dich zu entdecken. Du kannst ein paar Fragen beantworten " +
"und so einen Schnellcheck machen oder dir den gesamten Katalog ansehen.",
quickCheck: "Schneller Anspruchscheck",
quickCheckComment: "Basierend auf bis zu 10 Leistungen",
browseAll: "Alle Leistungen durchsuchen",
Expand Down
16 changes: 12 additions & 4 deletions src/screens/info-screen/InfoScreenNewOrExistingUser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const InfoScreenNewOrExistingUser = () => {
>
<HStack alignItems={'center'}>
<VStack gap={1} alignItems={'flex-start'} sx={{width: '70%'}}>
<Typography sx={{fontWeight: 'bold'}}>
<Typography sx={{fontWeight: 'bold', fontSize: '24px'}}>
{t("app.welcomeBack.yesBtnTitle")}
</Typography>
<Typography sx={{textAlign: 'left'}}>
Expand Down Expand Up @@ -172,7 +172,7 @@ const InfoScreenNewOrExistingUser = () => {
>
<HStack alignItems={'center'}>
<VStack gap={1} alignItems={'flex-start'} sx={{width: '70%'}}>
<Typography sx={{fontWeight: 'bold'}}>
<Typography sx={{fontWeight: 'bold', fontSize: '24px'}}>
{t("app.welcomeBack.noBtnTitle")}
</Typography>
<Typography sx={{textAlign: 'left'}}>
Expand All @@ -196,7 +196,11 @@ const InfoScreenNewOrExistingUser = () => {
borderRadius: '12px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: globalStyles.colorDarkGrey
borderColor: globalStyles.colorDarkGrey,
backgroundColor: 'white',
'&:hover': {
backgroundColor: globalStyles.primaryColor,
},
}}
startIcon={<FileDownloadIcon sx={{color: globalStyles.colorDarkGrey}}/>}
onClick={exportProfile}
Expand All @@ -210,7 +214,11 @@ const InfoScreenNewOrExistingUser = () => {
borderRadius: '12px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: globalStyles.colorDarkGrey
borderColor: globalStyles.colorDarkGrey,
backgroundColor: 'white',
'&:hover': {
backgroundColor: globalStyles.primaryColor,
},
}}
startIcon={<DeleteIcon sx={{color: globalStyles.colorDarkGrey}}/>}
onClick={deleteProfile}
Expand Down
8 changes: 4 additions & 4 deletions src/screens/info-screen/components/InfoScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import VStack from "../../../components/VStack";
import HStack from "../../../components/HStack";
import {useStore} from "../../../components/ViewportUpdater";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import globalStyles from "../../../styles/styles";

const InfoScreen = ({title, children, imageUrl, backLink, forwardLink, hideNextButton = false}) => {
const isDesktop = useStore((state) => state.isDesktop);
Expand All @@ -25,7 +26,7 @@ const InfoScreen = ({title, children, imageUrl, backLink, forwardLink, hideNextB
return (
<Layout isApp={true}>
<AppScreenWrapper isDesktop={isDesktop} back={true}>
<VStack alignItems={'center'} gap={5} sx={{width: "100%"}}>
<VStack alignItems={'center'} gap={3} sx={{width: "100%"}}>
<HStack sx={styles.titleWrapper}>
<Typography sx={{...styles.title, fontSize: titleFontSize}}>{title}</Typography>
</HStack>
Expand All @@ -35,7 +36,8 @@ const InfoScreen = ({title, children, imageUrl, backLink, forwardLink, hideNextB
</VStack>
<HStack justifyContent={stackType} sx={{width: '100%'}}>
{backLink !== undefined &&
<Button variant="text" sx={styles.button} startIcon={<ChevronLeftIcon/>} component={Link}
<Button variant="text" sx={styles.button} startIcon={<ChevronLeftIcon/>}
component={Link}
to={backLink}>Previous</Button>}
{!hideNextButton &&
<Button variant="text" sx={styles.button} endIcon={<ChevronRightIcon/>} component={Link}
Expand All @@ -50,7 +52,6 @@ const InfoScreen = ({title, children, imageUrl, backLink, forwardLink, hideNextB
const styles = {
titleWrapper: {
boxSizing: 'border-box',
padding: '16px',
borderRadius: '12px',
},
title: {
Expand All @@ -59,7 +60,6 @@ const styles = {
},
infoWrapper: {
width: '100%',
padding: '16px',
borderRadius: '12px'
},
button: {
Expand Down
51 changes: 35 additions & 16 deletions src/screens/onboarding-choice/OnboardingChoice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,56 @@ import ClickCard from "../../components/ClickCard";
import AppScreenWrapper from "../../components/AppScreenWrapper";
import {useStore} from "../../components/ViewportUpdater";
import useTranslation from "../../language/useTranslation";
import HStack from "../../components/HStack";

const OnboardingChoice = () => {
const { t } = useTranslation();
const {t} = useTranslation();

const isDesktop = useStore((state) => state.isDesktop);
const quickCheckUrl = `${process.env.PUBLIC_URL}/assets/images/choice-screen/quick-check-image.jpg`;
const allBenefitsUrl = `${process.env.PUBLIC_URL}/assets/images/choice-screen/all-benefits.jpg`;
const titleFontSize = isDesktop ? 40 : 30;

const DynamicStacker = ({children}) => {
if (isDesktop) {
return (
<HStack justifyContent={'space-between'}>
{children}
</HStack>
)
}
return (
<VStack>
{children}
</VStack>
)
}

return (
<Layout isApp={true}>
<AppScreenWrapper isDesktop={isDesktop} back={true}>
<VStack gap={1} sx={styles.container} justifyContent={'center'}>
<Typography variant="h3" gutterBottom sx={styles.titleText}>
<Typography gutterBottom sx={{...styles.titleText, fontSize: titleFontSize}}>
{t('app.discoverChoice.header')}
</Typography>
<Typography variant="body1" gutterBottom sx={styles.subTitleText}>
{t('app.discoverChoice.text')}
</Typography>
</VStack>
<ClickCard
link="/onboarding-welcome-topics"
time="5 Min."
title={t('app.discoverChoice.quickCheck')}
subtitle={t('app.discoverChoice.quickCheckComment')}
backgroundImage={quickCheckUrl}
/>
<ClickCard
link="/eligibility-overview"
title={t('app.discoverChoice.browseAll')}
backgroundImage={allBenefitsUrl}
/>
<DynamicStacker>
<ClickCard
link="/onboarding-welcome-topics"
time="5 Min."
title={t('app.discoverChoice.quickCheck')}
subtitle={t('app.discoverChoice.quickCheckComment')}
backgroundImage={quickCheckUrl}
/>
<ClickCard
link="/eligibility-overview"
title={t('app.discoverChoice.browseAll')}
backgroundImage={allBenefitsUrl}
/>
</DynamicStacker>
</AppScreenWrapper>
</Layout>
);
Expand All @@ -48,9 +67,9 @@ const styles = {
textAlign: 'center'
},
subTitleText: {
fontSize: '28px',
fontSize: '20px',
fontWeight: '400',
textAlign: 'center'
textAlign: 'left'
}
};

Expand Down

0 comments on commit aec7700

Please sign in to comment.