Style improvements

src/App.tsx

@@ -50,6 +50,7 @@ import { checkVersion, CheckVersionResponse } from 'react-native-check-version';
 import AppUpdateDialog from './components/modal/app-update/AppUpdateDialog';
 import AddCar from './screens/cars/AddCar';
 import ChargingStationQrCode from './screens/home/ChargingStationQrCode';
+import ThemeManager from './custom-theme/ThemeManager';
 
 // Init i18n
 I18nManager.initialize();
@@ -423,7 +424,6 @@ function createAppDrawerNavigator(props: BaseProps) {
         swipeEdgeWidth: 20,
         unmountOnBlur: true
       })}
-      drawerStyle={appStyles.sideMenu}
       backBehavior={'history'}
       drawerPosition="left"
       drawerContent={(drawerProps) => <Sidebar {...drawerProps} />}>
@@ -566,7 +566,7 @@ export default class App extends React.Component<Props, State> {
           {showAppUpdateDialog && (
             <AppUpdateDialog appVersion={this.appVersion} close={() => this.setState({ showAppUpdateDialog: false })} />
           )}
-          <StatusBar barStyle={commonColors.statusBar} translucent backgroundColor="transparent" />
+          <StatusBar barStyle={ThemeManager.getInstance()?.isThemeTypeIsDark() ? 'light-content' : 'dark-content'} translucent backgroundColor="transparent" />
           {createRootNavigator(this, this.state.navigationState)}
         </RootSiblingParent>
       )

src/components/fab/FabComponentStyles.tsx

@@ -0,0 +1,44 @@
+import deepmerge from 'deepmerge';
+import { StyleSheet } from 'react-native';
+import ResponsiveStylesSheet from 'react-native-responsive-stylesheet';
+import { ScaledSheet } from 'react-native-size-matters';
+
+import Utils from '../../utils/Utils';
+
+export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
+  const commonColor = Utils.getCurrentCommonColor();
+  const commonStyles = ScaledSheet.create({
+    fab: {
+      width: '55@s',
+      height: '55@s',
+      borderRadius: '55@s',
+      alignItems: 'center',
+      justifyContent: 'center',
+      bottom: 0,
+      right: 0,
+      zIndex: 1,
+      elevation: 4,
+      backgroundColor: commonColor.primary,
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.23,
+      shadowRadius: 3.62
+    },
+    fabIcon: {
+      fontSize: '18@s',
+      color: commonColor.light
+    },
+    placedFab: {
+      margin: '14@s',
+      position: 'absolute'
+    }
+  });
+  const portraitStyles = {};
+  const landscapeStyles = {};
+  return ResponsiveStylesSheet.createOriented({
+    landscape: deepmerge(commonStyles, landscapeStyles) as StyleSheet.NamedStyles<any>,
+    portrait: deepmerge(commonStyles, portraitStyles) as StyleSheet.NamedStyles<any>
+  });
+}

src/custom-theme/customCommonColor.tsx

