@ledvance/group-ui-biz-bundle 1.0.73 → 1.0.76

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.73",
+  "version": "1.0.76",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/biorhythm/BiorhythmDetailPage.tsx

@@ -102,7 +102,7 @@ const BiorhythmEditPage = () => {
 
   const canSaveMoodData = useMemo(() =>{
     return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
-  }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged])
+  }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged, minimumTipEnable()])
 
   return (
     <Page

package/src/modules/biorhythm/circular/Progress.tsx

@@ -265,10 +265,10 @@ export default class Progress extends Component<any> {
                   }
                   item.time = changeMinutes
                   this.setState({ iconDataList: [].concat(iconDataList) }, () => {
-                    this.playTimeChangeCallBack(item.index, Math.round(changeMinutes))
+                    this.playTimeChangeCallBack(item.index ?? item.id, Math.round(changeMinutes))
                   })
                 } else {
-                  this.playTimeChangeCallBack(item.index, Math.round(item.time))
+                  this.playTimeChangeCallBack(item.index ?? item.id, Math.round(item.time))
                 }
               }}
             />

package/src/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -12,6 +12,7 @@ import Spacer from "@ledvance/base/src/components/Spacer";
 import InfoText from "@ledvance/base/src/components/InfoText";
 
 const { convertX: cx, height, width } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
@@ -21,37 +22,48 @@ export interface EnergyConsumptionChartProps {
   over7Days?: boolean
 }
 
-const EnergyConsumptionChart = () => {
-  const props = useRoute().params as EnergyConsumptionChartProps
+const EnergyConsumptionChart = (props: { theme?: any }) => {
+  const params = useRoute().params as EnergyConsumptionChartProps
   const computeNum = Platform.OS === 'ios' && 180 || 130
+
+  const styles = StyleSheet.create({
+    listEmptyView: {
+      alignItems: 'center',
+    },
+    listEmptyImage: {
+      width: cx(200),
+      height: cx(200),
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-      headlineText={props.headlineText}
-      headlineIcon={props.chartData?.length ? res.download_icon : undefined}
+      headlineText={params.headlineText}
+      headlineIcon={params.chartData?.length ? res.download_icon : undefined}
       onHeadlineIconClick={() => {
-        exportFile(props.chartData)
+        exportFile(params.chartData)
       }}
       showGreenery={false}
       greeneryIcon={res.energy_consumption_greenery}
     >
       <View style={{ marginHorizontal: cx(24) }}>
         {
-          props.over7Days ? (
+          params.over7Days ? (
             <View style={styles.listEmptyView}>
               <Spacer height={cx(26)} />
               <Image
                 style={styles.listEmptyImage}
                 source={{ uri: res.ldv_timer_empty }} />
               <Spacer height={cx(14)} />
-              <InfoText 
+              <InfoText
                 text={I18n.getLang('energyconsumption_hourlylimit')}
                 icon={res.ic_info}
-                contentColor='#000'
+                contentColor={props.theme.global.fontColor}
               />
             </View>
           ) : (
-            <BarChart height={height - cx(computeNum)} data={props.chartData} width={width - cx(80)} />
+            <BarChart height={height - cx(computeNum)} data={params.chartData} width={width - cx(80)} />
           )
         }
       </View>
@@ -59,24 +71,4 @@ const EnergyConsumptionChart = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  listEmptyView: {
-    alignItems: 'center',
-  },
-  listEmptyImage: {
-    width: cx(200),
-    height: cx(200),
-  },
-  listEmptyTextIcon: {
-    width: cx(16),
-    height: cx(16),
-    tintColor: '#000',
-  },
-  listEmptyText: {
-    color: '#000',
-    fontSize: cx(12),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-});
-
-export default EnergyConsumptionChart
+export default withTheme(EnergyConsumptionChart)

package/src/modules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -74,7 +74,7 @@ const EnergyConsumptionDetail = (props: { theme?: any }) => {
       return
     }
     const promiseGroup = params.deviceIdGroup.map(devId => getDataWithSpecified(devId, params.addEleDpCode, startDay, endDay, 'sum').catch(error => ({ error })))
-    state.loading = true 
+    state.loading = true
     const res = await Promise.all(promiseGroup);
     state.loading = false
     // @ts-ignore
@@ -203,7 +203,7 @@ const EnergyConsumptionDetail = (props: { theme?: any }) => {
       paddingHorizontal: cx(10),
       paddingVertical: cx(8),
       marginTop: cx(8),
-      backgroundColor: props.theme.button.active,
+      backgroundColor: props.theme.button.primary,
       alignItems: 'center',
       justifyContent: 'center'
     }

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -249,7 +249,7 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
       paddingHorizontal: cx(10),
       paddingVertical: cx(8),
       marginTop: cx(8),
-      backgroundColor: props.theme.button.active,
+      backgroundColor: props.theme.button.primary,
       alignItems: 'center',
       justifyContent: 'center',
     },

package/src/modules/energyConsumption/component/Overview.tsx

@@ -80,7 +80,7 @@ const OverView = (props: OverViewProps) => {
                   </View>
                   <Image
                     source={res.energy_consumption_right}
-                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8), tintColor: props.theme.global.secondFontColor }}
                   />
                 </View>
               </View>

package/src/modules/fixedTimeForPlug/FixedTimeForPlugDetailPage.tsx

@@ -21,6 +21,7 @@ import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
 
 const {parseTimer} = Utils.TimeUtils
 const {convertX: cx} = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 
 interface FixedTimeDetailParam extends FixedTimeParam {
   mode: 'add' | 'edit',
@@ -42,7 +43,7 @@ const newFixedTimeItem = (): FixedTimeItem => {
   }
 }
 
-const FixedTimeForPlugDetailPage = () => {
+const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimeDetailParam
   const initItem = newFixedTimeItem();
@@ -129,6 +130,50 @@ const FixedTimeForPlugDetailPage = () => {
       }
     })
   }
