mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
chore: move onion dialog components to styled
This commit is contained in:
parent
39cbbda609
commit
0e65b667a8
9 changed files with 78 additions and 95 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) => (
|
||||
<div className="onion__node__country" key={`country-${index}`}>
|
||||
<StyledCountry key={`country-${snodeIp}`}>
|
||||
{hovered && snodeIp ? snodeIp : labelText}
|
||||
</div>
|
||||
</StyledCountry>
|
||||
);
|
||||
const [hoverable] = useHover(element);
|
||||
|
||||
|
@ -67,11 +79,13 @@ const OnionPathModalInner = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
|
||||
<div className="onion__node-list">
|
||||
<StyledOnionDescription>
|
||||
{window.i18n('onionPathIndicatorDescription')}
|
||||
</StyledOnionDescription>
|
||||
<StyledOnionNodeList>
|
||||
<Flex container={true}>
|
||||
<div className="onion__node-list-lights">
|
||||
<div className="onion__vertical-line" />
|
||||
<StyledLightsContainer>
|
||||
<StyledVerticalLine />
|
||||
|
||||
<Flex container={true} flexDirection="column" alignItems="center" height="100%">
|
||||
{nodes.map((_snode: Snode | any, index: number) => {
|
||||
|
@ -84,9 +98,9 @@ const OnionPathModalInner = () => {
|
|||
);
|
||||
})}
|
||||
</Flex>
|
||||
</div>
|
||||
</StyledLightsContainer>
|
||||
<Flex container={true} flexDirection="column" alignItems="flex-start">
|
||||
{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 ? (
|
||||
<OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
|
||||
<OnionCountryDisplay labelText={labelText} snodeIp={snode.ip} />
|
||||
) : null;
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
</StyledOnionNodeList>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="onion__growing-icon">
|
||||
<StyledGrowingIcon>
|
||||
<SessionIcon
|
||||
borderRadius={'50px'}
|
||||
iconColor={color}
|
||||
|
@ -140,7 +173,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
|
|||
iconType="circle"
|
||||
iconSize={'tiny'}
|
||||
/>
|
||||
</div>
|
||||
</StyledGrowingIcon>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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 (
|
||||
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
|
||||
|
@ -102,6 +103,7 @@ export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
|
|||
text={buttonText}
|
||||
buttonColor={buttonColor}
|
||||
onClick={onClick}
|
||||
buttonType={buttonType}
|
||||
/>
|
||||
</SessionSettingsItemWrapper>
|
||||
);
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 }) => {
|
|||
<SessionSettingButtonItem
|
||||
key={props.blockedEntry}
|
||||
buttonColor={SessionButtonColor.Danger}
|
||||
buttonType={SessionButtonType.Square}
|
||||
buttonText={window.i18n('unblockUser')}
|
||||
title={props.title}
|
||||
onClick={async () => {
|
||||
|
|
|
@ -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')}
|
||||
/>
|
||||
<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
|
||||
|
@ -25,6 +27,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
|
|||
ipcRenderer.send('show-debug-log');
|
||||
}}
|
||||
buttonColor={SessionButtonColor.Primary}
|
||||
buttonType={SessionButtonType.Square}
|
||||
buttonText={window.i18n('showDebugLog')}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -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')}
|
||||
/>
|
||||
)}
|
||||
|
|
Loading…
Reference in a new issue