From c17ac0a9e58b151877dddc126a50af3e1b4f52ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Thu, 21 Jul 2022 14:26:09 +0200
Subject: [PATCH] refactor(styles): move styles for additional components into
 their own packages

---
 packages/controls/src/Controls.tsx  |  2 ++
 packages/controls/src/style.css     | 32 +++++++++++++++++++++++++++++
 packages/core/src/style.css         | 26 -----------------------
 packages/core/src/theme-default.css | 31 ----------------------------
 packages/minimap/src/MiniMap.tsx    |  2 ++
 packages/minimap/src/style.css      |  7 +++++++
 6 files changed, 43 insertions(+), 57 deletions(-)
 create mode 100644 packages/controls/src/style.css
 create mode 100644 packages/minimap/src/style.css

diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx
index 24023644..fc946394 100644
--- a/packages/controls/src/Controls.tsx
+++ b/packages/controls/src/Controls.tsx
@@ -15,6 +15,8 @@ import UnlockIcon from './Icons/Unlock';
 
 import { ControlProps, ControlButtonProps } from './types';
 
+import './style.css';
+
 export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
   children,
   className,
diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css
new file mode 100644
index 00000000..c08e6888
--- /dev/null
+++ b/packages/controls/src/style.css
@@ -0,0 +1,32 @@
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  position: absolute;
+  z-index: 5;
+  bottom: 20px;
+  left: 15px;
+
+  &-button {
+    border: none;
+    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%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}
diff --git a/packages/core/src/style.css b/packages/core/src/style.css
index b78ee614..8b9cf577 100644
--- a/packages/core/src/style.css
+++ b/packages/core/src/style.css
@@ -144,32 +144,6 @@
   pointer-events: all;
 }
 
-/* additional components */
-
-.react-flow__controls {
-  position: absolute;
-  z-index: 5;
-  bottom: 20px;
-  left: 15px;
-
-  &-button {
-    width: 24px;
-    height: 24px;
-    border: none;
-
-    svg {
-      width: 100%;
-    }
-  }
-}
-
-.react-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 20px;
-  right: 15px;
-}
-
 .react-flow__attribution {
   font-size: 10px;
   position: absolute;
diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css
index 07a2e70b..60a249c0 100644
--- a/packages/core/src/theme-default.css
+++ b/packages/core/src/theme-default.css
@@ -98,34 +98,3 @@
     cursor: crosshair;
   }
 }
-
-.react-flow__minimap {
-  background-color: #fff;
-}
-
-.react-flow__controls {
-  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 {
-      max-width: 12px;
-      max-height: 12px;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index a73eaadb..5c43934f 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -13,6 +13,8 @@ import MiniMapNode from './MiniMapNode';
 import MiniMapDrag from './MiniMapDrag';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
+import './style.css';
+
 declare const window: any;
 
 const defaultWidth = 200;
diff --git a/packages/minimap/src/style.css b/packages/minimap/src/style.css
new file mode 100644
index 00000000..add0b389
--- /dev/null
+++ b/packages/minimap/src/style.css
@@ -0,0 +1,7 @@
+.react-flow__minimap {
+  background-color: #fff;
+  position: absolute;
+  z-index: 5;
+  bottom: 20px;
+  right: 15px;
+}