Refactor a lot of styling to achieve using Queryable in Protocol component

ui/src/components/EntryDetailed.tsx

@@ -39,13 +39,13 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
     const response = data.response;
 
     const bodySizeChild = <div
-        style={{margin: "0 18px", opacity: 0.5}}
+        style={{opacity: 0.5}}
     >
         {formatSize(bodySize)}
     </div>;
 
     const elapsedTimeChild = <div
-        style={{marginRight: 18, opacity: 0.5}}
+        style={{opacity: 0.5}}
     >
         {Math.round(elapsedTime)}ms
     </div>;
@@ -57,6 +57,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
             {response && <Queryable
                 query={`response.bodySize == ${bodySize}`}
                 updateQuery={updateQuery}
+                style={{margin: "0 18px"}}
                 displayIconOnMouseOver={true}
             >
                 {bodySizeChild}
@@ -64,6 +65,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
             {response && <Queryable
                 query={`elapsedTime >= ${elapsedTime}`}
                 updateQuery={updateQuery}
+                style={{marginRight: 18}}
                 displayIconOnMouseOver={true}
             >
                 {elapsedTimeChild}

ui/src/components/EntryListItem/EntryListItem.module.sass

@@ -6,20 +6,15 @@
   min-height: 46px
   max-height: 46px
   align-items: center
-  padding: 0 8px
   border-radius: 4px
   cursor: pointer
-  border: solid 1px transparent
+  margin-left: -1px
-  margin-right: 10px
-  &:not(:first-child)
-    margin-top: 10px
 
   &:hover
     border: solid 1px lighten(#4253a5, 20%)
 
 .rowSelected
   border: 1px $blue-color solid
-  margin-right: 3px
 
 .ruleSuccessRow
   background: #E8FFF1

ui/src/components/TrafficPage.tsx

@@ -21,7 +21,7 @@ const useLayoutStyles = makeStyles(() => ({
         padding: "12px 24px",
         borderRadius: 4,
         marginTop: 15,
-        background: variables.headerBackgoundColor,
+        background: variables.headerBackgroundColor,
     },
 
     viewer: {

ui/src/components/UI/Protocol.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import styles from './style/Protocol.module.sass';
+import Queryable from "./Queryable";
+import variables from '../../variables.module.scss';
 
 export interface ProtocolInterface {
     name: string
@@ -36,7 +38,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
             </span>
         </a>
     } else {
-        return <span
+        const child = <span
             className={`${styles.base} ${styles.vertical}`}
             style={{
                 backgroundColor: protocol.backgroundColor,
@@ -44,12 +46,22 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
                 fontSize: protocol.fontSize,
             }}
             title={protocol.longName}
-            onClick={() => {
-                updateQuery(protocol.macro)
-            }}
         >
             {protocol.abbr}
-        </span>
+        </span>;
+
+        return <Queryable
+            query={protocol.macro}
+            updateQuery={updateQuery}
+            displayIconOnMouseOver={true}
+            flipped={true}
+            style={{
+                backgroundColor: variables.dataBackgroundColor,
+            }}
+            iconStyle={{marginRight: "28px"}}
+        >
+            {child}
+        </Queryable>
     }
 };
 

ui/src/components/UI/Queryable.tsx

@@ -7,13 +7,14 @@ interface Props {
     query: string,
     updateQuery: any,
     style?: object,
+    iconStyle?: object,
     className?: string,
     useTooltip?: boolean,
     displayIconOnMouseOver?: boolean,
     flipped?: boolean,
 }
 
-const Queryable: React.FC<Props> = ({query, updateQuery, style, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => {
+const Queryable: React.FC<Props> = ({query, updateQuery, style, iconStyle, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => {
     const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
 
@@ -37,6 +38,7 @@ const Queryable: React.FC<Props> = ({query, updateQuery, style, className, useTo
                     <span
                         className={`Queryable-Icon`}
                         title={`Add "${query}" to the filter`}
+                        style={iconStyle}
                     >
                         <AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
                         {showAddedNotification && <span className={'Queryable-AddNotifier'}>Added</span>}

ui/src/components/style/Filters.module.sass

@@ -7,6 +7,7 @@
     padding: .5rem 0
     border-bottom: 1px solid #BCC6DD
     margin-right: 20px
+    margin-left: 24px
 
 .filterLabel
     color: #8f9bb2

ui/src/components/style/TrafficPage.sass

@@ -68,7 +68,7 @@
     display: flex
     flex-grow: 1
     overflow: hidden
-    padding-left: 24px
+    // padding-left: 24px
     flex-direction: column
 
 .TrafficPage-DetailContainer

ui/src/variables.module.scss

@@ -11,7 +11,8 @@ $blue-gray: #494677;
 
 :export {
   mainBackgroundColor: $main-background-color;
-  headerBackgoundColor: $header-background-color;
+  headerBackgroundColor: $header-background-color;
+  dataBackgroundColor: $data-background-color;
   fontColor: $font-color;
   secondaryFontColor: $secondary-font-color;
   blueColor: $blue-color;