@ledvance/group-ui-biz-bundle 1.0.75 → 1.0.77

package/src/modules/mood_new/MoodPage.tsx

@@ -26,10 +26,11 @@ import { useFlagMode } from '../flags/FlagActions';
 import { WorkMode } from '@ledvance/base/src/utils/interface';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
 
-const MoodPage = () => {
+const MoodPage = (props: {theme?: any}) => {
   const params = useParams<MoodPageParams>();
   const deviceInfo = useDeviceInfo();
   const uaGroupInfo = useUAGroupInfo()
@@ -196,8 +197,8 @@ const MoodPage = () => {
       state.originMoods = cloneDeep(newScene);
       setMoods(cloneDeep(newScene));
       if (mode === 'del' && ((params.isCeilingLight ?
-        (moodInfo.scene?.mainLamp.id !== checkedMood.mainLamp.id || moodInfo.scene?.secondaryLamp.id !== checkedMood.secondaryLamp.id) :
-        moodInfo.scene?.id !== checkedMood.id) ||
+          (moodInfo.scene?.mainLamp.id !== checkedMood.mainLamp.id || moodInfo.scene?.secondaryLamp.id !== checkedMood.secondaryLamp.id) :
+          moodInfo.scene?.id !== checkedMood.id) ||
         (params.isCeilingLight ? (workMode !== WorkMode.Scene && rgbicWorkMode !== WorkMode.Scene) : workMode !== WorkMode.Scene) ||
         !switchLed)) {
         return {
@@ -252,6 +253,27 @@ const MoodPage = () => {
     return !!state.originMoods.filter(m => !(params.isCeilingLight ? (m.mainLamp.id === mood.mainLamp.id && m.secondaryLamp.id === mood.secondaryLamp.id) : (m.id === mood.id))).find(m => m.name === mood.name)
   }, [state.originMoods, params.isCeilingLight])
 
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      position: 'absolute',
+      right: cx(60),
+      top: Platform.OS === 'android' ? cx(90) : cx(130),
+      maxWidth: cx(200),
+      backgroundColor: props.theme.card.background,
+    },
+    popoverItem: {
+      padding: cx(5),
+      alignItems: 'flex-start',
+    },
+  })
+
   return (
     <>
       <Page
@@ -268,21 +290,21 @@ const MoodPage = () => {
         loading={state.loading}
       >
         {!params.isStripLight && <View style={styles.tagLine}>
-          <Tag
-            checked={state.staticTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text1')}
-            onCheckedChange={checked => {
-              state.staticTagChecked = checked;
-            }}
-          />
-          <Spacer width={cx(8)} height={0} />
-          <Tag
-            checked={state.dynamicTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text2')}
-            onCheckedChange={checked => {
-              state.dynamicTagChecked = checked;
-            }}
-          />
+            <Tag
+                checked={state.staticTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text1')}
+                onCheckedChange={checked => {
+                  state.staticTagChecked = checked;
+                }}
+            />
+            <Spacer width={cx(8)} height={0} />
+            <Tag
+                checked={state.dynamicTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text2')}
+                onCheckedChange={checked => {
+                  state.dynamicTagChecked = checked;
+                }}
+            />
         </View>}
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (
@@ -291,7 +313,7 @@ const MoodPage = () => {
             <InfoText
               icon={res.ic_warning_amber}
               text={Strings.getLang('mood_overview_warning_max_number_text')}
-              contentColor={'#ff9500'}
+              contentColor={props.theme.global.warning}
             />
             <Spacer height={cx(6)} />
           </View>
@@ -346,25 +368,5 @@ const MoodPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    position: 'absolute',
-    right: cx(60),
-    top: Platform.OS === 'android' ? cx(90) : cx(130),
-    maxWidth: cx(200),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    padding: cx(5),
-    alignItems: 'flex-start',
-  },
-});
 
-export default MoodPage;
+export default withTheme(MoodPage)

package/src/modules/mood_new/StaticMoodEditorPage.tsx

@@ -24,6 +24,7 @@ import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface StaticMoodEditorPageParams {
   mode: 'add' | 'edit';
@@ -41,7 +42,7 @@ export interface StaticMoodEditorPageState {
   loading: boolean;
 }
 
-const StaticMoodEditorPage = () => {
+const StaticMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>();
   const params = cloneDeep(routeParams);
@@ -117,6 +118,41 @@ const StaticMoodEditorPage = () => {
     return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
   }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    adjustCard: {
+      marginTop: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    deleteBtn: {
+      width: '100%',
+      height: cx(50),
+      backgroundColor: props.theme.button.delete,
+      borderRadius: cx(8),
+    },
+    deleteBtnText: {
+      color: props.theme.button.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+  });
+
   return (
     <Page
       backText={I18n.getLang('mesh_device_detail_mode')}
@@ -147,7 +183,7 @@ const StaticMoodEditorPage = () => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : undefined}
+            tipColor={nameRepeat ? props.theme.global.error : undefined}
             tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
             errorText={I18n.getLang(
               nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
@@ -253,47 +289,4 @@ const StaticMoodEditorPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginTop: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-});
-
-export default StaticMoodEditorPage;
+export default withTheme(StaticMoodEditorPage)

package/src/modules/overchargeSwitch/OverchargeSwitchPage.tsx

@@ -57,6 +57,9 @@ const OverchargeSwitchPage = (props: { theme?: any }) => {
       fontFamily: 'helvetica_neue_lt_std_bd',
       paddingVertical: cx(16),
     },
+    desc: {
+      color: props.theme.global.fontColor,
+    },
     shadow: {
       shadowColor: props.theme.card.shadowColor,
       shadowOpacity: 0.2,
@@ -66,7 +69,7 @@ const OverchargeSwitchPage = (props: { theme?: any }) => {
         width: 0,
         height: 4,
       },
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme.card.background,
       borderRadius: 8,
     },
   })
@@ -80,7 +83,7 @@ const OverchargeSwitchPage = (props: { theme?: any }) => {
           <Text style={styles.title}>{I18n.getLang('switch_overcharge_headline_text')}</Text>
         </View>
         <View style={{ paddingBottom: cx(16) }}>
-          <Text>{I18n.getLang('switch_overcharge_headline_description')}</Text>
+          <Text style={styles.desc}>{I18n.getLang('switch_overcharge_headline_description')}</Text>
         </View>
       </View>
       <Spacer style={{ flex: 1 }} height={0} width={0} />

package/src/modules/randomTimeForPlug/ItemCard.tsx

@@ -7,9 +7,11 @@ import {getIsClosed, loopText} from "@ledvance/base/src/utils/common";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface ItemCardProps<T> {
+  theme?: any
   item: T & {
     enable: boolean
     startTime: number
@@ -25,8 +27,33 @@ export interface ItemCardProps<T> {
 
 const ItemCard = <T, >(props: ItemCardProps<T>) => {
   const {item, is24Hour, onSwitch, onPress} = props
-  // 判断是否关闭 
+  // 判断是否关闭
   const closed = getIsClosed(item)
+
+
+  const styles = StyleSheet.create({
+    itemCard: {
+      marginHorizontal: cx(24),
+      paddingHorizontal: cx(16),
+    },
+    switchLine: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    time: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    switchBtn: {},
+    loopText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+  })
   return (
     <Card style={styles.itemCard} onPress={onPress}>
       <Spacer height={cx(16)}/>
@@ -52,28 +79,4 @@ const ItemCard = <T, >(props: ItemCardProps<T>) => {
   )
 }
 
-const styles = StyleSheet.create({
-  itemCard: {
-    marginHorizontal: cx(24),
-    paddingHorizontal: cx(16),
-  },
-  switchLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  time: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  switchBtn: {},
-  loopText: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-})
-
-export default ItemCard
+export default withTheme(ItemCard)

package/src/modules/randomTimeForPlug/RandomTimeForPlugDetailPage.tsx

@@ -20,6 +20,7 @@ import {RandomTimeParam} from "./RandomTimeForPlugAction";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 
 const {parseTimer} = Utils.TimeUtils
+const { withTheme } = Utils.ThemeUtils
 const {convertX: cx} = Utils.RatioUtils;
 
 interface RandomTimeDetailParam extends RandomTimeParam {
@@ -40,7 +41,7 @@ const newRandomTimeItem = (): RandomTimeItem => {
   }
 }
 
-const RandomTimeForPlugDetailPage = () => {
+const RandomTimeForPlugDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useRoute().params as RandomTimeDetailParam
   const initItem = newRandomTimeItem();
@@ -102,6 +103,36 @@ const RandomTimeForPlugDetailPage = () => {
       }
     })
   }
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      marginHorizontal: cx(24)
+    },
+    itemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold',
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    applyContent: {
+      backgroundColor: props.theme.container.background,
+      borderRadius: 4,
+      minHeight: cx(55),
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: cx(10),
+      paddingTop: cx(10)
+    },
+    applyItem: {
+      paddingLeft: cx(5),
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: props.theme.global.background,
+      height: cx(35),
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
@@ -130,8 +161,9 @@ const RandomTimeForPlugDetailPage = () => {
         />
         {/* pick */}
         <TimerPicker
-          itemTextColor='#aeadb5'
-          style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+          itemTextColor="#aeadb5"
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          pickerFontColor={props.theme.global.fontColor}
           is12Hours={!params.is24Hour}
           startTime={state.item.startTime}
           endTime={state.item.endTime}
@@ -147,7 +179,9 @@ const RandomTimeForPlugDetailPage = () => {
             state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
           }}/>
         <Spacer/>
-        <Text style={styles.cardContainer}>{loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+          {loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}
+        </Text>
         <Spacer/>
         {/*Apply for */}
         <View style={styles.cardContainer}>
@@ -155,15 +189,17 @@ const RandomTimeForPlugDetailPage = () => {
           <Spacer height={cx(10)}/>
           <View style={styles.applyContent}>
             {state.item.channel === undefined ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <Text style={{color: props.theme.global.fontColor}}>
+                {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
+              </Text> :
               <View style={[styles.applyItem, {marginBottom: cx(10), borderRadius: 4}]}>
-                <Text style={{color: '#000'}}>{params.channels[state.item.channel]}</Text>
+                <Text style={{color: props.theme.global.fontColor}}>{params.channels[state.item.channel]}</Text>
                 {params.channels.length > 1 && <TouchableOpacity
                     onPress={() => {
                       state.item.channel = undefined
                     }}
                     style={{paddingHorizontal: cx(5)}}>
-                    <Image style={{width: cx(16), height: cx(16)}} source={res.ic_arrows_nav_clear}/>
+                    <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.ic_arrows_nav_clear}/>
                 </TouchableOpacity>}
               </View>
             }
@@ -180,8 +216,8 @@ const RandomTimeForPlugDetailPage = () => {
                   state.item.channel = index
                 }}
               >
-                <Text style={{color: '#000'}}>{item}</Text>
-                <Image style={{width: cx(16), height: cx(16)}} source={res.device_panel_timer_add}/>
+                <Text style={{color: props.theme.global.fontColor}}>{item}</Text>
+                <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.device_panel_timer_add}/>
               </TouchableOpacity>
             )
           })}
@@ -211,75 +247,4 @@ const RandomTimeForPlugDetailPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10)
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10)
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  summaryImg: {
-    width: cx(12),
-    height: cx(12),
-    marginRight: cx(6)
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000'
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start'
-  }
-})
-
-export default RandomTimeForPlugDetailPage
+export default withTheme(RandomTimeForPlugDetailPage)

