Enhancement voucher UI

Strides-APP/app.json

@@ -6,6 +6,7 @@
   "product": true,
   "debug": true,
   "isWhitelabel": true,
+  "isLumiWhitelabel": false,
   "modules": {
     "i18n": false,
     "bookmarks": true,

Strides-APP/app/components/BadgeSelectItem.js

@@ -8,12 +8,13 @@ const BadgeSelectItem = ({
   checked=false,
   onPress,
   iconSize=28,
+  showBorder=true,
   tintColor=colorAccent,
   borderColor="transparent"
 }) => (
   <Pressable 
     onPress={onPress}
-    style={mergeStyle(style, checked ? tintColor : borderColor)}>
+    style={mergeStyle(style, checked ? tintColor : borderColor, showBorder)}>
     {children}
     { checked &&
       <Svg 
@@ -32,8 +33,10 @@ const BadgeSelectItem = ({
   </Pressable>
 );
 
-const mergeStyle = (style, color) => {
-  const def = {borderColor: color, borderWidth: 1, borderRadius: 10, overflow: 'hidden'}
+const mergeStyle = (style, color, showBorder) => {
+  const def = showBorder 
+              ? {borderColor: color, borderWidth: 1, borderRadius: 10, overflow: 'hidden'}
+              : {overflow: 'hidden'}
   if (Array.isArray(style)) {
     let res = {}
     for (let s of style) {

Strides-APP/app/components/TextView.js

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { Text, View } from 'react-native';
+import app from '../../app.json';
 
 const getRadius = (style, fixedAlign) => {
   let s = undefined;
@@ -70,6 +71,9 @@ const getRadius = (style, fixedAlign) => {
         text.lineHeight = 18.2;
       }
     }
+    if (text.fontSize && app.isLumiWhitelabel) {
+      text.fontSize -= 2;
+    }
     text.includeFontPadding = false;
   }
   return {

Strides-APP/app/components/ToolbarUgly.js

@@ -4,6 +4,7 @@ import TextView from './TextView';
 
 export default ToolbarUgly = ({
   title,
+  scope,
   showBack=true,
   onBackPress
 }) => (
@@ -24,7 +25,7 @@ export default ToolbarUgly = ({
           color={textPrimary} />
       </TouchableOpacity>
     }
-    <TextView style={styles.titleText}>{title}</TextView>
+    <TextView style={styles.titleText}>{scope ? $t(scope) : title}</TextView>
     { showBack &&
       <View style={styles.uglyIcon}>
         <MaterialIcons

Strides-APP/app/pages/vouchers/ListPoints.js

@@ -150,10 +150,14 @@ export default class ListPoints extends Component {
     return (
       <View
         style={styles.itemView}>
+        <View style={styles.itemBox}></View>
         <View style={styles.itemContent}>
           <TextView style={styles.voucherTitle}>{item.voucherName}</TextView>
           <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
           <TextView style={styles.expireDate}>{$t("voucher.expiresOn") + item.expiresOn}</TextView>
+          <View style={styles.rightDash}></View>
+          <View style={styles.topTikDot}></View>
+          <View style={styles.bottomTikDot}></View>
         </View>
         { item.purchasePoints > 0
         ? <Button
@@ -231,18 +235,60 @@ const styles = StyleSheet.create({
     padding: 16
   },
   itemView: {
-    padding: 16,
     marginTop: 16,
-    borderWidth: 1,
-    borderColor: '#DADADA',
     borderRadius: 4,
     alignItems: 'center',
     flexDirection: 'row',
-    backgroundColor: colorLight
+    backgroundColor: colorLight,
+    ...$padding(0, 20, 0, 16)
+  },
+  itemBox: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    position: 'absolute'
   },
   itemContent: {
     flex: 1,
-    paddingRight: 16
+    paddingTop: 12,
+    marginRight: 16,
+    paddingBottom: 12,
+    overflow: 'hidden'
+  },
+  rightDash: {
+    top: 0,
+    right: 6,
+    bottom: 0,
+    position: 'absolute',
+    borderStyle: 'dashed',
+    borderRightWidth: 1,
+    borderRightColor: '#DADADA'
+  },
+  topTikDot: {
+    top: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  bottomTikDot: {
+    bottom: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
   },
   voucherTitle: {
     color: textPrimary,
@@ -262,6 +308,7 @@ const styles = StyleSheet.create({
   purchaseButton: {
     padding: 4,
     minWidth: 75,
+    marginRight: 4,
     alignItems: 'center'
   },
   claimeButton: {

Strides-APP/app/pages/vouchers/ListVoucher.js

@@ -120,10 +120,14 @@ export default class ListVoucher extends Component {
       <Pressable
         style={styles.itemView}
         onPress={() => this.toDetailPage(item)}>
+        <View style={styles.itemBox}></View>
         <View style={styles.itemContent}>
           <TextView style={styles.voucherTitle}>{item.voucherName}</TextView>
           <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
           <TextView style={styles.expireDate}>{$t("voucher.expiresOn") + item.expiresOn}</TextView>
+          <View style={styles.rightDash}></View>
+          <View style={styles.topTikDot}></View>
+          <View style={styles.bottomTikDot}></View>
         </View>
         <TextView
           style={[
@@ -189,18 +193,60 @@ const styles = StyleSheet.create({
     padding: 16
   },
   itemView: {
-    padding: 16,
     marginTop: 16,
-    borderWidth: 1,
-    borderColor: '#DADADA',
     borderRadius: 4,
     alignItems: 'center',
     flexDirection: 'row',
-    backgroundColor: colorLight
+    backgroundColor: colorLight,
+    ...$padding(0, 16)
+  },
+  itemBox: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    position: 'absolute'
   },
   itemContent: {
     flex: 1,
-    paddingRight: 16
+    paddingTop: 12,
+    marginRight: 16,
+    paddingBottom: 12,
+    overflow: 'hidden'
+  },
+  rightDash: {
+    top: 0,
+    right: 6,
+    bottom: 0,
+    position: 'absolute',
+    borderStyle: 'dashed',
+    borderRightWidth: 1,
+    borderRightColor: '#DADADA'
+  },
+  topTikDot: {
+    top: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  bottomTikDot: {
+    bottom: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
   },
   voucherTitle: {
     color: textPrimary,
@@ -219,9 +265,10 @@ const styles = StyleSheet.create({
   },
   statusButton: {
     color: colorAccent,
-    padding: 8,
-    minWidth: 73,
+    padding: 5,
+    minWidth: 70,
     fontSize: 12,
+    marginRight: 4,
     textAlign: 'center',
     borderWidth: 1,
     borderColor: colorAccent,

Strides-APP/app/pages/vouchers/VoucherPage.js

@@ -72,7 +72,7 @@ export default class VoucherPage extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colorLight
+    backgroundColor: pageBackground
   },
   tabStyle: {
     backgroundColor: app.isWhitelabel ? colorLight : colorPrimary

Strides-APP/app/pages/vouchers/VoucherSelect.js

@@ -131,16 +131,21 @@ export default class VoucherSelect extends Component {
   }
 
   listItem = ({item, index, separators}) => {
+    const checked = (this.state.selectedVoucher.userVoucherId == item.userVoucherId);
     return (
       <BadgeSelectItem
         style={styles.itemView}
-        borderColor='#DADADA'
-        checked={this.state.selectedVoucher.userVoucherId == item.userVoucherId}
+        showBorder={false}
+        checked={checked}
         onPress={() => this.onSetectVoucher(item)}>
+        <View style={[styles.itemBox, checked ? styles.activeBorder : {}]}></View>
         <View style={styles.itemContent}>
           <TextView style={styles.voucherTitle}>{item.voucherName}</TextView>
           <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
           <TextView style={styles.expireDate}>{$t("voucher.expiresOn") + item.expiresOn}</TextView>
+          <View style={styles.rightDash}></View>
+          <View style={[styles.topTikDot, checked ? styles.activeBorder : {}]}></View>
+          <View style={[styles.bottomTikDot, checked ? styles.activeBorder : {}]}></View>
         </View>
         <TextView
           style={[
@@ -207,21 +212,67 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingLeft: 16,
     paddingRight: 16,
-    paddingBottom: 16
+    paddingBottom: 16,
+    backgroundColor: pageBackground
   },
   itemView: {
-    padding: 16,
     marginTop: 16,
-    borderWidth: 1,
-    borderColor: '#DADADA',
     borderRadius: 4,
     alignItems: 'center',
     flexDirection: 'row',
-    backgroundColor: colorLight
+    backgroundColor: colorLight,
+    ...$padding(0, 16)
+  },
+  itemBox: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    position: 'absolute'
   },
   itemContent: {
     flex: 1,
-    paddingRight: 16
+    paddingTop: 12,
+    marginRight: 16,
+    paddingBottom: 12,
+    overflow: 'hidden'
+  },
+  rightDash: {
+    top: 0,
+    right: 6,
+    bottom: 0,
+    position: 'absolute',
+    borderStyle: 'dashed',
+    borderRightWidth: 1,
+    borderRightColor: '#DADADA'
+  },
+  topTikDot: {
+    top: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  bottomTikDot: {
+    bottom: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  activeBorder: {
+    borderColor: colorAccent
   },
   voucherTitle: {
     color: textPrimary,
@@ -240,9 +291,10 @@ const styles = StyleSheet.create({
   },
   statusButton: {
     color: colorAccent,
-    padding: 8,
-    minWidth: 73,
+    padding: 5,
+    minWidth: 70,
     fontSize: 12,
+    marginRight: 4,
     textAlign: 'center',
     borderWidth: 1,
     borderColor: colorAccent,

Strides-APP/app/utils/themes.js

@@ -1,16 +1,17 @@
 import { Appearance } from "react-native";
+import app from "../../app.json";
 
 const enableDarkMode = false;//启用黑暗模式
 //theme
-global.pageTitleTint = '#000000';
+global.pageTitleTint = app.isWhitelabel ? '#000000' : '#FFFFFF';
 global.pageBackground = '#fcfcfc';
 global.colorThemes = '#FFFFFF';//toolbar color
 global.colorAccent = '#A3C93A';//56D905
 global.colorPrimary = '#001489';
 global.colorPrimaryDark = '#FFFFFF';//statusbar color
 //tab bar
-global.tabBarTextActive = '#000000';//fff
-global.tabBarTextInactive = '#666666';//e0e0e0
+global.tabBarTextActive = app.isWhitelabel ? '#000000' : '#FFFFFF';
+global.tabBarTextInactive = app.isWhitelabel ? '#666666' : '#E0E0E0';
 //background
 global.colorDark = "#303030";
 global.colorLight = "#FFFEFE";
@@ -28,7 +29,7 @@ global.textTitle = "#00638C";
 global.rippleColor = "rgba(0,0,0,.2)"
 
 global.darkMode = false;
-global.themeStatusBar = "dark-content"
+global.themeStatusBar = app.isWhitelabel ? "dark-content" : "light-content";
 
 if (Appearance.getColorScheme() == 'dark' && enableDarkMode) {
   global.darkMode = true;