feat: updated style for choose action overlay

created new ActionRow component

_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",

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 */}
-      {/* <SessionIdEditable
-        editable={!loading}
-        placeholder={placeholder}
-        onChange={setPubkeyOrOns}
-        dataTestId="new-session-conversation"
-        onPressEnter={handleMessageButtonClick}
-      /> */}
-
       <SessionInput
         autoFocus={true}
         type="text"
@@ -177,9 +168,7 @@ export const OverlayMessage = () => {
         centerText={true}
         inputDataTestId="new-session-conversation"
       />
-
       <SpacerMD />
-
       <SessionSpinner loading={loading} />
 
       {!pubkeyOrOnsError && !loading ? (

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 (
+    <StyledActionRow onClick={onClick} data-testid={dataTestId} aria-label={ariaLabel}>
+      <StyledIcon>
+        <SessionIcon iconType={iconType} iconSize="large" iconColor="var(--text-primary-color)" />
+      </StyledIcon>
+      <Flex
+        container={true}
+        flexDirection={'column'}
+        justifyContent={'flex-start'}
+        alignItems={'flex-start'}
+        width={'100%'}
+      >
+        <StyledChooseActionTitle>{title}</StyledChooseActionTitle>
+        <StyledHR />
+      </Flex>
+    </StyledActionRow>
+  );
+}

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 (
-    <StyledIcon>
-      <SessionIcon iconSize="medium" iconType={props.iconType} />
-    </StyledIcon>
-  );
-};
-
 export const OverlayChooseAction = () => {
   const dispatch = useDispatch();
   function closeOverlay() {
@@ -86,32 +51,42 @@ export const OverlayChooseAction = () => {
   }, [openJoinCommunity, openNewMessage]);
 
   return (
-    <div className="module-left-pane-overlay">
-      <StyledActionRow
-        onClick={openNewMessage}
-        data-testid="chooser-new-conversation-button"
-        aria-label={window.i18n('createConversationNewContact')}
-      >
-        <IconOnActionRow iconType="chatBubble" />
-        <StyledChooseActionTitle>{window.i18n('newMessage')}</StyledChooseActionTitle>
-      </StyledActionRow>
-      <StyledActionRow
-        onClick={openCreateGroup}
-        data-testid="chooser-new-group"
-        aria-label={window.i18n('createConversationNewGroup')}
-      >
-        <IconOnActionRow iconType="group" />
-        <StyledChooseActionTitle>{window.i18n('createGroup')}</StyledChooseActionTitle>
-      </StyledActionRow>
-      <StyledActionRow
-        onClick={openJoinCommunity}
-        data-testid="chooser-new-community"
-        aria-label={window.i18n('joinACommunity')}
+    <StyledLeftPaneOverlay
+      container={true}
+      flexDirection={'column'}
+      flexGrow={1}
+      alignItems={'center'}
+    >
+      <StyledActionRowContainer
+        container={true}
+        flexDirection={'column'}
+        justifyContent={'flex-start'}
+        alignItems={'flex-start'}
       >
-        <IconOnActionRow iconType="communities" />
-        <StyledChooseActionTitle>{window.i18n('joinOpenGroup')}</StyledChooseActionTitle>
-      </StyledActionRow>
+        <ActionRow
+          title={window.i18n('newMessage')}
+          ariaLabel={window.i18n('createConversationNewContact')}
+          iconType={'chatBubble'}
+          onClick={openNewMessage}
+          dataTestId="chooser-new-conversation-button"
+        />
+        <ActionRow
+          title={window.i18n('createGroup')}
+          ariaLabel={window.i18n('createConversationNewGroup')}
+          iconType={'group'}
+          onClick={openCreateGroup}
+          dataTestId="chooser-new-group"
+        />
+        <ActionRow
+          title={window.i18n('joinOpenGroup')}
+          ariaLabel={window.i18n('joinACommunity')}
+          iconType={'communities'}
+          onClick={openJoinCommunity}
+          dataTestId="chooser-new-community"
+        />
+      </StyledActionRowContainer>
+      <SpacerSM />
       <ContactsListWithBreaks />
-    </div>
+    </StyledLeftPaneOverlay>
   );
 };

ts/types/LocalizerKeys.ts

@@ -101,6 +101,7 @@ export type LocalizerKeys =
   | 'connectingToServer'
   | 'contactAvatarAlt'
   | 'contactsHeader'
+  | 'contactsNone'
   | 'contextMenuNoSuggestions'
   | 'continue'
   | 'conversationId'
@@ -368,7 +369,7 @@ export type LocalizerKeys =
   | 'onlyAdminCanRemoveMembers'
   | 'onlyAdminCanRemoveMembersDesc'
   | 'onlyGroupAdminsCanChange'
-  | 'onsErrorNotRecognised'
+  | 'onsErrorNotRecognized'
   | 'onsErrorUnableToSearch'
   | 'open'
   | 'openGroupInvitation'