Changeset View
Standalone View
native/community-creation/community-configuration.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { Text, View } from 'react-native'; | import { Text, View } from 'react-native'; | ||||
import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; | import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; | ||||
import RegistrationContainer from '../account/registration/registration-container.react.js'; | import RegistrationContainer from '../account/registration/registration-container.react.js'; | ||||
import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; | import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; | ||||
import { | |||||
ThreadSettingsCategoryFooter, | |||||
ThreadSettingsCategoryHeader, | |||||
} from '../chat/settings/thread-settings-category.react.js'; | |||||
import CommIcon from '../components/comm-icon.react.js'; | import CommIcon from '../components/comm-icon.react.js'; | ||||
import Pill from '../components/pill.react.js'; | import Pill from '../components/pill.react.js'; | ||||
import TextInput from '../components/text-input.react.js'; | |||||
import { type NavigationRoute } from '../navigation/route-names.js'; | import { type NavigationRoute } from '../navigation/route-names.js'; | ||||
import { useColors, useStyles } from '../themes/colors.js'; | import { useColors, useStyles } from '../themes/colors.js'; | ||||
type Props = { | type Props = { | ||||
+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, | +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, | ||||
+route: NavigationRoute<'CommunityConfiguration'>, | +route: NavigationRoute<'CommunityConfiguration'>, | ||||
}; | }; | ||||
// eslint-disable-next-line no-unused-vars | // eslint-disable-next-line no-unused-vars | ||||
function CommunityConfiguration(props: Props): React.Node { | function CommunityConfiguration(props: Props): React.Node { | ||||
const styles = useStyles(unboundStyles); | const styles = useStyles(unboundStyles); | ||||
const colors = useColors(); | const colors = useColors(); | ||||
const cloudIcon = ( | const cloudIcon = ( | ||||
<CommIcon | <CommIcon | ||||
name="cloud-filled" | name="cloud-filled" | ||||
size={12} | size={12} | ||||
color={colors.panelForegroundLabel} | color={colors.panelForegroundLabel} | ||||
/> | /> | ||||
); | ); | ||||
const [pendingCommunityName, setPendingCommunityName] = React.useState(''); | |||||
const containerPaddingOverride = React.useMemo(() => ({ padding: 0 }), []); | const containerPaddingOverride = React.useMemo(() => ({ padding: 0 }), []); | ||||
return ( | return ( | ||||
<RegistrationContainer> | <RegistrationContainer> | ||||
<RegistrationContentContainer style={containerPaddingOverride}> | <RegistrationContentContainer style={containerPaddingOverride}> | ||||
<View style={styles.keyserverRowContainer}> | <View style={styles.keyserverRowContainer}> | ||||
<Text style={styles.withinText}>within</Text> | <Text style={styles.withinText}>within</Text> | ||||
<Pill | <Pill | ||||
label="ashoat" | label="ashoat" | ||||
backgroundColor={colors.codeBackground} | backgroundColor={colors.codeBackground} | ||||
icon={cloudIcon} | icon={cloudIcon} | ||||
/> | /> | ||||
</View> | </View> | ||||
<ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" /> | |||||
ashoat: The way you're mixing components from different places is weird, but I think it's good that… | |||||
atulAuthorUnsubmitted Done Inline ActionsAh yeah intended to leave a comment here flagging this, also reusing RegistrationContainer and RegistrationContentContainer here. Was going to try to generalize naming + possibly move to /components later in the stack. Will create a Linear task to track: https://linear.app/comm/issue/ENG-3929/renamemove-components-used-in-communityconfiguration-to-make-more atul: Ah yeah intended to leave a comment here flagging this, also reusing `RegistrationContainer`… | |||||
<View style={styles.communityNameRow}> | |||||
<Text style={styles.communityNameLabel}>Name</Text> | |||||
<TextInput | |||||
ashoatUnsubmitted Not Done Inline ActionsShould we use RegistrationTextInput to maximize reuse / consistency? It uses panelSecondaryForegroundBorder instead of textInputPlaceholder, which is shadesBlack70 in dark mode instead of shadesWhite60. Feels like a pretty significant difference... did Ted really design these interfaces with such a different placeholder color? ashoat: Should we use `RegistrationTextInput` to maximize reuse / consistency? It uses… | |||||
atulAuthorUnsubmitted Done Inline ActionsWe could, but the RegistrationTextInput component looks a lot different than the TextInput in the designs (which more closely resemble inputs in ThreadSettings). There were no placeholder colors specified in the designs, so I just browsed Figma until I found a text input w/ a similar background and placeholder and copied that. In hindsight I probably should've copied the link down somewhere to reference it.... What I can do now is use the placeholder colors from RegistrationTextInput and then create a Linear task in the DES workspace to follow up w/ @ted when he's back? atul: We could, but the `RegistrationTextInput` component looks a lot different than the `TextInput`… | |||||
style={styles.communityNamePendingValue} | |||||
placeholder="Community Name" | |||||
placeholderTextColor={colors.textInputPlaceholder} | |||||
value={pendingCommunityName} | |||||
onChangeText={setPendingCommunityName} | |||||
editable={true} | |||||
/> | |||||
</View> | |||||
<ThreadSettingsCategoryFooter type="full" /> | |||||
</RegistrationContentContainer> | </RegistrationContentContainer> | ||||
</RegistrationContainer> | </RegistrationContainer> | ||||
); | ); | ||||
} | } | ||||
const unboundStyles = { | const unboundStyles = { | ||||
keyserverRowContainer: { | keyserverRowContainer: { | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
justifyContent: 'center', | justifyContent: 'center', | ||||
alignItems: 'center', | alignItems: 'center', | ||||
backgroundColor: 'panelForeground', | backgroundColor: 'panelForeground', | ||||
height: 48, | height: 48, | ||||
borderColor: 'panelForegroundBorder', | borderColor: 'panelForegroundBorder', | ||||
borderBottomWidth: 1, | borderBottomWidth: 1, | ||||
}, | }, | ||||
withinText: { | withinText: { | ||||
color: 'panelForegroundLabel', | color: 'panelForegroundLabel', | ||||
fontSize: 14, | fontSize: 14, | ||||
marginRight: 6, | marginRight: 6, | ||||
}, | }, | ||||
communityNameRow: { | |||||
backgroundColor: 'panelForeground', | |||||
flexDirection: 'row', | |||||
paddingHorizontal: 24, | |||||
paddingVertical: 8, | |||||
}, | |||||
communityNameLabel: { | |||||
color: 'panelForegroundTertiaryLabel', | |||||
fontSize: 16, | |||||
width: 96, | |||||
}, | |||||
communityNamePendingValue: { | |||||
color: 'panelForegroundSecondaryLabel', | |||||
flex: 1, | |||||
fontFamily: 'Arial', | |||||
fontSize: 16, | |||||
margin: 0, | |||||
paddingLeft: 4, | |||||
paddingRight: 0, | |||||
paddingVertical: 0, | |||||
borderBottomColor: 'transparent', | |||||
}, | |||||
}; | }; | ||||
export default CommunityConfiguration; | export default CommunityConfiguration; |
The way you're mixing components from different places is weird, but I think it's good that components are being reused in general. Can you make a Linear task to rename / move these general-purpose components somewhere later?
(I did check and they're all using the panel family of colors, which is good for compatibility)