@ledvance/group-ui-biz-bundle 1.0.79 → 1.0.81

package/src/modules/mood_new/DynamicMoodEditorPage.tsx

@@ -43,6 +43,7 @@ import { showDialog } from '@ledvance/base/src/utils/common';
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 interface DynamicMoodEditorPageState {
   headline: string;
   mood: MoodUIInfo;
@@ -50,9 +51,9 @@ interface DynamicMoodEditorPageState {
   mainBucketSelected: boolean;
   sceneMode: StripLightMoodMode;
   loading: boolean;
-  
+
 }
-const DynamicMoodEditorPage = () => {
+const DynamicMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>()
   const params = cloneDeep(routeParams);
@@ -135,6 +136,98 @@ const DynamicMoodEditorPage = () => {
     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: {
+      marginVertical: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    lightLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    light: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(18),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    transitionMode: {
+      marginHorizontal: cx(16),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    nodesAdjust: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    adjustButtons: {
+      width: cx(44),
+      marginStart: cx(16),
+    },
+    adjustButton: {
+      width: cx(44),
+      height: cx(44),
+    },
+    nodeList: {
+      flex: 1,
+      marginHorizontal: cx(16),
+    },
+    nodeItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    nodeBlock: {
+      flex: 1,
+      height: cx(40),
+      borderRadius: cx(8),
+    },
+    nodeDeleteBtn: {
+      width: cx(24),
+      height: cx(30),
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    nodeDeleteIcon: {
+      width: cx(16),
+      height: cx(16),
+    },
+    nodeAddBtn: {
+      height: cx(40),
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginEnd: cx(26),
+      borderRadius: cx(8),
+      borderWidth: cx(1),
+      borderStyle: 'dashed',
+      borderColor: props.theme.addNode.border,
+      backgroundColor: props.theme.addNode.background,
+    },
+    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')}
@@ -173,7 +266,7 @@ const DynamicMoodEditorPage = () => {
             }}
             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'
@@ -290,7 +383,7 @@ const DynamicMoodEditorPage = () => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                      { tintColor: state.mainBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                     ]}
                     source={res.ic_paint_bucket}
                   />
@@ -303,7 +396,7 @@ const DynamicMoodEditorPage = () => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                      { tintColor: state.mainBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                     ]}
                     source={res.ic_colorize}
                   />
@@ -338,7 +431,7 @@ const DynamicMoodEditorPage = () => {
                           style={[
                             styles.nodeDeleteIcon,
                             {
-                              tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                              tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                             },
                           ]}
                           source={res.ic_mood_del}
@@ -370,7 +463,7 @@ const DynamicMoodEditorPage = () => {
                           style={{
                             width: cx(18),
                             height: cx(18),
-                            tintColor: '#000',
+                            tintColor: props.theme.global.fontColor,
                           }}
                           source={{ uri: res.add }}
                         />
@@ -551,98 +644,8 @@ const DynamicMoodEditorPage = () => {
     </Page>
   );
 };
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginVertical: 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',
-  },
-  transitionMode: {
-    marginHorizontal: cx(16),
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  nodesAdjust: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  adjustButtons: {
-    width: cx(44),
-    marginStart: cx(16),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-  nodeList: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  nodeItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nodeBlock: {
-    flex: 1,
-    height: cx(40),
-    borderRadius: cx(8),
-  },
-  nodeDeleteBtn: {
-    width: cx(24),
-    height: cx(30),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nodeDeleteIcon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  nodeAddBtn: {
-    height: cx(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginEnd: cx(26),
-    borderRadius: cx(8),
-    borderWidth: cx(1),
-    borderStyle: 'dashed',
-    borderColor: '#666',
-    backgroundColor: '#f6f6f6',
-  },
-  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 DynamicMoodEditorPage;
+
+export default withTheme(DynamicMoodEditorPage)
 export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
   if (transitionMode === MoodNodeTransitionMode.Jump) {
     return I18n.getLang('other_lights_modes_jump_text');

package/src/modules/mood_new/RecommendMoodItem.tsx

@@ -8,6 +8,7 @@ import { MoodJumpGradientMode, MoodUIInfo } from './Interface';
 import { MixMoodColorsLine } from './MoodItem';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 interface LightCategory {
   isMixLight?: boolean
@@ -17,6 +18,7 @@ interface LightCategory {
 }
 
 interface RecommendMixMoodItemProps {
+  theme?: any
   title: string;
   isMix: boolean;
   mood: MoodUIInfo;
@@ -29,8 +31,30 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
 
   const gradientMode = useMemo(() => (
     deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
- ), [MoodJumpGradientMode, deviceTypeOption])
- 
+  ), [MoodJumpGradientMode, deviceTypeOption])
+
+
+  const styles = StyleSheet.create({
+    root: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginHorizontal: cx(24),
+    },
+    content: {
+      height: cx(56),
+      marginHorizontal: cx(16),
+      width: cx(295)
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    lineStyle: {
+      alignItems: 'center',
+    },
+  })
+
   return (
     <Card style={styles.root} onPress={props.onPress}>
       <CellContent
@@ -39,7 +63,7 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
         style={styles.content}
         titleStyle={styles.title}
         iconStyle={{
-          color: '#000',
+          color: props.theme.global.fontColor,
           size: cx(16),
         }}
       />
@@ -57,25 +81,4 @@ const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: cx(24),
-  },
-  content: {
-    height: cx(56),
-    marginHorizontal: cx(16),
-    width: cx(295)
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  lineStyle: {
-    alignItems: 'center',
-  },
-});
-
-export default RecommendMixMoodItem;
+export default withTheme(RecommendMixMoodItem)

package/src/modules/overchargeSwitch/OverchargeSwitchPage.tsx

@@ -27,17 +27,6 @@ const OverchargeSwitchPage = (props: { theme?: any }) => {
   })
 
   const styles = StyleSheet.create({
-    tipInfoContainer: {
-      flexDirection: 'row',
-      marginHorizontal: cx(24),
-      marginVertical: cx(10)
-    },
-    image: {
-      width: cx(16),
-      height: cx(16),
-      marginRight: cx(5),
-      tintColor: props.theme.global.fontColor
-    },
     titleBGView: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -45,12 +34,6 @@ const OverchargeSwitchPage = (props: { theme?: any }) => {
       marginHorizontal: cx(24),
       marginTop: cx(30)
     },
-    colorBlock: {
-      width: cx(20),
-      height: cx(20),
-      marginStart: cx(12),
-      borderRadius: cx(4),
-    },
     title: {
       color: props.theme.global.fontColor,
       fontSize: cx(14),

package/src/modules/remoteSwitch/RemoteSwitchPage.tsx

@@ -10,13 +10,49 @@ import {View, Text, StyleSheet} from "react-native";
 import {showDialog} from "@ledvance/base/src/utils/common";
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
-const RemoteSwitchPage = () => {
+const RemoteSwitchPage = (props: { theme?: any }) => {
   const devInfo = useDeviceInfo()
   const [remoteSwitch, setRemoteSwitch] = useRemoteSwitch()
   const state = useReactive({
     loading: false
   })
+
+  const styles = StyleSheet.create({
+    titleBGView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(16),
+      marginHorizontal: cx(24),
+      marginTop: cx(30),
+    },
+    colorBlock: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      paddingVertical: cx(16),
+    },
+    shadow: {
+      shadowColor: props.theme.card.shadow,
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+      elevation:8,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      backgroundColor: props.theme.card.background,
+      borderRadius: 8,
+    },
+  })
+
   return (<Page
     backText={devInfo.name}
     loading={state.loading}>
@@ -50,38 +86,4 @@ const RemoteSwitchPage = () => {
   </Page>)
 }
 
-const styles = StyleSheet.create({
-  titleBGView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(16),
-    marginHorizontal: cx(24),
-    marginTop: cx(30),
-  },
-  colorBlock: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    paddingVertical: cx(16),
-  },
-  shadow: {
-    shadowColor: '#000000',
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation:8,
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    backgroundColor: '#fff',
-    borderRadius: 8,
-  },
-})
-
-export default RemoteSwitchPage
+export default withTheme(RemoteSwitchPage)

package/src/modules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -231,13 +231,14 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
       flexDirection: 'column',
       marginLeft: cx(21),
       borderRadius: cx(16),
-      backgroundColor: '#cbcbcb',
+      backgroundColor: props.theme.tag.background,
     },
     rightItem: {
       paddingHorizontal: cx(12),
       color: props.theme.global.fontColor,
     },
     rightTitle: {
+      color: props.theme.tag.fontColor,
       paddingLeft: cx(12),
       paddingRight: cx(12),
       fontSize: cx(10),
@@ -246,7 +247,7 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
     },
     filletCorner: {
       flexDirection: 'row',
-      backgroundColor: '#cbcbcb',
+      backgroundColor: props.theme.tag.background,
       borderRadius: cx(16),
       alignSelf: 'flex-start',
     },
@@ -324,8 +325,9 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
         />
         {/* pick */}
         <TimerPicker
-          itemTextColor={props.theme.global.fontColor}
+          itemTextColor="#aeadb5"
           style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
+          pickerFontColor={props.theme.global.fontColor}
           is12Hours={!is24HourClock}
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -351,7 +353,9 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
             }}
           />
           <Spacer />
-          <Text style={{ marginHorizontal: cx(24), color: props.theme.global.fontColor }}>{loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}</Text>
+          <Text style={{ marginHorizontal: cx(24), color: props.theme.global.fontColor }}>
+            {loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}
+          </Text>
           <Spacer />
         </View>
 
@@ -362,7 +366,7 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
           </Text>
           <View
             style={{
-              backgroundColor: props.theme.card.border,
+              backgroundColor: props.theme.container.background,
               borderRadius: 4,
               minHeight: cx(50),
               flex: 1,

package/src/modules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -391,7 +391,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                   state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
                 }}
               >
-                <Text style={{ color: '#000' }}>{item.key}</Text>
+                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</Text>
                 <Image
                   style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
                   source={res.device_panel_timer_add}

package/src/modules/timeSchedule/components/ManuaSettings.tsx

@@ -136,6 +136,7 @@ function ManualSettings(props: ManualSettingProps) {
 
               {item.enable && item.type === 'fan' && (
                 <FanAdjustViewContent
+                  theme={props.theme}
                   hideEnable={true}
                   fanEnable={item.enable}
                   maxFanSpeed={props.isUVCFan ? 20 : 3}