Improved ProxiwashScreen UI

screens/Proxiwash/ProxiwashScreen.js

@@ -356,25 +356,39 @@ class ProxiwashScreen extends React.Component<Props, State> {
 
     getRenderSectionHeader({section}: Object) {
         const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
-        const subtitle = this.getMachineAvailableNumber(isDryer) + ' ' + i18n.t('proxiwashScreen.numAvailable');
+        const nbAvailable = this.getMachineAvailableNumber(isDryer);
+        const subtitle = nbAvailable + ' ' + ((nbAvailable <= 1) ? i18n.t('proxiwashScreen.numAvailable')
+            : i18n.t('proxiwashScreen.numAvailablePlural'));
         return (
-            <Card style={{
+            <View style={{
+                flexDirection: 'row',
                 marginLeft: 5,
                 marginRight: 5,
                 marginBottom: 10,
                 marginTop: 20,
-                elevation: 4,
             }}>
-                <Card.Title
+                <Avatar.Icon
-                    title={section.title}
+                    icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                    subtitle={subtitle}
+                    color={this.colors.primary}
-                    left={() => <Avatar.Icon
+                    style={{backgroundColor: 'transparent'}}
-                        icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                        color={this.colors.primary}
-                        style={{backgroundColor: 'transparent'}}
-                    />}
                 />
-            </Card>
+                <View style={{
+                    justifyContent: 'center',
+                }}>
+                    <Text style={{
+                        fontSize: 20,
+                        fontWeight: 'bold',
+                    }}>
+                        {section.title}
+                    </Text>
+
+                    <Text style={{
+                        color: this.colors.subtitle,
+                    }}>
+                        {subtitle}
+                    </Text>
+                </View>
+            </View>
         );
     }
 

translations/en.json

@@ -169,6 +169,7 @@
     "tips": "Tips",
     "enableNotificationsTip": "Click on a running machine to enable notifications",
     "numAvailable": "available",
+    "numAvailablePlural": "available",
     "modal": {
       "enableNotifications": "Notify me",
       "disableNotifications": "Stop notifications",

translations/fr.json

@@ -160,7 +160,7 @@
     "washersTariff": "3€ la machine + 0.80€ avec la lessive.",
     "dryersTariff": "0.35€ pour 5min de sèche linge.",
     "paymentMethods": "Moyens de Paiement",
-    "paymentMethodsDescription" : "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée.",
+    "paymentMethodsDescription": "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée.",
     "washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
     "washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
     "dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
@@ -168,7 +168,8 @@
     "procedure": "Procédure",
     "tips": "Conseils",
     "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications",
-    "numAvailable": "disponibles",
+    "numAvailable": "disponible",
+    "numAvailablePlural": "disponibles",
     "modal": {
       "enableNotifications": "Me Notifier",
       "disableNotifications": "Désactiver les  notifications",

utils/ThemeManager.js

@@ -31,6 +31,7 @@ export default class ThemeManager {
                 dividerBackground: '#e2e2e2',
                 textDisabled: '#c1c1c1',
                 icon: '#5d5d5d',
+                subtitle: '#707070',
                 success: "#5cb85c",
                 warning: "#f0ad4e",
                 danger: "#d9534f",
@@ -70,6 +71,7 @@ export default class ThemeManager {
                 dividerBackground: '#222222',
                 textDisabled: '#5b5b5b',
                 icon: '#b3b3b3',
+                subtitle: '#aaaaaa',
                 success: "#5cb85c",
                 warning: "#f0ad4e",
                 danger: "#d9534f",