Date picker color updates

src/Date/AnimatedCrossView.tsx

@@ -58,7 +58,7 @@ export default function AnimatedCrossView({
         style={[
           styles.calendarEdit,
           {
-            backgroundColor: theme.colors.surface,
+            backgroundColor: theme.colors.elevation.level3,
             opacity: calendarOpacity.current.interpolate({
               inputRange: [0, 1],
               outputRange: [1, 0],

src/Date/CalendarEdit.tsx

@@ -10,6 +10,7 @@ import type { LocalState } from './DatePickerModalContent'
 
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
 import { memo, useCallback, useEffect, useRef } from 'react'
+import { useTheme } from 'react-native-paper'
 import { sharedStyles } from '../shared/styles'
 
 function CalendarEdit({
@@ -39,9 +40,11 @@ function CalendarEdit({
   withDateFormatInLabel?: boolean
   placeholder?: string
 }) {
+  const theme = useTheme()
   const dateInput = useRef<TextInputNative | null>(null)
   const startInput = useRef<TextInputNative | null>(null)
   const endInput = useRef<TextInputNative | null>(null)
+  const inputStyle = { backgroundColor: theme.colors.elevation.level3 }
 
   // when switching views focus, or un-focus text input
   useEffect(() => {
@@ -99,6 +102,7 @@ function CalendarEdit({
           inputEnabled={inputEnabled}
           withDateFormatInLabel={withDateFormatInLabel}
           placeholder={placeholder}
+          style={inputStyle}
         />
       ) : null}
       {mode === 'range' ? (
@@ -119,6 +123,7 @@ function CalendarEdit({
             inputEnabled={inputEnabled}
             withDateFormatInLabel={withDateFormatInLabel}
             placeholder={placeholder}
+            style={inputStyle}
           />
           <View style={styles.separator} />
           <DatePickerInputWithoutModal
@@ -136,6 +141,7 @@ function CalendarEdit({
             inputEnabled={inputEnabled}
             withDateFormatInLabel={withDateFormatInLabel}
             placeholder={placeholder}
+            style={inputStyle}
           />
         </View>
       ) : null}

src/Date/CalendarHeader.tsx

@@ -46,15 +46,15 @@ function CalendarHeader({
       {isHorizontal ? (
         <View style={styles.buttonContainer} pointerEvents={'box-none'}>
           <View style={sharedStyles.root} pointerEvents={'box-none'} />
-          <View style={{ backgroundColor: theme.colors.surface }}>
+          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
             <IconButton
               icon="chevron-left"
               accessibilityLabel={getTranslation(locale, 'previous')}
               onPress={onPrev}
               testID="react-native-paper-dates-prev-month"
             />
           </View>
-          <View style={{ backgroundColor: theme.colors.surface }}>
+          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
             <IconButton
               icon="chevron-right"
               accessibilityLabel={getTranslation(locale, 'next')}

src/Date/DatePickerModal.tsx

@@ -106,7 +106,7 @@ export function DatePickerModal(
           <View
             style={[
               styles.modalContent,
-              { backgroundColor: theme.colors.surface },
+              { backgroundColor: theme.colors.elevation.level3 },
               dimensions.width > 650
                 ? useFormSheet
                   ? styles.modalContentFormSheet

src/Date/DayName.tsx

@@ -13,7 +13,7 @@ function DayName({ label }: { label: string }) {
         maxFontSizeMultiplier={1.5}
         style={[
           styles.dayNameLabel,
-          { ...textFont, color: theme.colors.onSurface },
+          { ...textFont, color: theme.colors.onSurfaceVariant },
         ]}
         selectable={false}
       >
@@ -30,7 +30,6 @@ const styles = StyleSheet.create({
   },
   dayNameLabel: {
     fontSize: 14,
-    opacity: 0.7,
   },
 })
 

src/Date/DayNames.tsx

@@ -39,7 +39,10 @@ function DayNames({
 
   return (
     <View
-      style={[styles.dayNames, { backgroundColor: theme.colors.surface }]}
+      style={[
+        styles.dayNames,
+        { backgroundColor: theme.colors.elevation.level3 },
+      ]}
       pointerEvents="none"
     >
       {shortDayNames
@@ -53,7 +56,6 @@ function DayNames({
 const styles = StyleSheet.create({
   dayNames: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     flexDirection: 'row',
     height: dayNamesHeight,
   },

src/Date/YearPicker.tsx

@@ -44,7 +44,7 @@ export default function YearPicker({
       style={[
         StyleSheet.absoluteFill,
         styles.root,
-        { backgroundColor: theme.colors.surface },
+        { backgroundColor: theme.colors.elevation.level3 },
         selectingYear ? sharedStyles.opacity1 : sharedStyles.opacity0,
       ]}
       pointerEvents={selectingYear ? 'auto' : 'none'}

src/Time/AmPmSwitcher.tsx

@@ -9,29 +9,34 @@ export default function AmPmSwitcher({
   onChange,
   hours,
   inputType,
+  direction = 'vertical',
 }: {
   hours: number
   onChange: (newHours: number) => any
   inputType: PossibleInputTypes
+  direction?: 'vertical' | 'horizontal'
 }) {
   const theme = useTheme()
 
   const { setMode, mode } = useContext(DisplayModeContext)
 
   const backgroundColor = theme.colors.outline
-
+  const isHorizontal = direction === 'horizontal'
   const isAM = mode === 'AM'
 
+  const height = isHorizontal ? 38 : inputType === inputTypes.keyboard ? 72 : 80
+
   return (
     <View
       style={[
-        styles.root,
+        isHorizontal ? styles.rootHorizontal : styles.rootVertical,
         // eslint-disable-next-line react-native/no-inline-styles
         {
           borderColor: backgroundColor,
           borderRadius: theme.roundness * 2,
-          height: inputType === inputTypes.keyboard ? 72 : 80,
-          marginBottom: inputType === 'keyboard' ? 16 : 0,
+          height,
+          marginBottom:
+            !isHorizontal && inputType === inputTypes.keyboard ? 16 : 0,
         },
       ]}
     >
@@ -46,7 +51,12 @@ export default function AmPmSwitcher({
         selected={isAM}
         disabled={isAM}
       />
-      <View style={[styles.switchSeparator, { backgroundColor }]} />
+      <View
+        style={[
+          isHorizontal ? styles.separatorHorizontal : styles.separatorVertical,
+          { backgroundColor },
+        ]}
+      />
       <SwitchButton
         label="PM"
         onPress={() => {
@@ -111,15 +121,25 @@ function SwitchButton({
 }
 
 const styles = StyleSheet.create({
-  root: {
+  rootVertical: {
     width: 52,
     borderWidth: 1,
     overflow: 'hidden',
   },
-  switchSeparator: {
+  rootHorizontal: {
+    width: 216,
+    flexDirection: 'row',
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  separatorVertical: {
     height: 1,
     width: 52,
   },
+  separatorHorizontal: {
+    width: 1,
+    alignSelf: 'stretch',
+  },
   switchButtonInner: {
     flex: 1,
     alignItems: 'center',

src/Time/TimeInputs.tsx

@@ -8,6 +8,7 @@ import { Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
+  inputTypes,
   PossibleClockTypes,
   PossibleInputTypes,
   toHourInputFormat,
@@ -52,6 +53,8 @@ function TimeInputs({
   const endInput = useRef<TextInputNative | null>(null)
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
+  const useHorizontalAmPm =
+    !is24Hour && isLandscape && inputType === inputTypes.picker
   const minutesRef = useLatest(minutes)
 
   const onSubmitStartInput = useCallback(() => {
@@ -75,8 +78,8 @@ function TimeInputs({
     [onChange, minutesRef]
   )
 
-  return (
-    <View style={[styles.inputContainer, isLandscape && sharedStyles.root]}>
+  const hourMinuteRow = (
+    <View style={styles.inputContainer}>
       <View style={styles.column}>
         <TimeInput
           ref={startInput}
@@ -178,18 +181,37 @@ function TimeInputs({
           </Text>
         ) : null}
       </View>
-      {!is24Hour && (
+      {!is24Hour && !useHorizontalAmPm ? (
         <>
           <View style={styles.spaceBetweenInputsAndSwitcher} />
           <AmPmSwitcher
             hours={hours}
             onChange={onChangeHours}
             inputType={inputType}
+            direction="vertical"
           />
         </>
-      )}
+      ) : null}
     </View>
   )
+
+  if (useHorizontalAmPm) {
+    return (
+      <View style={styles.landscapeColumn}>
+        {hourMinuteRow}
+        <View style={styles.landscapeSwitcherSpacing}>
+          <AmPmSwitcher
+            hours={hours}
+            onChange={onChangeHours}
+            inputType={inputType}
+            direction="horizontal"
+          />
+        </View>
+      </View>
+    )
+  }
+
+  return hourMinuteRow
 }
 
 const styles = StyleSheet.create({
@@ -213,6 +235,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  landscapeColumn: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  landscapeSwitcherSpacing: {
+    marginTop: 16,
+  },
   spaceBetweenInputsAndSwitcher: {
     width: 12,
   },

src/Time/TimePicker.tsx

@@ -84,25 +84,22 @@ function TimePicker({
     [onChange, hours, is24Hour]
   )
 
+  const inputsWidth =
+    96 * 2 +
+    24 +
+    (is24Hour || (isLandscape && inputType === inputTypes.picker) ? 0 : 12 + 52)
+
+  const clockWidth =
+    inputType === inputTypes.picker ? circleSize + (isLandscape ? 64 : 0) : 0
+
   return (
     <DisplayModeContext.Provider
       value={{ mode: displayMode, setMode: setDisplayMode }}
     >
       <View
         style={
           isLandscape
-            ? [
-                styles.rootLandscape,
-                {
-                  width:
-                    24 * 3 +
-                    96 * 2 +
-                    52 +
-                    (inputType === inputTypes.picker
-                      ? circleSize
-                      : -circleSize),
-                },
-              ]
+            ? [styles.rootLandscape, { width: inputsWidth + clockWidth }]
             : styles.rootPortrait
         }
       >
@@ -118,7 +115,12 @@ function TimePicker({
           locale={locale}
         />
         {inputType === inputTypes.picker ? (
-          <View style={styles.clockContainer}>
+          <View
+            style={[
+              styles.clockContainer,
+              isLandscape && styles.clockContainerLandscape,
+            ]}
+          >
             <AnalogClock
               hours={toHourInputFormat(hours, is24Hour)}
               minutes={minutes}
@@ -139,6 +141,11 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     paddingRight: 12,
   },
+  clockContainerLandscape: {
+    paddingTop: 0,
+    paddingLeft: 64,
+    paddingRight: 0,
+  },
   rootLandscape: {
     flexDirection: 'row',
     alignItems: 'center',