chore: add session token logo to settings bottom bar

Author: Aerilym

ts/components/icon/Icons.tsx

@@ -72,6 +72,7 @@ export type SessionIconType =
   | 'send'
   | 'sending'
   | 'sessionToken'
+  | 'sessionTokenLogoWithText'
   | 'session'
   | 'shield'
   | 'speaker'
@@ -460,6 +461,11 @@ export const icons: Record<SessionIconType, IconProps> = {
     viewBox: '0 0 23 25',
     ratio: 23 / 25,
   },
+  sessionTokenLogoWithText: {
+    path: 'M274.05 11.4h28.61v1.95h-13.2v23.48h-2.2V13.35h-13.2v-1.96h-.01ZM35.53 24.1l5.86-5.87a10.3 10.3 0 0 0-.16-14.77A10.6 10.6 0 0 0 33.87.5h-22.8A10.6 10.6 0 0 0 3.7 3.46a10.31 10.31 0 0 0-.16 14.78l5.84 5.83-5.84 5.84a10.3 10.3 0 0 0 .16 14.78 10.6 10.6 0 0 0 7.36 2.94h11.36v.01h11.4a10.6 10.6 0 0 0 7.36-2.94 10.3 10.3 0 0 0 .16-14.78l-5.82-5.82Zm-28.5-9.34a5.43 5.43 0 0 1-1.6-3.95 5.58 5.58 0 0 1 5.64-5.39h22.8a5.6 5.6 0 0 1 5.65 5.39 5.45 5.45 0 0 1-1.6 3.95l-5.87 5.87-1.88-1.89a10.92 10.92 0 0 0-7.7-3.2h-.04a10.9 10.9 0 0 0-7.7 3.2l-1.86 1.86-5.85-5.84Zm9.31 9.3 1.85-1.84a6.02 6.02 0 0 1 8.5 0l1.9 1.88-1.84 1.83a6.02 6.02 0 0 1-8.55 0l-1.86-1.86Zm17.5 18.67H11.07a5.58 5.58 0 0 1-5.65-5.4 5.47 5.47 0 0 1 1.6-3.95l5.84-5.84 1.87 1.87a10.92 10.92 0 0 0 7.75 3.2c2.8 0 5.6-1.07 7.74-3.2l1.84-1.84 5.82 5.82a5.43 5.43 0 0 1 1.6 3.96 5.58 5.58 0 0 1-5.64 5.38ZM302.62 24.1c0-8.11 6.22-13.4 16.1-13.4 9.87 0 16.1 5.32 16.1 13.4 0 8.06-6.23 13.45-16.1 13.45-9.88 0-16.1-5.32-16.1-13.46Zm16.1 11.5c8.64 0 13.81-4.78 13.81-11.5 0-6.73-5.13-11.44-13.81-11.44-8.69 0-13.82 4.7-13.82 11.43 0 6.73 5.17 11.5 13.82 11.5Zm20.07-24.2h2.2v16.35l22.14-16.35h3.44l-14.18 10.52 14.18 14.9h-2.83L350.68 23.2l-9.69 7.2v6.44h-2.2V11.4Zm32.06 0h24.27v1.84h-22.06v9.98h21.34V25h-21.34v9.98h22.06v1.84h-24.27V11.4Zm28.88 0h3.22l23.73 23.44V11.4h2.2v25.43h-3.21l-23.73-23.44v23.44h-2.2V11.4Zm-344.97 17h6.55c0 3.11 2.68 4.54 9.48 4.54 6.25 0 8.3-.96 8.3-3.29 0-2.32-1.61-2.79-8.63-3.21l-1.35-.11c-9.91-.57-13.77-2.79-13.77-8.09 0-5.29 5.22-7.5 14.09-7.5 9.83 0 14.91 2.96 15.16 8.76h-6.58c0-3.11-3-4.11-8.84-4.11-5.47 0-7.25.89-7.25 2.85 0 2.3 1.64 2.86 8.12 3.3l1.46.1c8.9.68 14.16 1.5 14.16 7.8s-5.54 8.15-14.73 8.15c-10.3 0-15.95-2.36-16.16-9.19Zm35.09-17.02h25.5v4.83H96.16v5.68h18.45v4.43H96.17v5.72h19.17v4.83h-25.5V11.38Zm29.39 17.02h6.54c0 3.11 2.68 4.54 9.48 4.54 6.26 0 8.3-.96 8.3-3.29 0-2.32-1.6-2.79-8.62-3.21l-1.36-.11c-9.9-.57-13.77-2.79-13.77-8.09 0-5.29 5.22-7.5 14.1-7.5 9.83 0 14.9 2.96 15.16 8.76h-6.58c0-3.11-3-4.11-8.84-4.11-5.47 0-7.26.89-7.26 2.85 0 2.3 1.64 2.86 8.12 3.3l1.47.1c8.9.68 14.16 1.5 14.16 7.8s-5.54 8.15-14.74 8.15c-10.3 0-15.95-2.36-16.16-9.19Zm34.37 0h6.54c0 3.11 2.68 4.54 9.48 4.54 6.26 0 8.3-.96 8.3-3.29 0-2.32-1.61-2.79-8.62-3.21l-1.36-.11c-9.9-.57-13.77-2.79-13.77-8.09 0-5.29 5.22-7.5 14.1-7.5 9.83 0 14.9 2.96 15.15 8.76h-6.57c0-3.11-3-4.11-8.84-4.11-5.47 0-7.26.89-7.26 2.85 0 2.3 1.64 2.86 8.12 3.3l1.47.1c8.9.68 14.16 1.5 14.16 7.8s-5.54 8.15-14.74 8.15c-10.3 0-15.95-2.36-16.16-9.19Zm34.72-17.02h6.33v25.5h-6.33v-25.5Zm10.34 12.73c0-8.08 6.76-13.37 17.27-13.37s17.34 5.29 17.34 13.37c0 8.09-6.76 13.48-17.34 13.48s-17.27-5.29-17.27-13.48Zm17.27 8.12c6.65 0 10.77-3.29 10.77-8.12 0-4.83-4.12-8-10.77-8-6.66 0-10.7 3.2-10.7 8s4.12 8.12 10.7 8.12Zm20.46-20.85h9.33l16.6 19.67V11.38h6.33v25.5h-9.37L242.73 17.2v19.67h-6.33v-25.5Z',
+    viewBox: '0 0 430 48',
+    ratio: 430 / 48,
+  },
   star: {
     path: 'M9.80779568,8.70262392 C9.66225594,8.99747141 9.38107073,9.20193068 9.05571654,9.24948607 L4.1495,9.9666031 L7.69882113,13.4236419 C7.93469487,13.6533829 8.0423575,13.9845141 7.98669695,14.3090433 L7.14926913,19.1916734 L11.5356371,16.8849265 C11.8270199,16.7316912 12.1751567,16.7316912 12.4665396,16.8849265 L16.8529075,19.1916734 L16.0154797,14.3090433 C15.9598192,13.9845141 16.0674818,13.6533829 16.3033555,13.4236419 L19.8526767,9.9666031 L14.9464601,9.24948607 C14.6211059,9.20193068 14.3399207,8.99747141 14.194381,8.70262392 L12.0010883,4.25925434 L9.80779568,8.70262392 Z M8.24682697,7.3464661 L11.104381,1.55737608 C11.4712164,0.814207972 12.5309603,0.814207972 12.8977957,1.55737608 L15.7553497,7.3464661 L22.1457165,8.28051393 C22.9656312,8.40035674 23.2924147,9.40819801 22.6988211,9.98635811 L18.0756101,14.4893656 L19.166697,20.8509567 C19.3068155,21.6679189 18.4492666,22.2908819 17.7156371,21.9050735 L12.0010883,18.8998497 L6.28653961,21.9050735 C5.55291004,22.2908819 4.69536119,21.6679189 4.83547972,20.8509567 L5.92656655,14.4893656 L1.30335554,9.98635811 C0.709762006,9.40819801 1.03654545,8.40035674 1.85646012,8.28051393 L8.24682697,7.3464661',
     viewBox: '0 0 22 21',

ts/components/settings/SessionSettings.tsx

@@ -1,4 +1,3 @@
-import { shell } from 'electron';
 import { useState } from 'react';
 import styled from 'styled-components';
 
@@ -21,6 +20,7 @@ import { SettingsCategoryPermissions } from './section/CategoryPermissions';
 import { SettingsCategoryPrivacy } from './section/CategoryPrivacy';
 import { SettingsCategoryRecoveryPassword } from './section/CategoryRecoveryPassword';
 import { setDebugMode } from '../../state/ducks/debug';
+import { showLinkVisitWarningDialog } from '../dialog/OpenUrlModal';
 
 export function displayPasswordModal(
   passwordAction: PasswordAction,
@@ -51,14 +51,15 @@ export interface SettingsViewProps {
 const StyledVersionInfo = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   padding: var(--margins-sm) var(--margins-md);
   background: none;
   font-size: var(--font-size-xs);
 `;
 
-const StyledSpanSessionInfo = styled.span`
-  opacity: 0.4;
+const StyledSpanSessionInfo = styled.span<{ opacity?: number }>`
+  opacity: ${props => props.opacity ?? 0.5};
   transition: var(--default-duration);
   user-select: text;
   cursor: pointer;
@@ -77,19 +78,20 @@ const SessionInfo = () => {
     <StyledVersionInfo>
       <StyledSpanSessionInfo
         onClick={() => {
-          void shell.openExternal(
-            `https://github.com/session-foundation/session-desktop/releases/tag/v${window.versionInfo.version}`
+          showLinkVisitWarningDialog(
+            `https://github.com/session-foundation/session-desktop/releases/tag/v${window.versionInfo.version}`,
+            dispatch
           );
         }}
       >
         v{window.versionInfo.version}
       </StyledSpanSessionInfo>
-      <StyledSpanSessionInfo>
+      <StyledSpanSessionInfo opacity={0.8}>
         <SessionIconButton
           iconSize="medium"
-          iconType="oxen"
+          iconType="sessionTokenLogoWithText"
           onClick={() => {
-            void shell.openExternal('https://oxen.io/');
+            showLinkVisitWarningDialog('https://token.getsession.org/', dispatch);
           }}
         />
       </StyledSpanSessionInfo>