Merge pull request #1726 from eijawerner/fix-icon-text-not-on-same-line

Fixed issues where icon and text not on the same line
neo4j · Apr 5, 2022 · 27c2215 · 27c2215
2 parents 96cc787 + eff7949
commit 27c2215
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/...owser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx b/...owser/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
@@ -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
@@ -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
@@ -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
@@ -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)`