From 8863f848d601b5dfec9e4f930e27b92f3675c364 Mon Sep 17 00:00:00 2001 From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com> Date: Wed, 19 Mar 2025 23:14:50 +0000 Subject: [PATCH] fix(frontend): use SVG component to theme menu icons (#30) * use SVG component to theme menu icons * fixed linting * externalize github icon and add opencollective * fixed spelling --- package-lock.json | 28 ++++++++++++++++++++++++---- package.json | 2 +- public/github.svg | 14 ++++++++++++++ public/opencollective.svg | 4 ++++ src/App.tsx | 11 ++++++++++- src/routes/sidebar.tsx | 29 +++++++++++++++-------------- 6 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 public/github.svg create mode 100644 public/opencollective.svg diff --git a/package-lock.json b/package-lock.json index c2a15507..d791b6ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "react-dom": "^18.2.0", "react-rnd": "^10.4.1", "react-router-dom": "^6.23.0", - "utopia-ui": "^3.0.76" + "utopia-ui": "^3.0.78" }, "devDependencies": { "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1", @@ -8067,6 +8067,14 @@ "react-dom": ">= 16.3.0" } }, + "node_modules/react-from-dom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz", + "integrity": "sha512-CO92PmMKo/23uYPm6OFvh5CtZbMgHs/Xn+o095Lz/TZj9t8DSDhGdSOMLxBxwWI4sr0MF17KUn9yJWc5Q00R/w==", + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-image-crop": { "version": "10.1.8", "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz", @@ -8075,6 +8083,17 @@ "react": ">=16.13.1" } }, + "node_modules/react-inlinesvg": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.2.0.tgz", + "integrity": "sha512-V59P6sFU7NACIbvoay9ikYKVFWyIIZFGd7w6YT1m+H7Ues0fOI6B6IftE6NPSYXXv7RHVmrncIyJeYurs3OJcA==", + "dependencies": { + "react-from-dom": "^0.7.5" + }, + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-is": { "version": "16.13.1", "license": "MIT" @@ -9782,9 +9801,9 @@ "license": "MIT" }, "node_modules/utopia-ui": { - "version": "3.0.76", - "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.76.tgz", - "integrity": "sha512-PnGlF2RXYDSAGdpmzfxMrDWj24nFwpjUeZXYq8n68Vlm0XaQV1DUYKqJ1Cg78+iUS1aSHSazXBeXHs3ArBTK1w==", + "version": "3.0.78", + "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.78.tgz", + "integrity": "sha512-RmTW4Gb66FRCZmyvbWfDuncWI5G1NH4+DgS4kJcTnOY7/YkhfMDw2WGT4LgH5oki0pegF112d5HvE8028yvxpQ==", "dependencies": { "@heroicons/react": "^2.0.17", "@tanstack/react-query": "^5.17.8", @@ -9795,6 +9814,7 @@ "radash": "^12.1.0", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", + "react-inlinesvg": "^4.2.0", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-markdown": "^9.0.1", diff --git a/package.json b/package.json index 2018e1fb..92785dfe 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "react-dom": "^18.2.0", "react-rnd": "^10.4.1", "react-router-dom": "^6.23.0", - "utopia-ui": "^3.0.76" + "utopia-ui": "^3.0.78" }, "devDependencies": { "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1", diff --git a/public/github.svg b/public/github.svg new file mode 100644 index 00000000..56e39f3d --- /dev/null +++ b/public/github.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/opencollective.svg b/public/opencollective.svg new file mode 100644 index 00000000..cbd720fb --- /dev/null +++ b/public/opencollective.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 2c4ea0d2..1801ee15 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,6 +34,7 @@ import { SelectUser, AttestationForm, MarketView, + SVG, } from 'utopia-ui' import { Route, Routes } from 'react-router-dom' @@ -94,7 +95,15 @@ function App() { ?.filter((l: any) => l.listed) .map((l: any) => ({ path: '/' + l.name, // url - icon: , + icon: ( + + code.replace(/stroke=".*?"/g, 'stroke="currentColor"') + } + /> + ), name: l.name, // name that appear in Sidebar })), ) diff --git a/src/routes/sidebar.tsx b/src/routes/sidebar.tsx index 04a8b574..bce5efae 100644 --- a/src/routes/sidebar.tsx +++ b/src/routes/sidebar.tsx @@ -1,4 +1,5 @@ import { MapIcon } from '@heroicons/react/24/outline' +import { SVG } from 'utopia-ui' export const routes = [ { @@ -47,20 +48,20 @@ export const getBottomRoutes = (currentUrl: string) => { ] if (!isEmbedded) { - bottomRoutes.push({ - path: 'https://github.com/utopia-os/utopia-ui', // url - icon: ( - - ), - name: 'Github', // name that appear in Sidebar - blank: true, - }) + bottomRoutes.push( + { + path: 'https://github.com/utopia-os/utopia-ui', // url + icon: , + name: 'GitHub', // name that appear in Sidebar + blank: true, + }, + { + path: 'https://opencollective.com/utopia-project', // url + icon: , + name: 'Open Collective', // name that appear in Sidebar + blank: true, + }, + ) } return bottomRoutes