From bbe622f5ac349dfd4d27d7fcc5b9198a64b3e68e Mon Sep 17 00:00:00 2001
From: afonso pinto <afonsobspinto@gmail.com>
Date: Thu, 7 Dec 2023 15:14:54 +0000
Subject: [PATCH 1/2] #66 fix: Update from Buffer.from to browser compatible

---
 src/theme.ts | 27 ++++++++++++++-------------
 src/utils.ts | 12 ++++++++++++
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index 86e75ad..fb20250 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -2,6 +2,7 @@ import vars from './components/assets/styles/variables';
 import nodeGreen from './components/assets/svg/node/green.svg';
 import topSubArrow from './components/assets/svg/sub-top-arrow.svg';
 import bottomSubArrow from './components/assets/svg/sub-bottom-arrow.svg';
+import { base64Encode } from './utils';
 
 type ThemeVars = {
   [key: string]: any;
@@ -86,9 +87,9 @@ const applicationTheme = (params: ThemeVars) => {
             content: "";
             width: 0.5rem;
             height: 0.5rem;
-            background: url(data:image/svg+xml;base64,${btoa(
-              topSubArrow
-            )});           
+            background: url(data:image/svg+xml;base64,${base64Encode(
+            topSubArrow
+        )});           
             position: absolute;
             background-size: 150%;
             top: -0.5rem;
@@ -99,9 +100,9 @@ const applicationTheme = (params: ThemeVars) => {
             content: "";
             width: 0.5rem;
             height: 0.5rem;
-            background: url(data:image/svg+xml;base64,${btoa(
-              bottomSubArrow
-            )});           
+            background: url(data:image/svg+xml;base64,${base64Encode(
+            bottomSubArrow
+        )});           
             position: absolute;
             background-size: 150%;
             bottom: -0.45rem;
@@ -172,9 +173,9 @@ const applicationTheme = (params: ThemeVars) => {
             width: 1.25rem;
             height: 1.25rem;
             margin: 0 auto 0.25rem;
-            background: url(data:image/svg+xml;base64,${Buffer.from(
-              nodeGreen
-            ).toString('base64')});
+            background: url(data:image/svg+xml;base64,${base64Encode(
+            nodeGreen
+        )});
           }
 
           .primary-node .primary-node_header p {
@@ -493,7 +494,7 @@ export const subBarStyle = {
 };
 
 export default (customVariables: ThemeVars) =>
-  applicationTheme({
-    ...vars,
-    ...customVariables,
-  });
+    applicationTheme({
+      ...vars,
+      ...customVariables,
+    });
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index e14ee33..7852758 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -46,3 +46,15 @@ export function updateCanvasMouseCursor(cursor = CursorTypes.TEXT) {
     // element.
   });
 }
+
+
+export function base64Encode(input: string) {
+  // Check if Buffer is available (Node.js environment)
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(input).toString('base64');
+  }
+  // Browser environment
+  else {
+    return btoa(input);
+  }
+}
\ No newline at end of file

From 1ee15cac65dc0d6414cdb1aad9b71597e80f1c6d Mon Sep 17 00:00:00 2001
From: afonso pinto <afonsobspinto@gmail.com>
Date: Thu, 7 Dec 2023 15:26:52 +0000
Subject: [PATCH 2/2] #66 chore: Apply linting

---
 src/theme.ts | 20 ++++++++++----------
 src/utils.ts |  3 +--
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index fb20250..22149f7 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -88,8 +88,8 @@ const applicationTheme = (params: ThemeVars) => {
             width: 0.5rem;
             height: 0.5rem;
             background: url(data:image/svg+xml;base64,${base64Encode(
-            topSubArrow
-        )});           
+              topSubArrow
+            )});           
             position: absolute;
             background-size: 150%;
             top: -0.5rem;
@@ -101,8 +101,8 @@ const applicationTheme = (params: ThemeVars) => {
             width: 0.5rem;
             height: 0.5rem;
             background: url(data:image/svg+xml;base64,${base64Encode(
-            bottomSubArrow
-        )});           
+              bottomSubArrow
+            )});           
             position: absolute;
             background-size: 150%;
             bottom: -0.45rem;
@@ -174,8 +174,8 @@ const applicationTheme = (params: ThemeVars) => {
             height: 1.25rem;
             margin: 0 auto 0.25rem;
             background: url(data:image/svg+xml;base64,${base64Encode(
-            nodeGreen
-        )});
+              nodeGreen
+            )});
           }
 
           .primary-node .primary-node_header p {
@@ -494,7 +494,7 @@ export const subBarStyle = {
 };
 
 export default (customVariables: ThemeVars) =>
-    applicationTheme({
-      ...vars,
-      ...customVariables,
-    });
\ No newline at end of file
+  applicationTheme({
+    ...vars,
+    ...customVariables,
+  });
diff --git a/src/utils.ts b/src/utils.ts
index 7852758..25776d5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -47,7 +47,6 @@ export function updateCanvasMouseCursor(cursor = CursorTypes.TEXT) {
   });
 }
 
-
 export function base64Encode(input: string) {
   // Check if Buffer is available (Node.js environment)
   if (typeof Buffer !== 'undefined') {
@@ -57,4 +56,4 @@ export function base64Encode(input: string) {
   else {
     return btoa(input);
   }
-}
\ No newline at end of file
+}