@@ -18,6 +18,8 @@ export const buildCommonColor = (currentTheme: ThemeDefinition) => ({
   yellow: '#FFBE59',
   purple: 'purple',
 
+  mapClusterBorder: currentTheme.mapClusterBorder,
+
   info: currentTheme.info,
   brandInfo: palette.info,
   brandInfoLight: palette.infoLight,

src/custom-theme/theme/theme-dark.tsx

@@ -57,5 +57,6 @@ export default {
   selectFieldBackgroundColor: '#1d1d1d',
   selectDropdownBackgroundColor: '#1d1d1d',
   listItemBackground: '#1d1d1d',
-  listHeaderBackground: '#1d1d1d'
+  listHeaderBackground: '#1d1d1d',
+  mapClusterBorder: dark
 };

src/custom-theme/theme/theme-light.tsx

@@ -33,5 +33,6 @@ export default {
   selectFieldBackgroundColor: '#eeeeee',
   selectDropdownBackgroundColor: '#eeeeee',
   listHeaderBackground: palette.light,
-  listItemBackground: palette.light
+  listItemBackground: palette.light,
+  mapClusterBorder: palette.primaryDark
 };

src/screens/cars/Cars.tsx

@@ -1,7 +1,7 @@
 import I18n from 'i18n-js';
-import { Container, Spinner } from 'native-base';
+import { Container, Icon, Spinner } from 'native-base';
 import React from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import CarComponent from '../../components/car/CarComponent';
 import HeaderComponent from '../../components/header/HeaderComponent';
@@ -17,7 +17,7 @@ import computeTransactionStyles from '../transactions/TransactionsStyles'
 
 import SelectableList, { SelectableProps, SelectableState } from '../base-screen/SelectableList';
 import Orientation from 'react-native-orientation-locker';
-import { FAB } from 'react-native-paper';
+import computeFabStyles from '../../components/fab/FabComponentStyles';
 
 interface State extends SelectableState<Car> {
   cars?: Car[];
@@ -147,11 +147,14 @@ export default class Cars extends SelectableList<Car> {
     const style = computeStyleSheet();
     const { cars, count, skip, limit, refreshing, loading } = this.state;
     const { navigation, selectionMode, isModal } = this.props;
-    const commonColors = Utils.getCurrentCommonColor();
+    const fabStyles = computeFabStyles();
     return (
       <Container style={transactionStyles.container}>
         {!isModal && (
-          <FAB color={commonColors.light} onPress={() => navigation.navigate('CarsNavigator', { screen: 'AddCar' })} icon={'plus'} style={style.fab} />
+          <TouchableOpacity
+            onPress={() => navigation.navigate('CarsNavigator', { screen: 'AddCar' })} style={[fabStyles.fab, fabStyles.placedFab]}>
+            <Icon style={fabStyles.fabIcon} type={'MaterialCommunityIcons'} name={'plus'} />
+          </TouchableOpacity>
         )}
         <HeaderComponent
           title={this.buildHeaderTitle()}

src/screens/charging-stations/list/ChargingStations.tsx

@@ -28,8 +28,9 @@ import Utils from '../../../utils/Utils';
 import BaseAutoRefreshScreen from '../../base-screen/BaseAutoRefreshScreen';
 import ChargingStationsFilters, { ChargingStationsFiltersDef } from './ChargingStationsFilters';
 import computeStyleSheet from './ChargingStationsStyles';
-import { FAB } from 'react-native-paper';
-import standardLayout from '../../../../assets/map/standard.png';
+import computeFabStyles from '../../../components/fab/FabComponentStyles';
+import standardDarkLayout from '../../../../assets/map/standard-dark.png';
+import standardLightLayout from '../../../../assets/map/standard-light.png';
 import satelliteLayout from '../../../../assets/map/satellite.png';
 
 
@@ -79,7 +80,7 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
       showMap: true,
       visible: false,
       chargingStationSelected: null,
-      satelliteMap: true
+      satelliteMap: false
     };
   }
 
@@ -378,22 +379,24 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
       Utils.containsGPSCoordinates(chargingStation.coordinates)
     );
     const isDarkModeEnabled = ThemeManager.getInstance()?.isThemeTypeIsDark();
+    const fabStyles = computeFabStyles();
     return (
       <Container style={style.container}>
         <View style={style.fabContainer}>
           {showMap && (
-            <TouchableOpacity style={style.fab} onPress={() => this.setState({ satelliteMap: !satelliteMap })}>
+            <TouchableOpacity style={fabStyles.fab} onPress={() => this.setState({ satelliteMap: !satelliteMap })}>
               <Image
-                source={satelliteMap ? standardLayout : satelliteLayout}
-                style={style.imageStyle as ImageStyle}
+                source={satelliteMap ? isDarkModeEnabled ? standardDarkLayout : standardLightLayout : satelliteLayout}
+                style={[style.imageStyle, satelliteMap && style.outlinedImage] as ImageStyle}
               />
             </TouchableOpacity>
           )}
-          <FAB
-            icon={showMap ? 'format-list-bulleted' : 'map'}
+          <TouchableOpacity
             style={style.fab}
             onPress={() => this.setState({ showMap: !this.state.showMap })}
-          />
+          >
+            <Icon style={fabStyles.fabIcon} type={'MaterialCommunityIcons'} name={showMap ? 'format-list-bulleted' : 'map'} />
+          </TouchableOpacity>
         </View>
         <HeaderComponent
           ref={(headerComponent: HeaderComponent) => this.setHeaderComponent(headerComponent)}

src/screens/charging-stations/list/ChargingStationsStyles.tsx

@@ -55,27 +55,36 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       zIndex: 1,
       bottom: 0,
       right: 0,
-      margin: '14@s',
-      flexDirection: 'column'
+      margin: '12@s',
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: 0
     },
     imageStyle: {
       height: '100%',
       width: '100%',
       padding: 0,
-      borderRadius: '60@s'
+      borderRadius: '60@s',
+    },
+    outlinedImage: {
+      borderColor: commonColor.listItemBackground,
+      borderWidth: 2
     },
     cluster: {
-      backgroundColor: commonColor.containerBgColor,
+      backgroundColor: commonColor.listItemBackground,
       padding: '10@s',
       width: '50@s',
       height: '50@s',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50@s',
-      borderWidth: 1,
-      borderColor: commonColor.textColor,
+      borderWidth: 2,
+      borderColor: commonColor.mapClusterBorder,
       zIndex: 1
     },
+    outlinedCluster: {
+      borderColor: commonColor.mapClusterBorder
+    },
     text: {
       color: commonColor.textColor,
       fontSize: '14@s'

src/screens/home/ChargingStationQrCode.tsx

@@ -3,7 +3,7 @@ import base64 from 'base-64';
 import I18n from 'i18n-js';
 import { Container } from 'native-base';
 import React from 'react';
-import { Alert } from 'react-native';
+import { Alert, Text, View } from 'react-native';
 import Orientation from 'react-native-orientation-locker';
 import QRCodeScanner from 'react-native-qrcode-scanner';
 
@@ -17,6 +17,7 @@ import SecuredStorage from '../../utils/SecuredStorage';
 import Utils from '../../utils/Utils';
 import BaseScreen from '../base-screen/BaseScreen';
 import Configuration from '../../config/Configuration';
+import { buildCommonColor } from '../../custom-theme/customCommonColor';
 
 export interface Props extends BaseProps {
   currentTenantSubDomain: string;
@@ -188,28 +189,19 @@ export default class ChargingStationQrCode extends BaseScreen<State, Props> {
   }
 
   public render() {
-    const { navigation } = this.props;
     const { activateQrCode } = this.state;
+    const commonColor = Utils.getCurrentCommonColor();
     return (
       <Container>
         <HeaderComponent
           navigation={this.props.navigation}
           title={I18n.t('qrCode.scanChargingStationQrCodeTitle')}
-          leftAction={() => {
-            this.close();
-            return true;
-          }}
-          leftActionIcon={'navigate-before'}
-          hideHomeAction
-          rightAction={() => {
-            navigation.dispatch(DrawerActions.openDrawer());
-            return true;
-          }}
-          rightActionIcon={'menu'}
+          backArrow={true}
         />
-        {activateQrCode && (
+       {activateQrCode && (
           <QRCodeScanner
             cameraProps={{ captureAudio: false }}
+            markerStyle={{borderColor: commonColor.primaryLight}}
             showMarker
             reactivate
             reactivateTimeout={1000}

src/screens/payment-methods/PaymentMethods.tsx

@@ -20,7 +20,7 @@ import { BillingSettings } from '../../types/Setting';
 import SelectableList, { SelectableState } from '../base-screen/SelectableList';
 import DialogModal from '../../components/modal/DialogModal';
 import computeModalCommonStyles from '../../components/modal/ModalCommonStyle';
-import { FAB } from 'react-native-paper';
+import computeFabStyles from '../../components/fab/FabComponentStyles';
 
 export interface Props extends BaseProps {}
 
@@ -137,16 +137,13 @@ export default class PaymentMethods extends SelectableList<BillingPaymentMethod>
     const style = computeStyleSheet();
     const { paymentMethods, count, skip, limit, refreshing, loading, billingSettings, paymentMethodToBeDeleted } = this.state;
     const { navigation } = this.props;
-    const commonColors = Utils.getCurrentCommonColor();
+    const fabStyles = computeFabStyles();
     return (
       <Container style={style.container}>
         {billingSettings?.stripe?.publicKey && (
-          <FAB
-            color={commonColors.light}
-            onPress={() => navigation.navigate('StripePaymentMethodCreationForm', { billingSettings })}
-            icon={'plus'}
-            style={style.fab}
-          />
+          <TouchableOpacity onPress={() => navigation.navigate('StripePaymentMethodCreationForm', { billingSettings })} style={[fabStyles.fab, fabStyles.placedFab]}>
+            <Icon type={'MaterialCommunityIcons'} name={'plus'} style={fabStyles.fabIcon} />
+          </TouchableOpacity>
         )}
         <HeaderComponent
           title={this.buildHeaderTitle()}

src/screens/tenants/Tenants.tsx

@@ -17,7 +17,7 @@ import computeTenantStyleSheet from './TenantsStyle';
 import DialogModal from '../../components/modal/DialogModal';
 import computeListItemCommonStyle from '../../components/list/ListItemCommonStyle';
 import TenantComponent from '../../components/tenant/TenantComponent';
-import { FAB } from 'react-native-paper';
+import computeFabStyles from '../../components/fab/FabComponentStyles';
 
 export interface Props extends BaseProps {}
 
@@ -77,7 +77,7 @@ export default class Tenants extends BaseScreen<Props, State> {
     } = this.state;
     const style = computeTenantStyleSheet();
     const listItemCommonStyle = computeListItemCommonStyle();
-    const commonColors = Utils.getCurrentCommonColor();
+    const fabStyles = computeFabStyles();
     return (
       <View style={{ flex: 1 }}>
         {showAddTenantDialog && this.renderAddTenantDialog(style)}
@@ -94,7 +94,9 @@ export default class Tenants extends BaseScreen<Props, State> {
           />
         ) : (
           <View style={style.container}>
-            <FAB color={commonColors.light} onPress={() => this.setState({ showAddTenantDialog: true })} icon={'plus'} style={style.fab} />
+            <TouchableOpacity onPress={() => this.setState({ showAddTenantDialog: true })} style={[fabStyles.fab, fabStyles.placedFab]}>
+              <Icon type={'MaterialCommunityIcons'} name={'plus'} style={fabStyles.fabIcon} />
+            </TouchableOpacity>
             {showAddTenantManuallyDialog && (
               <AddEditTenantDialog
                 mode={TenantDialogMode.ADD}

src/screens/tenants/TenantsStyle.tsx

@@ -44,24 +44,6 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       color: commonColor.textColor,
       fontSize: '27@s'
     },
-    addTenantButton: {
-      width: '35@s',
-      height: '35@s',
-      borderRadius: '8@s',
-      padding: '5@s',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexDirection: 'row',
-      backgroundColor: commonColor.listItemBackground,
-      elevation: 4,
-      shadowColor: commonColor.cardShadowColor,
-      shadowOffset: {
-        width: 0,
-        height: 1
-      },
-      shadowOpacity: 0.23,
-      shadowRadius: 3.62
-    },
     rightActionsContainer: {
       flexDirection: 'row',
       marginLeft: '2.5%'
@@ -97,21 +79,6 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       borderColor: commonColor.textColor,
       color: commonColor.textColor
     },
-    fab: {
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      margin: '18@s',
-      zIndex: 1,
-      elevation: 4,
-      backgroundColor: commonColor.primary,
-      shadowOffset: {
-        width: 0,
-        height: 1
-      },
-      shadowOpacity: 0.23,
-      shadowRadius: 3.62
-    }
   });
   const portraitStyles = {};
   const landscapeStyles = {};

src/theme/variables/commonColor.tsx

@@ -178,7 +178,6 @@ export default {
   searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
   searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
   toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  iosStatusbar: 'dark-content',
   toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
   get statusBarColor() {
     return 'transparent';

src/types/Theme.tsx

@@ -35,5 +35,5 @@ export default interface ThemeDefinition {
   selectDropdownBackgroundColor: string;
   listItemBackground: string;
   listHeaderBackground: string;
-  statusBar: string;
+  mapClusterBorder: string;
 }