diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index d9dcaa706..b5b1d84ec 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -18,6 +18,7 @@ import { import { Flex } from '../basic/Flex'; import { Snode } from '../../data/types'; +import { THEME_GLOBALS } from '../../themes/globals'; import { SessionWrapperModal } from '../SessionWrapperModal'; import { SessionIcon, SessionIconButton } from '../icon'; import { SessionSpinner } from '../loading'; @@ -218,6 +219,8 @@ export const ActionPanelOnionStatusLight = (props: { const firstPathLength = useFirstOnionPathLength(); const isOnline = useIsOnline(); + const glowDuration = Number(THEME_GLOBALS['--duration-onion-status-glow']); // 10 + // Set icon color based on result const errorColor = 'var(--button-path-error-color)'; const defaultColor = 'var(--button-path-default-color)'; @@ -237,7 +240,7 @@ export const ActionPanelOnionStatusLight = (props: { iconType="circle" iconColor={iconColor} onClick={handleClick} - glowDuration={10} + glowDuration={glowDuration} glowStartDelay={0} noScale={true} isSelected={isSelected} diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index c45d32b8c..08fd208fe 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -151,7 +151,13 @@ export const OverlayClosedGroup = () => { flexGrow={1} alignItems={'center'} > - + ` } div:nth-child(1) { left: 8px; - animation: session-loader1 0.6s infinite; + animation: session-loader1 var(--duration-session-spinner) infinite; } div:nth-child(2) { left: 8px; - animation: session-loader2 0.6s infinite; + animation: session-loader2 var(--duration-session-spinner) infinite; } div:nth-child(3) { left: 32px; - animation: session-loader2 0.6s infinite; + animation: session-loader2 var(--duration-session-spinner) infinite; } div:nth-child(4) { left: 56px; - animation: session-loader3 0.6s infinite; + animation: session-loader3 var(--duration-session-spinner) infinite; } @keyframes session-loader1 { 0% { diff --git a/ts/components/loading/spinner/Spinner.tsx b/ts/components/loading/spinner/Spinner.tsx index d67b9153f..f0041b189 100644 --- a/ts/components/loading/spinner/Spinner.tsx +++ b/ts/components/loading/spinner/Spinner.tsx @@ -23,7 +23,7 @@ const SpinnerArc = styled.svg` height: 56px; width: 56px; - animation: spinner-arc-animation 3000ms linear infinite; + animation: spinner-arc-animation var(--duration-spinner) linear infinite; animation-play-state: inherit; @keyframes spinner-arc-animation {