diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index 86202d110..8d2afadab 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/ts/components/dialog/UserDetailsDialog.tsx @@ -82,7 +82,7 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => { > ` position: relative; width: 100%; @@ -41,18 +41,18 @@ const StyledSessionInput = styled(Flex)<{ } ${props => - props.fontSize && + props.textSize && ` ${StyledInput} { - font-size: var(--font-size-${props.fontSize}); + font-size: var(--font-size-${props.textSize}); } ${StyledTextAreaContainer} { - font-size: var(--font-size-${props.fontSize}); + font-size: var(--font-size-${props.textSize}); textarea { &:placeholder-shown { - font-size: var(--font-size-${props.fontSize}); + font-size: var(--font-size-${props.textSize}); } } } @@ -91,12 +91,12 @@ const StyledInput = styled(motion.input)<{ const StyledTextAreaContainer = styled(motion.div)<{ error: boolean; centerText?: boolean; - fontSize?: TextSizes; + textSize?: TextSizes; monospaced?: boolean; }>` overflow: hidden; position: relative; - height: ${props => (props.fontSize ? `calc(var(--font-size-${props.fontSize}) * 4)` : '48px')}; + height: ${props => (props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px')}; width: 100%; margin: var(--margins-sm) var(--margins-md); @@ -121,7 +121,7 @@ const StyledTextAreaContainer = styled(motion.div)<{ position: absolute; top: ${props => - props.fontSize ? `calc(var(--font-size-${props.fontSize}) + 5px)` : 'calc(12px + 5px)'}; + props.textSize ? `calc(var(--font-size-${props.textSize}) + 5px)` : 'calc(12px + 5px)'}; resize: none; overflow-wrap: break-word; @@ -210,14 +210,13 @@ type Props = { onValueChanged?: (value: string) => any; onEnterPressed?: (value: string) => any; autoFocus?: boolean; - // TODO rename disableOnBlurEvent - disabledOnBlur?: boolean; + disableOnBlurEvent?: boolean; inputRef?: any; inputDataTestId?: string; id?: string; ctaButton?: ReactNode; monospaced?: boolean; - fontSize?: TextSizes; + textSize?: TextSizes; centerText?: boolean; editable?: boolean; isTextArea?: boolean; @@ -237,13 +236,13 @@ export const SessionInput = (props: Props) => { onValueChanged, onEnterPressed, autoFocus, - disabledOnBlur, + disableOnBlurEvent, inputRef, inputDataTestId, id = 'session-input-floating-label', ctaButton, monospaced, - fontSize, + textSize, centerText, editable = true, isTextArea, @@ -287,7 +286,7 @@ export const SessionInput = (props: Props) => { style: { paddingInlineEnd: enableShowHide ? '48px' : undefined }, // just in case onChange isn't triggered onBlur: (event: ChangeEvent) => { - if (editable && !disabledOnBlur) { + if (editable && !disableOnBlurEvent) { updateInputValue(event); } }, @@ -309,7 +308,7 @@ export const SessionInput = (props: Props) => { const containerProps = { error: Boolean(error), centerText, - fontSize, + textSize, monospaced, }; @@ -328,7 +327,7 @@ export const SessionInput = (props: Props) => { justifyContent="center" alignItems="center" error={Boolean(errorString)} - fontSize={fontSize} + textSize={textSize} > { onEnterPressed={onEnterPressed} error={groupNameError} maxLength={VALIDATION.MAX_GROUP_NAME_LENGTH} - fontSize="md" + textSize="md" centerText={true} monospaced={true} isTextArea={true} diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx index f60f2a9cd..52ece519b 100644 --- a/ts/components/leftpane/overlay/OverlayCommunity.tsx +++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx @@ -106,7 +106,7 @@ export const OverlayCommunity = () => { onEnterPressed={onTryJoinRoom} error={groupUrlError} maxLength={VALIDATION.MAX_COMMUNITY_NAME_LENGTH} - fontSize="md" + textSize="md" centerText={true} monospaced={true} isTextArea={true} diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx index 67b1f4aea..70cd20e72 100644 --- a/ts/components/registration/stages/CreateAccount.tsx +++ b/ts/components/registration/stages/CreateAccount.tsx @@ -129,7 +129,7 @@ export const CreateAccount = () => { { {