Improved UI and layout

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",

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}}

src/components/Home/SmallDashboardItem.js

@@ -39,8 +39,8 @@ class SmallDashboardItem extends React.Component<Props> {
                     onPress={this.props.onPress}
                     borderless={true}
                     style={{
-                        marginLeft: 5,
+                        marginLeft: this.itemSize / 4,
-                        marginRight: 5,
+                        marginRight: this.itemSize / 4,
                     }}
                 >
                     <View style={{

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
+                <FlatList
-                        data={this.content}
+                    data={this.content}
-                        renderItem={this.renderItem}
+                    renderItem={this.renderItem}
-                        ListHeaderComponent={<Paragraph>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>}
+                    ListHeaderComponent={<Card style={{margin: 5}}>
-                        style={{
+                        <Card.Content>
-                        }}
+                            <Paragraph
-                    />
+                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
+                        </Card.Content>
+
+                    </Card>}
+                    style={{}}
+                />
             </View>
         );
     }

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
+                        {this.getNavigateItem(
-                            title={i18n.t('screens.settings.dashboard')}
+                            "dashboard-edit",
-                            description={i18n.t('screens.settings.dashboardSub')}
+                            "view-dashboard",
-                            onPress={() => this.props.navigation.navigate("dashboard-edit")}
+                            i18n.t('screens.settings.dashboard'),
-                            left={props => <List.Icon {...props} icon="view-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
+                            ? this.getNavigateItem(
-                                title={i18n.t('screens.debug.title')}
+                                    "debug",
-                                left={props => <List.Icon {...props} icon="bug-check"/>}
+                                    "bug-check",
-                                onPress={() => this.props.navigation.navigate("debug")}
+                                    i18n.t('screens.debug.title'),
-                            />
+                                    ""
+                                )
                             : null}
-                        <List.Item
+                        {this.getNavigateItem(
-                            title={i18n.t('screens.about.title')}
+                            "about",
-                            description={i18n.t('screens.about.buttonDesc')}
+                            "information",
-                            left={props => <List.Icon {...props} icon="information"/>}
+                            i18n.t('screens.about.title'),
-                            onPress={() => this.props.navigation.navigate("about")}
+                            i18n.t('screens.about.buttonDesc'),
-                            onLongPress={this.unlockDebugMode}
+                            this.unlockDebugMode,
-                        />
+                        )}
-                        <List.Item
+                        {this.getNavigateItem(
-                            title={i18n.t('screens.feedback.homeButtonTitle')}
+                            "feedback",
-                            description={i18n.t('screens.feedback.homeButtonSubtitle')}
+                            "comment-quote",
-                            left={props => <List.Icon {...props} icon="bug"/>}
+                            i18n.t('screens.feedback.homeButtonTitle'),
-                            onPress={() => this.props.navigation.navigate("feedback")}
+                            i18n.t('screens.feedback.homeButtonSubtitle'),
-                        />
+                        )}
                     </List.Section>
                 </Card>
             </ScrollView>