From 093da15ba317411b3933efd3c0faa53c5d51943c Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 24 Apr 2024 15:29:32 +1000 Subject: [PATCH] feat: updated style for choose action overlay created new ActionRow component --- _locales/en/messages.json | 3 +- .../leftpane/overlay/OverlayMessage.tsx | 21 +--- .../overlay/choose-action/ActionRow.tsx | 77 +++++++++++++ .../choose-action/OverlayChooseAction.tsx | 101 +++++++----------- ts/types/LocalizerKeys.ts | 3 +- 5 files changed, 124 insertions(+), 81 deletions(-) create mode 100644 ts/components/leftpane/overlay/choose-action/ActionRow.tsx 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')} - + + + + + -
+ ); }; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 8f054d13a..afe51d039 100644 --- a/ts/types/LocalizerKeys.ts +++ b/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'