From 63f6877924aee4de1e756d2a7ef4fc7c5cc5f563 Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Tue, 2 Nov 2021 18:33:40 +0200
Subject: [PATCH] Broken icons when mizu disconnect (#419)

---
 ui/src/components/TrafficPage.tsx        | 6 ++++--
 ui/src/components/style/TrafficPage.sass | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/TrafficPage.tsx
index fa365fc36..262c13e00 100644
--- a/ui/src/components/TrafficPage.tsx
+++ b/ui/src/components/TrafficPage.tsx
@@ -176,8 +176,10 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
     return (
         <div className="TrafficPage">
             <div className="TrafficPageHeader">
-                <img style={{cursor: "pointer", marginRight: 15, height: 30}} alt="pause"
-                    src={connection === ConnectionStatus.Connected ? pauseIcon : playIcon} onClick={toggleConnection}/>
+                <img className="playPauseIcon" style={{visibility: connection === ConnectionStatus.Connected ? "visible" : "hidden"}} alt="pause"
+                    src={pauseIcon} onClick={toggleConnection}/>
+                <img className="playPauseIcon" style={{position: "absolute", visibility: connection === ConnectionStatus.Connected ? "hidden" : "visible"}} alt="play"
+                     src={playIcon} onClick={toggleConnection}/>
                 <div className="connectionText">
                     {getConnectionTitle()}
                     <div className={"indicatorContainer " + getConnectionStatusClass(true)}>
diff --git a/ui/src/components/style/TrafficPage.sass b/ui/src/components/style/TrafficPage.sass
index ceeefe128..3a3c558f5 100644
--- a/ui/src/components/style/TrafficPage.sass
+++ b/ui/src/components/style/TrafficPage.sass
@@ -110,3 +110,8 @@
     align-items: center
     height: 17px
     font-size: 16px
+
+.playPauseIcon
+    cursor: pointer
+    margin-right: 15px
+    height: 30px
\ No newline at end of file