From 7e7706339b3ac78014ba01c55c2293be14dd9294 Mon Sep 17 00:00:00 2001
From: Geronimo Bergk <geronimo.bergk@gmail.com>
Date: Fri, 5 Jul 2024 09:17:47 +0200
Subject: [PATCH] Add folder icons for Jupyter (#2368)

* add folder icon for jupyter-notebooks

* prevent recolor of the jupyter logo

* Fit icon color to Material Design

* Darker background for folder color of jupyter folder

* replace logo colors by material color theme

---------

Co-authored-by: Geronimo Bergk <GBergk@horvath-partners.com>
---
 icons/folder-jupyter-open.svg | 18 ++++++++++++++++++
 icons/folder-jupyter.svg      | 18 ++++++++++++++++++
 src/icons/folderIcons.ts      |  8 ++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 icons/folder-jupyter-open.svg
 create mode 100644 icons/folder-jupyter.svg

diff --git a/icons/folder-jupyter-open.svg b/icons/folder-jupyter-open.svg
new file mode 100644
index 0000000000..0a234cc2e1
--- /dev/null
+++ b/icons/folder-jupyter-open.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <!-- Main folder icon -->
+    <path fill="#FF9800" d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12Z"/>
+
+    <!-- Group containing the Jupyter logo elements, scaled down and positioned in the bottom right of the folder -->
+    <g data-mit-no-recolor="true"> <!-- prevent recolor of the jupyter logo -->
+        <g transform="translate(10, 10) scale(0.7)">
+            <!-- Two symmetrical paths forming the main part of the Jupyter logo -->
+            <path fill="#FFE0B2" d="M6.2 18a22.725 22.725 0 0 0 9.8 2 22.725 22.725 0 0 0 9.8-2 10.002 10.002 0 0 1-19.6 0Z" />
+            <path fill="#FFE0B2" d="M6.2 14a22.725 22.725 0 0 1 9.8-2 22.725 22.725 0 0 1 9.8 2 10.002 10.002 0 0 0-19.6 0Z" />
+
+            <!-- Three circles, each representing a different shade of grey (part of the Jupyter logo) -->
+            <circle cx="27" cy="5" r="3" fill="#FFE0B2" />
+            <circle cx="5" cy="27" r="3" fill="#FFE0B2" />
+            <circle cx="5" cy="5" r="3" fill="#FFE0B2" />
+        </g>
+    </g>
+</svg>
diff --git a/icons/folder-jupyter.svg b/icons/folder-jupyter.svg
new file mode 100644
index 0000000000..b3d3168a60
--- /dev/null
+++ b/icons/folder-jupyter.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <!-- Main folder icon -->
+    <path fill="#FF9800" d="m13.844 7.536-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464Z"/>
+    
+    <!-- Group containing the Jupyter logo elements, scaled down and positioned in the bottom right of the folder -->
+    <g data-mit-no-recolor="true"> <!-- prevent recolor of the jupyter logo -->
+        <g transform="translate(10, 10) scale(0.7)">
+            <!-- Two symmetrical paths forming the main part of the Jupyter logo -->
+            <path fill="#FFE0B2" d="M6.2 18a22.725 22.725 0 0 0 9.8 2 22.725 22.725 0 0 0 9.8-2 10.002 10.002 0 0 1-19.6 0Z" />
+            <path fill="#FFE0B2" d="M6.2 14a22.725 22.725 0 0 1 9.8-2 22.725 22.725 0 0 1 9.8 2 10.002 10.002 0 0 0-19.6 0Z" />
+            
+            <!-- Three circles, each representing a different shade of grey (part of the Jupyter logo) -->
+            <circle cx="27" cy="5" r="3" fill="#FFE0B2" />
+            <circle cx="5" cy="27" r="3" fill="#FFE0B2" />
+            <circle cx="5" cy="5" r="3" fill="#FFE0B2" />
+        </g>
+    </g>
+</svg>
diff --git a/src/icons/folderIcons.ts b/src/icons/folderIcons.ts
index 7c1e8fd3c2..f0af00f9cf 100644
--- a/src/icons/folderIcons.ts
+++ b/src/icons/folderIcons.ts
@@ -738,6 +738,14 @@ export const folderIcons: FolderTheme[] = [
           'moderators',
         ],
       },
+      {
+        name: 'folder-jupyter',
+        folderNames: [
+          'jupyter',
+          'notebook',
+          'notebooks',
+        ],
+      },
       { name: 'folder-scala', folderNames: ['scala'] },
       {
         name: 'folder-connection',