fix: 🐛 Améliore l'UX/UI (buttons, checkbox) (#563)

iOS Guideline 4.0 - Design (App refused)

✅ Closes: #560

front/components/base/checkbox.component.tsx

@@ -9,6 +9,7 @@ import {
   FontNames,
   FontWeight,
   getFontFamilyName,
+  Margins,
   Paddings,
   Sizes,
 } from "../../constants";
@@ -43,7 +44,10 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     backgroundColor: "transparent",
     borderWidth: 0,
-    paddingVertical: Paddings.smallest,
+    marginHorizontal: Margins.light,
+    marginVertical: 0,
+    padding: Paddings.light,
+    width: "100%",
   },
   label: {
     color: Colors.primaryBlueDark,

front/components/base/headerApp.component.tsx

@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
   appLogo: {
     alignItems: "center",
     display: "flex",
+    paddingBottom: Paddings.light,
   },
   logoMinistere: {
     aspectRatio: 1,

front/components/base/notification.component.tsx

@@ -140,9 +140,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   closeButton: {
+    padding: Paddings.default,
     position: "absolute",
-    right: Paddings.default,
-    top: Paddings.default,
+    right: 0,
+    top: 0,
   },
   modalView: {
     alignItems: "center",

front/navigation/index.tsx

@@ -120,7 +120,7 @@ const RootNavigator: FC<RootNavigatorProps> = ({ onPressMenu }) => (
           </TouchableOpacity>
         ),
         headerShown: true,
-        headerTitle: () => <AppLogo height={Sizes.xxxl} />,
+        headerTitle: () => <AppLogo height={Sizes.xxxl} width={Sizes.xxxl} />,
         headerTitleContainerStyle: {
           alignItems: "center",
         },
@@ -140,7 +140,9 @@ const styles = StyleSheet.create({
   },
   headerRight: {
     alignItems: "center",
-    paddingRight: Paddings.default,
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: Paddings.default,
   },
   headerRightButtonText: {
     color: Colors.primaryBlue,

front/screens/aroundMe/aroundMeFilter.component.tsx

@@ -351,7 +351,7 @@ const styles = StyleSheet.create({
     marginTop: Margins.default,
   },
   closeModalView: {
-    margin: Margins.default,
+    padding: Paddings.default,
     position: "absolute",
     right: 0,
     top: 0,

front/screens/epdsSurvey/epdsQuestion.component.tsx

@@ -25,24 +25,26 @@ const EpdsQuestion: React.FC<Props> = ({
       style={styles.swipeView}
       contentContainerStyle={styles.justifyContentCenter}
     >
-      <View style={styles.swipeViewMargin}>
+      <View style={[styles.swipeViewMargin, styles.paddingRight]}>
         <CommonText style={styles.question}>
           {questionAndAnswers.questionNumber}. {questionAndAnswers.question}
         </CommonText>
-        {questionAndAnswers.answers.map((answer, answerIndex) => (
-          <Checkbox
-            key={answerIndex}
-            labelSize={Sizes.xs}
-            title={answer.label}
-            checked={answer.isChecked}
-            onPress={() => {
-              updatePressedAnswer(answer);
-              trackScreenView(
-                `${TrackerUtils.TrackingEvent.EPDS} - question n°${questionAndAnswers.questionNumber} - case cochée`
-              );
-            }}
-          />
-        ))}
+        <View style={styles.paddingRight}>
+          {questionAndAnswers.answers.map((answer, answerIndex) => (
+            <Checkbox
+              key={answerIndex}
+              labelSize={Sizes.xs}
+              title={answer.label}
+              checked={answer.isChecked}
+              onPress={() => {
+                updatePressedAnswer(answer);
+                trackScreenView(
+                  `${TrackerUtils.TrackingEvent.EPDS} - question n°${questionAndAnswers.questionNumber} - case cochée`
+                );
+              }}
+            />
+          ))}
+        </View>
       </View>
     </ScrollView>
   );
@@ -54,6 +56,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  paddingRight: {
+    paddingRight: Paddings.light,
+  },
   question: {
     color: Colors.primaryBlueDark,
     fontSize: Sizes.sm,

front/screens/listArticles.component.tsx

@@ -62,7 +62,9 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
     );
   }, []);
 
+  const [articles, setArticles] = React.useState<Article[]>([]);
   const [filteredArticles, setFilteredArticles] = React.useState<Article[]>([]);
+  const [showArticles, setShowArticles] = React.useState(false);
 
   const STEP_ARTICLES = gql`
     query GetStepArticles {
@@ -112,14 +114,17 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
   const applyFilters = (filters: ArticleFilter[]) => {
     const activeFilters = _.filter(filters, { active: true });
     sendFiltersTracker(activeFilters);
-    const result = filteredArticles.map((article) => {
+    const result = articles.map((article) => {
+      let hide = false;
       if (activeFilters.length > 0)
-        article.hide = !matchWithFilters(article, activeFilters);
-      else article.hide = false;
+        hide = !matchWithFilters(article, activeFilters);
 
-      return article;
+      return {
+        ...article,
+        hide: hide,
+      };
     });
-    setFilteredArticles(result);
+    setArticles(result);
   };
 
   const { loading, error, data } = useQuery(STEP_ARTICLES, {
@@ -128,12 +133,19 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
 
   useEffect(() => {
     if (!loading && data) {
-      const articles = (data as { articles: Article[] }).articles;
-      setFilteredArticles(articles);
+      const articlesToShow = _.filter(articles, (article) => !article.hide);
+      setFilteredArticles(articlesToShow);
+      setShowArticles(true);
+    }
+  }, [articles]);
+
+  useEffect(() => {
+    if (!loading && data) {
+      const results = (data as { articles: Article[] }).articles;
+      setArticles(results);
     }
   }, [loading, data]);
 
-  if (loading) return <Loader />;
   if (error) return <ErrorMessage error={error} />;
 
   return (
@@ -171,15 +183,14 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
         </View>
       )}
 
-      <Filters articles={filteredArticles} applyFilters={applyFilters} />
+      <Filters articles={articles} applyFilters={applyFilters} />
 
-      <View style={styles.listContainer}>
-        <SecondaryText style={styles.headerListInfo}>
-          {_.filter(filteredArticles, (article) => !article.hide).length}{" "}
-          {Labels.listArticles.articlesToRead}
-        </SecondaryText>
-        {_.filter(filteredArticles, (article) => !article.hide).map(
-          (article, index) => (
+      {showArticles ? (
+        <View style={styles.listContainer}>
+          <SecondaryText style={styles.headerListInfo}>
+            {filteredArticles.length} {Labels.listArticles.articlesToRead}
+          </SecondaryText>
+          {filteredArticles.map((article, index) => (
             <Animatable.View
               key={index}
               animation="fadeInUp"
@@ -232,9 +243,11 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
                 </ListItem.Content>
               </ListItem>
             </Animatable.View>
-          )
-        )}
-      </View>
+          ))}
+        </View>
+      ) : (
+        <Loader />
+      )}
     </ScrollView>
   );
 };