feat: removed overlayheader

moved some parts into the leftpanesectionheader

_locales/en/messages.json

@@ -109,10 +109,8 @@
   "copiedToClipboard": "Copied",
   "copyErrorAndQuit": "Copy error and quit",
   "copyMessage": "Copy message text",
-  "copyOpenGroupURL": "Copy Group URL",
   "couldntFindServerMatching": "Couldn't find the corresponding Community server",
   "create": "Create",
-  "createClosedGroupNamePrompt": "Group Name",
   "createClosedGroupPlaceholder": "Enter a group name",
   "createConversationNewContact": "Create a conversation with a new contact",
   "createConversationNewGroup": "Create a group with existing contacts",
@@ -371,7 +369,6 @@
   "onsErrorNotRecognised": "We couldn't recognise this ONS. Please check it and try again.",
   "open": "Open",
   "openGroupInvitation": "Community invitation",
-  "openGroupURL": "Community URL",
   "openMessageRequestInbox": "Message Requests",
   "openMessageRequestInboxDescription": "View your Message Request inbox",
   "or": "or",

stylesheets/_session_left_pane.scss

@@ -80,16 +80,6 @@ $session-compose-margin: 20px;
     height: 100%;
   }
 
-  &__header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: var(--main-view-header-height);
-    padding-inline-end: 7px;
-    transition: var(--default-duration);
-  }
-
   &__title {
     padding-inline-end: var(--margins-sm);
     padding-inline-start: var(--margins-sm);

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -1,16 +1,22 @@
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
-import { SectionType } from '../../state/ducks/section';
+import { SectionType, setLeftOverlayMode } from '../../state/ducks/section';
 import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
-import { getFocusedSection, getIsMessageRequestOverlayShown } from '../../state/selectors/section';
+import { getFocusedSection, getLeftOverlayMode } from '../../state/selectors/section';
 import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
 import { isSignWithRecoveryPhrase } from '../../util/storage';
 import { Flex } from '../basic/Flex';
 import { SessionButton } from '../basic/SessionButton';
 import { SpacerMD } from '../basic/Text';
 import { MenuButton } from '../buttons';
-import { SessionIcon } from '../icon';
+import { SessionIcon, SessionIconButton } from '../icon';
+
+const StyledLeftPaneSectionHeader = styled(Flex)`
+  height: var(--main-view-header-height);
+  padding-inline-end: 7px;
+  transition: var(--default-duration);
+`;
 
 const SectionTitle = styled.h1`
   padding-top: var(--margins-xs);
@@ -117,30 +123,68 @@ export const LeftPaneBanner = () => {
 export const LeftPaneSectionHeader = () => {
   const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
   const focusedSection = useSelector(getFocusedSection);
-  const isMessageRequestOverlayShown = useSelector(getIsMessageRequestOverlayShown);
+  const leftOverlayMode = useSelector(getLeftOverlayMode);
+
+  const dispatch = useDispatch();
+  const returnToActionChooser = () => {
+    dispatch(setLeftOverlayMode('choose-action'));
+  };
 
   let label: string | undefined;
 
   const isMessageSection = focusedSection === SectionType.Message;
 
+  let leftOverlayHeading = '';
+
+  switch (leftOverlayMode) {
+    case 'open-group':
+      leftOverlayHeading = window.i18n('joinOpenGroup');
+      break;
+    case 'closed-group':
+      leftOverlayHeading = window.i18n('createGroup');
+      break;
+    case 'message':
+      leftOverlayHeading = window.i18n('newMessage');
+      break;
+    case 'message-requests':
+      leftOverlayHeading = window.i18n('messageRequests');
+      break;
+    case 'choose-action':
+    default:
+      leftOverlayHeading = window.i18n('messagesHeader');
+  }
+
   switch (focusedSection) {
     case SectionType.Settings:
       label = window.i18n('settingsHeader');
       break;
     case SectionType.Message:
-      label = isMessageRequestOverlayShown
+      label = leftOverlayHeading;
-        ? window.i18n('messageRequests')
-        : window.i18n('messagesHeader');
       break;
     default:
   }
 
   return (
     <Flex flexDirection="column">
-      <div className="module-left-pane__header">
+      <StyledLeftPaneSectionHeader
+        container={true}
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        {leftOverlayMode &&
+        leftOverlayMode !== 'choose-action' &&
+        leftOverlayMode !== 'message-requests' ? (
+          <SessionIconButton
+            iconSize="medium"
+            iconType="chevron"
+            iconRotation={90}
+            onClick={returnToActionChooser}
+          />
+        ) : null}
         <SectionTitle>{label}</SectionTitle>
         {isMessageSection && <MenuButton />}
-      </div>
+      </StyledLeftPaneSectionHeader>
       {showRecoveryPhrasePrompt && <LeftPaneBanner />}
     </Flex>
   );

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -8,7 +8,6 @@ import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../loading';
 import { MemberListItem } from '../../MemberListItem';
-import { OverlayHeader } from './OverlayHeader';
 
 import { useSet } from '../../../hooks/useSet';
 import { VALIDATION } from '../../../session/constants';
@@ -120,9 +119,7 @@ export const OverlayClosedGroup = () => {
 
   useKey('Escape', closeOverlay);
 
-  const title = window.i18n('createGroup');
   const buttonText = window.i18n('create');
-  const subtitle = window.i18n('createClosedGroupNamePrompt');
   const placeholder = window.i18n('createClosedGroupPlaceholder');
 
   const noContactsForClosedGroup = privateContactsPubkeys.length === 0;
@@ -133,7 +130,6 @@ export const OverlayClosedGroup = () => {
 
   return (
     <div className="module-left-pane-overlay">
-      <OverlayHeader title={title} subtitle={subtitle} />
       <div className="create-group-name-input">
         <SessionIdEditable
           editable={!noContactsForClosedGroup}

ts/components/leftpane/overlay/OverlayCommunity.tsx

@@ -15,7 +15,6 @@ import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../loading';
-import { OverlayHeader } from './OverlayHeader';
 
 import {
   markConversationInitialLoadingInProgress,
@@ -79,14 +78,11 @@ export const OverlayCommunity = () => {
 
   useKey('Escape', closeOverlay);
 
-  const title = window.i18n('joinOpenGroup');
   const buttonText = window.i18n('join');
-  const subtitle = window.i18n('openGroupURL');
   const placeholder = window.i18n('enterAnOpenGroupURL');
 
   return (
     <div className="module-left-pane-overlay">
-      <OverlayHeader title={title} subtitle={subtitle} />
       <div className="create-group-name-input">
         <SessionIdEditable
           editable={true}

ts/components/leftpane/overlay/OverlayHeader.tsx

@@ -1,72 +0,0 @@
-import { useDispatch } from 'react-redux';
-import styled from 'styled-components';
-import { setLeftOverlayMode } from '../../../state/ducks/section';
-import { Flex } from '../../basic/Flex';
-import { SpacerSM } from '../../basic/Text';
-import { SessionIconButton } from '../../icon';
-
-const StyledPrimaryBorder = styled.hr`
-  position: absolute;
-  color: var(--primary-color);
-  background-color: var(--primary-color);
-
-  height: 5px;
-  left: -10px;
-  right: -10px;
-  margin-top: 7px;
-  border: none;
-  z-index: 1;
-`;
-
-const StyledBackgroundBorder = styled.hr`
-  color: var(--background-primary-color);
-  background-color: var(--background-primary-color);
-  width: 100%;
-  position: relative;
-  height: 1px;
-  opacity: 0.3;
-  margin-top: 2px;
-  margin-bottom: 40px;
-`;
-
-const StyledTitle = styled.h2`
-  text-align: center;
-  margin-top: 0px;
-`;
-
-const StyledSubTitle = styled.h3`
-  text-align: center;
-  padding-top: 22px;
-  position: relative;
-  margin-bottom: 6px;
-`;
-
-export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: string }) => {
-  const dispatch = useDispatch();
-  const returnToActionChooser = () => {
-    dispatch(setLeftOverlayMode('choose-action'));
-  };
-
-  return (
-    <>
-      <Flex container={true} width="100%" padding="var(--margins-xs)">
-        <SessionIconButton
-          iconSize="medium"
-          iconType="chevron"
-          iconRotation={90}
-          onClick={returnToActionChooser}
-        />
-      </Flex>
-
-      <SpacerSM />
-
-      <StyledTitle>{title}</StyledTitle>
-
-      <StyledSubTitle>
-        {subtitle}
-        <StyledPrimaryBorder />
-      </StyledSubTitle>
-      <StyledBackgroundBorder />
-    </>
-  );
-};

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -12,7 +12,6 @@ import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../loading';
-import { OverlayHeader } from './OverlayHeader';
 
 import { ONSResolve } from '../../../session/apis/snode_api/onsResolve';
 import { Flex } from '../../basic/Flex';
@@ -49,9 +48,7 @@ export const OverlayMessage = () => {
   const [pubkeyOrOns, setPubkeyOrOns] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const title = window.i18n('newMessage');
   const buttonText = window.i18n('next');
-  const subtitle = window.i18n('accountIdEnter');
   const placeholder = window.i18n('accountIdEnterYourFriends');
 
   const disableNextButton = !pubkeyOrOns || loading;
@@ -114,8 +111,6 @@ export const OverlayMessage = () => {
 
   return (
     <div className="module-left-pane-overlay">
-      <OverlayHeader title={title} subtitle={subtitle} />
-
       <SessionIdEditable
         editable={!loading}
         placeholder={placeholder}

ts/types/LocalizerKeys.ts

@@ -109,10 +109,8 @@ export type LocalizerKeys =
   | 'copiedToClipboard'
   | 'copyErrorAndQuit'
   | 'copyMessage'
-  | 'copyOpenGroupURL'
   | 'couldntFindServerMatching'
   | 'create'
-  | 'createClosedGroupNamePrompt'
   | 'createClosedGroupPlaceholder'
   | 'createConversationNewContact'
   | 'createConversationNewGroup'
@@ -371,7 +369,6 @@ export type LocalizerKeys =
   | 'onsErrorNotRecognised'
   | 'open'
   | 'openGroupInvitation'
-  | 'openGroupURL'
   | 'openMessageRequestInbox'
   | 'openMessageRequestInboxDescription'
   | 'or'