From 151dcd1431b48001107f393d6ee22f44260a679f Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 22 Jun 2021 14:28:46 +1000
Subject: [PATCH] fix up onion path animation with no glowing nodes

---
 stylesheets/_session.scss                     |  4 +++
 ts/components/OnionStatusDialog.tsx           |  2 +-
 .../conversation/InviteContactsDialog.tsx     |  2 --
 ts/components/session/icon/SessionIcon.tsx    | 32 ++++++++++++-------
 .../session/network/SessionOffline.tsx        |  7 ++--
 ts/hooks/useNetwork.ts                        | 22 -------------
 6 files changed, 29 insertions(+), 40 deletions(-)
 delete mode 100644 ts/hooks/useNetwork.ts

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 261a7e36d..622277f15 100644
--- a/stylesheets/_session.scss
+++ b/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;
diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx
index 465b77989..776e3dd17 100644
--- a/ts/components/OnionStatusDialog.tsx
+++ b/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}
     />
   );
diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx
index 21702bf46..fe21a5f56 100644
--- a/ts/components/conversation/InviteContactsDialog.tsx
+++ b/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(
diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx
index e698b71d5..1818cf674 100644
--- a/ts/components/session/icon/SessionIcon.tsx
+++ b/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;
diff --git a/ts/components/session/network/SessionOffline.tsx b/ts/components/session/network/SessionOffline.tsx
index 8230520c3..3dbb4a6b4 100644
--- a/ts/components/session/network/SessionOffline.tsx
+++ b/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>
diff --git a/ts/hooks/useNetwork.ts b/ts/hooks/useNetwork.ts
deleted file mode 100644
index d92fc9937..000000000
--- a/ts/hooks/useNetwork.ts
+++ /dev/null
@@ -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;
-}