From 54e47e33a909a67ef2e457448e7a5a54d7ed9110 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 12 Dec 2025 13:35:44 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7(frontend)=20configure=20Material?= =?UTF-8?q?=20Icons=20and=20Symbols?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Robin chose to adopt Material Design icons, inspired by NVasse’s commit on Fichier. This sets up the required CSS to easily use Material Icons throughout the application. Eventually, all icons in the app will be replaced with Material ones. For now, the setup is only used in the recording UI refactor. --- src/frontend/package-lock.json | 49 ++++++++++++++++--------------- src/frontend/package.json | 2 ++ src/frontend/src/main.tsx | 3 ++ src/frontend/src/styles/icons.css | 28 ++++++++++++++++++ src/frontend/src/styles/index.css | 1 + 5 files changed, 60 insertions(+), 23 deletions(-) create mode 100644 src/frontend/src/styles/icons.css diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index d52693de..be51da7c 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -8,6 +8,8 @@ "name": "meet", "version": "1.1.0", "dependencies": { + "@fontsource-variable/material-symbols-outlined": "5.2.30", + "@fontsource/material-icons-outlined": "5.2.6", "@livekit/components-react": "2.9.13", "@livekit/components-styles": "1.1.6", "@livekit/track-processors": "0.6.1", @@ -104,7 +106,6 @@ "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -1019,6 +1020,24 @@ "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "license": "MIT" }, + "node_modules/@fontsource-variable/material-symbols-outlined": { + "version": "5.2.30", + "resolved": "https://registry.npmjs.org/@fontsource-variable/material-symbols-outlined/-/material-symbols-outlined-5.2.30.tgz", + "integrity": "sha512-BjSx7nqvISJs2Pjd8sBH583AnD4k6dD4Em7AVISoLXzbX3PIFWAE2GPm13LlCys8u8idkyUd62L8yn6ts6DdbA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/material-icons-outlined": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource/material-icons-outlined/-/material-icons-outlined-5.2.6.tgz", + "integrity": "sha512-99XKAkwnCg0s0/ywax+o3m01HSNM5gGzSBw+WnlWG2+WY3wOjcN+wXMfm4zP37Yme7Yze2DvKxF78tHWOrlwFw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@formatjs/ecma402-abstract": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz", @@ -3870,7 +3889,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz", "integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/query-core": "5.81.5" }, @@ -3962,7 +3980,8 @@ "version": "1.0.22", "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.22.tgz", "integrity": "sha512-mUMZLK3NvwRLcAAT9qmcK+9p7tpU2FHdDsntR3YI4+GY88XrgG4XiE7u1Q2LAN2/FZOz/tdMDC3GQCR4T8nFuw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/dom-mediacapture-transform": { "version": "0.1.11", @@ -3978,7 +3997,8 @@ "version": "0.1.15", "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.15.tgz", "integrity": "sha512-omOlCPvTWyPm4ZE5bZUhlSvnHM2ZWM2U+1cPiYFL/e8aV5O9MouELp+L4dMKNTON0nTeHqEg+KWDfFQMY5Wkaw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/estree": { "version": "1.0.8", @@ -4005,7 +4025,6 @@ "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -4023,7 +4042,6 @@ "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -4090,7 +4108,6 @@ "integrity": "sha512-3MyiDfrfLeK06bi/g9DqJxP5pV74LNv4rFTyvGDmT3x2p1yp1lOd+qYZfiRPIOf/oON+WRZR5wxxuF85qOar+w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.35.1", "@typescript-eslint/types": "8.35.1", @@ -4382,7 +4399,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4797,7 +4813,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001646", "electron-to-chromium": "^1.5.4", @@ -5607,7 +5622,6 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -6575,7 +6589,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.27.6" }, @@ -7460,7 +7473,6 @@ "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.7.tgz", "integrity": "sha512-19m8Q1cvRl5PslRawDUgWXeP8vL8584tX8kiZEJaPZo83U/L6VPS/O7pP06phfJaBWeeV8sAOVtEPlQiZEHtpg==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@livekit/mutex": "1.1.1", "@livekit/protocol": "1.39.3", @@ -8120,7 +8132,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -8234,7 +8245,6 @@ "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -8388,7 +8398,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -8495,7 +8504,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -8745,6 +8753,7 @@ "integrity": "sha512-GBg5pV8LHOTbeVmH2VHLEFR0mc2QpQMzAvcoxEGfPNWgWHc8UvKCyq7pqN1vA+fDZ+yXXbixeO0kB2pzVvFCBw==", "license": "MIT", "optional": true, + "peer": true, "dependencies": { "postcss": "^8.4.38" } @@ -9248,7 +9257,6 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -9367,8 +9375,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/type-check": { "version": "0.4.0", @@ -9480,7 +9487,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz", "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -9641,7 +9647,6 @@ "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.5.tgz", "integrity": "sha512-vsh1Ixu5mT0pJFZm+Jspvhga5GzHUTYv0/+Th203pLfh3/wbHwxhu/Z2OkZDXIgHfjnjBns7SN9HNcbDvPmaGw==", "license": "MIT", - "peer": true, "dependencies": { "proxy-compare": "^3.0.1" }, @@ -9742,7 +9747,6 @@ "integrity": "sha512-cJBdq0/u+8rgstg9t7UkBilf8ipLmeXJO30NxD5HAHOivnj10ocV8YtR/XBvd2wQpN3TmcaxNKaHX3tN7o5F5A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -9877,7 +9881,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/src/frontend/package.json b/src/frontend/package.json index 6ae769cf..6fd324f8 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -13,6 +13,8 @@ "check": "prettier --check ./src" }, "dependencies": { + "@fontsource-variable/material-symbols-outlined": "5.2.30", + "@fontsource/material-icons-outlined": "5.2.6", "@livekit/components-react": "2.9.13", "@livekit/components-styles": "1.1.6", "@livekit/track-processors": "0.6.1", diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index ed319314..ee1483ae 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -2,6 +2,9 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' +// Supports weights 100-700 +import '@fontsource-variable/material-symbols-outlined' + ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/frontend/src/styles/icons.css b/src/frontend/src/styles/icons.css new file mode 100644 index 00000000..3394d70f --- /dev/null +++ b/src/frontend/src/styles/icons.css @@ -0,0 +1,28 @@ +@import '@fontsource/material-icons-outlined'; + +.material-icons, +.material-symbols { + font-weight: normal; + font-style: normal; + font-display: block; + font-size: 24px; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: 'liga'; +} + +.material-icons { + font-family: 'Material Icons Outlined'; +} + +.material-symbols { + font-family: 'Material Symbols Outlined Variable'; +} diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css index 1762668a..5d1ebb66 100644 --- a/src/frontend/src/styles/index.css +++ b/src/frontend/src/styles/index.css @@ -1,4 +1,5 @@ @import './livekit.css'; +@import './icons.css'; @layer reset, base, tokens, recipes, utilities; html, body,