+
+  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),
+    },
+    rightTitle: {
+      color: props.theme.tag.fontColor,
+      paddingLeft: cx(12),
+      paddingRight: cx(12),
+      fontSize: cx(10),
+      textAlign: 'center',
+      alignSelf: 'flex-start'
+    },
+    filletCorner: {
+      flexDirection: 'row',
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(16),
+      alignSelf: 'flex-start'
+    }
+  })
+
   return (
     <Page
       backText={I18n.getLang('fixedTimeCycle_socket_headline')}
@@ -158,7 +203,8 @@ const FixedTimeForPlugDetailPage = () => {
         {/* pick */}
         <TimerPicker
           itemTextColor='#aeadb5'
-          style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+          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}
@@ -174,7 +220,9 @@ const FixedTimeForPlugDetailPage = () => {
             state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
           }}/>
         <Spacer/>
-        <Text style={styles.cardContainer}>{loopText(state.item.weeks, parseTimer(state.item.startTime * 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}>
@@ -182,15 +230,17 @@ const FixedTimeForPlugDetailPage = () => {
           <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>
             }
@@ -207,8 +257,8 @@ const FixedTimeForPlugDetailPage = () => {
                   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>
             )
           })}
@@ -217,11 +267,11 @@ const FixedTimeForPlugDetailPage = () => {
         <View style={styles.cardContainer}>
           <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
           {!isTimeEffective && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Image style={{ width: cx(16), height: cx(16), tintColor: 'rgb(255,149,0)' }} source={res.ic_warning_amber} />
-              <Text style={{ fontSize: cx(12), color: 'rgb(255,149,0)' }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
+              <Text style={{ fontSize: cx(12), color: props.theme.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
           </View>}
           <View >
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
             <LdvPickerView
               hour={state.onHour}
               minute={state.onMinute}
@@ -231,7 +281,9 @@ const FixedTimeForPlugDetailPage = () => {
             />
           </View>
           <View>
-            <Text style={{ color: '#000', marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
+            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>
+              {I18n.getLang('addTimeCycle_settings_sec_text2')}
+            </Text>
             <LdvPickerView
               hour={state.offHour}
               minute={state.offMinute}
@@ -244,7 +296,7 @@ const FixedTimeForPlugDetailPage = () => {
         <Spacer/>
         {/* summary */}
         <Summary
-          frequency={loopText(state.item.weeks)}
+          frequency={loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}
           time={params.is24Hour ?
             `${parseTimer(state.item.startTime * 60)} - ${parseTimer(state.item.endTime * 60)}`
             :
@@ -253,7 +305,7 @@ const FixedTimeForPlugDetailPage = () => {
           actions={<View style={{ flex: 1 }}>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_4', `${Number(state.onHour)}`, `${Number(state.onMinute)}`)}
                 </Text>
               </View>
@@ -265,7 +317,7 @@ const FixedTimeForPlugDetailPage = () => {
             </>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_6', `${Number(state.offHour)}`, `${Number(state.offMinute)}`)}
                 </Text>
               </View>
@@ -291,75 +343,4 @@ const FixedTimeForPlugDetailPage = () => {
   )
 }
 
-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 FixedTimeForPlugDetailPage
+export default withTheme(FixedTimeForPlugDetailPage)

package/src/modules/fixedTimeForPlug/FixedTimeForPlugPage.tsx

@@ -12,11 +12,13 @@ import {cloneDeep} from "lodash";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import {Utils} from "tuya-panel-kit";
 import ItemCard from "./ItemCard";
+import InfoText from "@ledvance/base/src/components/InfoText";
 
 const {convertX: cx, topBarHeight} = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 10
 
-const FixedTimeForPlugPage = () => {
+const FixedTimeForPlugPage = (props: { theme?: any}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimeParam
@@ -58,17 +60,42 @@ const FixedTimeForPlugPage = () => {
     }
   }, [fixedTimeList])
 
+  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,
+    },
+  })
+
   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('randomtimecycle_warning_max_number_text')}</Text>
+            <Image style={styles.maxImg} source={res.ic_warning_amber}/>
+            <Text style={styles.maxTip}>{I18n.getLang('randomtimecycle_warning_max_number_text')}</Text>
         </View>}
         <FlatList
           data={fixedTimeList}
@@ -103,20 +130,13 @@ const FixedTimeForPlugPage = () => {
           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('fixedTimeCycle_information_text')}</Text>
-        </View>
+        <InfoText
+          style={{width: 'auto', alignItems: 'center'}}
+          icon={res.device_panel_schedule_alert}
+          text={I18n.getLang('fixedTimeCycle_information_text')}
+          textStyle={{flex: undefined}}
+          contentColor={props.theme.global.secondFontColor}
+        />
         <View
           style={{
             height: cx(36),
@@ -124,7 +144,7 @@ const FixedTimeForPlugPage = () => {
             marginVertical: cx(25),
             marginHorizontal: cx(24),
             borderRadius: cx(6),
-            backgroundColor: '#f60',
+            backgroundColor: props.theme.button.primary,
           }}
         >
           <TouchableOpacity
@@ -135,7 +155,7 @@ const FixedTimeForPlugPage = () => {
             }}
             onPress={() => onAddOrEditItem('add')}
           >
-            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: '#fff', textAlign: 'center'}}>
+            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: props.theme.button.fontColor, textAlign: 'center'}}>
               {I18n.getLang('fixedTimeCycle_bttn_text')}
             </Text>
           </TouchableOpacity>
@@ -158,38 +178,4 @@ const FixedTimeForPlugPage = () => {
   )
 }
 
-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 FixedTimeForPlugPage
+export default withTheme(FixedTimeForPlugPage)

package/src/modules/fixedTimeForPlug/ItemCard.tsx

@@ -8,9 +8,11 @@ import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 import {FixedTimeItem} from "./FixedTimeForPlugActon";
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface ItemCardProps {
+  theme?: any
   item: FixedTimeItem,
   is24Hour?: boolean,
   onSwitch: (enable: boolean) => void
@@ -19,8 +21,33 @@ export interface ItemCardProps {
 
 const ItemCard = (props: ItemCardProps) => {
   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)}/>
@@ -46,28 +73,4 @@ const ItemCard = (props: ItemCardProps) => {
   )
 }
 
-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)