diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c42806090..68abc8433 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -101,6 +101,7 @@
"connectToServerSuccess": "Successfully connected to community",
"contactAvatarAlt": "Avatar for contact $name$",
"contactsHeader": "Contacts",
+ "contactsNone": "You don't have any contacts yet",
"contextMenuNoSuggestions": "No Suggestions",
"continue": "Continue",
"conversationsHeader": "Contacts and Groups: $count$",
@@ -368,7 +369,7 @@
"onlyAdminCanRemoveMembers": "You are not the creator",
"onlyAdminCanRemoveMembersDesc": "Only the creator of the group can remove users",
"onlyGroupAdminsCanChange": "Only group admins can change this setting.",
- "onsErrorNotRecognised": "We couldn't recognise this ONS. Please check it and try again.",
+ "onsErrorNotRecognized": "We couldn't recognize this ONS. Please check it and try again.",
"onsErrorUnableToSearch": "We were unable to search for this ONS. Please try again later.",
"open": "Open",
"openGroupInvitation": "Community invitation",
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index 6829f860d..829b9882b 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessage.tsx
@@ -48,11 +48,10 @@ const SessionIDDescription = styled.span`
text-align: center;
`;
-const StyledLeftPaneOverlay = styled(Flex)`
+export const StyledLeftPaneOverlay = styled(Flex)`
background: var(--background-primary-color);
overflow-y: auto;
overflow-x: hidden;
- padding: var(--margins-md);
.session-button {
width: 100%;
@@ -121,7 +120,7 @@ export const OverlayMessage = () => {
// this might be an ONS, validate the regex first
const mightBeOnsName = new RegExp(ONSResolve.onsNameRegex, 'g').test(pubkeyorOnsTrimmed);
if (!mightBeOnsName) {
- setPubkeyOrOnsError(window.i18n('onsErrorNotRecognised'));
+ setPubkeyOrOnsError(window.i18n('onsErrorNotRecognized'));
return;
}
@@ -131,7 +130,7 @@ export const OverlayMessage = () => {
const idValidationError = PubKey.validateWithErrorNoBlinding(resolvedSessionID);
if (idValidationError) {
- setPubkeyOrOnsError(window.i18n('onsErrorNotRecognised'));
+ setPubkeyOrOnsError(window.i18n('onsErrorNotRecognized'));
return;
}
@@ -141,7 +140,7 @@ export const OverlayMessage = () => {
e instanceof SnodeResponseError
? window.i18n('onsErrorUnableToSearch')
: e instanceof NotFoundError
- ? window.i18n('onsErrorNotRecognised')
+ ? window.i18n('onsErrorNotRecognized')
: window.i18n('failedResolveOns')
);
} finally {
@@ -155,16 +154,8 @@ export const OverlayMessage = () => {
flexDirection={'column'}
flexGrow={1}
alignItems={'center'}
+ padding={'var(--margins-md)'}
>
- {/* TODO[epic=893] Replace everywhere and test new error handling */}
- {/* */}
-
{
centerText={true}
inputDataTestId="new-session-conversation"
/>
-
-
{!pubkeyOrOnsError && !loading ? (
diff --git a/ts/components/leftpane/overlay/choose-action/ActionRow.tsx b/ts/components/leftpane/overlay/choose-action/ActionRow.tsx
new file mode 100644
index 000000000..00754fbf0
--- /dev/null
+++ b/ts/components/leftpane/overlay/choose-action/ActionRow.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import { Flex } from '../../../basic/Flex';
+import { SessionIcon, SessionIconType } from '../../../icon';
+
+const StyledActionRow = styled.button`
+ border: none;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ transition-duration: var(--default-duration);
+ width: 100%;
+
+ :hover {
+ background: var(--conversation-tab-background-hover-color);
+ }
+`;
+
+export const StyledChooseActionTitle = styled.span`
+ color: var(--text-primary-color);
+ font-size: 18px;
+ padding: var(--margins-sm) 0;
+ text-align: start;
+ width: 100%;
+`;
+
+const StyledIcon = styled.div`
+ width: 58px;
+ margin: var(--margins-sm);
+`;
+
+const StyledHR = styled.hr`
+ height: 0px;
+ width: 100%;
+ border: 0.5px solid var(--border-color);
+ padding: 0;
+ margin: 0;
+`;
+
+export const StyledActionRowContainer = styled(Flex)`
+ width: 100%;
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+
+ ${StyledActionRow}:last-child ${StyledHR} {
+ border-color: transparent;
+ }
+`;
+
+type ActionRowProps = {
+ title: string;
+ ariaLabel: string;
+ iconType: SessionIconType;
+ onClick: () => void;
+ dataTestId: string;
+};
+
+export function ActionRow(props: ActionRowProps) {
+ const { title, ariaLabel, iconType, onClick, dataTestId } = props;
+
+ return (
+
+
+
+
+
+ {title}
+
+
+
+ );
+}
diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
index cd18c699f..3b9d579b7 100644
--- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
+++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
@@ -3,47 +3,12 @@ import { useCallback, useEffect } from 'react';
import { isEmpty, isString } from 'lodash';
import { useDispatch } from 'react-redux';
import useKey from 'react-use/lib/useKey';
-import styled from 'styled-components';
import { resetLeftOverlayMode, setLeftOverlayMode } from '../../../../state/ducks/section';
-
-import { SessionIcon, SessionIconType } from '../../../icon';
+import { SpacerSM } from '../../../basic/Text';
+import { StyledLeftPaneOverlay } from '../OverlayMessage';
+import { ActionRow, StyledActionRowContainer } from './ActionRow';
import { ContactsListWithBreaks } from './ContactsListWithBreaks';
-const StyledActionRow = styled.button`
- border: none;
- display: flex;
- align-items: center;
- border-bottom: 1px var(--border-color) solid;
- transition-duration: var(--default-duration);
- width: 100%;
-
- &:first-child {
- border-top: 1px var(--border-color) solid;
- }
-
- :hover {
- background: var(--conversation-tab-background-hover-color);
- }
-`;
-
-export const StyledChooseActionTitle = styled.span`
- color: var(--text-primary-color);
- font-size: 18px;
- padding: var(--margins-xs) var(--margins-lg);
-`;
-
-const StyledIcon = styled.div`
- width: 58px;
-`;
-
-const IconOnActionRow = (props: { iconType: SessionIconType }) => {
- return (
-
-
-
- );
-};
-
export const OverlayChooseAction = () => {
const dispatch = useDispatch();
function closeOverlay() {
@@ -86,32 +51,42 @@ export const OverlayChooseAction = () => {
}, [openJoinCommunity, openNewMessage]);
return (
-
-
-
- {window.i18n('newMessage')}
-
-
-
- {window.i18n('createGroup')}
-
-
+
-
- {window.i18n('joinOpenGroup')}
-
+
+
+
+
+
-