From 96c64a98e00fdcecb3b9e1c7fd5749b7951c5ca2 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Thu, 16 Jul 2020 23:12:03 +0200
Subject: [PATCH] Improved UI and layout

---
 locales/fr.json                               |  2 +-
 src/components/Home/ActionsDashboardItem.js   |  2 +-
 src/components/Home/SmallDashboardItem.js     |  4 +-
 .../Other/Settings/DashboardEditScreen.js     | 23 ++++---
 src/screens/Other/Settings/SettingsScreen.js  | 62 ++++++++++++-------
 5 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/locales/fr.json b/locales/fr.json
index aee5e37..8811518 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -358,7 +358,7 @@
       "feedbackDescription": "Tu veux voir une fonctionnalité ajoutée/modifiée/supprimée ? Tu veux donner ton opinion sur l'appli ou simplement discuter avec le développeur (c'est moi coucou) ? Utilise un des liens ci-dessous !",
       "contactMeans": "L'utilisation de Gitea est recommandée, pour l'utiliser, connecte toi avec tes identifiants INSA.",
       "homeButtonTitle": "Feedback/Bugs",
-      "homeButtonSubtitle": "Contacter le développeur"
+      "homeButtonSubtitle": "Contacte le développeur de l'appli"
     },
     "game": {
       "title": "Le jeu trop ouf",
diff --git a/src/components/Home/ActionsDashboardItem.js b/src/components/Home/ActionsDashboardItem.js
index 9db7d28..5b02df3 100644
--- a/src/components/Home/ActionsDashboardItem.js
+++ b/src/components/Home/ActionsDashboardItem.js
@@ -24,7 +24,7 @@ class ActionsDashBoardItem extends React.Component<Props> {
                 <List.Item
                     title={i18n.t("screens.feedback.homeButtonTitle")}
                     description={i18n.t("screens.feedback.homeButtonSubtitle")}
-                    left={props => <List.Icon {...props} icon={"bug"}/>}
+                    left={props => <List.Icon {...props} icon={"comment-quote"}/>}
                     right={props => <List.Icon {...props} icon={"chevron-right"}/>}
                     onPress={() => this.props.navigation.navigate("feedback")}
                     style={{paddingTop: 0, paddingBottom: 0, marginLeft: 10, marginRight: 10}}
diff --git a/src/components/Home/SmallDashboardItem.js b/src/components/Home/SmallDashboardItem.js
index e8113b5..53ee6fc 100644
--- a/src/components/Home/SmallDashboardItem.js
+++ b/src/components/Home/SmallDashboardItem.js
@@ -39,8 +39,8 @@ class SmallDashboardItem extends React.Component<Props> {
                     onPress={this.props.onPress}
                     borderless={true}
                     style={{
-                        marginLeft: 5,
-                        marginRight: 5,
+                        marginLeft: this.itemSize / 4,
+                        marginRight: this.itemSize / 4,
                     }}
                 >
                     <View style={{
diff --git a/src/screens/Other/Settings/DashboardEditScreen.js b/src/screens/Other/Settings/DashboardEditScreen.js
index 85c01be..5eddd48 100644
--- a/src/screens/Other/Settings/DashboardEditScreen.js
+++ b/src/screens/Other/Settings/DashboardEditScreen.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
-import {Button, Paragraph, withTheme} from "react-native-paper";
+import {Button, Card, Paragraph, withTheme} from "react-native-paper";
 import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
 import DashboardManager from "../../../managers/DashboardManager";
 import DashboardItem from "../../../components/Home/EventDashboardItem";
@@ -97,7 +97,7 @@ class DashboardEditScreen extends React.Component<Props, State> {
         );
     }
 
-    undoDashboard= () => {
+    undoDashboard = () => {
         this.setState({
             currentDashboard: [...this.initialDashboard],
             currentDashboardIdList: [...this.initialDashboardIdList]
@@ -132,13 +132,18 @@ class DashboardEditScreen extends React.Component<Props, State> {
                     </View>
 
                 </View>
-                    <FlatList
-                        data={this.content}
-                        renderItem={this.renderItem}
-                        ListHeaderComponent={<Paragraph>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>}
-                        style={{
-                        }}
-                    />
+                <FlatList
+                    data={this.content}
+                    renderItem={this.renderItem}
+                    ListHeaderComponent={<Card style={{margin: 5}}>
+                        <Card.Content>
+                            <Paragraph
+                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
+                        </Card.Content>
+
+                    </Card>}
+                    style={{}}
+                />
             </View>
         );
     }
diff --git a/src/screens/Other/Settings/SettingsScreen.js b/src/screens/Other/Settings/SettingsScreen.js
index 66d7bb4..5738f03 100644
--- a/src/screens/Other/Settings/SettingsScreen.js
+++ b/src/screens/Other/Settings/SettingsScreen.js
@@ -172,6 +172,19 @@ class SettingsScreen extends React.Component<Props, State> {
         );
     }
 
+    getNavigateItem(route: string, icon: string, title: string, subtitle: string, onLongPress?: () => void) {
+        return (
+            <List.Item
+                title={title}
+                description={subtitle}
+                onPress={() => this.props.navigation.navigate(route)}
+                left={props => <List.Icon {...props} icon={icon}/>}
+                right={props => <List.Icon {...props} icon={"chevron-right"}/>}
+                onLongPress={onLongPress}
+            />
+        );
+    }
+
     render() {
         return (
             <ScrollView>
@@ -203,12 +216,12 @@ class SettingsScreen extends React.Component<Props, State> {
                             left={props => <List.Icon {...props} icon="power"/>}
                         />
                         {this.getStartScreenPicker()}
-                        <List.Item
-                            title={i18n.t('screens.settings.dashboard')}
-                            description={i18n.t('screens.settings.dashboardSub')}
-                            onPress={() => this.props.navigation.navigate("dashboard-edit")}
-                            left={props => <List.Icon {...props} icon="view-dashboard"/>}
-                        />
+                        {this.getNavigateItem(
+                            "dashboard-edit",
+                            "view-dashboard",
+                            i18n.t('screens.settings.dashboard'),
+                            i18n.t('screens.settings.dashboardSub')
+                        )}
                     </List.Section>
                 </Card>
                 <Card style={{margin: 5}}>
@@ -229,25 +242,26 @@ class SettingsScreen extends React.Component<Props, State> {
                     <Card.Title title={i18n.t('screens.settings.information')}/>
                     <List.Section>
                         {this.state.isDebugUnlocked
-                            ? <List.Item
-                                title={i18n.t('screens.debug.title')}
-                                left={props => <List.Icon {...props} icon="bug-check"/>}
-                                onPress={() => this.props.navigation.navigate("debug")}
-                            />
+                            ? this.getNavigateItem(
+                                    "debug",
+                                    "bug-check",
+                                    i18n.t('screens.debug.title'),
+                                    ""
+                                )
                             : null}
-                        <List.Item
-                            title={i18n.t('screens.about.title')}
-                            description={i18n.t('screens.about.buttonDesc')}
-                            left={props => <List.Icon {...props} icon="information"/>}
-                            onPress={() => this.props.navigation.navigate("about")}
-                            onLongPress={this.unlockDebugMode}
-                        />
-                        <List.Item
-                            title={i18n.t('screens.feedback.homeButtonTitle')}
-                            description={i18n.t('screens.feedback.homeButtonSubtitle')}
-                            left={props => <List.Icon {...props} icon="bug"/>}
-                            onPress={() => this.props.navigation.navigate("feedback")}
-                        />
+                        {this.getNavigateItem(
+                            "about",
+                            "information",
+                            i18n.t('screens.about.title'),
+                            i18n.t('screens.about.buttonDesc'),
+                            this.unlockDebugMode,
+                        )}
+                        {this.getNavigateItem(
+                            "feedback",
+                            "comment-quote",
+                            i18n.t('screens.feedback.homeButtonTitle'),
+                            i18n.t('screens.feedback.homeButtonSubtitle'),
+                        )}
                     </List.Section>
                 </Card>
             </ScrollView>