refactor(theming): split up styles

src/additional-components/Background/index.tsx

@@ -5,8 +5,6 @@ import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
-import './style.css';
-
 export interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;
   gap?: number;
@@ -34,26 +32,25 @@ const Background = ({
   const xOffset = x % scaledGap;
   const yOffset = y % scaledGap;
 
-
-	const isLines = variant === BackgroundVariant.Lines;
-	const bgColor = color ? color : defaultColors[variant];
-	const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
+  const isLines = variant === BackgroundVariant.Lines;
+  const bgColor = color ? color : defaultColors[variant];
+  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
 
   return (
     <svg
       className={bgClasses}
       style={{
-				...style,
-				width: "100%",
-				height: "100%"
+        ...style,
+        width: '100%',
+        height: '100%',
       }}
     >
-			<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
-				{path}
-			</pattern>
+      <pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+        {path}
+      </pattern>
 
-			<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
-		</svg>
+      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+    </svg>
   );
 };
 

src/additional-components/Background/style.css

@@ -1,7 +0,0 @@
-.react-flow__background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

src/additional-components/Controls/index.tsx

@@ -9,7 +9,6 @@ import FitviewIcon from '../../../assets/icons/fitview.svg';
 import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';
 
-import './style.css';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
 export interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {

src/additional-components/Controls/style.css

@@ -1,29 +0,0 @@
-.react-flow__controls {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  left: 10px;
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}

src/additional-components/MiniMap/index.tsx

@@ -6,8 +6,6 @@ import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
 import MiniMapNode from './MiniMapNode';
 
-import './style.css';
-
 type StringFunc = (node: Node) => string;
 
 export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {

src/additional-components/MiniMap/style.css

@@ -1,7 +0,0 @@
-.react-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  right: 10px;
-  background-color: #fff;
-}

src/additional-components/index.ts

@@ -1,5 +1,5 @@
 // These components are not used by React Flow directly
-// but the user can add them as a child of a React Flow component
+// but the user can add them as children of a React Flow component
 
 export { default as MiniMap } from './MiniMap';
 export { default as Controls } from './Controls';