Use external library to render header buttons

Improved html component to ignore text styles
Added amicale contact page
2020-04-11 21:47:09 +02:00 · 2020-04-10 23:06:13 +02:00 · 2020-04-10 17:10:10 +02:00 · 2020-04-10 16:20:52 +02:00 · 2020-04-10 16:02:22 +02:00 · 2020-04-10 14:35:33 +02:00
22 changed files with 383 additions and 109 deletions
--- a/package.json
+++ b/package.json
@ -28,6 +28,8 @@
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "expo": "^37.0.0",
+    "expo-barcode-scanner": "~8.1.0",
+    "expo-camera": "latest",
    "expo-linear-gradient": "~8.1.0",
    "expo-localization": "~8.1.0",
    "expo-permissions": "~8.1.0",
@ -50,8 +52,7 @@
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-webview": "8.1.1",
-    "expo-barcode-scanner": "~8.1.0",
-    "expo-camera": "latest"
+    "react-navigation-header-buttons": "^3.0.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
--- a/src/components/Custom/CustomHTML.js
+++ b/src/components/Custom/CustomHTML.js
@ -1,6 +1,5 @@
 import * as React from 'react';
-import {View} from "react-native";
-import {withTheme} from 'react-native-paper';
+import {Text, withTheme} from 'react-native-paper';
 import HTML from "react-native-render-html";
 import {Linking} from "expo";

@ -18,26 +17,21 @@ class CustomHTML extends React.Component<Props> {
        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
    };

-    getHTML() {
-        // Surround description with div to allow text styling if the description is not html
-        return <HTML html={"<div>" + this.props.html + "</div>"}
-                     tagsStyles={{
-                         p: {color: this.props.theme.colors.text},
-                         div: {color: this.props.theme.colors.text}
-                     }}
-                     onLinkPress={this.openWebLink}/>;
-    }
+    getBasicText = (htmlAttribs, children, convertedCSSStyles, passProps) => {
+        // console.log(convertedCSSStyles);
+        return <Text {...passProps}>{children}</Text>;
+    };

    render() {
-        // Completely recreate the component on theme change to force theme reload
-        if (this.props.theme.dark)
-            return (
-                <View>
-                    {this.getHTML()}
-                </View>
-            );
-        else
-            return this.getHTML();
+        // Surround description with p to allow text styling if the description is not html
+        return <HTML
+            html={"<p>" + this.props.html + "</p>"}
+            renderers={{
+                p: this.getBasicText,
+            }}
+            ignoredStyles={['color', 'background-color']}
+
+            onLinkPress={this.openWebLink}/>;
    }
 }

--- a/src/components/Custom/HeaderButton.js
+++ b/src/components/Custom/HeaderButton.js
@ -1,22 +1,37 @@
-import * as React from 'react';
-import {IconButton, withTheme} from 'react-native-paper';
+// @flow

-/**
- * Component used to display a header button
- *
- * @param props Props to pass to the component
- * @return {*}
- */
-function HeaderButton(props) {
-    const {colors} = props.theme;
+import * as React from 'react';
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
+import {withTheme} from "react-native-paper";
+import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
+
+const MaterialHeaderButton = (props: Object) => (
+    <HeaderButton
+        {...props}
+        IconComponent={MaterialCommunityIcons}
+        iconSize={26}
+        color={props.theme.colors.text}
+        background={Touchable.Ripple(props.theme.colors.ripple, true)}
+    />
+);
+
+const MaterialHeaderButtons = (props: Object) => {
    return (
-        <IconButton
-            icon={props.icon}
-            size={26}
-            color={props.color !== undefined ? props.color : colors.text}
-            onPress={props.onPress}
+        <HeaderButtons
+            {...props}
+            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
+            OverflowIcon={
+                <MaterialCommunityIcons
+                    name="dots-vertical"
+                    size={26}
+                    color={props.theme.colors.text}
+                />
+            }
        />
    );
-}
+};

