feat: added support for cta button

with sliding down animation if an error occurs

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx

@@ -41,6 +41,7 @@ import { AttachmentTypeWithPath } from '../../../../types/Attachment';
 import { getAbsoluteAttachmentPath } from '../../../../types/MessageAttachment';
 import { Avatar, AvatarSize } from '../../../avatar/Avatar';
 import { Flex } from '../../../basic/Flex';
+import { SessionButton } from '../../../basic/SessionButton';
 import { SpacerLG, SpacerMD, SpacerXL } from '../../../basic/Text';
 import { SessionInput2 } from '../../../inputs';
 import { MediaItemType } from '../../../lightbox/LightboxGallery';
@@ -234,7 +235,7 @@ export const OverlayRightPanelSettings = () => {
 
   const handleInputChanged = (name: string) => {
     sanitizeDisplayNameOrToast(name, setInputValue, setInputError);
-    if (name.length > MAX_USERNAME_BYTES) {
+    if (name.length > 8) {
       setInputError(window.i18n('displayNameTooLong'));
     }
   };
@@ -347,6 +348,16 @@ export const OverlayRightPanelSettings = () => {
           maxLength={MAX_USERNAME_BYTES}
           onValueChanged={handleInputChanged}
           onEnterPressed={handleEnterPressed}
+          ctaButton={
+            <SessionButton
+              onClick={() => {
+                window.log.debug(
+                  `WIP: [OverlayRightPanelSettings] clicked continuing your session! `
+                );
+              }}
+              text={window.i18n('continueYourSession')}
+            />
+          }
         />
         {/* <HeaderItem />
         <PanelButtonGroup style={{ margin: '0 var(--margins-lg)' }}>

ts/components/inputs/SessionInput2.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react';
 
 import { motion } from 'framer-motion';
 import { isEmpty, isEqual } from 'lodash';
@@ -82,6 +82,10 @@ const ShowHideButton = (props: { toggleForceShow: Noop }) => {
   );
 };
 
+const StyledCtaContainer = styled(motion.div)`
+  width: 100%;
+`;
+
 type Props = {
   error?: string;
   type?: string;
@@ -95,6 +99,7 @@ type Props = {
   ref?: any;
   inputDataTestId?: string;
   id?: string;
+  ctaButton?: ReactNode;
 };
 
 export const SessionInput2 = (props: Props) => {
@@ -109,6 +114,7 @@ export const SessionInput2 = (props: Props) => {
     onValueChanged,
     inputDataTestId,
     id = 'session-input-floating-label',
+    ctaButton,
   } = props;
   const [inputValue, setInputValue] = useState('');
   const [errorString, setErrorString] = useState('');
@@ -174,12 +180,16 @@ export const SessionInput2 = (props: Props) => {
           }}
         />
       )}
-      {errorString ? (
+
-        <>
+      {ctaButton || errorString ? <SpacerMD /> : null}
-          <SpacerMD />
+      {errorString ? <ErrorItem id={id} error={errorString} /> : null}
-          <ErrorItem id={id} error={errorString} />
+
-        </>
+      <StyledCtaContainer
-      ) : null}
+        initial={{ y: errorString && ctaButton ? 0 : undefined }}
+        animate={{ y: errorString && ctaButton ? 'var(--margins-md)' : undefined }}
+      >
+        {ctaButton}
+      </StyledCtaContainer>
     </StyledInputContainer>
   );
 };