From 59ad8d8fadac2c9851ce60af18f68d1c0f5aeed1 Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Thu, 31 Mar 2022 11:26:58 +0300
Subject: [PATCH] TLS icon position (#956)

* TLS icon position

* cr fix
---
 .../TrafficViewer/EntryListItem/EntryListItem.module.sass    | 5 ++++-
 .../components/TrafficViewer/EntryListItem/EntryListItem.tsx | 4 +---
 ui-common/src/components/UI/Protocol.tsx                     | 2 +-
 ui-common/src/components/UI/style/StatusCode.module.sass     | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
index 334fa0033..69ca738f8 100644
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
@@ -66,8 +66,10 @@
   margin-top: -60px
 
 .capture img
-  height: 20px
+  height: 14px
   z-index: 1000
+  margin-top: 12px
+  margin-left: -2px
 
 .endpointServiceContainer
   display: flex
@@ -76,6 +78,7 @@
   padding-right: 10px
   padding-top: 4px
   flex-grow: 1
+  padding-left: 10px
 
 .separatorRight
   display: flex
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
index e55b90fe0..0b3de6153 100644
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
@@ -140,8 +140,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
 
 
     const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
-    let endpointServiceContainer = "10px";
-    if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
 
     return <React.Fragment>
         <div
@@ -178,7 +176,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
             {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.status} statusQuery={entry.statusQuery}/>
             </div>}
-            <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
+            <div className={styles.endpointServiceContainer}>
                 <Summary method={entry.method} methodQuery={entry.methodQuery} summary={entry.summary} summaryQuery={entry.summaryQuery}/>
                 <div className={styles.resolvedName}>
                     <Queryable
diff --git a/ui-common/src/components/UI/Protocol.tsx b/ui-common/src/components/UI/Protocol.tsx
index 9ce8715a8..0e78fc44a 100644
--- a/ui-common/src/components/UI/Protocol.tsx
+++ b/ui-common/src/components/UI/Protocol.tsx
@@ -54,7 +54,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
                     backgroundColor: protocol.backgroundColor,
                     color: protocol.foregroundColor,
                     fontSize: protocol.fontSize,
-                    marginRight: "-20px",
+                    marginRight: "-6px",
                 }}
                 title={protocol.longName}
             >
diff --git a/ui-common/src/components/UI/style/StatusCode.module.sass b/ui-common/src/components/UI/style/StatusCode.module.sass
index c9af8a775..4faa4344c 100644
--- a/ui-common/src/components/UI/style/StatusCode.module.sass
+++ b/ui-common/src/components/UI/style/StatusCode.module.sass
@@ -9,7 +9,7 @@
     text-align: center
     line-height: 22px
     font-weight: 600
-    margin-left: 8px
+    margin-left: 3px
 
 .neutral
     background: gray