From 78f2635c5ee1d3160deaa196eb60cfdda009c24e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 15:09:05 +0200
Subject: [PATCH] chore(docs): update visibility example styles

---
 docs/examples/hidden/App.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/docs/examples/hidden/App.vue b/docs/examples/hidden/App.vue
index 50d760dd..542966b1 100644
--- a/docs/examples/hidden/App.vue
+++ b/docs/examples/hidden/App.vue
@@ -29,12 +29,35 @@ watch(isHidden, () => {
     <Background />
 
     <Panel position="top-right">
-      <div>
-        <label for="ishidden">
-          hidden
-          <input id="ishidden" v-model="isHidden" type="checkbox" />
-        </label>
-      </div>
+      <button type="button" @click="isHidden = !isHidden">
+        {{ isHidden ? 'Show' : 'Hide' }}
+      </button>
     </Panel>
   </VueFlow>
 </template>
+
+<style>
+.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;
+}
+
+.vue-flow__panel button {
+  background-color: #4a5568;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 10px;
+}
+</style>