From 01e1b32104e2a93655c00971284d36627dd5d92f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 15:04:03 +0200
Subject: [PATCH] chore(docs): update interaction example styles

---
 .../interaction/InteractionControls.vue       |  6 ++---
 docs/examples/interaction/style.css           | 25 +++++++++++--------
 docs/examples/save-restore/style.css          |  5 ++++
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/docs/examples/interaction/InteractionControls.vue b/docs/examples/interaction/InteractionControls.vue
index 8c85e055..2aafefcb 100644
--- a/docs/examples/interaction/InteractionControls.vue
+++ b/docs/examples/interaction/InteractionControls.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useVueFlow } from '@vue-flow/core'
+import { Panel, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const {
@@ -42,7 +42,7 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 
 <template>
-  <div class="controls">
+  <Panel position="top-right">
     <div>
       <label class="label" for="draggable">
         nodesDraggable
@@ -113,5 +113,5 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
         <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
       </label>
     </div>
-  </div>
+  </Panel>
 </template>
diff --git a/docs/examples/interaction/style.css b/docs/examples/interaction/style.css
index 49f8f8de..931894e4 100644
--- a/docs/examples/interaction/style.css
+++ b/docs/examples/interaction/style.css
@@ -1,15 +1,18 @@
-.interactionflow .controls {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 4;
-  font-size: 11px;
-  background-color: lightgray;
-  border-bottom-right-radius: 10px;
-  padding: 8px;
+.vue-flow__panel {
+  background-color: #2d3748;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.interactionflow .controls .label {
+
+.vue-flow__panel .label {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -17,6 +20,6 @@
   cursor: pointer;
 }
 
-.interactionflow .controls .label input {
+.vue-flow__panel .label input {
   cursor: pointer;
 }
diff --git a/docs/examples/save-restore/style.css b/docs/examples/save-restore/style.css
index 363d2543..8e6a67a4 100644
--- a/docs/examples/save-restore/style.css
+++ b/docs/examples/save-restore/style.css
@@ -29,3 +29,8 @@
   background-color: #2563eb;
   transition: background-color 0.2s;
 }
+
+.vue-flow__panel button svg {
+  width: 100%;
+  height: 100%;
+}