stylish editor

Edurz135 · Aug 7, 2023 · 09ee3c4 · 09ee3c4
1 parent b9bbc0b
commit 09ee3c4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/Components/MainFlow/MainFlow.component.jsx b/src/Components/MainFlow/MainFlow.component.jsx
@@ -82,12 +82,14 @@ const OverviewFlow = () => {
       targetPosition: Position.Left,
       style: {
         borderRadius: "100%",
-        backgroundColor: "#fff",
+        backgroundColor: "#f9e9d1",
         width: 50,
         height: 50,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        fontSize: "1.5rem",
+        color: " #2e0b07"
       },
       data: { label: `${(newNodeId + 9).toString(36).toUpperCase()}` },
     };

diff --git a/src/Components/MainFlow/overview.css b/src/Components/MainFlow/overview.css
@@ -1,7 +1,16 @@
+:root {
+  --on-primary: #f9e9d1;
+  --primary: #f9c42c;
+  --secondary: #dc2510;
+  --on-secondary: #2e0b07;
+  --on-secondary-60: rgba(46, 11, 7, 0.6);
+  --tertiary: #56cfc9;
+}
+
 .react-flow__node-custom {
   font-size: 10px;
   width: 180px;
-  background: #f5f5f6;
+  background: #f9e9d1;
   color: #222;
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
   border-radius: 2px;
@@ -13,7 +22,7 @@
   width: 6px;
   height: 10px;
   border-radius: 2px;
-  background-color: #778899;
+  background-color: var(--on-secondary);
 }
 
 .react-flow__node.circle {
@@ -26,6 +35,19 @@
   font-weight: 700;
 }
 
+.react-flow__node.react-flow__node-default {
+  background-color: var(--on-primary) !important;
+  font-size: 1.5rem  !important;
+}
+
+.react-flow__node.react-flow__edge {
+  fill: var(--on-secondary) !important;
+}
+
+.react-flow__edge {
+  fill: var(--on-secondary) !important;
+}
+
 .react-flow__node.annotation {
   border-radius: 0;
   text-align: left;
@@ -40,6 +62,14 @@
   display: none;
 }
 
+.react-flow .react-flow__handle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--primary);
+  border-color: var(--on-secondary);
+}
+
 .custom-node__header {
   padding: 8px 10px;
   border-bottom: 1px solid #e2e8f0;
@@ -123,12 +153,12 @@ button {
   margin-top: 10px;
 }
 
-@media screen and (min-width: 768px) {
+/* @media screen and (min-width: 768px) {
   .dndflow {
     flex-direction: row;
   }
 
   .dndflow aside {
     max-width: 250px;
   }
-}
+} */