feat: updated onion status and spinner aimations

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}

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -151,7 +151,13 @@ export const OverlayClosedGroup = () => {
       flexGrow={1}
       alignItems={'center'}
     >
-      <Flex container={true} width={'100%'} flexDirection="column" padding={'var(--margins-md)'}>
+      <Flex
+        container={true}
+        width={'100%'}
+        flexDirection="column"
+        alignItems="center"
+        padding={'var(--margins-md)'}
+      >
         <SessionInput
           autoFocus={true}
           type="text"

ts/components/loading/spinner/SessionSpinner.tsx

@@ -26,19 +26,19 @@ const StyledSessionSpinner = styled.div<Props>`
   }
   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% {

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 {