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
-                    title={section.title}
-                    subtitle={subtitle}
-                    left={() => <Avatar.Icon
+                <Avatar.Icon
                     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

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