@ledvance/ui-biz-bundle 1.1.86 → 1.1.89

package/src/newModules/mood/MoodPage.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import Page from '@ledvance/base/src/components/Page';
 import { Utils } from 'tuya-panel-kit';
-import {saveMoodList, useSceneStatusId, useSwitchLed, useWorkMode} from './MoodActions';
+import { saveMoodList, useSceneStatusId, useSwitchLed, useWorkMode } from './MoodActions';
 import {
   useDeviceId,
   useDeviceInfo,
@@ -11,7 +11,7 @@ import {
 import { useReactive } from 'ahooks';
 import Strings from '@ledvance/base/src/i18n';
 import res from '@ledvance/base/src/res';
-import { FlatList, StyleSheet, View, Platform } from 'react-native';
+import { FlatList, StyleSheet, View, Platform, TouchableOpacity, Image } from 'react-native';
 import Tag from '@ledvance/base/src/components/Tag';
 import Spacer from '@ledvance/base/src/components/Spacer';
 import InfoText from '@ledvance/base/src/components/InfoText';
@@ -25,6 +25,8 @@ import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep, filter, map } from 'lodash';
 import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions';
 import { WorkMode } from '@ledvance/base/src/utils/interface';
+import { showDialog } from '@ledvance/base/src/utils/common';
+import I18n from '@ledvance/base/src/i18n';
 
 const cx = Utils.RatioUtils.convertX;
 
@@ -65,16 +67,7 @@ const MoodPage = () => {
   useEffect(() => {
     state.loading = true
     state.timerId = setTimeout(() => {
-      getRemoteMoodList(
-        devId,
-        params,
-        params.featureId
-      ).then(res => {
-        state.loading = false
-        if (res.success && Array.isArray(res.data)) {
-          state.originMoods = cloneDeep(res.data);
-        }
-      });
+      getRemoteMoodInfo().then()
     }, 250);
 
     return () => {
@@ -82,6 +75,15 @@ const MoodPage = () => {
     };
   }, []);
 
+  const getRemoteMoodInfo = async (isRefresh?: boolean) => {
+    state.loading = true 
+    const res = await getRemoteMoodList(devId, params, params.featureId, isRefresh)
+    state.loading = false
+    if (res.success && Array.isArray(res.data)) {
+      state.originMoods = cloneDeep(res.data);
+    }
+  }
+
   useEffect(() => {
     state.filterMoods = state.originMoods.filter(item => {
       return (
@@ -99,10 +101,10 @@ const MoodPage = () => {
       mode === 'add'
         ? ui_biz_routerKey.ui_biz_mood_add
         : isStatic
-        ? ui_biz_routerKey.ui_biz_static_mood_edit
-        : !!(params.isMixLight || params.isCeilingLight)
-        ? ui_biz_routerKey.ui_biz_dynamic_mix_mood_edit
-        : ui_biz_routerKey.ui_biz_dynamic_mood_edit;
+          ? ui_biz_routerKey.ui_biz_static_mood_edit
+          : !!(params.isMixLight || params.isCeilingLight)
+            ? ui_biz_routerKey.ui_biz_dynamic_mix_mood_edit
+            : ui_biz_routerKey.ui_biz_dynamic_mood_edit;
     navigation.navigate(path, {
       mode,
       isStatic,
@@ -141,29 +143,28 @@ const MoodPage = () => {
         ...currentMood.secondaryLamp,
         nodes: currentMood.secondaryLamp && currentMood.secondaryLamp.nodes?.length
           ? currentMood.secondaryLamp.nodes.map(node => {
-              if (mode !== 'del') {
-                if (node.isColorNode) {
-                  node.brightness = 0;
-                  node.colorTemp = 0;
-                } else {
-                  node.h = 0;
-                  node.s = 0;
-                  node.v = 0;
-                  if (!params.isSupportTemperature) {
-                    node.colorTemp = 100; // 适配dim灯
-                  }
+            if (mode !== 'del') {
+              if (node.isColorNode) {
+                node.brightness = 0;
+                node.colorTemp = 0;
+              } else {
+                node.h = 0;
+                node.s = 0;
+                node.v = 0;
+                if (!params.isSupportTemperature) {
+                  node.colorTemp = 100; // 适配dim灯
                 }
-                return node;
               }
               return node;
-            })
+            }
+            return node;
+          })
           : [],
       },
     };
     if (mode === 'set') {
-      await setMoodInfo(checkedMood);
       await setSceneStatusId(checkedMood.id);
-      return;
+      return setMoodInfo(checkedMood);
     }
     let newScene: MoodUIInfo[] = [];
     if (mode === 'add') {
@@ -200,11 +201,11 @@ const MoodPage = () => {
       if (mood) {
         if (mode === 'del') {
           if (
-              (mainWork !== WorkMode.Scene && secondaryWork !== WorkMode.Scene) ||
-              (params.isCeilingLight
-                  ? currentMood.mainLamp.id !== moodInfo.mainLamp.id &&
-                  currentMood.secondaryLamp.id !== moodInfo.secondaryLamp.id
-                  : (params.isSupportSceneStatus ? currentMood.id !== sceneStatusId : currentMood.id !== moodInfo.id)) || !switchLed
+            (mainWork !== WorkMode.Scene && secondaryWork !== WorkMode.Scene) ||
+            (params.isCeilingLight
+              ? currentMood.mainLamp.id !== moodInfo.mainLamp.id &&
+              currentMood.secondaryLamp.id !== moodInfo.secondaryLamp.id
+              : (params.isSupportSceneStatus ? currentMood.id !== sceneStatusId : currentMood.id !== moodInfo.id)) || !switchLed
           ) {
             return {
               success: true,
@@ -271,21 +272,21 @@ const MoodPage = () => {
   );
 
   const getItemEnable = useCallback(
-      (moodItem: MoodUIInfo) => {
-        if (params.isCeilingLight) {
-          return (
-              moodInfo.mainLamp.id === moodItem.mainLamp.id &&
-              moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
-              (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene) && !flagMode.flagMode && switchLed
-          );
-        } else if (params.isSupportSceneStatus && sceneStatusId !== -1) {
-          return sceneStatusId === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
-        } else {
-          return moodInfo.id === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
-        }
-      },
-      [moodInfo, mainWork, secondaryWork, flagMode?.flagMode, switchLed, sceneStatusId]
-  );
+    (moodItem: MoodUIInfo) => {
+      if (params.isCeilingLight) {
+        return (
+            moodInfo.mainLamp.id === moodItem.mainLamp.id &&
+            moodInfo.secondaryLamp.id === moodItem.secondaryLamp.id &&
+            (mainWork === WorkMode.Scene || secondaryWork === WorkMode.Scene) && !flagMode.flagMode && switchLed
+        );
+      } else if (params.isSupportSceneStatus && sceneStatusId !== -1) {
+        return sceneStatusId === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
+      } else {
+        return moodInfo.id === moodItem.id && mainWork === WorkMode.Scene && !flagMode.flagMode && switchLed
+      }
+    },
+    [moodInfo, mainWork, secondaryWork, flagMode?.flagMode, switchLed, sceneStatusId]
+);
 
   const nameRepeat = useCallback((mood: MoodUIInfo) => {
     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)
@@ -306,7 +307,7 @@ const MoodPage = () => {
         }}
         loading={state.loading}
       >
-        <View style={styles.tagLine}>
+        {!(params.isStringLight || params.isStripLight) && <View style={styles.tagLine}>
           <Tag
             checked={state.staticTagChecked}
             text={Strings.getLang('mood_overview_filter_name_text1')}
@@ -322,7 +323,22 @@ const MoodPage = () => {
               state.dynamicTagChecked = checked;
             }}
           />
-        </View>
+        </View>}
+        <TouchableOpacity style={{ alignItems: 'flex-end',paddingRight: cx(24) }}
+          onPress={() => {
+            showDialog({
+              method: 'confirm',
+              title: I18n.getLang('flag_resetbutton'),
+              subTitle: I18n.getLang('flag_resetdescription'),
+              onConfirm: async (_, { close }) => {
+                close()
+                await getRemoteMoodInfo(true)
+              }
+            })
+          }}
+        >
+          <Image source={res.ic_refresh} style={{ width: cx(24), height: cx(24) }} />
+        </TouchableOpacity>
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (
           <View style={styles.infoLine}>

package/src/newModules/mood/StaticMoodEditorPage.tsx

@@ -177,6 +177,14 @@ const StaticMoodEditorPage = () => {
                 reserveSV={true}
                 setIsColorMode={isColorMode => {
                   state.mainNode.isColorNode = isColorMode;
+                  if (isColorMode && state.mainNode.h === 0 && state.mainNode.s === 0 && state.mainNode.v === 0) {
+                    state.mainNode.s = 100;
+                    state.mainNode.v = 100;
+                  } else {
+                    if (state.mainNode.brightness === 0 && state.mainNode.colorTemp === 0) {
+                      state.mainNode.brightness = 100;
+                    }
+                  }
                 }}
                 hsv={state.mainNode}
                 onHSVChange={(hsv) => {

package/src/newModules/randomTime/RandomTimeDetailPage.tsx

@@ -22,6 +22,7 @@ import { Result } from "@ledvance/base/src/models/modules/Result";
 import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 
 const { convertX: cx } = Utils.RatioUtils;
+const {parseTimer} = Utils.TimeUtils
 
 export interface RandomTimeDetailPageParams extends RandomTimePageParams {
   mode: 'add' | 'edit'
@@ -225,7 +226,7 @@ const RandomTimeDetailPage = () => {
         </View>}
         {/* summary */}
         <Summary
-          frequency={loopText(state.randomTime.weeks)}
+          frequency={loopText(state.randomTime.weeks, parseTimer(state.randomTime.endTime * 60))}
           time={`${convertMinutesTo12HourFormat(state.randomTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.randomTime.endTime, is24Hour)}`}
           hideActions={true}
         />

package/src/newModules/randomTime/RandomTimePage.tsx

@@ -214,7 +214,7 @@ const RandomTimeCard = (props: {
           thumbStyle={{ elevation: 0 }}
           onValueChange={onSwitch} />
       </View>
-      <Text style={styles.loopText}>{loopText(randomTime.weeks, parseTimer(randomTime.startTime * 60))}</Text>
+      <Text style={styles.loopText}>{loopText(randomTime.weeks, parseTimer(randomTime.endTime * 60))}</Text>
       <Spacer height={cx(5)} />
       <Text style={styles.loopText}>{randomTime.name}</Text>
       <Spacer height={cx(showTags ? 5 : 20)} />

package/src/newModules/sleepWakeUp/Interface.ts

@@ -14,6 +14,7 @@ export interface WakeUpItem {
   isSleep: boolean;
   startTime: number;
   endTime: number;
+  time: number
   isColorMode: boolean;
 }
 
@@ -49,6 +50,7 @@ export interface SleepItem {
   isSleep: boolean;
   startTime: number;
   endTime: number;
+  time: number
   isColorMode: boolean;
 }
 

package/src/newModules/sleepWakeUp/SleepWakeUpActions.ts

@@ -10,6 +10,17 @@ import I18n from '@ledvance/base/src/i18n'
 const sleepPlanFeatureId = 'SleepPlan'
 const wakeUpPlanFeatureId = 'WakeUpPlan'
 
+export function getStartTime(item: SleepItem | WakeUpItem) {
+  const time = item.time - (item.isSleep ? 0 : item.delay * 5)
+  return time < 0 ? time + 1440 : time
+}
+
+export function getEndTime(item: SleepItem | WakeUpItem) {
+  // @ts-ignore
+  const time = item.time + (item.isSleep ? item.delay * 5 : item.last * 5)
+  return time > 1440 ? time - 1440 : time
+}
+
 // 接口失败重试
 let retryNumber = 0
 const putFeatureFn = async (devId, featureId, data) => {
@@ -109,9 +120,11 @@ const wakeUpDp2Obj = (dp: string): WakeUpData | undefined => {
     const brightness = hex2Int(plan.slice(18, 20))
     const temperature = hex2Int(plan.slice(20, 22))
     const last = hex2Int(plan.slice(22, 24))
-    const endTime = hour * 60 + minute
-    const endMin = endTime - delay * 5
-    const startTime = endMin < 0 ? 1440 + endMin : endMin
+    const startMin = hour * 60 + minute - delay * 5
+    const startTime = startMin < 0 ? 1440 + startMin : startMin
+    const endMin = hour * 60 + minute + last * 5
+    const endTime = endMin > 1440 ? endMin - 1440 : endMin
+    const time = hour * 60 + minute
     const cloneWeek = cloneDeep(weeks)
     cloneWeek.pop()
     const weeksValue = padStart([...cloneWeek].join(''), 8, '0')
@@ -121,6 +134,7 @@ const wakeUpDp2Obj = (dp: string): WakeUpData | undefined => {
       enable, weeks, delay, hour, minute, h, s, v, brightness, temperature, last, nodeHex, isSleep: false,
       startTime,
       endTime,
+      time,
       isColorMode: !!(h !== 0 || s !== 0 || v !== 0)
     }
   })
@@ -254,9 +268,9 @@ export const sleepDp2Obj = (dp: string): SleepData | undefined => {
     const v = hex2Int(plan.slice(16, 18))
     const brightness = hex2Int(plan.slice(18, 20))
     const temperature = hex2Int(plan.slice(20, 22))
-    const startTime = hour * 60 + minute
-    const endMin = startTime + delay * 5
-    const endTime = endMin > 1440 ? endMin - 1440 : endMin
+    const startMin = hour * 60 + minute - delay * 5
+    const startTime = startMin < 0 ? 1440 + startMin : startMin
+    const endTime = hour * 60 + minute
     const cloneWeek = cloneDeep(weeks)
     cloneWeek.pop()
     const weeksValue = padStart([...cloneWeek].join(''), 8, '0')
@@ -266,6 +280,7 @@ export const sleepDp2Obj = (dp: string): SleepData | undefined => {
       enable, weeks, delay, hour, minute, h, s, v, brightness, temperature, nodeHex, isSleep: true,
       startTime,
       endTime,
+      time: endTime,
       isColorMode: !!(h !== 0 || s !== 0 || v !== 0)
     }
   })

package/src/newModules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -30,9 +30,11 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
 import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
 import Summary from '@ledvance/base/src/components/Summary';
+import { getEndTime, getStartTime } from './SleepWakeUpActions'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
+const {parseTimer} = Utils.TimeUtils
 
 interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
   mode: 'add' | 'edit';
@@ -79,21 +81,6 @@ const SleepWakeUpDetailPage = () => {
     }
   }, [state.sleepWakeUp.last]);
 
-  useUpdateEffect(() => {
-    const { startTime, endTime, delay, isSleep } = state.sleepWakeUp;
-    if (isSleep) {
-      state.sleepWakeUp.hour = Math.trunc(startTime / 60);
-      state.sleepWakeUp.minute = startTime % 60;
-      const endMin = startTime + delay * 5;
-      state.sleepWakeUp.endTime = endMin > 1440 ? endMin - 1440 : endMin;
-    } else {
-      state.sleepWakeUp.hour = Math.trunc(endTime / 60);
-      state.sleepWakeUp.minute = endTime % 60;
-      const startMin = endTime - delay * 5;
-      state.sleepWakeUp.startTime = startMin < 0 ? startMin + 1440 : startMin;
-    }
-  }, [state.sleepWakeUp.startTime, state.sleepWakeUp.delay, state.sleepWakeUp.endTime]);
-
   const getRangeTime = (time: number, isStart?: boolean) => {
     if (isStart) {
       return time < 0 ? 1440 + time : time;
@@ -270,14 +257,10 @@ const SleepWakeUpDetailPage = () => {
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
           pmText={I18n.getLang('manage_user_calendar_label_pm')}
-          startTime={props.isSleep ? state.sleepWakeUp.startTime : state.sleepWakeUp.endTime}
+          startTime={state.sleepWakeUp.time}
           symbol={''}
           onTimerChange={time => {
-            if (props.isSleep) {
-              state.sleepWakeUp.startTime = time;
-            } else {
-              state.sleepWakeUp.endTime = time;
-            }
+            state.sleepWakeUp.time = time 
           }}
         />
 
@@ -295,7 +278,7 @@ const SleepWakeUpDetailPage = () => {
             }}
           />
           <Spacer />
-          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks)}</Text>
+          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}</Text>
           <Spacer />
         </View>
 
@@ -440,7 +423,7 @@ const SleepWakeUpDetailPage = () => {
               props.isSleep
                 ? 'add_sleepschedule_one_source_settings_text2'
                 : 'add_wakeupschedule_settings_text2',
-              `${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)}`
+              `${convertMinutesTo12HourFormat(getStartTime(state.sleepWakeUp), is24HourClock)}`
             )}
           </Text>
           <Spacer />
@@ -490,7 +473,7 @@ const SleepWakeUpDetailPage = () => {
                 {I18n.formatValue(
                   'add_wakeupschedule_settings_text5',
                   `${convertMinutesTo12HourFormat(
-                    getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    getEndTime(state.sleepWakeUp),
                     is24HourClock
                   )}`
                 )}
@@ -501,12 +484,8 @@ const SleepWakeUpDetailPage = () => {
         </View>
         {/* Summary */}
         <Summary
-          frequency={loopText(state.sleepWakeUp.weeks)}
-          time={`${convertMinutesTo12HourFormat(
-            state.sleepWakeUp.startTime,
-            is24HourClock
-          )} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime + (state.sleepWakeUp.isSleep ? 0 : state.sleepWakeUp.last * 5), 
-            is24HourClock)}`}
+          frequency={loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}
+          time={`${convertMinutesTo12HourFormat(getStartTime(state.sleepWakeUp), is24HourClock)} - ${convertMinutesTo12HourFormat(getEndTime(state.sleepWakeUp), is24HourClock)}`}
           actions={(
             <View>
               <Text style={{ fontSize: cx(12), color: '#000000' }}>
@@ -532,9 +511,7 @@ const SleepWakeUpDetailPage = () => {
               <View style={styles.filletCorner}>
                 <Text style={styles.rightTitle}>
                   {convertMinutesTo12HourFormat(
-                    props.isSleep
-                      ? state.sleepWakeUp.endTime
-                      : getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    getEndTime(state.sleepWakeUp),
                     is24HourClock
                   )}
                 </Text>

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -14,7 +14,7 @@ import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils
 import TextButton from "@ledvance/base/src/components/TextButton";
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep } from "lodash";
-import { sleepNode2Dp, useSleepMode, useWakeUp, wakeUpNode2Dp } from "./SleepWakeUpActions";
+import { getEndTime, getStartTime, sleepNode2Dp, useSleepMode, useWakeUp, wakeUpNode2Dp } from "./SleepWakeUpActions";
 import { SleepUIItem, WakeUpUIItem } from "./Interface";
 import Card from "@ledvance/base/src/components/Card";
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
@@ -22,6 +22,7 @@ import { ApplyForItem } from "../timeSchedule/Interface";
 import InfoText from "@ledvance/base/src/components/InfoText";
 
 const cx = Utils.RatioUtils.convertX
+const { parseTimer } = Utils.TimeUtils
 
 export interface SleepWakeUpPageRouteParams {
   isSupportColor?: boolean
@@ -317,13 +318,13 @@ const SleepWakeUpCard = (props: {
       <Spacer height={cx(16)} />
       <View style={styles.switchLine}>
         <Text style={styles.time}>
-          {`${convertMinutesTo12HourFormat(sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(sleepWakeUp.endTime + (sleepWakeUp.isSleep ? 0 : sleepWakeUp.last * 5), is24HourClock)}`}</Text>
+          {`${convertMinutesTo12HourFormat(getStartTime(sleepWakeUp), is24HourClock)} - ${convertMinutesTo12HourFormat(getEndTime(sleepWakeUp), is24HourClock)}`}</Text>
         <SwitchButton
           value={sleepWakeUp.enable}
           thumbStyle={{ elevation: 0 }}
           onValueChange={onSwitch} />
       </View>
-      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks)}</Text>
+      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks, parseTimer(getEndTime(sleepWakeUp) * 60))}</Text>
       <Spacer height={cx(5)} />
       <Text style={styles.loopText}>{sleepWakeUp.name}</Text>
       <Spacer height={cx(10)} />

package/src/newModules/swithInching/SwithInching.tsx

@@ -26,11 +26,11 @@ const SwitchInching = () => {
     const deviceInfo = useDeviceInfo()
     const navigation = useNavigation()
     const [switchInching, setSwitchInching] = useSwitchInching(params.switchInchingCode)
-    const [randomTimePlan, setRandomTimePlan] = useRandomTime(params.cycleTimeCode, true)
-    const [fixedTimePlan, setFixedTimePlan] = useFixedTime(params.randomTimeCode, true)
+    const [randomTimePlan, setRandomTimePlan] = useRandomTime(params.randomTimeCode, true)
+    const [fixedTimePlan, setFixedTimePlan] = useFixedTime(params.cycleTimeCode, true)
     const [countdown1, setCountDown1] = useCountdown1(params.countdownCode)
-    const randomEnable = !!randomTimePlan.filter(item => item.enable).length
-    const fixedEnable = !!fixedTimePlan.filter(item => item.enable).length
+    const randomEnable = randomTimePlan.some(item => item.enable)
+    const fixedEnable = fixedTimePlan.some(item => item.enable)
     const timerEnable = !!countdown1
     const state = useReactive<SwitchInchingState>({
         enable: false,

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -221,7 +221,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     applyContent: {
-      backgroundColor: props.theme.card.board,
+      backgroundColor: props.theme.card.border,
       borderRadius: 4,
       minHeight: cx(55),
       flex: 1,

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -141,7 +141,7 @@ const TimeSchedulePage = (props: { theme?: any }) => {
       width: 'auto',
       minWidth: cx(150),
       paddingHorizontal: cx(16),
-      backgroundColor: props.theme.button.active,
+      backgroundColor: props.theme.button.primary,
     },
     categoryList: {
       display: 'flex',