diff --git a/front/components/BackButton.tsx b/front/components/BackButton.tsx index b333732ae..a2ea6213b 100644 --- a/front/components/BackButton.tsx +++ b/front/components/BackButton.tsx @@ -1,9 +1,12 @@ import * as React from "react"; +import { StyleSheet } from "react-native"; import Colors from "../constants/Colors"; import Labels from "../constants/Labels"; +import { FontWeight } from "../constants/Layout"; import Button from "./form/Button"; import Icomoon, { IcomoonIcons } from "./Icomoon"; +import { FontNames, getFontFamilyName } from "./StyledText"; interface Props { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -28,9 +31,16 @@ const BackButton: React.FC = ({ rounded={false} disabled={false} action={action} - titleStyle={{ color }} + titleStyle={[{ color }, styles.font]} /> ); }; +const styles = StyleSheet.create({ + font: { + fontFamily: getFontFamilyName(FontNames.comfortaa, FontWeight.bold), + fontSize: 14, + }, +}); + export default BackButton; diff --git a/front/components/article/DidYouKnow.tsx b/front/components/article/DidYouKnow.tsx index a347b4aff..225e5c768 100644 --- a/front/components/article/DidYouKnow.tsx +++ b/front/components/article/DidYouKnow.tsx @@ -4,7 +4,8 @@ import { StyleSheet, Text } from "react-native"; import Colors from "../../constants/Colors"; import Labels from "../../constants/Labels"; -import { CommonText } from "../StyledText"; +import { FontWeight } from "../../constants/Layout"; +import { CommonText, SecondaryText } from "../StyledText"; import { View } from "../Themed"; interface Props { @@ -28,7 +29,9 @@ const DidYouKnow: FC = ({ description }) => { ? - {description} + + {description} + ) : null; }; @@ -55,19 +58,22 @@ const styles = StyleSheet.create({ backgroundColor: Colors.cardGrey, borderLeftColor: Colors.primaryYellow, borderLeftWidth: 4, + marginBottom: 15, paddingBottom: 15, paddingTop: 5, }, didYouKnowContent: { color: Colors.primaryBlueDark, - fontSize: 12, - lineHeight: 20, + fontSize: 16, + fontWeight: FontWeight.medium, + lineHeight: 23, paddingHorizontal: 18, paddingTop: 0, }, didYouKnowTitle: { color: Colors.primaryYellow, - fontSize: 12, + fontSize: 17, + fontWeight: FontWeight.bold, }, positionRelative: { position: "relative", diff --git a/front/components/article/InShort.tsx b/front/components/article/InShort.tsx index 1962cc5d8..a6d4b4d94 100644 --- a/front/components/article/InShort.tsx +++ b/front/components/article/InShort.tsx @@ -6,9 +6,10 @@ import { ListItem } from "react-native-elements"; import Colors from "../../constants/Colors"; import Labels from "../../constants/Labels"; +import { FontWeight } from "../../constants/Layout"; import type { ArticleInShortItem } from "../../types"; import Icomoon, { IcomoonIcons } from "../Icomoon"; -import { CommonText } from "../StyledText"; +import { CommonText, SecondaryText } from "../StyledText"; import { View } from "../Themed"; export const inShortIconNames = { @@ -66,9 +67,9 @@ const InShort: FC = ({ inShortArray }) => { {inShortIcons[item.icon]} - + {item.text} - + @@ -103,6 +104,7 @@ const styles = StyleSheet.create({ backgroundColor: Colors.cardGrey, borderLeftColor: Colors.secondaryGreen, borderLeftWidth: 4, + marginBottom: 10, paddingVertical: 4, }, inShortListItemsContainer: { @@ -110,11 +112,11 @@ const styles = StyleSheet.create({ }, inShortTitle: { color: Colors.secondaryGreen, - fontSize: 12, + fontSize: 17, + fontWeight: FontWeight.bold, marginVertical: "auto", }, listItemContainer: { - alignItems: "flex-start", backgroundColor: "transparent", padding: 10, }, @@ -126,7 +128,8 @@ const styles = StyleSheet.create({ }, listItemTitle: { color: Colors.primaryBlueDark, - fontSize: 12, + fontSize: 16, + fontWeight: FontWeight.medium, }, positionRelative: { position: "relative", diff --git a/front/components/article/SubTitle.tsx b/front/components/article/SubTitle.tsx index 76d2b8e70..b60693521 100644 --- a/front/components/article/SubTitle.tsx +++ b/front/components/article/SubTitle.tsx @@ -3,22 +3,23 @@ import * as React from "react"; import { StyleSheet } from "react-native"; import Colors from "../../constants/Colors"; -import { SecondaryText } from "../StyledText"; +import { FontWeight } from "../../constants/Layout"; +import { CommonText } from "../StyledText"; interface Props { title: string; } const SubTitle: FC = ({ title }) => ( - {title} + {title} ); const styles = StyleSheet.create({ title: { color: Colors.primaryBlue, - fontSize: 12, - fontWeight: "normal", - marginTop: 20, + fontSize: 14, + fontWeight: FontWeight.bold, + marginTop: 15, }, }); diff --git a/front/components/article/TextHtml.tsx b/front/components/article/TextHtml.tsx index 6f9006cbf..3cc0c5108 100644 --- a/front/components/article/TextHtml.tsx +++ b/front/components/article/TextHtml.tsx @@ -25,9 +25,9 @@ const TextHtml: FC = ({ html }) => { const styles = StyleSheet.create({ baseFontStyle: { color: Colors.commonText, - fontFamily: getFontFamilyName(FontNames.avenir, FontWeight.normal), - fontSize: 12, - lineHeight: 20, + fontFamily: getFontFamilyName(FontNames.avenir, FontWeight.medium), + fontSize: 16, + lineHeight: 25, }, bold: { fontFamily: getFontFamilyName(FontNames.avenir, FontWeight.bold), diff --git a/front/components/article/Title.tsx b/front/components/article/Title.tsx index 564886e44..9ec2b0585 100644 --- a/front/components/article/Title.tsx +++ b/front/components/article/Title.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { StyleSheet } from "react-native"; import Colors from "../../constants/Colors"; +import { FontWeight } from "../../constants/Layout"; import { CommonText } from "../StyledText"; interface Props { @@ -16,8 +17,8 @@ const Title: FC = ({ title }) => { const styles = StyleSheet.create({ title: { color: Colors.primaryBlueDark, - fontSize: 14, - fontWeight: "normal", + fontSize: 18, + fontWeight: FontWeight.bold, marginBottom: 10, }, }); diff --git a/front/constants/Labels.ts b/front/constants/Labels.ts index 627dec254..7f940d064 100644 --- a/front/constants/Labels.ts +++ b/front/constants/Labels.ts @@ -2,12 +2,13 @@ export default { appName: "Nos 1000 jours", article: { didYouKnowTitle: "Le saviez-vous ?", - inShortTitle: "En bref :", firstThreeMonths: { - title: "Autodépistage dépression post-partum", - description: "Vous venez d'avoir un bébé. Vous souhaitez savoir comment vous vous portez psychologiquement ?", buttonLabel: "Faire le test", + description: + "Vous venez d'avoir un bébé. Vous souhaitez savoir comment vous vous portez psychologiquement ?", + title: "Autodépistage dépression post-partum", }, + inShortTitle: "En bref :", }, buttons: { back: "Retour", @@ -59,7 +60,8 @@ export default { search: "Je cherche à concevoir un enfant", severalChildren: "J'ai plusieurs enfants", }, - title: "Votre profil", + subTitle: "- Votre profil -", + title: "A quelle étape êtes-vous ?", }, tabs: { aroundMeTitle: "Autour de moi", diff --git a/front/screens/ArticleDetail.tsx b/front/screens/ArticleDetail.tsx index cf97f7d90..4a6466a54 100644 --- a/front/screens/ArticleDetail.tsx +++ b/front/screens/ArticleDetail.tsx @@ -15,10 +15,11 @@ import TextHtml from "../components/article/TextHtml"; import Thematics from "../components/article/Thematics"; import Title from "../components/article/Title"; import BackButton from "../components/BackButton"; -import { CommonText } from "../components/StyledText"; +import { CommonText, SecondaryText } from "../components/StyledText"; import { View } from "../components/Themed"; import Colors from "../constants/Colors"; import Labels from "../constants/Labels"; +import { FontWeight } from "../constants/Layout"; import type { Article, ArticleInShortItem, @@ -111,7 +112,7 @@ const ArticleDetail: FC = ({ route, navigation }) => { }} /> - {screenTitle} + {screenTitle} {description} @@ -136,6 +137,7 @@ const ArticleDetail: FC = ({ route, navigation }) => { const styles = StyleSheet.create({ articleDetails: { paddingHorizontal: 15, + paddingTop: 10, }, description: { color: Colors.commonText, @@ -149,9 +151,9 @@ const styles = StyleSheet.create({ padding: 15, }, title: { - color: Colors.primaryBlue, - fontSize: 14, - fontWeight: "bold", + color: Colors.primaryBlueDark, + fontSize: 18, + fontWeight: FontWeight.black, marginVertical: 5, textTransform: "uppercase", }, diff --git a/front/screens/Profile.tsx b/front/screens/Profile.tsx index 77ff6c810..a317ba0ea 100644 --- a/front/screens/Profile.tsx +++ b/front/screens/Profile.tsx @@ -19,9 +19,11 @@ import Checkbox from "../components/form/Checkbox"; import InputDate from "../components/form/InputDate"; import HeaderApp from "../components/HeaderApp"; import Icomoon, { IcomoonIcons } from "../components/Icomoon"; +import { CommonText } from "../components/StyledText"; import { View } from "../components/Themed"; import Colors from "../constants/Colors"; import Labels from "../constants/Labels"; +import { FontWeight } from "../constants/Layout"; import { userProfileKey } from "../storage/storage-keys"; import { storeObjectValue } from "../storage/storage-utils"; import type { RootStackParamList, UserContext, UserSituation } from "../types"; @@ -32,7 +34,6 @@ interface Props { const Profile: FC = ({ navigation }) => { const image = ; - const title = Labels.profile.title; const defaultUserContext: UserContext = { childBirthday: null, @@ -141,7 +142,12 @@ const Profile: FC = ({ navigation }) => { {image} - {title} + + {Labels.profile.title} + + + {Labels.profile.subTitle} + {userSituations.map((situation, index) => ( @@ -277,14 +283,21 @@ const styles = StyleSheet.create({ mainView: { flex: 8, }, + subTitle: { + color: Colors.primaryBlue, + fontSize: 16, + fontWeight: FontWeight.normal, + paddingBottom: 30, + }, textAlignCenter: { textAlign: "center", }, title: { color: Colors.primaryBlueDark, - fontSize: 15, + fontSize: 18, fontWeight: "bold", - padding: 15, + paddingBottom: 10, + paddingTop: 15, }, w100: { width: "100%",