Merge pull request #1743 from eijawerner/cleanup-styles

Cleanup of unused styles

Author: eijawerner

src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`LabelItems renders empty 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Node Labels
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <p>
         There are no labels in database
@@ -24,15 +24,15 @@ exports[`LabelItems renders empty 1`] = `
 exports[`LabelItems renders labels 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Node Labels
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <div
         class="sc-dkPtRN sc-hKwDye jYhbHV gKvrSp"
@@ -60,15 +60,15 @@ exports[`LabelItems renders labels 1`] = `
 exports[`PropertyItems renders empty 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Property Keys
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <p>
         There are no properties in database
@@ -81,15 +81,15 @@ exports[`PropertyItems renders empty 1`] = `
 exports[`PropertyItems renders properties 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Property Keys
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <div
         class="sc-dkPtRN sc-jRQBWg jYhbHV jZJEwZ"
@@ -111,15 +111,15 @@ exports[`PropertyItems renders properties 1`] = `
 exports[`RelationshipItems renders empty 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Relationship Types
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <p>
         No relationships in database
@@ -132,15 +132,15 @@ exports[`RelationshipItems renders empty 1`] = `
 exports[`RelationshipItems renders relationshipTypes 1`] = `
 <div>
   <div
-    class="sc-hUpaCq hBQjql"
+    class="sc-iAKWXU fiffMu"
   >
     <h5
-      class="sc-khQegj kHgioF"
+      class="sc-iUKqMP kWpjPs"
     >
       Relationship Types
     </h5>
     <div
-      class="sc-jgrJph ejPeH"
+      class="sc-efQSVx ka-Dmgl"
     >
       <div
         class="sc-dkPtRN sc-eCImPb jYhbHV dPdKNs"

src/browser/modules/Stream/CypherFrame/VisualizationView/__snapshots__/VisualizationView.test.tsx.snap

@@ -5,10 +5,10 @@ exports[`Visualization renders empty content 1`] = `<div />`;
 exports[`Visualization renders with result and escapes any HTML 1`] = `
 <div>
   <div
-    class="sc-bBHHxi cJDNuH"
+    class="sc-cidDSM bJgiKu"
   >
     <div
-      class="sc-fKVqWL iKdqzS"
+      class="sc-ikJyIC kpXvss"
       id="svg-vis"
     >
       <div
@@ -139,7 +139,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         </div>
       </div>
       <div
-        class="sc-iwjdpV kgKHIv"
+        class="sc-hiCibw nXgZj"
         title="Collapse the Node Properties display"
       >
         <svg
@@ -156,32 +156,32 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         </svg>
       </div>
       <div
-        class="sc-bBHxTw cgpIWu"
+        class="sc-jJoQJp bdlJEB"
       >
         <div
-          class="sc-cxpSdN ljiZIO sc-ikJyIC cBKZZH react-resizable"
+          class="sc-gWXbKe jJnEYo sc-cCcXHH iRMzhr react-resizable"
           data-testid="vizInspector"
         >
           <div
-            class="sc-eicpiI gDARYg"
+            class="sc-hkgtus fYrIKh"
           >
             Overview
           </div>
           <div
-            class="sc-dkqQuH jJauhh"
+            class="sc-bSqaIl bqEILb"
           >
             <div>
               <div
-                class="sc-gXRojI fnAVBM"
+                class="sc-iWBNLc iyniyo"
               >
                 <span
-                  class="sc-kHxTfl kGozrS"
+                  class="sc-edERGn jhjrMc"
                 >
                   Node labels
                 </span>
               </div>
               <ul
-                class="sc-JkixQ sc-jvvksu kRydKe ixIxHD"
+                class="sc-gIBqdA sc-dSfdvi ebPuUL fukQJW"
               >
                 <div
                   class="sc-dkPtRN sc-hKwDye jYhbHV gKvrSp"

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx

@@ -22,7 +22,7 @@ import React, { useState } from 'react'
 import { ClipboardCopier, PropertiesTable, upperFirst } from 'neo4j-arc/common'
 import { NodeItem, RelationshipItem } from '../../types'
 
-import { PaneBody, PaneHeader, PaneTitle } from '../styled'
+import { PaneBody, PaneHeader, PaneTitle } from './styled'
 import { NodeLabel } from './NodeLabel'
 import { RelType } from './RelType'
 import { GraphStyleModel } from '../../models/GraphStyle'

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultOverviewPane.tsx

@@ -27,14 +27,14 @@ import {
 import { GraphStyleModel } from '../../models/GraphStyle'
 import { GraphStats } from '../../utils/mapper'
 
-import { StyledLegendInlineList } from './styled'
 import {
   PaneBody,
   PaneHeader,
   PaneBodySectionHeaderWrapper,
   PaneBodySectionSmallText,
-  PaneBodySectionTitle
-} from '../styled'
+  PaneBodySectionTitle,
+  StyledLegendInlineList
+} from './styled'
 
 import { NodeLabel } from './NodeLabel'
 import { RelType } from './RelType'

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/styled.tsx

@@ -28,105 +28,52 @@ export const StyledInlineList = styled.ul`
   word-break: break-word;
 `
 
-export const StyledInlineListStylePicker = styled(StyledInlineList)`
-  display: grid;
-  overflow-y: auto;
-  max-height: 400px;
-  background: ${props => 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 {
     max-height: ${legendRowHeight}px;
     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;
 `

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;