tweaking keyboard offset control

Author: balzack

app/client/mobile/src/conversation/ConversationSmall.tsx

@@ -312,7 +312,7 @@ export function ConversationSmall({close, openDetails}: {close: () => void; open
               <ActivityIndicator />
             </View>
           )}
-          <View style={styles.canvas}>
+          <Surface style={styles.canvas} mode="flat" elevation={2}>
             <Surface style={{...styles.frame, borderColor: theme.colors.outlineVariant}} mode="flat" elevation={0}>
               <Animated.View style={[{}, {height: scale}]}>
                 {state.assets.length > 0 && <View style={styles.assetSpacer} />}
@@ -437,9 +437,9 @@ export function ConversationSmall({close, openDetails}: {close: () => void; open
                 />
               </View>
             </Surface>
-          </View>
+          </Surface>
           { focused && (
-            <View style={{...styles.keyboardSpacer, height: state.keyboardOffset + keyboardHeight - (Platform.OS === 'ios' ? 96 : 80)}} />
+            <Surface style={{...styles.keyboardSpacer, height: state.keyboardOffset + keyboardHeight - (Platform.OS === 'ios' ? 96 : 80)}} mode="flat" elevation={2} />
           )}
         </SafeAreaView>
       </Surface>

app/client/mobile/src/settings/Settings.styled.ts

@@ -679,4 +679,15 @@ export const styles = StyleSheet.create({
   navSkip: {
     backgroundColor: 'transparent',
   },
+  splitLabel: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingRight: 24,
+  },
+  labelValue: {
+    fontSize: 14,
+  },
 });

app/client/mobile/src/settings/SettingsSmall.tsx

@@ -818,25 +818,6 @@ export function SettingsSmall({setupNav}: {setupNav: {back: () => void; next: ()
                     </Surface>
                   </View>
                 )}
-
-                {!setupNav && (
-                  <Text variant="headlineSmall" style={styles.sectionLabel}>
-                    {state.strings.layout}
-                  </Text>
-                )}
-                {!setupNav && (
-                  <View style={styles.navWrapper}>
-                    <Surface elevation={0} mode="flat" style={styles.navData}>
-                      <View style={styles.navFont}>
-                        <TextInput style={styles.navInput} mode="outlined" outlineStyle={styles.navInputBorder} placeholder={state.strings.keyboardOffset} />
-                        <View style={styles.navPress} />
-                      </View>
-                      <View style={styles.slider}>
-                        <Slider minimumValue={-128} maximumValue={128} minimumTrackTintColor={theme.colors.primary} value={state.keyboardOffset} onSlidingComplete={val => actions.setKeyboardOffset(val)} />
-                      </View>
-                    </Surface>
-                  </View>
-                )}
                 {!setupNav && (
                   <Text variant="headlineSmall" style={styles.sectionLabel}>
                     {state.strings.blocked}
@@ -880,6 +861,27 @@ export function SettingsSmall({setupNav}: {setupNav: {back: () => void; next: ()
                     </Surface>
                   </View>
                 )}
+                {!setupNav && (
+                  <Text variant="headlineSmall" style={styles.sectionLabel}>
+                    {state.strings.layout}
+                  </Text>
+                )}
+                {!setupNav && (
+                  <View style={styles.navWrapper}>
+                    <Surface elevation={0} mode="flat" style={styles.navData}>
+                      <View style={styles.navFont}>
+                        <View style={styles.splitLabel}>
+                          <TextInput style={styles.navInput} mode="outlined" outlineStyle={styles.navInputBorder} placeholder={state.strings.keyboardOffset} />
+                          <Text style={{...styles.labelValue, color: theme.colors.tertiary}}>{ Math.floor(state.keyboardOffset) * 4 }px</Text>
+                        </View>
+                        <View style={styles.navPress} />
+                      </View>
+                      <View style={styles.slider}>
+                        <Slider minimumValue={-128} maximumValue={128} minimumTrackTintColor={theme.colors.primary} value={state.keyboardOffset} onSlidingComplete={val => actions.setKeyboardOffset(val)} />
+                      </View>
+                    </Surface>
+                  </View>
+                )}
                 {!setupNav && (
                   <Text variant="headlineSmall" style={styles.sectionLabel}>
                     {state.strings.support}