From da4e29cbace2e3ae24ff88248c044f5d5800146b Mon Sep 17 00:00:00 2001
From: yasnazariel <82168644+yasnazariel@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:15:05 +0330
Subject: [PATCH] refactor: improve MCP SVG component (accessibility, theming,
 reusability)

Refactor MCP SVG component to improve usability, accessibility, and flexibility.

Changes:
- Replace hardcoded fill color with `currentColor` for theme support
- Add `size` prop for responsive scaling
- Add `className` and SVG props for better reusability
- Remove fixed pt units in favor of flexible sizing
- Add accessibility attributes (`role`, `aria-label`)

This makes the component more reusable across different UI contexts and compatible with dark/light themes.
---
 storybook/stories/components/svg/McpSvg.tsx | 59 +++++++++++----------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/storybook/stories/components/svg/McpSvg.tsx b/storybook/stories/components/svg/McpSvg.tsx
index 3c4b3ee5a..154bb8529 100644
--- a/storybook/stories/components/svg/McpSvg.tsx
+++ b/storybook/stories/components/svg/McpSvg.tsx
@@ -1,35 +1,36 @@
-export default function McpSvg() {
+export default function McpSvg({
+  size = 50,
+  className,
+  ...props
+}: {
+  size?: number;
+  className?: string;
+} & React.SVGProps<SVGSVGElement>) {
   return (
     <svg
-      version="1.0"
-      xmlns="http://www.w3.org/2000/svg"
-      width="50pt"
-      height="50pt"
-      viewBox="0 0 200.000000 200.000000"
-      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 200 200"
+      width={size}
+      height={size}
+      fill="currentColor"
+      role="img"
+      aria-label="MCP logo"
+      className={className}
+      {...props}
     >
-      <g
-        transform="translate(-30.000000,200.000000) scale(0.100000,-0.100000)"
-        fill="white"
-        stroke="none"
-      >
-        <path
-          d="M1040 1781 c-66 -20 -118 -66 -433 -379 -354 -354 -363 -365 -321
-    -406 36 -36 51 -24 394 319 360 360 379 375 457 360 79 -14 143 -87 143 -163
-    0 -69 -27 -103 -285 -362 -260 -261 -274 -279 -239 -314 35 -36 54 -22 299
-    225 132 133 260 254 284 270 134 87 306 -49 250 -198 -5 -15 -149 -167 -319
-    -338 -210 -210 -314 -322 -325 -348 -26 -64 -13 -99 72 -188 41 -43 84 -81 94
-    -84 30 -10 69 20 69 53 0 21 -16 44 -65 92 -36 35 -65 71 -65 80 0 8 138 152
-    306 320 342 341 354 357 354 470 0 44 -7 80 -21 110 -44 98 -148 170 -246 170
-    l-53 0 0 53 c0 168 -189 307 -350 258z"
-        />
-        <path
-          d="M839 1314 c-295 -294 -314 -320 -312 -433 2 -203 215 -336 395 -248
-    40 20 114 88 307 280 210 211 254 259 254 283 0 30 -25 54 -57 54 -13 0 -111
-    -91 -276 -254 -140 -140 -265 -259 -277 -265 -12 -6 -44 -11 -71 -11 -90 0
-    -162 72 -162 162 0 27 5 59 11 71 6 12 125 137 265 277 163 165 254 263 254
-    276 0 27 -19 50 -49 59 -20 6 -53 -23 -282 -251z"
-        />
+      <g transform="translate(-30,200) scale(0.1,-0.1)">
+        <path d="M1040 1781 c-66 -20 -118 -66 -433 -379 -354 -354 -363 -365 -321
+        -406 36 -36 51 -24 394 319 360 360 379 375 457 360 79 -14 143 -87 143 -163
+        0 -69 -27 -103 -285 -362 -260 -261 -274 -279 -239 -314 35 -36 54 -22 299
+        225 132 133 260 254 284 270 134 87 306 -49 250 -198 -5 -15 -149 -167 -319
+        -338 -210 -210 -314 -322 -325 -348 -26 -64 -13 -99 72 -188 41 -43 84 -81 94
+        -84 30 -10 69 20 69 53 0 21 -16 44 -65 92 -36 35 -65 71 -65 80 0 8 138 152
+        306 320 342 341 354 357 354 470 0 44 -7 80 -21 110 -44 98 -148 170 -246 170
+        l-53 0 0 53 c0 168 -189 307 -350 258z" />
+        <path d="M839 1314 c-295 -294 -314 -320 -312 -433 2 -203 215 -336 395 -248
+        40 20 114 88 307 280 210 211 254 259 254 283 0 30 -25 54 -57 54 -13 0 -111
+        -91 -276 -254 -140 -140 -265 -259 -277 -265 -12 -6 -44 -11 -71 -11 -90 0
+        -162 72 -162 162 0 27 5 59 11 71 6 12 125 137 265 277 163 165 254 263 254
+        276 0 27 -19 50 -49 59 -20 6 -53 -23 -282 -251z" />
       </g>
     </svg>
   );