update(examples): rgb flow styles

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/RGBFlow/RGBFlow.vue

@@ -39,8 +39,8 @@ const store = useVueFlow({
 })
 </script>
 <template>
-  <div ref="page" class="flex demo-flow justify-center items-center h-[80vh] w-full gap-4" style="height: 100%; border-radius: 0">
+  <div ref="page" class="demo-flow">
-    <VueFlow class="relative font-mono" :elements="elements" @load="onLoad">
+    <VueFlow :elements="elements" @load="onLoad">
       <template #node-rgb="props">
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>
@@ -50,3 +50,13 @@ const store = useVueFlow({
     </VueFlow>
   </div>
 </template>
+<style>
+.demo-flow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  width: 100%;
+  border-radius: 0;
+}
+</style>

examples/RGBFlow/RGBNode.vue

@@ -28,7 +28,7 @@ switch (props.data.color) {
 const onChange = (e: any) => emit('change', { color, val: e.target.value })
 </script>
 <template>
-  <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
+  <div class="wrapper">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
     <input
       v-model="props.amount[color]"
@@ -43,9 +43,22 @@ const onChange = (e: any) => emit('change', { color, val: e.target.value })
   </div>
 </template>
 <style>
+.wrapper {
+  padding: 16px;
+  background: #fff;
+  border-radius: 10px;
+  border: 2px solid black;
+  text-align: left;
+}
+
 .slider {
   --color: red;
-  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  margin-top: 12px;
+  background: gainsboro;
+  width: 100%;
+  height: 10px;
+  outline: none;
+  border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
 

examples/RGBFlow/RGBOutputNode.vue

@@ -8,8 +8,16 @@ interface RBGOutputNodeProps extends NodeProps {
 const props = defineProps<RBGOutputNodeProps>()
 </script>
 <template>
-  <div :style="{ backgroundColor: props.rgb }" class="p-3 rounded-xl text-left text-white">
+  <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
     <div class="text-md uppercase">{{ props.rgb }}</div>
     <Handle type="source" :position="Position.Left" />
   </div>
 </template>
+<style>
+.rgb-output-node {
+  padding: 9px;
+  border-radius: 25px;
+  text-align: left;
+  color: white;
+}
+</style>