Merge pull request #1914 from wix/feat/ExpandableCalendar_knob_color

App style - Add support for ExpandableCalendar's knob color

Author: Inbal-Tish

example/src/screens/expandableCalendarScreen.tsx

@@ -122,21 +122,23 @@ function getTheme() {
     // arrows
     arrowColor: 'black',
     arrowStyle: {padding: 0},
+    // knob
+    expandableKnobColor: themeColor,
     // month
     monthTextColor: 'black',
     textMonthFontSize: 16,
     textMonthFontFamily: 'HelveticaNeue',
-    textMonthFontWeight: 'bold',
+    textMonthFontWeight: 'bold' as 'bold',
     // day names
     textSectionTitleColor: 'black',
     textDayHeaderFontSize: 12,
     textDayHeaderFontFamily: 'HelveticaNeue',
-    textDayHeaderFontWeight: 'normal',
+    textDayHeaderFontWeight: 'normal' as 'normal',
     // dates
     dayTextColor: themeColor,
     textDayFontSize: 18,
     textDayFontFamily: 'HelveticaNeue',
-    textDayFontWeight: '500',
+    textDayFontWeight: '500' as '500',
     textDayStyle: {marginTop: Platform.OS === 'android' ? 2 : 4},
     // selected date
     selectedDayBackgroundColor: themeColor,
@@ -186,7 +188,7 @@ export default class ExpandableCalendarScreen extends Component<Props> {
         onMonthChange={this.onMonthChange}
         showTodayButton
         disabledOpacity={0.6}
-        // theme={this.todayBtnTheme}
+        theme={this.todayBtnTheme}
         // todayBottomMargin={16}
       >
         {this.props.weekView ? (
@@ -202,7 +204,7 @@ export default class ExpandableCalendarScreen extends Component<Props> {
             // calendarStyle={styles.calendar}
             // headerStyle={styles.calendar} // for horizontal only
             // disableWeekScroll
-            // theme={this.theme}
+            theme={this.theme}
             // disableAllTouchEventsForDisabledDays
             firstDay={1}
             markedDates={this.marked}

src/expandableCalendar/style.ts

@@ -47,7 +47,7 @@ export default function styleConstructor(theme: Theme = {}) {
       width: 40,
       height: 4,
       borderRadius: 3,
-      backgroundColor: '#e8ecf0'
+      backgroundColor: appStyle.expandableKnobColor
     },
     sectionText: {
       fontWeight: 'bold', 

src/style.ts

@@ -53,6 +53,7 @@ export const agendaDayTextColor = '#7a92a5';
 export const agendaDayNumColor = '#7a92a5';
 export const agendaTodayColor = textLinkColor;
 export const agendaKnobColor = '#f2F4f5';
+export const expandableKnobColor = '#e8ecf0';
 export const todayButtonTextColor = textLinkColor;
 export const todayButtonPosition = undefined; // right' / 'left'(default)