From 439c854188c0b6612241d9f86b07b92c7e6f479c Mon Sep 17 00:00:00 2001
From: Riccardo Perra <riccardo.perra@icloud.com>
Date: Sat, 21 Dec 2024 09:38:42 +0100
Subject: [PATCH] Swap the css icon to use the new official one (#660)

* fix: update css icon, fix remote svg icon content

* docs(changeset): Fix RemoteSvgIcon inner content

* docs(changeset): Fix WindowTab attributes
---
 .changeset/cold-parents-attack.md                        | 5 +++++
 .changeset/wise-coins-decide.md                          | 5 +++++
 .../src/components/Terminal/Tabs/Tab/WindowTab.tsx       | 8 +++++++-
 packages/config/src/lib/base/languages.ts                | 2 +-
 packages/config/src/lib/icons/css.svg                    | 6 ++++++
 packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx    | 9 ++++++++-
 6 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/cold-parents-attack.md
 create mode 100644 .changeset/wise-coins-decide.md
 create mode 100644 packages/config/src/lib/icons/css.svg

diff --git a/.changeset/cold-parents-attack.md b/.changeset/cold-parents-attack.md
new file mode 100644
index 000000000..41ab935c6
--- /dev/null
+++ b/.changeset/cold-parents-attack.md
@@ -0,0 +1,5 @@
+---
+'@codeimage/ui': patch
+---
+
+Fix RemoteSvgIcon inner content
diff --git a/.changeset/wise-coins-decide.md b/.changeset/wise-coins-decide.md
new file mode 100644
index 000000000..736cdb7b5
--- /dev/null
+++ b/.changeset/wise-coins-decide.md
@@ -0,0 +1,5 @@
+---
+'@codeimage/config': patch
+---
+
+Fix WindowTab attributes
diff --git a/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx b/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx
index cba3d6ad0..492fe243f 100644
--- a/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx
+++ b/apps/codeimage/src/components/Terminal/Tabs/Tab/WindowTab.tsx
@@ -29,7 +29,13 @@ export interface WindowTabProps {
 export function WindowTab(
   props: ParentProps<WindowTabProps & JSX.IntrinsicElements['div']>,
 ) {
-  const [, others] = splitProps(props, ['class', 'ref', 'style']);
+  const [, others] = splitProps(props, [
+    'class',
+    'ref',
+    'style',
+    'rightContent',
+    'content',
+  ]);
 
   return (
     <div
diff --git a/packages/config/src/lib/base/languages.ts b/packages/config/src/lib/base/languages.ts
index 709fbadaf..0f2a6640b 100644
--- a/packages/config/src/lib/base/languages.ts
+++ b/packages/config/src/lib/base/languages.ts
@@ -284,7 +284,7 @@ export const SUPPORTED_LANGUAGES: readonly LanguageDefinition[] = [
       {
         name: 'css',
         extension: '.css',
-        content: () => import('material-icon-theme/icons/css.svg?raw'),
+        content: () => import('../icons/css.svg?raw'),
         matcher: /^.*\.(css)$/,
       },
       {
diff --git a/packages/config/src/lib/icons/css.svg b/packages/config/src/lib/icons/css.svg
new file mode 100644
index 000000000..2574c8e09
--- /dev/null
+++ b/packages/config/src/lib/icons/css.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" role="img" aria-labelledby="css-logo-title css-logo-description">
+  <title id="css-logo-title">CSS Logo</title>
+  <desc id="css-logo-description">A purple square with rounded corners and the letters CSS inside in white</desc>
+  <path id="bg" fill="#639" d="M0 0H840A160 160 0 0 1 1000 160V840A160 160 0 0 1 840 1000H160A160 160 0 0 1 0 840V0Z" />
+  <path id="fg" fill="#fff" d="M253 817V649c0-67 43-103 108-103 64-1 104 41 102 112h-74c2-27-10-47-30-46-25 0-32 17-32 49v146c0 31 10 46 32 47 23 0 32-23 30-49h74c4 73-42 116-107 115-63 0-103-35-103-103Zm237-12h69c1 32 11 52 33 52s30-13 30-43c0-25-11-39-38-52l-26-12c-46-22-65-49-65-103 0-60 38-102 100-102s95 43 96 113h-67c0-29-6-49-28-49-20 0-30 10-30 35s9 35 33 45l24 11c51 24 73 55 73 113 0 69-39 107-103 107s-100-44-101-115Zm226 0h70c0 32 11 52 32 52s30-13 30-43c0-25-10-39-38-52l-26-12c-46-22-64-49-64-103 0-60 37-102 100-102s94 43 96 113h-67c-1-29-7-49-29-49-20 0-29 10-29 35s8 35 32 45l25 11c50 24 72 55 72 113 0 69-39 107-103 107s-100-44-101-115Z" />
+</svg>
diff --git a/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx b/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx
index bed8cd0c3..ebad86b62 100644
--- a/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx
+++ b/packages/ui/src/lib/primitives/Icon/RemoteSvgIcon.tsx
@@ -52,8 +52,15 @@ export function RemoteSvgIcon(props: SvgExternalIconProps): JSXElement {
 
     const innerHTML = randomizeSvgUrlIds(svgResponse);
 
-    return {
+    const parsedDocument = new DOMParser().parseFromString(
       innerHTML,
+      'text/html',
+    );
+    const svg = parsedDocument.body.childNodes[0] as SVGElement;
+
+    return {
+      innerHTML: (svg as SVGElement).innerHTML,
+      viewBox: svg.getAttribute('viewBox') || undefined,
     };
   });