From eff794932cef87b1d50f725eea74bf5994556fee Mon Sep 17 00:00:00 2001
From: Eija Werner <github@eija.se>
Date: Mon, 4 Apr 2022 16:20:44 +0200
Subject: [PATCH] Fixed issues where icon and text not on the same line

---
 .../PropertiesPanelContent/DetailsPane.tsx          |  2 +-
 .../PropertiesPanelContent/styled.tsx               |  3 +++
 src/neo4j-arc/common/components/WarningMessage.tsx  | 13 +++++++++----
 .../DefaultPanelContent/DefaultDetailsPane.tsx      |  2 +-
 .../graph-visualization/GraphVisualizer/styled.tsx  |  3 +++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
index d81e60fd4a2..5332ca97f34 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
@@ -54,7 +54,7 @@ export function DetailsPane({
     <>
       <PaneHeader>
         <PaneTitle>
-          {upperFirst(vizItem.type)} Properties{' '}
+          <span>{`${upperFirst(vizItem.type)} Properties`}</span>
           <ClipboardCopier
             textToCopy={allItemProperties
               .map(prop => `${prop.key}: ${prop.value}`)
diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
index 4671f8b5394..d628b820f2b 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
@@ -162,6 +162,9 @@ export const PaneBody = styled.div`
 
 export const PaneTitle = styled.div`
   margin-bottom: 10px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
 `
 
 export const PaneBodySectionTitle = styled.span`
diff --git a/src/neo4j-arc/common/components/WarningMessage.tsx b/src/neo4j-arc/common/components/WarningMessage.tsx
index 2d1cb0fd82f..6e2cee4e300 100644
--- a/src/neo4j-arc/common/components/WarningMessage.tsx
+++ b/src/neo4j-arc/common/components/WarningMessage.tsx
@@ -21,17 +21,22 @@ import { WarningIcon } from '../icons/Icons'
 import React from 'react'
 import styled from 'styled-components'
 
-export const StyledWarningMessage = styled.span`
+export const StyledWarningMessageWrapper = styled.div`
   color: orange;
+
+  svg {
+    display: inline;
+  }
 `
+
 type WarningMessageProps = {
   text: string
 }
 export const WarningMessage = ({ text }: WarningMessageProps): JSX.Element => {
   return (
-    <StyledWarningMessage>
+    <StyledWarningMessageWrapper>
       <WarningIcon />
-      &nbsp;{text}&nbsp;
-    </StyledWarningMessage>
+      <span>&nbsp;{text}&nbsp;</span>
+    </StyledWarningMessageWrapper>
   )
 }
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
index 4eecef2d302..22e47395faf 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
@@ -60,7 +60,7 @@ export function DefaultDetailsPane({
     <>
       <PaneHeader>
         <PaneTitle>
-          {upperFirst(vizItem.type)} Properties{' '}
+          <span>{`${upperFirst(vizItem.type)} Properties`}</span>
           <ClipboardCopier
             textToCopy={allItemProperties
               .map(prop => `${prop.key}: ${prop.value}`)
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
index f33cc4d2f00..5f2610dfa49 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx
@@ -87,6 +87,9 @@ export const PaneBody = styled.div`
 
 export const PaneTitle = styled.div`
   margin-bottom: 10px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
 `
 
 export const StyledResizable = styled(Resizable)`