From ff3d7ce2268bcbb135c91cacefc92e5e4295edf0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 23 Aug 2022 14:08:51 +1000 Subject: [PATCH] feat: update settings Help page with new items and links --- _locales/en/messages.json | 13 ++--- ts/components/basic/SessionRadio.tsx | 2 +- ts/components/basic/SessionToggle.tsx | 6 ++- .../conversation/SessionEmojiPanel.tsx | 1 + .../settings/SessionSettingListItem.tsx | 49 +++++++++++++------ .../settings/section/CategoryHelp.tsx | 34 +++++++------ ts/types/LocalizerKeys.ts | 5 +- 7 files changed, 69 insertions(+), 41 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 4d97533a8..f3be50a9e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -39,7 +39,7 @@ "youGotKickedFromGroup": "You were removed from the group.", "unreadMessages": "Unread Messages", "debugLogExplanation": "This log will be saved to your desktop.", - "reportIssue": "Report an issue", + "reportIssue": "Report a Bug", "markAllAsRead": "Mark All as Read", "incomingError": "Error handling incoming message", "media": "Media", @@ -61,7 +61,8 @@ "unableToLoadAttachment": "Sorry, there was an error setting your attachment.", "offline": "Offline", "debugLog": "Debug Log", - "showDebugLog": "Show Debug Log", + "showDebugLog": "Export Logs", + "shareBugDetails": "Share some details to help us resolve your issue. Export your logs, then upload the file though Session's Help Desk.", "goToReleaseNotes": "Go to Release Notes", "goToSupportPage": "Go to Support Page", "about": "About", @@ -358,8 +359,7 @@ "userAddedToModerators": "User added to moderator list", "userRemovedFromModerators": "User removed from moderator list", "orJoinOneOfThese": "Or join one of these...", - "helpUsTranslateSession": "Help us Translate Session", - "translation": "Translation", + "helpUsTranslateSession": "Translate Session", "closedGroupInviteFailTitle": "Group Invitation Failed", "closedGroupInviteFailTitlePlural": "Group Invitations Failed", "closedGroupInviteFailMessage": "Unable to successfully invite a group member", @@ -407,8 +407,9 @@ "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.", "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase", "notificationSubtitle": "Notifications - $setting$", - "surveyTitle": "Take our Session Survey", - "goToOurSurvey": "Go to our survey", + "surveyTitle": "We'd love your Feedback", + "faq": "FAQ", + "support": "Support", "clearAll": "Clear All", "clearDataSettingsTitle": "Clear Data", "messageRequests": "Message Requests", diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx index e7ba39e4f..1442a03c3 100644 --- a/ts/components/basic/SessionRadio.tsx +++ b/ts/components/basic/SessionRadio.tsx @@ -35,7 +35,7 @@ const StyledLabel = styled.label` transition: var(--default-duration); padding: calc(var(--filled-size) / 2); - outline-offset: 3px; + outline-offset: 2px; outline: var(--color-text) solid 1px; border: none; margin-top: var(--filled-size); diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 4abd7f4ff..8b008427d 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -11,7 +11,8 @@ const StyledKnob = styled.div<{ active: boolean }>` width: 21px; border-radius: 28px; background-color: white; - box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15); + box-shadow: ${props => + props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'}; transition: transform var(--default-duration) ease, background-color var(--default-duration) ease; @@ -29,7 +30,8 @@ const StyledSessionToggle = styled.div<{ active: boolean }>` background-color: rgba(0, 0, 0, 0); transition: var(--default-duration); - background-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')}; + background-color: ${props => + props.active ? 'var(--color-accent)' : 'var(--color-cell-background)'}; border-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')}; `; diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 823cadcaa..ec4759ea4 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -15,6 +15,7 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: 'light' | z-index: 5; opacity: 0; visibility: hidden; + // this disables the slide-in animation when showing the emoji picker from a right click on a message /* transition: var(--default-duration); */ button:focus { diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index fb27f14ce..11bc76060 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -3,6 +3,7 @@ import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/S import { SessionToggle } from '../basic/SessionToggle'; import { SessionConfirmDialogProps } from '../dialog/SessionConfirm'; import styled from 'styled-components'; +import { SessionIconButton } from '../icon'; type ButtonSettingsProps = { title?: string; @@ -37,6 +38,30 @@ const StyledDescriptionContainer = styled(StyledDescription)` align-items: center; `; +const StyledSettingItem = styled.div` + font-size: var(--font-size-md); + padding: var(--margins-lg); + margin-bottom: 20px; + + background: var(--color-cell-background); + color: var(--color-text); + border-bottom: var(--border-session); +`; + +const StyledSettingItemInline = styled(StyledSettingItem)` + display: flex; + align-items: center; + justify-content: space-between; + transition: var(--default-duration); +`; + +const StyledSettingItemClickable = styled(StyledSettingItemInline)` + :hover { + background: var(--color-clickable-hovered); + cursor: pointer; + } +`; + const SettingsTitleAndDescription = (props: { title?: string; description?: string; @@ -75,21 +100,15 @@ export const SessionSettingsItemWrapper = (props: { ); }; -const StyledSettingItem = styled.div` - font-size: var(--font-size-md); - padding: var(--margins-lg); - margin-bottom: 20px; - - background: var(--color-cell-background); - color: var(--color-text); - border-bottom: var(--border-session); -`; - -const StyledSettingItemInline = styled(StyledSettingItem)` - display: flex; - align-items: center; - justify-content: space-between; -`; +export const SessionSettingsTitleWithLink = (props: { title: string; onClick: () => void }) => { + const { onClick, title } = props; + return ( + + + + + ); +}; export const SessionToggleWithDescription = (props: { title?: string; diff --git a/ts/components/settings/section/CategoryHelp.tsx b/ts/components/settings/section/CategoryHelp.tsx index 7147cab66..9bdf4d88b 100644 --- a/ts/components/settings/section/CategoryHelp.tsx +++ b/ts/components/settings/section/CategoryHelp.tsx @@ -2,26 +2,12 @@ import { ipcRenderer, shell } from 'electron'; import React from 'react'; import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton'; -import { SessionSettingButtonItem } from '../SessionSettingListItem'; +import { SessionSettingButtonItem, SessionSettingsTitleWithLink } from '../SessionSettingListItem'; export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) => { if (props.hasPassword !== null) { return ( <> - void shell.openExternal('https://getsession.org/survey')} - buttonColor={SessionButtonColor.Primary} - buttonType={SessionButtonType.Square} - buttonText={window.i18n('goToOurSurvey')} - /> - void shell.openExternal('https://crowdin.com/project/session-desktop/')} - buttonColor={SessionButtonColor.Primary} - buttonType={SessionButtonType.Square} - buttonText={window.i18n('translation')} - /> { ipcRenderer.send('show-debug-log'); @@ -29,6 +15,24 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) => buttonColor={SessionButtonColor.Primary} buttonType={SessionButtonType.Square} buttonText={window.i18n('showDebugLog')} + title={window.i18n('reportIssue')} + description={window.i18n('shareBugDetails')} + /> + void shell.openExternal('https://getsession.org/survey')} + /> + void shell.openExternal('https://crowdin.com/project/session-desktop/')} + /> + void shell.openExternal('https://getsession.org/faq')} + /> + void shell.openExternal('https://sessionapp.zendesk.com/hc/en-us')} /> ); diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index fb30c14c7..41dffda7f 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -13,6 +13,7 @@ export type LocalizerKeys = | 'requestsPlaceholder' | 'closedGroupInviteFailMessage' | 'noContactsForGroup' + | 'faq' | 'linkVisitWarningMessage' | 'messageRequestAcceptedOurs' | 'anonymous' @@ -59,6 +60,7 @@ export type LocalizerKeys = | 'members' | 'noMessageRequestsPending' | 'sendRecoveryPhraseMessage' + | 'shareBugDetails' | 'timerOption_1_hour' | 'youGotKickedFromGroup' | 'cannotRemoveCreatorFromGroupDesc' @@ -99,7 +101,6 @@ export type LocalizerKeys = | 'lightboxImageAlt' | 'linkDevice' | 'callMissedNotApproved' - | 'goToOurSurvey' | 'invalidPubkeyFormat' | 'disappearingMessagesDisabled' | 'spellCheckDescription' @@ -200,7 +201,6 @@ export type LocalizerKeys = | 'deleteMessages' | 'searchForContactsOnly' | 'spellCheckTitle' - | 'translation' | 'editMenuSelectAll' | 'messageBodyMissing' | 'timerOption_12_hours_abbreviated' @@ -427,6 +427,7 @@ export type LocalizerKeys = | 'timerOption_5_seconds_abbreviated' | 'removeFromModerators' | 'enterRecoveryPhrase' + | 'support' | 'stagedImageAttachment' | 'thisWeek' | 'savedTheFile'