diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index c740299fd..abc6a0775 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1,5 +1,3 @@
-$onionPathLineColor: rgba(#7a7a7a, 0.6);
-
#root {
height: 100%;
}
@@ -891,62 +889,6 @@ input {
}
}
-.onion__description {
- min-width: 400px;
- width: 0;
-}
-
-.onion__node-list {
- display: flex;
- flex-direction: column;
- margin: var(--margins-sm);
- align-items: center;
- min-width: 10vw;
- position: relative;
-
- .onion__node {
- display: flex;
- flex-grow: 1;
- align-items: center;
- margin: var(--margins-xs);
-
- &:nth-child(2) {
- margin-top: 0;
- }
-
- &:nth-last-child(2) {
- margin-bottom: 0;
- }
-
- .session-icon-button {
- margin: var(--margins-sm) !important;
- }
- }
-
- .onion__node-list-lights {
- position: relative;
- }
- .onion__node__country {
- margin: var(--margins-sm);
- min-width: 150px;
- }
-
- .onion__growing-icon {
- flex-grow: 1;
- display: flex;
- align-items: center;
- }
-
- .onion__vertical-line {
- background: $onionPathLineColor;
- position: absolute;
- height: calc(100% - 2 * 15px);
- margin: 15px calc(100% / 2 - 1px);
-
- width: 1px;
- }
-}
-
.messages-container {
.session-icon-button {
display: flex;
diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index 49aa51220..ffeab8846 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/ts/components/basic/SessionToggle.tsx
@@ -55,21 +55,20 @@ const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
top: 0.5px;
left: 0.5px;
- height: 27px;
- width: 27px;
+ height: 21px;
+ width: 21px;
border-radius: 28px;
background-color: white;
- box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05),
- 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15);
transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
- transform: ${props => (props.active ? 'translateX(20px)' : '')};
+ transform: ${props => (props.active ? 'translateX(25px)' : '')};
`;
const StyledSessionToggle = styled.div<{ active: boolean }>`
width: 51px;
- height: 31px;
+ height: 25px;
border: 1.5px solid #e5e5ea;
border-radius: 16px;
position: relative;
diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx
index e5013a711..d5ac43457 100644
--- a/ts/components/basic/YourSessionIDPill.tsx
+++ b/ts/components/basic/YourSessionIDPill.tsx
@@ -40,7 +40,7 @@ const StyledYourSessionIDSelectable = styled.p`
word-break: break-all;
padding: 0px var(--margins-lg);
- font-weight: 100;
+ font-weight: 300;
color: var(--color-text);
font-size: var(--font-size-sm);
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
index e9a2a2c21..62077faf2 100644
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -20,6 +20,7 @@ import useHover from 'react-use/lib/useHover';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIcon, SessionIconButton } from '../icon';
import { SessionWrapperModal } from '../SessionWrapperModal';
+import styled from 'styled-components';
export type StatusLightType = {
glowStartDelay: number;
@@ -27,19 +28,30 @@ export type StatusLightType = {
color?: string;
};
-const OnionCountryDisplay = ({
- index,
- labelText,
- snodeIp,
-}: {
- snodeIp?: string;
- labelText: string;
- index: number;
-}) => {
+const StyledCountry = styled.div`
+ margin: var(--margins-sm);
+ min-width: 150px;
+`;
+
+const StyledOnionNodeList = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: var(--margins-sm);
+ align-items: center;
+ min-width: 10vw;
+ position: relative;
+`;
+
+const StyledOnionDescription = styled.p`
+ min-width: 400px;
+ width: 0;
+`;
+
+const OnionCountryDisplay = ({ labelText, snodeIp }: { snodeIp?: string; labelText: string }) => {
const element = (hovered: boolean) => (
-
+
{hovered && snodeIp ? snodeIp : labelText}
-
+
);
const [hoverable] = useHover(element);
@@ -67,11 +79,13 @@ const OnionPathModalInner = () => {
return (
<>
- {window.i18n('onionPathIndicatorDescription')}
-
+
+ {window.i18n('onionPathIndicatorDescription')}
+
+
-
-
+
+
{nodes.map((_snode: Snode | any, index: number) => {
@@ -84,9 +98,9 @@ const OnionPathModalInner = () => {
);
})}
-
+
- {nodes.map((snode: Snode | any, index: number) => {
+ {nodes.map((snode: Snode | any) => {
let labelText = snode.label
? snode.label
: `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
@@ -94,16 +108,35 @@ const OnionPathModalInner = () => {
labelText = window.i18n('unknownCountry');
}
return labelText ? (
-
+
) : null;
})}
-
+
>
);
};
+const StyledVerticalLine = styled.div`
+ background: rgba(#7a7a7a, 0.6);
+ position: absolute;
+ height: calc(100% - 2 * 15px);
+ margin: 15px calc(100% / 2 - 1px);
+
+ width: 1px;
+`;
+
+const StyledLightsContainer = styled.div`
+ position: relative;
+`;
+
+const StyledGrowingIcon = styled.div`
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+`;
+
export type OnionNodeStatusLightType = {
glowStartDelay: number;
glowDuration: number;
@@ -131,7 +164,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
const { glowStartDelay, glowDuration, color } = props;
return (
-
+
{
iconType="circle"
iconSize={'tiny'}
/>
-
+
);
};
diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx
index 15a752394..aadc29dc6 100644
--- a/ts/components/settings/SessionSettingListItem.tsx
+++ b/ts/components/settings/SessionSettingListItem.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionToggle } from '../basic/SessionToggle';
import { SessionConfirmDialogProps } from '../dialog/SessionConfirm';
import styled from 'styled-components';
@@ -8,6 +8,7 @@ type ButtonSettingsProps = {
title?: string;
description?: string;
buttonColor: SessionButtonColor;
+ buttonType: SessionButtonType;
buttonText: string;
dataTestId?: string;
onClick: () => void;
@@ -16,7 +17,7 @@ type ButtonSettingsProps = {
const StyledDescription = styled.div`
font-family: var(--font-default);
font-size: var(--font-size-sm);
- font-weight: 100;
+ font-weight: 400;
max-width: 700px;
color: var(--color-text-subtle);
`;
@@ -93,7 +94,7 @@ export const SessionToggleWithDescription = (props: {
};
export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
- const { title, description, buttonColor, buttonText, dataTestId, onClick } = props;
+ const { title, description, buttonColor, buttonType, buttonText, dataTestId, onClick } = props;
return (
@@ -102,6 +103,7 @@ export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
text={buttonText}
buttonColor={buttonColor}
onClick={onClick}
+ buttonType={buttonType}
/>
);
diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx
index e1536d209..f3f2b477a 100644
--- a/ts/components/settings/SessionSettingsHeader.tsx
+++ b/ts/components/settings/SessionSettingsHeader.tsx
@@ -15,7 +15,7 @@ export const SettingsHeader = (props: Props) => {
categoryLocalized = 'appearanceSettingsTitle';
break;
case SessionSettingCategory.Conversations:
- categoryLocalized = 'blockedSettingsTitle';
+ categoryLocalized = 'conversationsSettingsTitle';
break;
case SessionSettingCategory.Notifications:
categoryLocalized = 'notificationsSettingsTitle';
diff --git a/ts/components/settings/section/CategoryConversations.tsx b/ts/components/settings/section/CategoryConversations.tsx
index 28a0b5693..94982293c 100644
--- a/ts/components/settings/section/CategoryConversations.tsx
+++ b/ts/components/settings/section/CategoryConversations.tsx
@@ -8,7 +8,7 @@ import { ToastUtils } from '../../../session/utils';
import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
import { getBlockedPubkeys } from '../../../state/selectors/conversations';
import { getAudioAutoplay } from '../../../state/selectors/userConfig';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import {
SessionSettingButtonItem,
@@ -100,6 +100,7 @@ const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
{
diff --git a/ts/components/settings/section/CategoryHelp.tsx b/ts/components/settings/section/CategoryHelp.tsx
index 9bbc76362..7147cab66 100644
--- a/ts/components/settings/section/CategoryHelp.tsx
+++ b/ts/components/settings/section/CategoryHelp.tsx
@@ -1,6 +1,6 @@
import { ipcRenderer, shell } from 'electron';
import React from 'react';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionSettingButtonItem } from '../SessionSettingListItem';
@@ -12,12 +12,14 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
title={window.i18n('surveyTitle')}
onClick={() => 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');
}}
buttonColor={SessionButtonColor.Primary}
+ buttonType={SessionButtonType.Square}
buttonText={window.i18n('showDebugLog')}
/>
>
diff --git a/ts/components/settings/section/CategoryPrivacy.tsx b/ts/components/settings/section/CategoryPrivacy.tsx
index ed09f259d..13e4f7146 100644
--- a/ts/components/settings/section/CategoryPrivacy.tsx
+++ b/ts/components/settings/section/CategoryPrivacy.tsx
@@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
import { SettingsKey } from '../../../data/settings-key';
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { PasswordAction } from '../../dialog/SessionPasswordDialog';
import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
@@ -86,7 +86,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('set', props.onPasswordUpdated);
}}
- buttonColor={SessionButtonColor.Primary}
+ buttonColor={SessionButtonColor.Green}
+ buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('setPassword')}
dataTestId={'set-password-button'}
/>
@@ -98,7 +99,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('change', props.onPasswordUpdated);
}}
- buttonColor={SessionButtonColor.Primary}
+ buttonColor={SessionButtonColor.Green}
+ buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('changePassword')}
/>
)}
@@ -110,6 +112,7 @@ export const SettingsCategoryPrivacy = (props: {
displayPasswordModal('remove', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Danger}
+ buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('removePassword')}
/>
)}