fix up onion path animation with no glowing nodes

stylesheets/_session.scss

@@ -18,6 +18,10 @@
   word-break: break-all;
 }
 
+.session-icon-button svg path {
+  transition: fill 0.3s ease;
+}
+
 input,
 textarea {
   caret-color: $session-color-green !important;

ts/components/OnionStatusDialog.tsx

@@ -116,7 +116,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
       glowDuration={glowDuration}
       glowStartDelay={glowStartDelay}
       iconType={SessionIconType.Circle}
-      iconSize={SessionIconSize.Medium}
+      iconSize={SessionIconSize.Small}
       theme={theme}
     />
   );

ts/components/conversation/InviteContactsDialog.tsx

@@ -41,8 +41,6 @@ const InviteContactsDialogInner = (props: Props) => {
   }
 
   const chatName = convo.get('name');
-  // const chatServer = convo.get('server');
-  // const channelId = convo.get('channelId');
   const isPublicConvo = convo.isPublic();
 
   const [contactList, setContactList] = useState(

ts/components/session/icon/SessionIcon.tsx

@@ -62,43 +62,51 @@ const rotate = keyframes`
  * Creates a glow animation made for multiple element sequentially
  */
 const glow = (color: string, glowDuration: number, glowStartDelay: number) => {
-  const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `;
-
   //increase shadow intensity by 3
-  const dropShadow = `${dropShadowType.repeat(1)};`;
+  const dropShadow = `drop-shadow(0px 0px 6px ${color});`;
 
   // creating keyframe for sequential animations
   let kf = '';
-  for (let i = 0; i <= glowDuration; i++) {
-    // const percent = (100 / glowDuration) * i;
-    const percent = (100 / glowDuration) * i;
-    if (i === glowStartDelay) {
+  const durationWithLoop = glowDuration + 1;
+  for (let i = 0; i <= durationWithLoop; i++) {
+    const percent = (100 / durationWithLoop) * i;
+
+    if (i === glowStartDelay + 1) {
       kf += `${percent}% {
         filter: ${dropShadow}
-        transform: scale(1.5);
+        transform: scale(1.1);
       }`;
     } else {
       kf += `${percent}% {
         filter: none;
-        transform: scale(0.8);
+        transform: scale(0.9);
       }`;
     }
   }
   return keyframes`${kf}`;
 };
 
-const animation = (props: any) => {
+const animation = (props: {
+  rotateDuration?: number;
+  glowDuration?: number;
+  glowStartDelay?: number;
+  iconColor?: string;
+}) => {
   if (props.rotateDuration) {
     return css`
       ${rotate} ${props.rotateDuration}s infinite linear;
     `;
-  } else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) {
+  } else if (
+    props.glowDuration !== undefined &&
+    props.glowStartDelay !== undefined &&
+    props.iconColor
+  ) {
     return css`
       ${glow(
         props.iconColor,
         props.glowDuration,
         props.glowStartDelay
-      )} ${props.glowDuration}s ease-in infinite;
+      )} ${props.glowDuration}s ease infinite;
     `;
   } else {
     return;

ts/components/session/network/SessionOffline.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+
+// tslint:disable-next-line: no-submodule-imports
+import useNetworkState from 'react-use/lib/useNetworkState';
 import styled from 'styled-components';
-import { useNetwork } from '../../../hooks/useNetwork';
 
 type ContainerProps = {
   show: boolean;
@@ -24,8 +26,7 @@ const OfflineTitle = styled.h3`
 const OfflineMessage = styled.div``;
 
 export const SessionOffline = () => {
-  const isOnline = useNetwork();
-
+  const isOnline = useNetworkState().online;
   return (
     <OfflineContainer show={!isOnline}>
       <OfflineTitle>{window.i18n('offline')}</OfflineTitle>

ts/hooks/useNetwork.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useNetwork() {
-  const [isOnline, setNetwork] = useState(window.navigator.onLine);
-  const updateNetwork = () => {
-    setNetwork(window.navigator.onLine);
-  };
-
-  // there are some weird behavior with this api.
-  // basically, online events might not be called if the pc has a virtual machine running
-  // https://github.com/electron/electron/issues/11290#issuecomment-348598311
-  useEffect(() => {
-    window.addEventListener('offline', updateNetwork);
-    window.addEventListener('online', updateNetwork);
-
-    return () => {
-      window.removeEventListener('offline', updateNetwork);
-      window.removeEventListener('online', updateNetwork);
-    };
-  });
-  return isOnline;
-}