From 2b95e6a28340e3fc1a2c049855b639732271268b Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 1 May 2024 18:33:29 +1000
Subject: [PATCH] feat: session input styles are now separated into per styling

monospaced, biggerText, isTextArea
---
 ts/components/dialog/UserDetailsDialog.tsx    |  4 +-
 ts/components/inputs/SessionInput.tsx         | 70 +++++++++----------
 .../leftpane/overlay/OverlayClosedGroup.tsx   |  4 +-
 .../leftpane/overlay/OverlayCommunity.tsx     |  4 +-
 .../leftpane/overlay/OverlayInvite.tsx        |  6 +-
 .../leftpane/overlay/OverlayMessage.tsx       |  2 +-
 6 files changed, 47 insertions(+), 43 deletions(-)

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) => {
       <SpacerLG />
       <SessionInput
         value={props.conversationId}
-        isSpecial={true}
+        biggerText={true}
         centerText={true}
         editable={false}
+        monospaced={true}
+        isTextArea={true}
       />
       <SpacerLG />
       <div className="session-modal__button-group__center">
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}
     >
       <Flex container={true} width="100%" alignItems="center" style={{ position: 'relative' }}>
-        {isSpecial ? (
-          <StyledTextAreaContainer centerText={centerText}>
+        {isTextArea ? (
+          <StyledTextAreaContainer centerText={centerText} monospaced={monospaced}>
             <textarea {...inputProps} />
           </StyledTextAreaContainer>
         ) : (
-          <StyledInput {...inputProps} centerText={centerText} />
+          <StyledInput {...inputProps} centerText={centerText} monospaced={monospaced} />
         )}
         {editable && enableShowHide && (
           <ShowHideButton
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index e4a856563..9ac84d26a 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -149,8 +149,10 @@ export const OverlayClosedGroup = () => {
         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"
       />
       <SpacerMD />
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}
       />
       <Spacer2XL />
       <SessionButton text={window.i18n('join')} disabled={!groupUrl} onClick={onTryJoinRoom} />
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"
       />
       <SpacerMD />
@@ -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"
       />
       <SpacerMD />