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

@@ -22,4 +22,17 @@
       margin-left: 10px
       font-size: 11px
       font-weight: bold
-      color: $light-blue-color
+      color: $light-blue-color
+
+  .httpsDomains
+    display: none
+    margin: 0
+    padding: 0
+    list-style: none
+
+  .customWarningStyle
+    &:hover
+      overflow-y: scroll
+      height: 85px
+      .httpsDomains
+        display: block

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>