Grey color

components/FlowEditor/nodes/styles.ts

@@ -8,6 +8,7 @@ const topDoubleLeftStyle = {
   borderBottomRightRadius: "0px",
   top: "-15px",
   left: "20px",
+  background: "#6f6f6f",
 };
 
 const topDoubleRightStyle = {
@@ -19,6 +20,7 @@ const topDoubleRightStyle = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px",
   top: "-15px",
+  background: "#6f6f6f",
 };
 
 const topBigStyle = {
@@ -30,6 +32,7 @@ const topBigStyle = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px",
   top: "-10px",
+  background: "#6f6f6f",
 };
 
 const bottomBigStyle = {
@@ -41,6 +44,7 @@ const bottomBigStyle = {
   borderBottomLeftRadius: "10px",
   borderBottomRightRadius: "10px",
   bottom: "-10px",
+  background: "#6f6f6f",
 };
 
 const topSmallStyle = {
@@ -52,6 +56,7 @@ const topSmallStyle = {
   borderBottomLeftRadius: "0px",
   borderBottomRightRadius: "0px",
   top: "-15px",
+  background: "#6f6f6f",
 };
 
 const bottomSmallStyle = {
@@ -63,6 +68,7 @@ const bottomSmallStyle = {
   borderBottomLeftRadius: "10px",
   borderBottomRightRadius: "10px",
   bottom: "-15px",
+  background: "#6f6f6f",
 };
 
 export {

styles/globals.css

@@ -14,7 +14,7 @@
   .sidebar-icon {
     @apply relative flex items-center justify-center
                     h-14 w-14 my-2 mx-auto
-                    shadow-lg bg-blueSecondary text-secondary
+                    shadow-lg bg-graySecondary text-secondary
                     hover:bg-green-900 hover:text-primary
                     rounded-3xl
                     hover:rounded-xl
@@ -57,14 +57,14 @@
   .flow-panel-button {
     @apply absolute flex items-center justify-center
     w-10 h-10 mt-4 -right-12
-    bg-gray-800 text-secondary
+    bg-grayPrimary text-secondary
     rounded-xl cursor-pointer;
   }
 
   .node-layout {
     @apply flex flex-col items-center
     rounded-lg
-    w-[150px] h-fit bg-bluePrimary
+    w-[150px] h-fit bg-grayPrimary
     p-[4px];
   }
 
@@ -88,13 +88,13 @@
   }
 
   .node-content-select {
-    @apply bg-gray-500 border border-gray-900 text-sm rounded-lg
+    @apply bg-grayPrimary border border-gray-900 text-sm rounded-lg
     text-white;
   }
 
   .node-component {
     @apply relative flex flex-row h-fit rounded-md
-    bg-blueSecondary
+    bg-grayPrimary
     pr-2 my-1 mx-2
     text-white align-middle;
   }

tailwind.config.js

@@ -12,8 +12,8 @@ module.exports = {
         sidebar: "#333333",
         panel: "#252526",
         content: "#1e1e1e",
-        bluePrimary: "#094c72",
-        blueSecondary: "#0c3953",
+        grayPrimary: "#4f4f4f",
+        graySecondary: "#202020",
       }
     },
   },