feat: update settings Help page with new items and links

_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",
+  "helpUsTranslateSession": "Translate Session",
-  "translation": "Translation",
   "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",
+  "surveyTitle": "We'd love your Feedback",
-  "goToOurSurvey": "Go to our survey",
+  "faq": "FAQ",
+  "support": "Support",
   "clearAll": "Clear All",
   "clearDataSettingsTitle": "Clear Data",
   "messageRequests": "Message Requests",

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);

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')};
 `;
 

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 {

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`
+export const SessionSettingsTitleWithLink = (props: { title: string; onClick: () => void }) => {
-  font-size: var(--font-size-md);
+  const { onClick, title } = props;
-  padding: var(--margins-lg);
+  return (
-  margin-bottom: 20px;
+    <StyledSettingItemClickable onClick={onClick}>
-
+      <SettingsTitleAndDescription title={title} />
-  background: var(--color-cell-background);
+      <SessionIconButton iconSize={'large'} iconType="chevron" iconRotation={270} />
-  color: var(--color-text);
+    </StyledSettingItemClickable>
-  border-bottom: var(--border-session);
+  );
-`;
+};
-
-const StyledSettingItemInline = styled(StyledSettingItem)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
 
 export const SessionToggleWithDescription = (props: {
   title?: string;

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 (
       <>
-        <SessionSettingButtonItem
-          title={window.i18n('surveyTitle')}
-          onClick={() => void shell.openExternal('https://getsession.org/survey')}
-          buttonColor={SessionButtonColor.Primary}
-          buttonType={SessionButtonType.Square}
-          buttonText={window.i18n('goToOurSurvey')}
-        />
-        <SessionSettingButtonItem
-          title={window.i18n('helpUsTranslateSession')}
-          onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
-          buttonColor={SessionButtonColor.Primary}
-          buttonType={SessionButtonType.Square}
-          buttonText={window.i18n('translation')}
-        />
         <SessionSettingButtonItem
           onClick={() => {
             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')}
+        />
+        <SessionSettingsTitleWithLink
+          title={window.i18n('surveyTitle')}
+          onClick={() => void shell.openExternal('https://getsession.org/survey')}
+        />
+        <SessionSettingsTitleWithLink
+          title={window.i18n('helpUsTranslateSession')}
+          onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
+        />
+        <SessionSettingsTitleWithLink
+          title={window.i18n('faq')}
+          onClick={() => void shell.openExternal('https://getsession.org/faq')}
+        />
+        <SessionSettingsTitleWithLink
+          title={window.i18n('support')}
+          onClick={() => void shell.openExternal('https://sessionapp.zendesk.com/hc/en-us')}
         />
       </>
     );

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'