add some static glowing to the actionpanel light

oxen-io · Jun 29, 2021 · 447f862 · 447f862
1 parent 504a9af
commit 447f862
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx
@@ -164,6 +164,9 @@ export const ActionPanelOnionStatusLight = (props: {
       iconType={SessionIconType.Circle}
       iconColor={iconColor}
       onClick={handleClick}
+      glowDuration={10}
+      glowStartDelay={0}
+      noScale={true}
       isSelected={isSelected}
       theme={theme}
     />

diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx
@@ -12,6 +12,7 @@ export type SessionIconProps = {
   glowDuration?: number;
   borderRadius?: number;
   glowStartDelay?: number;
+  noScale?: boolean;
   theme?: DefaultTheme;
 };
 
@@ -46,6 +47,7 @@ type StyledSvgProps = {
   borderRadius?: number;
   glowDuration?: number;
   glowStartDelay?: number;
+  noScale?: boolean;
   iconColor?: string;
 };
 
@@ -91,26 +93,32 @@ const animation = (props: {
   glowDuration?: number;
   glowStartDelay?: number;
   iconColor?: string;
+  noScale?: boolean;
 }) => {
   if (props.rotateDuration) {
     return css`
       ${rotate} ${props.rotateDuration}s infinite linear;
     `;
-  } else if (
-    props.glowDuration !== undefined &&
-    props.glowStartDelay !== undefined &&
-    props.iconColor
-  ) {
+  }
+  if (props.noScale) {
+    return css``;
+  }
+
+  if (props.glowDuration === 10) {
+    console.warn('scake', props);
+  }
+
+  if (props.glowDuration !== undefined && props.glowStartDelay !== undefined && props.iconColor) {
     return css`
       ${glow(
         props.iconColor,
         props.glowDuration,
         props.glowStartDelay
       )} ${props.glowDuration}s ease infinite;
     `;
-  } else {
-    return;
   }
+
+  return;
 };
 
 //tslint:disable no-unnecessary-callback-wrapper
@@ -119,6 +127,7 @@ const Svg = styled.svg<StyledSvgProps>`
   transform: ${props => `rotate(${props.iconRotation}deg)`};
   animation: ${props => animation(props)};
   border-radius: ${props => props.borderRadius};
+  filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
 `;
 //tslint:enable no-unnecessary-callback-wrapper
 
@@ -132,6 +141,7 @@ const SessionSvg = (props: {
   rotateDuration?: number;
   glowDuration?: number;
   glowStartDelay?: number;
+  noScale?: boolean;
   borderRadius?: number;
   theme: DefaultTheme;
 }) => {
@@ -146,6 +156,7 @@ const SessionSvg = (props: {
     glowDuration: props.glowDuration,
     glowStartDelay: props.glowStartDelay,
     iconColor: props.iconColor,
+    noScale: props.noScale,
   };
 
   return (
@@ -166,6 +177,7 @@ export const SessionIcon = (props: SessionIconProps) => {
     glowDuration,
     borderRadius,
     glowStartDelay,
+    noScale,
   } = props;
   let { iconSize, iconRotation } = props;
   iconSize = iconSize || SessionIconSize.Medium;
@@ -189,6 +201,7 @@ export const SessionIcon = (props: SessionIconProps) => {
       rotateDuration={rotateDuration}
       glowDuration={glowDuration}
       glowStartDelay={glowStartDelay}
+      noScale={noScale}
       borderRadius={borderRadius}
       iconRotation={iconRotation}
       iconColor={iconColor}

diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx
@@ -20,6 +20,9 @@ export const SessionIconButton = (props: SProps) => {
     isSelected,
     notificationCount,
     theme,
+    glowDuration,
+    glowStartDelay,
+    noScale,
   } = props;
   const clickHandler = (e: any) => {
     if (props.onClick) {
@@ -42,6 +45,9 @@ export const SessionIconButton = (props: SProps) => {
         iconColor={iconColor}
         iconRotation={iconRotation}
         theme={themeToUSe}
+        glowDuration={glowDuration}
+        glowStartDelay={glowStartDelay}
+        noScale={noScale}
       />
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
     </div>

diff --git a/ts/session/snode_api/onions.ts b/ts/session/snode_api/onions.ts
@@ -39,7 +39,7 @@ export interface SnodeResponse {
 export const NEXT_NODE_NOT_FOUND_PREFIX = 'Next node not found: ';
 
 export const CLOCK_OUT_OF_SYNC_MESSAGE_ERROR =
-  'You clock is out of sync with the network. Check your clock';
+  'Your clock is out of sync with the network. Check your clock.';
 
 // Returns the actual ciphertext, symmetric key that will be used
 // for decryption, and an ephemeral_key to send to the next hop

diff --git a/ts/test/session/unit/onion/OnionErrors_test.ts b/ts/test/session/unit/onion/OnionErrors_test.ts
@@ -216,7 +216,7 @@ describe('OnionPathsErrors', () => {
           throw new Error('Error expected');
         } catch (e) {
           expect(e.message).to.equal(
-            'You clock is out of sync with the network. Check your clock.'
+            'Your clock is out of sync with the network. Check your clock.'
           );
           // this makes sure that this call would not be retried
           expect(e.name).to.equal('AbortError');
@@ -237,7 +237,7 @@ describe('OnionPathsErrors', () => {
           throw new Error('Error expected');
         } catch (e) {
           expect(e.message).to.equal(
-            'You clock is out of sync with the network. Check your clock.'
+            'Your clock is out of sync with the network. Check your clock.'
           );
           // this makes sure that this call would not be retried
           expect(e.name).to.equal('AbortError');