From 0e65b667a894bf74299f56c37e7641371968e486 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 22 Aug 2022 11:56:09 +1000 Subject: [PATCH] chore: move onion dialog components to styled --- stylesheets/_session.scss | 58 -------------- ts/components/basic/SessionToggle.tsx | 11 ++- ts/components/basic/YourSessionIDPill.tsx | 2 +- .../dialog/OnionStatusPathDialog.tsx | 75 +++++++++++++------ .../settings/SessionSettingListItem.tsx | 8 +- .../settings/SessionSettingsHeader.tsx | 2 +- .../section/CategoryConversations.tsx | 3 +- .../settings/section/CategoryHelp.tsx | 5 +- .../settings/section/CategoryPrivacy.tsx | 9 ++- 9 files changed, 78 insertions(+), 95 deletions(-) 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')} /> )}