From fad0caae090cfc705465790cc2661abc4c8d33e9 Mon Sep 17 00:00:00 2001
From: Gaurav Chadha <gauravchadha1676@gmail.com>
Date: Fri, 16 Jun 2023 02:19:45 +0530
Subject: [PATCH] fix cytoscape component styles

Signed-off-by: Gaurav Chadha <gauravchadha1676@gmail.com>
---
 .../Meshmap/Meshmap-design/cytoscapeCanvas.js | 23 +++++++++----------
 .../Meshmap-design/images/cytoNodes.js        |  5 +---
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js b/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js
index 20e11d181471..6087d6f25519 100644
--- a/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js
+++ b/src/sections/Meshmap/Meshmap-design/cytoscapeCanvas.js
@@ -39,7 +39,7 @@ const CytoscapeCtx = () => {
             "text-background-shape": "round-rectangle",
             "text-background-color": "#d2d4d2",
             "font-family": "Qanelas Soft, sans-serif",
-            "font-size": "8px",
+            "font-size": "16px",
             "font-weight": "300",
             "text-background-padding": "2px",
             color: "#000",
@@ -54,6 +54,7 @@ const CytoscapeCtx = () => {
             "background-image": clusterRole().svg,
             width: clusterRole().width,
             shape: "round-rectangle",
+            "padding": "20px",
             "background-color": "#326CE5",
             height: clusterRole().height,
             "label": "cluster-role",
@@ -66,7 +67,7 @@ const CytoscapeCtx = () => {
             width: argoCD().width,
             "background-color": "#fe733e",
             height: argoCD().height,
-            "padding": "12px",
+            "padding": "20px",
             "label": "application-set",
           },
         },
@@ -77,7 +78,7 @@ const CytoscapeCtx = () => {
             width: NGINX().width,
             "background-color": "#009639",
             height: NGINX().height,
-            "padding": "12px",
+            "padding": "20px",
             "label": "nginx",
           },
         },
@@ -88,9 +89,9 @@ const CytoscapeCtx = () => {
             width: k8sService().width,
             shape: "round-triangle",
             "background-color": "#326CE5",
-            "padding": 3,
+            "padding": 8,
             "background-fit": "none",
-            "background-position-y": 9,
+            "background-position-y": 18,
             height: k8sService().height,
             "label": "service",
           },
@@ -102,7 +103,7 @@ const CytoscapeCtx = () => {
             width: kubePrometheus().width,
             height: kubePrometheus().height,
             "background-color": "#e75225",
-            "padding": "12px",
+            "padding": "20px",
             "label": "prometheus",
           },
         },
@@ -121,12 +122,10 @@ const CytoscapeCtx = () => {
           selector: "node[id=\"b\"]",
           style: {
             "border-width": "2px",
-            "border-color": "gray",
-            "height": "30px",
-            "width": "20x",
-            "border-style": "solid",
-            "label": "default",
-            "backgroundColor": "gray",
+            "border-color": "#326CE5",
+            "border-style": "dashed",
+            "backgroundColor": "#326CE5",
+            "label": "namespace",
             "background-opacity": "0.5"
           }
         },
diff --git a/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js b/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js
index dd3ed0069d3b..d7d1cb806c25 100644
--- a/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js
+++ b/src/sections/Meshmap/Meshmap-design/images/cytoNodes.js
@@ -27,10 +27,7 @@ export const clusterRole = () => {
   const width = size;
   const height = size;
   const svg = ` 
-  <svg width="${width}" height="${height}" viewBox="0 0 121 151" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.5791" y="3.15723" width="115" height="145" rx="22.5" fill="#326CE5" stroke="#326CE5" stroke-width="5"/>
-<path d="M29.0791 106.657C29.0791 100.292 31.5695 94.1875 36.0026 89.6867C40.4356 85.1858 46.448 82.6572 52.7173 82.6572C58.9865 82.6572 64.999 85.1858 69.432 89.6867C73.865 94.1875 76.3555 100.292 76.3555 106.657H29.0791ZM52.7173 79.6572C42.9222 79.6572 34.9886 71.6022 34.9886 61.6572C34.9886 51.7122 42.9222 43.6572 52.7173 43.6572C62.5124 43.6572 70.4459 51.7122 70.4459 61.6572C70.4459 71.6022 62.5124 79.6572 52.7173 79.6572ZM74.4733 86.3562C78.993 87.5357 83.0311 90.1328 86.0126 93.7777C88.9941 97.4227 90.7671 101.93 91.0791 106.657H82.265C82.265 98.8272 79.3102 91.6992 74.4733 86.3562ZM68.4958 79.5282C70.9719 77.2797 72.952 74.5252 74.3065 71.4455C75.661 68.3657 76.3592 65.0301 76.3555 61.6572C76.3618 57.5576 75.3289 53.5253 73.3564 49.9482C76.7031 50.631 79.7136 52.4693 81.8763 55.1508C84.039 57.8323 85.2205 61.1914 85.2198 64.6572C85.2206 66.7946 84.7714 68.9075 83.9023 70.8543C83.0332 72.801 81.7643 74.5366 80.1806 75.9449C78.5969 77.3531 76.7351 78.4013 74.7198 79.0193C72.7046 79.6373 70.5825 79.8108 68.4958 79.5282Z" fill="white"/>
-</svg>
+  <svg width="${width}" height="${height}" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 63c0-6.365 2.49-12.47 6.923-16.97C11.357 41.528 17.37 39 23.638 39c6.27 0 12.282 2.529 16.715 7.03 4.433 4.5 6.923 10.605 6.923 16.97H0Zm23.638-27C13.843 36 5.91 27.945 5.91 18S13.843 0 23.638 0c9.795 0 17.729 8.055 17.729 18s-7.934 18-17.729 18Zm21.756 6.699a22.138 22.138 0 0 1 11.54 7.422A22.707 22.707 0 0 1 62 63h-8.814c0-7.83-2.955-14.958-7.792-20.301Zm-5.977-6.828a23.926 23.926 0 0 0 5.81-8.083A24.252 24.252 0 0 0 47.277 18a24.18 24.18 0 0 0-3-11.709 14.736 14.736 0 0 1 8.52 5.203A15.142 15.142 0 0 1 56.141 21c0 2.137-.449 4.25-1.318 6.197a14.982 14.982 0 0 1-3.721 5.09 14.71 14.71 0 0 1-5.461 3.075 14.558 14.558 0 0 1-6.224.509Z" fill="#fff"/></svg>
 
     `;
   return {