From 3644fdb5335310ba58eb5aeabb4b60e557dac801 Mon Sep 17 00:00:00 2001
From: Neim Elezi <49072837+imceZZ@users.noreply.github.com>
Date: Wed, 1 Sep 2021 12:39:02 +0200
Subject: [PATCH] Feature/tra 3533 ssl connection pop up (#223)

* pop-up message for HTTPS domains is modified

* scroll added on hover of the TLS pop-up

* domains that were for testing are removed

* height of the pop-up is decreased

* condition for return is changed
---
 ui/src/App.sass | 15 ++++++++++++++-
 ui/src/App.tsx  |  7 ++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.sass b/ui/src/App.sass
index 0b409a236..7ef640155 100644
--- a/ui/src/App.sass
+++ b/ui/src/App.sass
@@ -22,4 +22,17 @@
       margin-left: 10px
       font-size: 11px
       font-weight: bold
-      color: $light-blue-color
\ No newline at end of file
+      color: $light-blue-color
+
+  .httpsDomains
+    display: none
+    margin: 0
+    padding: 0
+    list-style: none
+
+  .customWarningStyle
+    &:hover
+      overflow-y: scroll
+      height: 85px
+      .httpsDomains
+        display: block
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index fa5b8153c..3ea758f8d 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -92,7 +92,7 @@ const App = () => {
                 </table>
 
             </span>
-
+      
     return (
         <div className="mizuApp">
             <div className="header">
@@ -119,8 +119,9 @@ const App = () => {
             </div>
             <TrafficPage setAnalyzeStatus={setAnalyzeStatus} onTLSDetected={onTLSDetected}/>
             <Snackbar open={showTLSWarning && !userDismissedTLSWarning}>
-                <MuiAlert elevation={6} variant="filled" onClose={() => setUserDismissedTLSWarning(true)} severity="warning">
-                    Mizu is detecting TLS traffic{addressesWithTLS.size ? ` (directed to ${Array.from(addressesWithTLS).join(", ")})` : ''}, this type of traffic will not be displayed.
+                <MuiAlert classes={{ filledWarning: 'customWarningStyle' }} elevation={6} variant="filled" onClose={() => setUserDismissedTLSWarning(true)} severity="warning">
+                    Mizu is detecting TLS traffic, this type of traffic will not be displayed.
+                    {addressesWithTLS.size > 0 && <ul className="httpsDomains"> {Array.from(addressesWithTLS, address => <li>{address}</li>)} </ul>}
                 </MuiAlert>
             </Snackbar>
         </div>