diff --git a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap index 89c2a14ce19..8ba727af591 100644 --- a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap +++ b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap @@ -3,15 +3,15 @@ exports[`LabelItems renders empty 1`] = `
Node Labels

There are no labels in database @@ -24,15 +24,15 @@ exports[`LabelItems renders empty 1`] = ` exports[`LabelItems renders labels 1`] = `

Node Labels
Property Keys

There are no properties in database @@ -81,15 +81,15 @@ exports[`PropertyItems renders empty 1`] = ` exports[`PropertyItems renders properties 1`] = `

Property Keys
Relationship Types

No relationships in database @@ -132,15 +132,15 @@ exports[`RelationshipItems renders empty 1`] = ` exports[`RelationshipItems renders relationshipTypes 1`] = `

Relationship Types
`; exports[`Visualization renders with result and escapes any HTML 1`] = `
Overview
Node labels
    props.theme.editorBackground}; - color: ${props => props.theme.primaryText}; - padding: 0.833em 1em; -` -export const StyledInlineListItem = styled.li` - display: inline-block; - padding-right: 5px; -` - -export const StyledToken = styled(StyledInlineListItem)` - display: inline-block; - font-weight: bold; - line-height: 1em; - text-align: center; - vertical-align: baseline; - user-select: none; - font-size: 12px; - margin-right: 5px; - cursor: pointer; - margin-bottom: 3px; -` -export const StyledLabelToken = styled(StyledToken)` - padding: 4px 7px 4px 9px; - border-radius: 20px; - word-break: break-all; - margin-top: 4px; - cursor: default; -` -export const StyledTokenRelationshipType = styled(StyledToken)` - padding: 4px 7px 4px 5px; - border-radius: 3px; - word-break: break-all; - cursor: default; -` export const StyledLegendInlineList = styled(StyledInlineList)` padding: 4px 0 0 0; &.contracted { @@ -73,60 +35,45 @@ export const StyledLegendInlineList = styled(StyledInlineList)` overflow: hidden; } ` -export const StyledPickerListItem = styled(StyledInlineListItem)` - padding-right: 5px; - padding-left: 0; - vertical-align: middle; - line-height: 0; + +export const NonClickableLabelChip = styled(StyledLabelChip)` + cursor: default; ` -export const StyledPickerSelector = styled.a` - background-color: #aaa; - display: inline-block; - height: 12px; - width: 12px; - margin-top: 1px; - line-height: 0; - cursor: pointer; - opacity: 0.4; - &:hover { - opacity: 1; - } - &.active { - opacity: 1; - } +export const NonClickableRelTypeChip = styled(StyledRelationshipChip)` + cursor: default; ` -export const StyledCircleSelector = styled(StyledPickerSelector)` - border-radius: 50%; + +export const PaneHeader = styled.div` + font-size: 16px; + margin-top: 10px; + flex: 0 0 auto; ` -export const StyledCaptionSelector = styled.a` - cursor: pointer; - user-select: none; - display: inline-block; - padding: 1px 6px; - font-size: 12px; - line-height: 1em; - color: #9195a0; - border: 1px solid #9195a0; - overflow: hidden; - border-radius: 0.25em; - margin-right: 0; - font-weight: bold; - &:hover { - border-color: #aaa; - color: #aaa; - text-decoration: none; - } - &.active { - color: white; - background-color: #9195a0; - } + +export const PaneBody = styled.div` + overflow: auto; + margin: 14px 0; + flex: 0 1 auto; + display: flex; + flex-direction: column; + gap: 14px; ` -export const NonClickableLabelChip = styled(StyledLabelChip)` - cursor: default; +export const PaneBodySectionTitle = styled.span` + font-weight: 700; ` -export const NonClickableRelTypeChip = styled(StyledRelationshipChip)` - cursor: default; +export const PaneBodySectionSmallText = styled.span` + font-size: 0.9rem; +` +export const PaneBodySectionHeaderWrapper = styled.div` + display: flex; + flex-direction: column; +` + +export const PaneTitle = styled.div` + margin-bottom: 10px; + display: flex; + gap: 5px; + align-items: center; ` diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx index b5e09f8403f..4fd4655d1bb 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx +++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx @@ -75,40 +75,6 @@ export const PaneContainer = styled.div<{ flex-direction: column; ` -export const PaneHeader = styled.div` - font-size: 16px; - margin-top: 10px; - flex: 0 0 auto; -` - -export const PaneBody = styled.div` - overflow: auto; - margin: 14px 0; - flex: 0 1 auto; - display: flex; - flex-direction: column; - gap: 14px; -` - -export const PaneBodySectionTitle = styled.span` - font-weight: 700; -` - -export const PaneBodySectionSmallText = styled.span` - font-size: 0.9rem; -` -export const PaneBodySectionHeaderWrapper = styled.div` - display: flex; - flex-direction: column; -` - -export const PaneTitle = styled.div` - margin-bottom: 10px; - display: flex; - gap: 5px; - align-items: center; -` - export const StyledResizable = styled(Resizable)` .react-resizable { position: relative;