-export default withTheme(HeaderButton);
+export default withTheme(MaterialHeaderButtons);
+
+export {Item} from 'react-navigation-header-buttons';
--- a/src/components/Home/ActionsDashboardItem.js
+++ b/src/components/Home/ActionsDashboardItem.js
@ -2,7 +2,7 @@

 import * as React from 'react';
 import {Button, Card, withTheme} from 'react-native-paper';
-import {StyleSheet} from "react-native";
+import {Platform, StyleSheet} from "react-native";
 import i18n from 'i18n-js';

 type Props = {
@ -38,13 +38,25 @@ class ActionsDashBoardItem extends React.PureComponent<Props> {
                    >
                        {i18n.t("homeScreen.servicesButton")}
                    </Button>
-                    <Button
-                        icon="settings"
-                        mode="contained"
-                        onPress={this.gotToSettings}
-                        style={styles.settingsButton}
-                        compact
-                    />
+                    {
+                        // Leave space to fix ios icon position
+                        Platform.OS === 'ios'
+                            ? <Button
+                                icon="settings"
+                                mode="contained"
+                                onPress={this.gotToSettings}
+                                style={styles.settingsButton}
+                                compact
+                            > </Button>
+                            : <Button
+                                icon="settings"
+                                mode="contained"
+                                onPress={this.gotToSettings}
+                                style={styles.settingsButton}
+                                compact
+                            />
+                    }
+
                </Card.Content>
            </Card>
        );
--- a/src/components/Screens/WebViewScreen.js
+++ b/src/components/Screens/WebViewScreen.js
@ -2,10 +2,10 @@

 import * as React from 'react';
 import WebView from "react-native-webview";
-import HeaderButton from "../Custom/HeaderButton";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import ErrorView from "../Custom/ErrorView";
-import {ERROR_TYPE} from "../../managers/ConnectionManager";
+import {ERROR_TYPE} from "../../utils/WebData";
+import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';

 type Props = {
    navigation: Object,
@ -55,7 +55,11 @@ class WebViewScreen extends React.PureComponent<Props> {
     * @return {*}
     */
    getRefreshButton() {
-        return <HeaderButton icon={'refresh'} onPress={this.onRefreshClicked}/>
+        return (
+            <MaterialHeaderButtons>
+                <Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/>
+            </MaterialHeaderButtons>
+        );
    };

    /**
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@ -52,6 +52,11 @@ class SideBar extends React.Component<Props, State> {
                onlyWhenLoggedOut: true,
                shouldEmphasis: true,
            },
+            {
+                name: i18n.t('screens.amicaleAbout'),
+                route: "amicale-contact",
+                icon: "information",
+            },
            {
                name: i18n.t('screens.profile'),
                route: "profile",
--- a/src/managers/ThemeManager.js
+++ b/src/managers/ThemeManager.js
@ -34,6 +34,7 @@ export default class ThemeManager {
                tabIcon: "#929292",
                card: "rgb(255, 255, 255)",
                dividerBackground: '#e2e2e2',
+                ripple: "rgba(0,0,0,0.2)",
                textDisabled: '#c1c1c1',
                icon: '#5d5d5d',
                subtitle: '#707070',
@ -91,6 +92,7 @@ export default class ThemeManager {
                tabIcon: "#6d6d6d",
                card: "rgb(18, 18, 18)",
                dividerBackground: '#222222',
+                ripple: "rgba(255,255,255,0.2)",
                textDisabled: '#5b5b5b',
                icon: '#b3b3b3',
                subtitle: '#aaaaaa',
--- a/src/navigation/DrawerNavigator.js
+++ b/src/navigation/DrawerNavigator.js
@ -13,7 +13,6 @@ import TetrisScreen from "../screens/Tetris/TetrisScreen";
 import DebugScreen from '../screens/About/DebugScreen';
 import Sidebar from "../components/Sidebar/Sidebar";
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
-import HeaderButton from "../components/Custom/HeaderButton";
 import i18n from "i18n-js";
 import LoginScreen from "../screens/Amicale/LoginScreen";
 import ProfileScreen from "../screens/Amicale/ProfileScreen";
@ -21,6 +20,8 @@ import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import VoteScreen from "../screens/Amicale/VoteScreen";
+import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";

 const defaultScreenOptions = {
    gestureEnabled: true,
@ -30,7 +31,9 @@ const defaultScreenOptions = {

 function getDrawerButton(navigation: Object) {
    return (
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
+        <MaterialHeaderButtons left={true}>
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
+        </MaterialHeaderButtons>
    );
 }

@ -275,6 +278,31 @@ function VoteStackComponent() {
    );
 }

+const AmicaleContactStack = createStackNavigator();
+
+function AmicaleContactStackComponent() {
+    return (
+        <AmicaleContactStack.Navigator
+            initialRouteName="amicale-contact"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <AmicaleContactStack.Screen
+                name="amicale-contact"
+                component={AmicaleContactScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: i18n.t('screens.amicaleAbout'),
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </AmicaleContactStack.Navigator>
+    );
+}
+
+
 const ClubStack = createStackNavigator();

 function ClubStackComponent() {
@ -310,7 +338,7 @@ function ClubStackComponent() {
                component={ClubAboutScreen}
                options={({navigation}) => {
                    return {
-                        title: i18n.t('screens.about'),
+                        title: i18n.t('screens.clubsAbout'),
                        ...TransitionPresets.ModalSlideFromBottomIOS,
                    };
                }}
@ -339,7 +367,8 @@ export default class DrawerNavigator extends React.Component<Props> {
    constructor(props: Object) {
        super(props);

-        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute} defaultData={props.defaultData}/>
+        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute}
+                                                      defaultData={props.defaultData}/>
    }

    render() {
@ -397,6 +426,10 @@ export default class DrawerNavigator extends React.Component<Props> {
                    name="vote"
                    component={VoteStackComponent}
                />
+                <Drawer.Screen
+                    name="amicale-contact"
+                    component={AmicaleContactStackComponent}
+                />
            </Drawer.Navigator>
        );
    }
--- a/src/navigation/MainTabNavigator.js
+++ b/src/navigation/MainTabNavigator.js
@ -13,11 +13,11 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import HeaderButton from "../components/Custom/HeaderButton";
 import {withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";


 const TAB_ICONS = {
@ -36,7 +36,9 @@ const defaultScreenOptions = {

 function getDrawerButton(navigation: Object) {
    return (
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
+        <MaterialHeaderButtons left={true}>
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
+        </MaterialHeaderButtons>
    );
 }

@ -231,7 +233,7 @@ type Props = {
    defaultData: Object
 }

-class TabNavigator extends React.Component<Props>{
+class TabNavigator extends React.Component<Props> {

    createHomeStackComponent: Object;

--- a/src/screens/Amicale/AmicaleContactScreen.js
+++ b/src/screens/Amicale/AmicaleContactScreen.js
@ -0,0 +1,136 @@
+// @flow
+
+import * as React from 'react';
+import {FlatList, Image, View} from 'react-native';
+import {Card, List, Text, withTheme} from 'react-native-paper';
+import i18n from 'i18n-js';
+import {Linking} from "expo";
+
+type Props = {};
+
+type State = {};
+
+/**
+ * Class defining a planning event information page.
+ */
+class AmicaleContactScreen extends React.Component<Props, State> {
+
+
+    CONTACT_DATASET = [
+        {
+            name: i18n.t("amicaleAbout.roles.interSchools"),
+            email: "inter.ecoles@amicale-insat.fr",
+            icon: "share-variant"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.culture"),
+            email: "culture@amicale-insat.fr",
+            icon: "book"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.animation"),
+            email: "animation@amicale-insat.fr",
+            icon: "emoticon"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.clubs"),
+            email: "clubs@amicale-insat.fr",
+            icon: "account-group"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.event"),
+            email: "evenements@amicale-insat.fr",
+            icon: "calendar-range"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.tech"),
+            email: "technique@amicale-insat.fr",
+            icon: "settings"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.communication"),
+            email: "amicale@amicale-insat.fr",
+            icon: "comment-account"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.intraSchools"),
+            email: "intra.ecoles@amicale-insat.fr",
+            icon: "school"
+        },
+        {
+            name: i18n.t("amicaleAbout.roles.publicRelations"),
+            email: "rp@amicale-insat.fr",
+            icon: "account-tie"
+        },
+    ];
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    keyExtractor = (item: Object) => item.email;
+
+    getChevronIcon = (props: Object) => <List.Icon {...props} icon={'chevron-right'}/>;
+
+    renderItem = ({item}: Object) => {
+        const onPress = () => Linking.openURL('mailto:' + item.email);
+        return <List.Item
+            title={item.name}
+            description={item.email}
+            left={(props) => <List.Icon {...props} icon={item.icon}/>}
+            right={this.getChevronIcon}
+            onPress={onPress}
+        />
+    };
+
+    getScreen = () => {
+        return (
+            <View>
+                <View style={{
+                    width: '100%',
+                    height: 100,
+                    marginTop: 20,
+                    marginBottom: 20,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}>
+                    <Image
+                        source={require('../../../assets/amicale.png')}
+                        style={{flex: 1, resizeMode: "contain"}}
+                        resizeMode="contain"/>
+                </View>
+                <Card style={{margin: 5}}>
+                    <Card.Title
+                        title={i18n.t("amicaleAbout.title")}
+                        subtitle={i18n.t("amicaleAbout.subtitle")}
+                        left={props => <List.Icon {...props} icon={'information'}/>}
+                    />
+                    <Card.Content>
+                        <Text>{i18n.t("amicaleAbout.message")}</Text>
+                        {/*$FlowFixMe*/}
+                        <FlatList
+                            data={this.CONTACT_DATASET}
+                            keyExtractor={this.keyExtractor}
+                            renderItem={this.renderItem}
+                        />
+                    </Card.Content>
+                </Card>
+            </View>
+        );
+    };
+
+    render() {
+        return (
+            //$FlowFixMe
+            <FlatList
+                data={[{key: "1"}]}
+                renderItem={this.getScreen}
+            />
+        );
+    }
+}
+
+export default withTheme(AmicaleContactScreen);
--- a/src/screens/Amicale/Clubs/ClubAboutScreen.js
+++ b/src/screens/Amicale/Clubs/ClubAboutScreen.js
@ -1,9 +1,10 @@
 // @flow

 import * as React from 'react';
-import {ScrollView} from 'react-native';
-import {Linking} from "expo";
-import {Text, withTheme} from 'react-native-paper';
+import {Image, ScrollView, View} from 'react-native';
+import {Card, List, Text, withTheme} from 'react-native-paper';
+import i18n from 'i18n-js';
+import Autolink from "react-native-autolink";

 type Props = {
 };
@ -11,9 +12,7 @@ type Props = {
 type State = {
 };

-function openWebLink(event, link) {
-    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
-}
+const CONTACT_LINK = 'clubs@amicale-insat.fr';

 /**
 * Class defining a planning event information page.
@ -30,7 +29,34 @@ class ClubAboutScreen extends React.Component<Props, State> {
    render() {
        return (
            <ScrollView style={{padding: 5}}>
-                <Text>TEXT</Text>
+                <View style={{
+                    width: '100%',
+                    height: 100,
+                    marginTop: 20,
+                    marginBottom: 20,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}>
+                    <Image
+                        source={require('../../../../assets/amicale.png')}
+                        style={{flex: 1, resizeMode: "contain"}}
+                        resizeMode="contain"/>
+                </View>
+                <Text>{i18n.t("clubs.about.text")}</Text>
+                <Card style={{margin: 5}}>
+                    <Card.Title
+                        title={i18n.t("clubs.about.title")}
+                        subtitle={i18n.t("clubs.about.subtitle")}
+                        left={props => <List.Icon {...props} icon={'information'}/>}
+                    />
+                    <Card.Content>
+                        <Text>{i18n.t("clubs.about.message")}</Text>
+                        <Autolink
+                            text={CONTACT_LINK}
+                            component={Text}
+                        />
+                    </Card.Content>
+                </Card>
            </ScrollView>
        );
    }
--- a/src/screens/Amicale/Clubs/ClubListScreen.js
+++ b/src/screens/Amicale/Clubs/ClubListScreen.js
@ -8,7 +8,7 @@ import i18n from "i18n-js";
 import ClubListItem from "../../../components/Lists/ClubListItem";
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
 import ClubListHeader from "../../../components/Lists/ClubListHeader";
-import HeaderButton from "../../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton";

 type Props = {
    navigation: Object,
@ -72,7 +72,9 @@ class ClubListScreen extends React.Component<Props, State> {
     */
    getHeaderButtons = () => {
        const onPress = () => this.props.navigation.navigate("club-about");
-        return <HeaderButton icon={'information'} onPress={onPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName="information" onPress={onPress}/>
+        </MaterialHeaderButtons>;
    };

    /**
--- a/src/screens/Amicale/ProfileScreen.js
+++ b/src/screens/Amicale/ProfileScreen.js
@ -5,9 +5,9 @@ import {FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {openBrowser} from "../../utils/WebBrowser";
-import HeaderButton from "../../components/Custom/HeaderButton";
 import i18n from 'i18n-js';
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";

 type Props = {
    navigation: Object,
@ -47,7 +47,9 @@ class ProfileScreen extends React.Component<Props, State> {

    hideDisconnectDialog = () => this.setState({dialogVisible: false});

-    getHeaderButton = () => <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
+    getHeaderButton = () => <MaterialHeaderButtons>
+        <Item title="logout" iconName="logout" onPress={this.showDisconnectDialog}/>
+    </MaterialHeaderButtons>;

    getScreen = (data: Object) => {
        this.data = data[0];
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@ -12,9 +12,9 @@ import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardI
 import {stringToDate} from "../utils/Planning";
 import {openBrowser} from "../utils/WebBrowser";
 import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
-import HeaderButton from "../components/Custom/HeaderButton";
 import ConnectionManager from "../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 // import DATA from "../dashboard_data.json";


@ -96,11 +96,9 @@ class HomeScreen extends React.Component<Props> {
            ? "account"
            : "login";
        const onPress = () => this.props.navigation.navigate(screen);
-        return <HeaderButton
-            icon={icon}
-            onPress={onPress}
-            color={this.isLoggedIn ? undefined : this.colors.primary}
-        />;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName={icon} onPress={onPress}/>
+        </MaterialHeaderButtons>;
    };

    onProxiwashClick = () => this.props.navigation.navigate('proxiwash');
--- a/src/screens/Proximo/ProximoAboutScreen.js
+++ b/src/screens/Proximo/ProximoAboutScreen.js
@ -46,7 +46,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                        left={props => <List.Icon {...props} icon={'cash'}/>}
                    />
                    <Card.Content>
-                        <Paragraph>18{i18n.t('proximoScreen.paymentMethodsDescription')}</Paragraph>
+                        <Paragraph>{i18n.t('proximoScreen.paymentMethodsDescription')}</Paragraph>
                    </Card.Content>
                </Card>
            </ScrollView>
--- a/src/screens/Proximo/ProximoListScreen.js
+++ b/src/screens/Proximo/ProximoListScreen.js
@ -7,7 +7,7 @@ import CustomModal from "../../components/Custom/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../../utils/Search";
 import ProximoListItem from "../../components/Lists/ProximoListItem";
-import HeaderButton from "../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";

 function sortPrice(a, b) {
    return a.price - b.price;
@ -102,7 +102,9 @@ class ProximoListScreen extends React.Component<Props, State> {
     * @return {*}
     */
    getSortMenuButton = () => {
-        return <HeaderButton icon="sort" onPress={this.onSortMenuPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName="sort" onPress={this.onSortMenuPress}/>
+        </MaterialHeaderButtons>;
    };

    /**
--- a/src/screens/Proximo/ProximoMainScreen.js
+++ b/src/screens/Proximo/ProximoMainScreen.js
@ -5,7 +5,7 @@ import {View} from 'react-native'
 import i18n from "i18n-js";
 import WebSectionList from "../../components/Lists/WebSectionList";
 import {List, withTheme} from 'react-native-paper';
-import HeaderButton from "../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";

 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
 const LIST_ITEM_HEIGHT = 84;
@ -111,15 +111,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
     * @return {*}
     */
    getHeaderButtons() {
-        return (
-            <View
-                style={{
-                    flexDirection: 'row',
-                }}>
-                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
-                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
-            </View>
-        );
+        return <MaterialHeaderButtons>
+            <Item title="magnify" iconName="magnify" onPress={this.onPressSearchBtn}/>
+            <Item title="information" iconName="information" onPress={this.onPressAboutBtn}/>
+        </MaterialHeaderButtons>;
    }

    /**
--- a/src/screens/Proxiwash/ProxiwashScreen.js
+++ b/src/screens/Proxiwash/ProxiwashScreen.js
@ -8,11 +8,11 @@ import * as Notifications from "../../utils/Notifications";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import * as Expo from "expo";
 import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper';
-import HeaderButton from "../../components/Custom/HeaderButton";
 import ProxiwashListItem from "../../components/Lists/ProxiwashListItem";
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
 import CustomModal from "../../components/Custom/CustomModal";
 import AprilFoolsManager from "../../managers/AprilFoolsManager";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";

 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";

@ -152,7 +152,9 @@ class ProxiwashScreen extends React.Component<Props, State> {
     * @return {*}
     */
    getAboutButton() {
-        return <HeaderButton icon={'information'} onPress={this.onAboutPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="information" iconName="information" onPress={this.onAboutPress}/>
+        </MaterialHeaderButtons>;
    }

    /**
--- a/src/screens/SettingsScreen.js
+++ b/src/screens/SettingsScreen.js
@ -108,11 +108,11 @@ export default class SettingsScreen extends React.Component<Props, State> {
                onValueChange={this.onStartScreenPickerValueChange}
                value={this.state.startScreenPickerSelected}
            >
-                <ToggleButton icon="shopping" value="Proximo"/>
-                <ToggleButton icon="calendar-range" value="Planning"/>
-                <ToggleButton icon="triangle" value="Home"/>
-                <ToggleButton icon="washing-machine" value="Proxiwash"/>
-                <ToggleButton icon="timetable" value="Planex"/>
+                <ToggleButton icon="shopping" value="proximo"/>
+                <ToggleButton icon="calendar-range" value="planning"/>
+                <ToggleButton icon="triangle" value="home"/>
+                <ToggleButton icon="washing-machine" value="proxiwash"/>
+                <ToggleButton icon="timetable" value="planex"/>
            </ToggleButton.Row>
        );
    }
--- a/src/screens/Tetris/TetrisScreen.js
+++ b/src/screens/Tetris/TetrisScreen.js
@ -6,9 +6,9 @@ import {IconButton, Text, withTheme} from 'react-native-paper';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import GameLogic from "./GameLogic";
 import Grid from "./components/Grid";
-import HeaderButton from "../../components/Custom/HeaderButton";
 import Preview from "./components/Preview";
 import i18n from "i18n-js";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";

 type Props = {
    navigation: Object,
@ -62,14 +62,9 @@ class TetrisScreen extends React.Component<Props, State> {
    }

    getRightButton() {
-        return (
-            <View
-                style={{
-                    flexDirection: 'row',
-                }}>
-                <HeaderButton icon={'pause'} onPress={() => this.togglePause()}/>
-            </View>
-        );
+        return <MaterialHeaderButtons>
+            <Item title="pause" iconName="pause" onPress={() => this.togglePause()}/>
+        </MaterialHeaderButtons>;
    }

    /**
--- a/translations/en.json
+++ b/translations/en.json
@ -4,6 +4,8 @@
    "planning": "Planning",
    "planningDisplayScreen": "Event details",
    "clubDisplayScreen": "Club details",
+    "clubsAbout": "Clubs",
+    "amicaleAbout": "The Amicale",
    "proxiwash": "Proxiwash",
    "proximo": "Proximo",
    "proximoArticles": "Articles",
@ -270,7 +272,29 @@
    "managersSubtitle": "These people make the club live",
    "managersUnavailable": "This club has no one :(",
    "categories": "Categories",
-    "categoriesFilterMessage": "Click on a category to filter the list"
+    "categoriesFilterMessage": "Click on a category to filter the list",
+    "about": {
+      "text": "The clubs, making the campus live, with more than sixty clubs offering various activities! From the philosophy club to the PABI (Production Artisanale de Bière Insaienne), without forgetting the multiple music and dance clubs, you will surely find an activity that suits you!",
+      "title": "A question ?",
+      "subtitle": "Ask the Amicale",
+      "message": "You have a question concerning the clubs?\nYou want to revive or create a club?\nContact the Amicale at the following address:"
+    }
+  },
+  "amicaleAbout": {
+    "title": "A question ?",
+    "subtitle": "Ask the Amicale",
+    "message": "You want to revive a club?\nYou want to start a new project?\nHere are al the contacts you need! Do not hesitate to write a mail or send a message to the Amicale's Facebook page!",
+    "roles": {
+      "interSchools": "Inter Schools",
+      "culture": "Culture",
+      "animation": "Animation",
+      "clubs": "Clubs",
+      "event": "Events",
+      "tech" : "Technique",
+      "communication": "Communication",
+      "intraSchools": "Alumni / IAT",
+      "publicRelations": "Public Relations"
+    }
  },
  "voteScreen": {
    "select": {
@ -304,8 +328,8 @@
    "title": {
      "title": "The Elections",
      "subtitle": "Why your vote is important",
-      "paragraph1" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus porttitor suscipit. Quisque hendrerit, quam id vestibulum vestibulum, lorem nisi hendrerit nisi, a eleifend sapien diam ut elit. Curabitur sit amet vulputate lectus. Donec semper cursus sapienvel finibus.",
-      "paragraph2" : "Sed et venenatis turpis. Fusce malesuada magna urna, sed vehicula sem luctus in. Vivamus faucibus vel eros a ultricies. In sed laoreet ante, luctus mattis tellus. Etiam vitae ipsum sagittis, consequat purus sed, blandit risus."
+      "paragraph1" : "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09",
+      "paragraph2" : "Note: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09"
    }
  },
  "dialog": {
--- a/translations/fr.json
+++ b/translations/fr.json
@ -4,6 +4,8 @@
    "planning": "Planning",
    "planningDisplayScreen": "Détails",
    "clubDisplayScreen": "Détails",
+    "clubsAbout": "Les Clubs",
+    "amicaleAbout": "L' Amicale",
    "proxiwash": "Proxiwash",
    "proximo": "Proximo",
    "proximoArticles": "Articles",
@ -270,7 +272,29 @@
    "managersSubtitle": "Ces personnes font vivre le club",
    "managersUnavailable": "Ce club est tout seul :(",
    "categories": "Catégories",
-    "categoriesFilterMessage": "Cliquez sur une catégorie pour filtrer la liste"
+    "categoriesFilterMessage": "Cliquez sur une catégorie pour filtrer la liste",
+    "about": {
+      "text": "Les clubs, c'est ce qui fait vivre le campus au quotidien, plus d'une soixantaine de clubs qui proposent des activités diverses et variées ! Du club Philosophie au PABI (Production Artisanale de Bière Insaienne), en passant par les multiples clubs de musique et de danse, vous trouverez forcément une activité qui vous permettra de vous épanouir sur le campus !",
+      "title": "Une question ?",
+      "subtitle": "Posez vos questions à l'Amicale",
+      "message": "Vous avez question concernant les clubs ?\nVous voulez reprendre ou créer un club ?\nContactez les responsables au mail ci-dessous :"
+    }
+  },
+  "amicaleAbout": {
+    "title": "Une Question ?",
+    "subtitle": "Posez vos questions à l'Amicale",
+    "message": "Vous voulez reprendre un club ?\nVous voulez vous lancer dans un projet ?\nVoici tous les contacts de l'amicale ! N'hésitez pas à nous écrire par mail ou sur la page facebook de l'Amicale !",
+    "roles": {
+      "interSchools": "Inter Écoles",
+      "culture": "Culture",
+      "animation": "Animation",
+      "clubs": "Clubs",
+      "event": "Événements",
+      "tech" : "Technique",
+      "communication": "Communication",
+      "intraSchools": "Alumni / IAT",
+      "publicRelations": "Relations Publiques"
+    }
  },
  "voteScreen": {
    "select": {
@ -304,8 +328,8 @@
    "title": {
      "title": "Les Élections",
      "subtitle": "Pourquoi votre vote est important",
-      "paragraph1" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus porttitor suscipit. Quisque hendrerit, quam id vestibulum vestibulum, lorem nisi hendrerit nisi, a eleifend sapien diam ut elit. Curabitur sit amet vulputate lectus. Donec semper cursus sapienvel finibus.",
-      "paragraph2" : "Sed et venenatis turpis. Fusce malesuada magna urna, sed vehicula sem luctus in. Vivamus faucibus vel eros a ultricies. In sed laoreet ante, luctus mattis tellus. Etiam vitae ipsum sagittis, consequat purus sed, blandit risus."
+      "paragraph1" : "Les élections de l'amicale, c'est le moment pour vous de choisir la prochaine équipe qui portera les différents projets du campus, qui soutiendra les organisations de vos événements favoris, qui vous proposera des animations tout au long de l'année, et qui poussera vos idées à l’administration pour que la vie de campus soit des plus riches !\nAlors à vous de jouer ! \uD83D\uDE09",
+      "paragraph2" : "NB : Si par cas il n'y a qu'une liste qui se présente, il est important que tout le monde vote, afin qui la liste puisse montrer à l’administration que les INSAiens la soutiennent ! Ça compte toujours pour les décisions difficiles ! \uD83D\uDE09"
    }
  },
  "dialog": {
Author	SHA1	Message	Date
Arnaud Vergnet	f3b7bafdca	Use external library to render header buttons	2020-04-11 21:47:09 +02:00
Arnaud Vergnet	24fb1e3f9b	Improved html component to ignore text styles	2020-04-10 23:06:13 +02:00
Arnaud Vergnet	db1d5166c6	Added amicale contact page	2020-04-10 17:10:10 +02:00
Arnaud Vergnet	0f8e028159	Improved club about screen	2020-04-10 16:20:52 +02:00
Arnaud Vergnet	f9f27dd7b7	Updated translations	2020-04-10 16:02:22 +02:00
Arnaud Vergnet	369756207f	Use lower case default screens to match actual route names	2020-04-10 14:35:33 +02:00
Arnaud Vergnet	7216789cfc	Fixed typo	2020-04-10 14:33:12 +02:00
Arnaud Vergnet	5b994aab95	Fixed ios icon position	2020-04-10 14:25:50 +02:00