fix: 🐛 Corrige les retours design (Profile and Article) (#160)

* fix: 🐛 Corrige les retours design (Profile) ✅ Closes: #10 * fix: 🐛 Corrige les retours design (article) ✅ Closes: #28, #102, #133
SocialGouv · Apr 23, 2021 · e144278 · e144278
1 parent ef7eab1
commit e144278
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 35 deletions.
diff --git 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<Props> = ({
       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
@@ -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<Props> = ({ description }) => {
           ?
         </Text>
       </View>
-      <CommonText style={[styles.didYouKnowContent]}>{description}</CommonText>
+      <SecondaryText style={[styles.didYouKnowContent]}>
+        {description}
+      </SecondaryText>
     </View>
   ) : 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
@@ -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<Props> = ({ inShortArray }) => {
             <View style={styles.listItemIcon}>{inShortIcons[item.icon]}</View>
             <ListItem.Content>
               <ListItem.Title>
-                <CommonText style={[styles.listItemTitle]}>
+                <SecondaryText style={[styles.listItemTitle]}>
                   {item.text}
-                </CommonText>
+                </SecondaryText>
               </ListItem.Title>
             </ListItem.Content>
           </ListItem>
@@ -103,18 +104,19 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.cardGrey,
     borderLeftColor: Colors.secondaryGreen,
     borderLeftWidth: 4,
+    marginBottom: 10,
     paddingVertical: 4,
   },
   inShortListItemsContainer: {
     backgroundColor: "transparent",
   },
   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
@@ -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<Props> = ({ title }) => (
-  <SecondaryText style={styles.title}>{title}</SecondaryText>
+  <CommonText style={styles.title}>{title}</CommonText>
 );
 
 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
@@ -25,9 +25,9 @@ const TextHtml: FC<Props> = ({ 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
@@ -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<Props> = ({ 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
@@ -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
@@ -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<Props> = ({ route, navigation }) => {
               }}
             />
           </View>
-          <CommonText style={[styles.title]}>{screenTitle}</CommonText>
+          <SecondaryText style={[styles.title]}>{screenTitle}</SecondaryText>
           <CommonText style={[styles.description]}>{description}</CommonText>
         </View>
         <View>
@@ -136,6 +137,7 @@ const ArticleDetail: FC<Props> = ({ 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
@@ -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<Props> = ({ navigation }) => {
   const image = <ProfileImage />;
-  const title = Labels.profile.title;
 
   const defaultUserContext: UserContext = {
     childBirthday: null,
@@ -141,7 +142,12 @@ const Profile: FC<Props> = ({ navigation }) => {
         <View style={styles.mainView}>
           <ScrollView style={styles.mainMargins}>
             <View style={[styles.justifyContentCenter]}>{image}</View>
-            <Text style={[styles.title, styles.textAlignCenter]}>{title}</Text>
+            <CommonText style={[styles.title, styles.textAlignCenter]}>
+              {Labels.profile.title}
+            </CommonText>
+            <CommonText style={[styles.subTitle, styles.textAlignCenter]}>
+              {Labels.profile.subTitle}
+            </CommonText>
             <View style={[styles.choices]}>
               {userSituations.map((situation, index) => (
                 <View key={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%",