diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx
index 7ad84b901..5a439462d 100644
--- a/ts/components/dialog/UserDetailsDialog.tsx
+++ b/ts/components/dialog/UserDetailsDialog.tsx
@@ -72,9 +72,11 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index 001f0c5f0..62ba84a5a 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -10,7 +10,7 @@ import { Flex } from '../basic/Flex';
import { SpacerMD } from '../basic/Text';
import { SessionIconButton } from '../icon';
-const StyledInput = styled(motion.input)<{ centerText?: boolean }>`
+const StyledInput = styled(motion.input)<{ centerText?: boolean; monospaced?: boolean }>`
border: 1px solid var(--input-border-color);
border-radius: 13px;
outline: 0;
@@ -18,7 +18,7 @@ const StyledInput = styled(motion.input)<{ centerText?: boolean }>`
background: transparent;
color: var(--input-text-color);
- font-family: var(--font-default);
+ font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
font-size: 12px;
line-height: 14px;
padding: var(--margins-lg);
@@ -30,18 +30,17 @@ const StyledInput = styled(motion.input)<{ centerText?: boolean }>`
}
`;
-const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean }>`
+const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean; monospaced?: boolean }>`
border: 1px solid var(--input-border-color);
border-radius: 13px;
outline: 0;
width: 100%;
- min-height: 100px;
background: transparent;
color: var(--input-text-color);
- font-family: var(--font-mono);
- font-size: var(--font-size-md);
- line-height: 18px;
+ font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
+ font-size: 12px;
+ line-height: 14px;
${props => props.centerText && 'text-align: center;'}
@@ -63,10 +62,10 @@ const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean }>`
${props => props.centerText && 'text-align: center;'}
:placeholder-shown {
- font-family: var(--font-default);
- height: 28px;
+ font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
+ font-size: 12px;
+ height: 48px;
margin: var(--margins-md) 0;
- padding: var(--margins-xl);
}
::placeholder {
@@ -76,7 +75,7 @@ const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean }>`
}
`;
-const StyledInputContainer = styled(Flex)<{ error: boolean; isGroup?: boolean }>`
+const StyledInputContainer = styled(Flex)<{ error: boolean; biggerText?: boolean }>`
position: relative;
width: 100%;
@@ -103,25 +102,24 @@ const StyledInputContainer = styled(Flex)<{ error: boolean; isGroup?: boolean }>
}
${props =>
- props.isGroup &&
+ props.biggerText &&
`
- ${StyledInput} {
- font-family: var(--font-mono);
- font-size: var(--font-size-md);
- line-height: 18px;
- }
+ ${StyledInput} {
+ font-size: var(--font-size-md);
+ line-height: 18px;
+ }
- ${StyledTextAreaContainer} {
- font-family: var(--font-mono);
- font-size: var(--font-size-md);
- line-height: 18px;
+ ${StyledTextAreaContainer} {
+ font-size: var(--font-size-md);
+ line-height: 18px;
- textarea {
- :placeholder-shown {
- font-family: var(--font-mono);
- }
+ textarea {
+ :placeholder-shown {
+ font-size: var(--font-size-md);
+ height: 56px;
}
}
+ }
`}
`;
@@ -194,12 +192,11 @@ type Props = {
inputDataTestId?: string;
id?: string;
ctaButton?: ReactNode;
- /** Font is larger and monospaced */
- isGroup?: boolean;
- /** Gives us a textarea with a monospace font. Mostly used for joining conversations, groups or communities */
- isSpecial?: boolean;
+ monospaced?: boolean;
+ biggerText?: boolean;
centerText?: boolean;
editable?: boolean;
+ isTextArea?: boolean;
className?: string;
};
@@ -218,10 +215,11 @@ export const SessionInput = (props: Props) => {
inputDataTestId,
id = 'session-input-floating-label',
ctaButton,
- isGroup,
- isSpecial,
+ monospaced,
+ biggerText,
centerText,
editable = true,
+ isTextArea,
className,
} = props;
const [inputValue, setInputValue] = useState('');
@@ -265,7 +263,7 @@ export const SessionInput = (props: Props) => {
return;
}
if (event.key === 'Enter' && onEnterPressed) {
- if (isSpecial && event.shiftKey) {
+ if (isTextArea && event.shiftKey) {
return;
}
event.preventDefault();
@@ -297,15 +295,15 @@ export const SessionInput = (props: Props) => {
justifyContent="center"
alignItems="center"
error={Boolean(errorString)}
- isGroup={isGroup}
+ biggerText={biggerText}
>
- {isSpecial ? (
-
+ {isTextArea ? (
+
) : (
-
+
)}
{editable && enableShowHide && (
{
onEnterPressed={onEnterPressed}
error={groupNameError}
maxLength={VALIDATION.MAX_GROUP_NAME_LENGTH}
+ biggerText={true}
centerText={true}
- isGroup={true}
+ monospaced={true}
+ isTextArea={true}
inputDataTestId="new-closed-group-name"
/>
diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx
index fae28e29a..cf1376eec 100644
--- a/ts/components/leftpane/overlay/OverlayCommunity.tsx
+++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx
@@ -106,8 +106,10 @@ export const OverlayCommunity = () => {
onEnterPressed={onTryJoinRoom}
error={groupUrlError}
maxLength={VALIDATION.MAX_COMMUNITY_NAME_LENGTH}
+ biggerText={true}
centerText={true}
- isGroup={true}
+ monospaced={true}
+ isTextArea={true}
/>
diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx
index 86081fa0b..8ee24390c 100644
--- a/ts/components/leftpane/overlay/OverlayInvite.tsx
+++ b/ts/components/leftpane/overlay/OverlayInvite.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
import { resetLeftOverlayMode } from '../../../state/ducks/section';
import { SessionButton } from '../../basic/SessionButton';
-import { ToastUtils, UserUtils } from '../../../session/utils';
+import { UserUtils } from '../../../session/utils';
import { SpacerLG, SpacerMD } from '../../basic/Text';
import { SessionInput } from '../../inputs';
import { StyledLeftPaneOverlay } from './OverlayMessage';
@@ -52,9 +52,9 @@ export const OverlayInvite = () => {
autoFocus={true}
type="text"
value={ourSessionID}
- isSpecial={true}
centerText={true}
editable={false}
+ isTextArea={true}
inputDataTestId="invite-account-id"
/>
@@ -65,7 +65,7 @@ export const OverlayInvite = () => {
text={window.i18n('editMenuCopy')}
onClick={() => {
window.clipboard.writeText(ourSessionID);
- ToastUtils.pushCopiedToClipBoard();
+ // TODO[epic=SES-955] update to next screen
}}
dataTestId="invite-account-id-copy"
/>
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index 829b9882b..7789e818c 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessage.tsx
@@ -164,8 +164,8 @@ export const OverlayMessage = () => {
onValueChanged={setPubkeyOrOns}
onEnterPressed={handleMessageButtonClick}
error={pubkeyOrOnsError}
- isSpecial={true}
centerText={true}
+ isTextArea={true}
inputDataTestId="new-session-conversation"
/>