package/src/modules/randomTimeForPlug/RandomTimeForPlugPage.tsx

@@ -12,11 +12,13 @@ import {RandomTimeItem, RandomTimeParam, useRandomTime} from "./RandomTimeForPlu
 import Spacer from "@ledvance/base/src/components/Spacer";
 import ItemCard from "./ItemCard";
 import {cloneDeep} from "lodash";
+import InfoText from "@ledvance/base/src/components/InfoText";
 
 const {convertX: cx, topBarHeight} = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 16
 
-const RandomTimeForPlugPage = () => {
+const RandomTimeForPlugPage = (props: { theme?: any}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useRoute().params as RandomTimeParam
@@ -58,17 +60,56 @@ const RandomTimeForPlugPage = () => {
     }
   }, [randomTimeList])
 
+  const styles = StyleSheet.create({
+    bg: {
+      marginTop: topBarHeight,
+      flex: 1,
+    },
+    emptyListCon: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: cx(30),
+    },
+    emptyImage: {
+      width: cx(225),
+      height: cx(198)
+    },
+    execTip: {
+      color: props.theme.global.fontColor,
+      marginLeft: cx(24),
+    },
+    maxImg: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: props.theme.global.warning
+    },
+    maxTip: {
+      color: props.theme.global.secondFontColor,
+    },
+    addButton: {
+      height: cx(36),
+      width: cx(150),
+      marginVertical: cx(25),
+      marginHorizontal: cx(24),
+      borderRadius: cx(6),
+      backgroundColor: props.theme.button.primary,
+    },
+    addButtonText: {
+      fontSize: cx(12),
+      fontWeight: 'bold',
+      color: props.theme.button.fontColor,
+      textAlign: 'center'
+    }
+  })
+
   const renderList = () => {
     return (
       <ScrollView nestedScrollEnabled={true}>
-        <Text style={{
-          color: '#000',
-          marginLeft: cx(24),
-        }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
+        <Text style={styles.execTip}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
         <Spacer height={cx(10)}/>
         {isMaxNum && <View style={{marginHorizontal: cx(24), flexDirection: 'row'}}>
-            <Image style={{width: cx(16), height: cx(16), tintColor: '#ff9500'}} source={res.ic_warning_amber}/>
-            <Text>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
+            <Image style={styles.maxImg} source={res.ic_warning_amber}/>
+            <Text style={styles.maxTip}>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
         </View>}
         <FlatList
           data={randomTimeList}
@@ -103,30 +144,14 @@ const RandomTimeForPlugPage = () => {
           style={styles.emptyImage}
           source={{uri: res.ldv_timer_empty}}
           resizeMode="contain"/>
-        <View
-          style={{
-            marginHorizontal: cx(24),
-            marginTop: cx(30),
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <Image
-            source={{uri: res.device_panel_schedule_alert}}
-            style={{width: cx(16), height: cx(16)}}
-          />
-          <Text style={styles.emptyNoTime}>{I18n.getLang('randomtimecycle_empty_information_text')}</Text>
-        </View>
-        <View
-          style={{
-            height: cx(36),
-            width: cx(150),
-            marginVertical: cx(25),
-            marginHorizontal: cx(24),
-            borderRadius: cx(6),
-            backgroundColor: '#f60',
-          }}
-        >
+        <InfoText
+          style={{width: 'auto', alignItems: 'center'}}
+          icon={res.device_panel_schedule_alert}
+          text={I18n.getLang('randomtimecycle_empty_information_text')}
+          textStyle={{flex: undefined}}
+          contentColor={props.theme.global.secondFontColor}
+        />
+        <View style={styles.addButton}>
           <TouchableOpacity
             style={{
               flex: 1,
@@ -135,7 +160,7 @@ const RandomTimeForPlugPage = () => {
             }}
             onPress={() => onAddOrEditItem('add')}
           >
-            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: '#fff', textAlign: 'center'}}>
+            <Text style={styles.addButtonText}>
               {I18n.getLang('randomtimecycle_empty_bttn_text')}
             </Text>
           </TouchableOpacity>
@@ -156,38 +181,4 @@ const RandomTimeForPlugPage = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  bg: {
-    marginTop: topBarHeight,
-    flex: 1,
-  },
-  emptyListCon: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: cx(30),
-  },
-  emptyImage: {
-    width: cx(225),
-    height: cx(198)
-  },
-  emptyNoTime: {
-    fontSize: cx(12),
-    color: '#000'
-  },
-  emptyTimeTip: {
-    fontSize: cx(12),
-    lineHeight: cx(17),
-    marginTop: cx(6),
-    width: '76%',
-    textAlign: 'center'
-  },
-  listContainer: {
-    bottom: cx(74)
-  },
-  categoryList: {
-    marginHorizontal: cx(24),
-    marginBottom: cx(12),
-  },
-})
-
-export default RandomTimeForPlugPage
+export default withTheme(RandomTimeForPlugPage)