mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-02-17 13:52:14 +01:00
Convert to use local icons instead of MUI icons
This commit is contained in:
James Brunton
parent
49bea34576
commit
c5a4ecf288
350
frontend/package-lock.json
generated
350
frontend/package-lock.json
generated
@ -38,8 +38,6 @@
|
||||
"@mantine/dates": "^8.3.1",
|
||||
"@mantine/dropzone": "^8.3.1",
|
||||
"@mantine/hooks": "^8.3.1",
|
||||
"@mui/icons-material": "^7.3.2",
|
||||
"@mui/material": "^7.3.2",
|
||||
"@reactour/tour": "^3.8.0",
|
||||
"@stripe/react-stripe-js": "^4.0.2",
|
||||
"@stripe/stripe-js": "^7.9.0",
|
||||
@ -457,7 +455,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
@ -501,7 +498,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
@ -582,7 +578,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.5.0.tgz",
|
||||
"integrity": "sha512-Yrh9XoVaT8cUgzgqpJ7hx5wg6BqQrCFirqqlSwVb+Ly9oNn4fZbR9GycIWmzJOU5XBnaOJjXfQSaDyoNP0woNA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/engines": "1.5.0",
|
||||
"@embedpdf/models": "1.5.0"
|
||||
@ -682,7 +677,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.5.0.tgz",
|
||||
"integrity": "sha512-p7PTNNaIr4gH3jLwX+eLJe1DeUXgi21kVGN6SRx/pocH8esg4jqoOeD/YiRRZoZnPOiy0jBXVhkPkwSmY7a2hQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -699,7 +693,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.5.0.tgz",
|
||||
"integrity": "sha512-ckHgTfvkW6c5Ta7Mc+Dl9C2foVnvEpqEJ84wyBnqrU0OWbe/jsiPhyKBVeartMGqNI/kVfaQTXupyrKhekAVmg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -717,7 +710,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.5.0.tgz",
|
||||
"integrity": "sha512-P4YpIZfaW69etYIjphyaL4cGl2pB14h3OdTE0tRQ2pZYZHFLTvlt4q9B3PVSdhlSrHK5nob7jfLGon2U7xCslg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -771,7 +763,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.5.0.tgz",
|
||||
"integrity": "sha512-ywwSj0ByrlkvrJIHKRzqxARkOZriki8VJUC+T4MV8fGyF4CzvCRJyKlPktahFz+VxhoodqTh7lBCib68dH+GvA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -806,7 +797,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.5.0.tgz",
|
||||
"integrity": "sha512-RNmTZCZ8X1mA8cw9M7TMDuhO9GtkOalGha2bBL3En3D1IlDRS7PzNNMSMV7eqT7OQICSTltlpJ8p8Qi5esvL/Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -843,7 +833,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.5.0.tgz",
|
||||
"integrity": "sha512-zrxLBAZQoPswDuf9q9DrYaQc6B0Ysc2U1hueTjNH/4+ydfl0BFXZkKR63C2e3YmWtXvKjkoIj0GyPzsiBORLUw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -919,7 +908,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.5.0.tgz",
|
||||
"integrity": "sha512-G8GDyYRhfehw72+r4qKkydnA5+AU8qH67g01Y12b0DzI0VIzymh/05Z4dK8DsY3jyWPXJfw2hlg5+KDHaMBHgQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@embedpdf/models": "1.5.0"
|
||||
},
|
||||
@ -1075,7 +1063,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
|
||||
"integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -1119,7 +1106,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
|
||||
"integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -2150,7 +2136,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.6.tgz",
|
||||
"integrity": "sha512-paTl+0x+O/QtgMtqVJaG8maD8sfiOdgPmLOyG485FmeGZ1L3KMdEkhxZtmdGlDFsLXhmMGQ57ducT90bvhXX5A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.27.16",
|
||||
"clsx": "^2.1.1",
|
||||
@ -2201,7 +2186,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.6.tgz",
|
||||
"integrity": "sha512-liHfaWXHAkLjJy+Bkr29UsCwAoDQ/a64WrM67lksx8F0qqyjR5RQH8zVlhuOjdpQnwtlUkE/YiTvbJiPcoI0bw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"react": "^18.x || ^19.x"
|
||||
}
|
||||
@ -2228,240 +2212,6 @@
|
||||
"@types/gapi.client.discovery-v1": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.5.tgz",
|
||||
"integrity": "sha512-kOLwlcDPnVz2QMhiBv0OQ8le8hTCqKM9cRXlfVPL91l3RGeOsxrIhNRsUt3Xb8wb+pTVUolW+JXKym93vRKxCw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/icons-material": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.5.tgz",
|
||||
"integrity": "sha512-LciL1GLMZ+VlzyHAALSVAR22t8IST4LCXmljcUSx2NOutgO2XnxdIp8ilFbeNf9wpo0iUFbAuoQcB7h+HHIf3A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^7.3.5",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
|
||||
"integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/core-downloads-tracker": "^7.3.5",
|
||||
"@mui/system": "^7.3.5",
|
||||
"@mui/types": "^7.4.8",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@types/react-transition-group": "^4.4.12",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^19.2.0",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mui/material-pigment-css": "^7.3.5",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@mui/material-pigment-css": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/private-theming": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.5.tgz",
|
||||
"integrity": "sha512-cTx584W2qrLonwhZLbEN7P5pAUu0nZblg8cLBlTrZQ4sIiw8Fbvg7GvuphQaSHxPxrCpa7FDwJKtXdbl2TSmrA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/styled-engine": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.5.tgz",
|
||||
"integrity": "sha512-zbsZ0uYYPndFCCPp2+V3RLcAN6+fv4C8pdwRx6OS3BwDkRCN8WBehqks7hWyF3vj1kdQLIWrpdv/5Y0jHRxYXQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@emotion/cache": "^11.14.0",
|
||||
"@emotion/serialize": "^1.3.3",
|
||||
"@emotion/sheet": "^1.4.0",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/system": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
|
||||
"integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/private-theming": "^7.3.5",
|
||||
"@mui/styled-engine": "^7.3.5",
|
||||
"@mui/types": "^7.4.8",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/types": {
|
||||
"version": "7.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.8.tgz",
|
||||
"integrity": "sha512-ZNXLBjkPV6ftLCmmRCafak3XmSn8YV0tKE/ZOhzKys7TZXUiE0mZxlH8zKDo6j6TTUaDnuij68gIG+0Ucm7Xhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/utils": {
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.5.tgz",
|
||||
"integrity": "sha512-jisvFsEC3sgjUjcPnR4mYfhzjCDIudttSGSbe1o/IXFNu0kZuR+7vqQI0jg8qtcVZBHWrwTfvAZj9MNMumcq1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/types": "^7.4.8",
|
||||
"@types/prop-types": "^15.7.15",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^19.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas": {
|
||||
"version": "0.1.81",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.81.tgz",
|
||||
@ -2742,16 +2492,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@posthog/core": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.5.2.tgz",
|
||||
@ -3202,7 +2942,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-7.9.0.tgz",
|
||||
"integrity": "sha512-ggs5k+/0FUJcIgNY08aZTqpBTtbExkJMYMLSMwyucrhtWexVOEY1KJmhBsxf+E/Q15f5rbwBpj+t0t2AW2oCsQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12.16"
|
||||
}
|
||||
@ -3321,6 +3060,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.6.tgz",
|
||||
"integrity": "sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"acorn": "^8.9.0"
|
||||
}
|
||||
@ -4097,7 +3837,6 @@
|
||||
"integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
@ -4415,18 +4154,12 @@
|
||||
"integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
@ -4437,20 +4170,10 @@
|
||||
"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
|
||||
"integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
@ -4507,7 +4230,6 @@
|
||||
"integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.46.3",
|
||||
"@typescript-eslint/types": "8.46.3",
|
||||
@ -5221,6 +4943,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
|
||||
"integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/shared": "3.5.24"
|
||||
}
|
||||
@ -5230,6 +4953,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
|
||||
"integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.24",
|
||||
"@vue/shared": "3.5.24"
|
||||
@ -5240,6 +4964,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
|
||||
"integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.24",
|
||||
"@vue/runtime-core": "3.5.24",
|
||||
@ -5252,6 +4977,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
|
||||
"integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-ssr": "3.5.24",
|
||||
"@vue/shared": "3.5.24"
|
||||
@ -5278,7 +5004,6 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@ -5686,6 +5411,7 @@
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
@ -5962,7 +5688,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.19",
|
||||
"caniuse-lite": "^1.0.30001751",
|
||||
@ -7010,8 +6735,7 @@
|
||||
"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
|
||||
"integrity": "sha512-vhE6eymDQSKWUXwwA37NtTTVEzjtGVfDr3pRbsWEQ5onH/Snp2c+2xZHWJJawG/0hCCJLRGt4xVtEVUVILol4w==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"peer": true
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/dezalgo": {
|
||||
"version": "1.0.4",
|
||||
@ -7044,16 +6768,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@ -7406,7 +7120,6 @@
|
||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@ -7577,7 +7290,6 @@
|
||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
@ -7744,7 +7456,8 @@
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
|
||||
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/espree": {
|
||||
"version": "10.4.0",
|
||||
@ -7809,6 +7522,7 @@
|
||||
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.2.tgz",
|
||||
"integrity": "sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
}
|
||||
@ -8899,7 +8613,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.27.6"
|
||||
},
|
||||
@ -9376,6 +9089,7 @@
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
|
||||
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.6"
|
||||
}
|
||||
@ -9696,7 +9410,6 @@
|
||||
"integrity": "sha512-Pcfm3eZ+eO4JdZCXthW9tCDT3nF4K+9dmeZ+5X39n+Kqz0DDIABRP5CAEOHRFZk8RGuC2efksTJxrjp8EXCunQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@acemir/cssom": "^0.9.19",
|
||||
"@asamuzakjp/dom-selector": "^6.7.3",
|
||||
@ -10283,7 +9996,8 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "6.0.0",
|
||||
@ -11442,7 +11156,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@ -11722,7 +11435,6 @@
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
|
||||
"integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
@ -12105,7 +11817,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -12115,7 +11826,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@ -12189,12 +11899,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
|
||||
"integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-number-format": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
|
||||
@ -12368,22 +12072,6 @@
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.6.0",
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
@ -13627,6 +13315,7 @@
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
|
||||
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
@ -13835,7 +13524,6 @@
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@ -14137,7 +13825,6 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@ -14219,7 +13906,6 @@
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"napi-postinstall": "^0.3.0"
|
||||
},
|
||||
@ -14424,7 +14110,6 @@
|
||||
"integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
@ -14595,7 +14280,6 @@
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@ -14609,7 +14293,6 @@
|
||||
"integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/chai": "^5.2.2",
|
||||
"@vitest/expect": "3.2.4",
|
||||
@ -15221,7 +14904,8 @@
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
|
||||
"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "3.25.76",
|
||||
|
||||
@ -34,8 +34,6 @@
|
||||
"@mantine/dates": "^8.3.1",
|
||||
"@mantine/dropzone": "^8.3.1",
|
||||
"@mantine/hooks": "^8.3.1",
|
||||
"@mui/icons-material": "^7.3.2",
|
||||
"@mui/material": "^7.3.2",
|
||||
"@reactour/tour": "^3.8.0",
|
||||
"@stripe/react-stripe-js": "^4.0.2",
|
||||
"@stripe/stripe-js": "^7.9.0",
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import { Card, Group, Text, Button, Progress } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import StorageIcon from "@mui/icons-material/Storage";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { StorageStats } from "@app/services/fileStorage";
|
||||
import { formatFileSize } from "@app/utils/fileUtils";
|
||||
import { getStorageUsagePercent } from "@app/utils/storageUtils";
|
||||
@ -29,7 +28,7 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
|
||||
return (
|
||||
<Card withBorder p="sm" mb="md" style={{ width: "90%", maxWidth: 600 }}>
|
||||
<Group align="center" gap="md">
|
||||
<StorageIcon />
|
||||
<LocalIcon icon="storage-rounded" width={24} height={24} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text size="sm" fw={500}>
|
||||
{t("fileManager.storage", "Storage")}: {formatFileSize(storageStats.used)}
|
||||
@ -54,7 +53,7 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
|
||||
color="red"
|
||||
size="xs"
|
||||
onClick={onClearAll}
|
||||
leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
|
||||
>
|
||||
{t("fileManager.clearAll", "Clear All")}
|
||||
</Button>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
@ -79,7 +78,7 @@ const AddFileCard = ({
|
||||
{/* Header bar - matches FileEditorThumbnail structure */}
|
||||
<div className={`${styles.header} ${styles.addFileHeader}`}>
|
||||
<div className={styles.logoMark}>
|
||||
<AddIcon sx={{ color: 'inherit', fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="add-rounded" width="1.5rem" height="1.5rem" style={{ color: 'inherit' }} />
|
||||
</div>
|
||||
<div className={styles.headerIndex}>
|
||||
{t('fileEditor.addFiles', 'Add Files')}
|
||||
|
||||
@ -5,13 +5,7 @@ import { alert } from '@app/components/toast';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
|
||||
import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import UnarchiveIcon from '@mui/icons-material/Unarchive';
|
||||
import PushPinIcon from '@mui/icons-material/PushPin';
|
||||
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
|
||||
import LockOpenIcon from '@mui/icons-material/LockOpen';
|
||||
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import { StirlingFileStub } from '@app/types/fileContext';
|
||||
import { zipFileService } from '@app/services/zipFileService';
|
||||
@ -198,7 +192,7 @@ const FileEditorThumbnail = ({
|
||||
const hoverActions = useMemo<HoverAction[]>(() => [
|
||||
{
|
||||
id: 'view',
|
||||
icon: <VisibilityIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="visibility-rounded" width={20} height={20} />,
|
||||
label: t('openInViewer', 'Open in Viewer'),
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
@ -217,7 +211,7 @@ const FileEditorThumbnail = ({
|
||||
},
|
||||
{
|
||||
id: 'unzip',
|
||||
icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="unarchive-rounded" width={20} height={20} />,
|
||||
label: t('fileManager.unzip', 'Unzip'),
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
@ -230,7 +224,7 @@ const FileEditorThumbnail = ({
|
||||
},
|
||||
{
|
||||
id: 'close',
|
||||
icon: <CloseIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="close-rounded" width={20} height={20} />,
|
||||
label: t('close', 'Close'),
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
@ -325,7 +319,7 @@ const FileEditorThumbnail = ({
|
||||
openEncryptedUnlockPrompt(file.id);
|
||||
}}
|
||||
>
|
||||
<LockOpenIcon fontSize="small" />
|
||||
<LocalIcon icon="lock-open-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -349,7 +343,7 @@ const FileEditorThumbnail = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
|
||||
{isPinned ? <LocalIcon icon="keep-rounded" width={20} height={20} /> : <LocalIcon icon="keep-outline-rounded" width={20} height={20} />}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@ -420,7 +414,7 @@ const FileEditorThumbnail = ({
|
||||
|
||||
{/* Drag handle (span wrapper so we can attach a ref reliably) */}
|
||||
<span ref={handleRef} className={styles.dragHandle} aria-hidden>
|
||||
<DragIndicatorIcon fontSize="small" />
|
||||
<LocalIcon icon="drag-indicator" width={20} height={20} />
|
||||
</span>
|
||||
|
||||
{/* Tool chain display at bottom */}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Stack, Box, Text, Button, ActionIcon, Center } from '@mantine/core';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getFileSize } from '@app/utils/fileUtils';
|
||||
import { StirlingFileStub } from '@app/types/fileContext';
|
||||
@ -62,7 +60,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
|
||||
backgroundColor: 'var(--mantine-color-gray-1)',
|
||||
borderRadius: 4
|
||||
}}>
|
||||
<PictureAsPdfIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
|
||||
<LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
|
||||
</Center>
|
||||
) : null}
|
||||
</Box>
|
||||
@ -99,7 +97,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
|
||||
onClick={onPrevious}
|
||||
disabled={isAnimating}
|
||||
>
|
||||
<ChevronLeftIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="chevron-left-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
@ -107,7 +105,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
|
||||
onClick={onNext}
|
||||
disabled={isAnimating}
|
||||
>
|
||||
<ChevronRightIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="chevron-right-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface DragOverlayProps {
|
||||
@ -32,7 +32,7 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
|
||||
}}
|
||||
>
|
||||
<Stack align="center" gap="md">
|
||||
<UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
|
||||
<LocalIcon icon="upload-file-rounded" width="4rem" height="4rem" style={{ color: theme.colors.blue[6] }} />
|
||||
<Text size="xl" fw={500} c="blue.6">
|
||||
{t('fileManager.dropFilesHere', 'Drop files here to upload')}
|
||||
</Text>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Group, Text, Stack, useMantineColorScheme } from '@mantine/core';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileManagerContext } from '@app/contexts/FileManagerContext';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
@ -49,7 +48,7 @@ const EmptyFilesState: React.FC = () => {
|
||||
>
|
||||
{/* No Recent Files Message */}
|
||||
<Stack align="center" gap="sm">
|
||||
<HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
|
||||
<LocalIcon icon="history-rounded" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-5)' }} />
|
||||
<Text c="dimmed" ta="center" size="lg">
|
||||
{t('fileManager.noRecentFiles', 'No recent files')}
|
||||
</Text>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import { Group, Text, ActionIcon, Tooltip } from "@mantine/core";
|
||||
import SelectAllIcon from "@mui/icons-material/SelectAll";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useFileManagerContext } from "@app/contexts/FileManagerContext";
|
||||
import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
|
||||
@ -64,7 +63,7 @@ const FileActions: React.FC = () => {
|
||||
disabled={filteredFiles.length === 0}
|
||||
radius="sm"
|
||||
>
|
||||
<SelectAllIcon style={{ fontSize: "1rem" }} />
|
||||
<LocalIcon icon="select-all-rounded" width="1rem" height="1rem" />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@ -95,7 +94,7 @@ const FileActions: React.FC = () => {
|
||||
disabled={!hasSelection}
|
||||
radius="sm"
|
||||
>
|
||||
<DeleteIcon style={{ fontSize: "1rem" }} />
|
||||
<LocalIcon icon="delete-rounded" width="1rem" height="1rem" />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Center, ScrollArea, Text, Stack } from '@mantine/core';
|
||||
import CloudIcon from '@mui/icons-material/Cloud';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FileListItem from '@app/components/fileManager/FileListItem';
|
||||
import FileHistoryGroup from '@app/components/fileManager/FileHistoryGroup';
|
||||
@ -95,7 +95,7 @@ const FileListArea: React.FC<FileListAreaProps> = ({
|
||||
return (
|
||||
<Center style={{ height: '12.5rem' }}>
|
||||
<Stack align="center" gap="sm">
|
||||
<CloudIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
|
||||
<LocalIcon icon="cloud" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-5)' }} />
|
||||
<Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu, Badge } from '@mantine/core';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import RestoreIcon from '@mui/icons-material/Restore';
|
||||
import UnarchiveIcon from '@mui/icons-material/Unarchive';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getFileSize, getFileDate } from '@app/utils/fileUtils';
|
||||
import { FileId, StirlingFileStub } from '@app/types/fileContext';
|
||||
@ -168,7 +162,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
pointerEvents: shouldShowHovered ? 'auto' : 'none'
|
||||
}}
|
||||
>
|
||||
<MoreVertIcon style={{ fontSize: 20 }} />
|
||||
<LocalIcon icon="more-vert" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
@ -177,7 +171,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
{isActive && (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<CloseIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="close-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFiles([file.id]);
|
||||
@ -191,7 +185,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
|
||||
{onDownload && (
|
||||
<Menu.Item
|
||||
leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="download-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDownload();
|
||||
@ -206,7 +200,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={
|
||||
<HistoryIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="history-rounded" width={16} height={16} />
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@ -228,7 +222,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
{isHistoryFile && (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<RestoreIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="restore-from-trash-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
@ -243,7 +237,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
{isZipFile && !isHistoryFile && (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<UnarchiveIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="unarchive-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUnzipFile(file);
|
||||
@ -256,7 +250,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
|
||||
)}
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Stack, Text, Button, Group } from '@mantine/core';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import CloudIcon from '@mui/icons-material/Cloud';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileManagerContext } from '@app/contexts/FileManagerContext';
|
||||
import { useGoogleDrivePicker } from '@app/hooks/useGoogleDrivePicker';
|
||||
@ -51,7 +50,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
|
||||
const buttons = (
|
||||
<>
|
||||
<Button
|
||||
leftSection={<HistoryIcon />}
|
||||
leftSection={<LocalIcon icon="history-rounded" width={24} height={24} />}
|
||||
justify={horizontal ? "center" : "flex-start"}
|
||||
onClick={() => onSourceChange('recent')}
|
||||
fullWidth={!horizontal}
|
||||
@ -86,7 +85,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
|
||||
<Button
|
||||
variant="subtle"
|
||||
color='var(--mantine-color-gray-6)'
|
||||
leftSection={<CloudIcon />}
|
||||
leftSection={<LocalIcon icon="cloud" width={24} height={24} />}
|
||||
justify={horizontal ? "center" : "flex-start"}
|
||||
onClick={handleGoogleDriveClick}
|
||||
fullWidth={!horizontal}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { TextInput } from '@mantine/core';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileManagerContext } from '@app/contexts/FileManagerContext';
|
||||
|
||||
@ -15,7 +15,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
|
||||
return (
|
||||
<TextInput
|
||||
placeholder={t('fileManager.searchFiles', 'Search files...')}
|
||||
leftSection={<SearchIcon />}
|
||||
leftSection={<LocalIcon icon="search-rounded" width={24} height={24} />}
|
||||
value={searchTerm}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Button, Group, ActionIcon } from '@mantine/core';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ButtonDefinition, type FlowState } from '@app/components/onboarding/onboardingFlowConfig';
|
||||
import type { LicenseNotice } from '@app/types/types';
|
||||
@ -76,7 +76,7 @@ export function SlideButtons({ slideDefinition, licenseNotice, flowState, onActi
|
||||
},
|
||||
}}
|
||||
>
|
||||
{button.icon === 'chevron-left' && <ChevronLeftIcon fontSize="small" />}
|
||||
{button.icon === 'chevron-left' && <LocalIcon icon="chevron-left-rounded" width={20} height={20} />}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,8 +7,6 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Modal, Stack, ActionIcon } from '@mantine/core';
|
||||
import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
import type { SlideDefinition, ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
|
||||
import type { OnboardingRuntimeState } from '@app/components/onboarding/orchestrator/onboardingConfig';
|
||||
@ -68,7 +66,7 @@ export default function OnboardingModalSlide({
|
||||
{slideDefinition.hero.type === 'analytics' && (
|
||||
<LocalIcon icon="analytics" width={64} height={64} className={styles.heroIcon} />
|
||||
)}
|
||||
{slideDefinition.hero.type === 'diamond' && <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />}
|
||||
{slideDefinition.hero.type === 'diamond' && <LocalIcon icon="diamond-rounded" width={64} height={64} style={{ color: '#000000' }} />}
|
||||
{slideDefinition.hero.type === 'logo' && (
|
||||
<img src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextLightHC.svg`} alt="Stirling logo" />
|
||||
)}
|
||||
@ -122,7 +120,7 @@ export default function OnboardingModalSlide({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
<LocalIcon icon="close-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
<div className={styles.heroLogo} key={`logo-${slideContent.key}`}>
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
import React from 'react';
|
||||
import { TourProvider, useTour, type StepType } from '@reactour/tour';
|
||||
import { CloseButton, ActionIcon } from '@mantine/core';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import type { TFunction } from 'i18next';
|
||||
import i18n from '@app/i18n';
|
||||
|
||||
@ -121,7 +119,7 @@ export default function OnboardingTour({
|
||||
prevButton={() => null}
|
||||
nextButton={({ currentStep: tourCurrentStep, stepsLength, setCurrentStep, setIsOpen }) => {
|
||||
const isLast = tourCurrentStep === stepsLength - 1;
|
||||
const ArrowIcon = isRTL ? ArrowBackIcon : ArrowForwardIcon;
|
||||
const arrowIcon = isRTL ? 'arrow-back-rounded' : 'arrow-forward-rounded';
|
||||
return (
|
||||
<ActionIcon
|
||||
onClick={() => onAdvance({ setCurrentStep, currentStep: tourCurrentStep, steps: tourSteps, setIsOpen })}
|
||||
@ -129,7 +127,7 @@ export default function OnboardingTour({
|
||||
size="lg"
|
||||
aria-label={isLast ? t('onboarding.finish', 'Finish') : t('onboarding.next', 'Next')}
|
||||
>
|
||||
{isLast ? <CheckIcon /> : <ArrowIcon />}
|
||||
{isLast ? <LocalIcon icon="check-rounded" width={24} height={24} /> : <LocalIcon icon={arrowIcon} width={24} height={24} />}
|
||||
</ActionIcon>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Trans } from 'react-i18next';
|
||||
import { Button } from '@mantine/core';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import i18n from '@app/i18n';
|
||||
import { SlideConfig } from '@app/types/types';
|
||||
import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
|
||||
@ -34,7 +34,7 @@ export default function AnalyticsChoiceSlide({ analyticsError }: AnalyticsChoice
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => window.open('https://docs.stirlingpdf.com/analytics-telemetry/', '_blank')}
|
||||
rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
|
||||
rightSection={<LocalIcon icon="open-in-new-rounded" width={16} height={16} />}
|
||||
>
|
||||
{i18n.t('analytics.learnMore', 'Learn more about our analytics')}
|
||||
</Button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Menu, ActionIcon } from '@mantine/core';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export interface OSOption {
|
||||
label: string;
|
||||
@ -62,7 +62,7 @@ export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
|
||||
padding: 0
|
||||
}}
|
||||
>
|
||||
<ExpandMoreIcon fontSize="small" />
|
||||
<LocalIcon icon="expand-more-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
|
||||
import { ActionIcon, CheckboxIndicator } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
||||
import PushPinIcon from '@mui/icons-material/PushPin';
|
||||
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
|
||||
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
|
||||
import styles from '@app/components/pageEditor/PageEditor.module.css';
|
||||
@ -248,7 +244,7 @@ const FileThumbnail = ({
|
||||
setShowActions((v) => !v);
|
||||
}}
|
||||
>
|
||||
<MoreVertIcon fontSize="small" />
|
||||
<LocalIcon icon="more-vert" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
|
||||
@ -274,7 +270,7 @@ const FileThumbnail = ({
|
||||
setShowActions(false);
|
||||
}}
|
||||
>
|
||||
{isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
|
||||
{isPinned ? <LocalIcon icon="keep-rounded" width={20} height={20} /> : <LocalIcon icon="keep-outline-rounded" width={20} height={20} />}
|
||||
<span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
|
||||
</button>
|
||||
|
||||
@ -296,7 +292,7 @@ const FileThumbnail = ({
|
||||
setShowActions(false);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlineIcon fontSize="small" />
|
||||
<LocalIcon icon="delete-outline-rounded" width={20} height={20} />
|
||||
<span>{t('delete', 'Delete')}</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -351,13 +347,13 @@ const FileThumbnail = ({
|
||||
{/* Pin indicator (bottom-left) */}
|
||||
{isPinned && (
|
||||
<span className={styles.pinIndicator} aria-hidden>
|
||||
<PushPinIcon fontSize="small" />
|
||||
<LocalIcon icon="keep-rounded" width={20} height={20} />
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Drag handle (span wrapper so we can attach a ref reliably) */}
|
||||
<span ref={handleRef} className={styles.dragHandle} aria-hidden>
|
||||
<DragIndicatorIcon fontSize="small" />
|
||||
<LocalIcon icon="drag-indicator" width={20} height={20} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,13 +2,7 @@ import {
|
||||
Tooltip,
|
||||
ActionIcon,
|
||||
} from "@mantine/core";
|
||||
import UndoIcon from "@mui/icons-material/Undo";
|
||||
import RedoIcon from "@mui/icons-material/Redo";
|
||||
import ContentCutIcon from "@mui/icons-material/ContentCut";
|
||||
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
|
||||
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import InsertPageBreakIcon from "@mui/icons-material/InsertPageBreak";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
|
||||
interface PageEditorControlsProps {
|
||||
// Close/Reset functions
|
||||
@ -139,12 +133,12 @@ const PageEditorControls = ({
|
||||
{/* Undo/Redo */}
|
||||
<Tooltip label="Undo">
|
||||
<ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" style={{ color: canUndo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
|
||||
<UndoIcon />
|
||||
<LocalIcon icon="undo-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Redo">
|
||||
<ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" style={{ color: canRedo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
|
||||
<RedoIcon />
|
||||
<LocalIcon icon="redo-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
@ -160,7 +154,7 @@ const PageEditorControls = ({
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<RotateLeftIcon />
|
||||
<LocalIcon icon="rotate-left-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Rotate Selected Right">
|
||||
@ -172,7 +166,7 @@ const PageEditorControls = ({
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<RotateRightIcon />
|
||||
<LocalIcon icon="rotate-right-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Delete Selected">
|
||||
@ -184,7 +178,7 @@ const PageEditorControls = ({
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<DeleteIcon />
|
||||
<LocalIcon icon="delete-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={getSplitTooltip()}>
|
||||
@ -196,7 +190,7 @@ const PageEditorControls = ({
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<ContentCutIcon />
|
||||
<LocalIcon icon="content-cut-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={getPageBreakTooltip()}>
|
||||
@ -208,7 +202,7 @@ const PageEditorControls = ({
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<InsertPageBreakIcon />
|
||||
<LocalIcon icon="insert-page-break-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { Text, Checkbox } from '@mantine/core';
|
||||
import { useIsMobile } from '@app/hooks/useIsMobile';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
import RotateLeftIcon from '@mui/icons-material/RotateLeft';
|
||||
import RotateRightIcon from '@mui/icons-material/RotateRight';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import ContentCutIcon from '@mui/icons-material/ContentCut';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { PDFPage, PDFDocument } from '@app/types/pageEditor';
|
||||
import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
|
||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||
@ -281,7 +275,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
const hoverActions = useMemo<HoverAction[]>(() => [
|
||||
{
|
||||
id: 'move-left',
|
||||
icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="arrow-back-rounded" width={20} height={20} />,
|
||||
label: 'Move Left',
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
@ -296,7 +290,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
},
|
||||
{
|
||||
id: 'move-right',
|
||||
icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="arrow-forward-rounded" width={20} height={20} />,
|
||||
label: 'Move Right',
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
@ -314,33 +308,33 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
},
|
||||
{
|
||||
id: 'rotate-left',
|
||||
icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="rotate-left-rounded" width={20} height={20} />,
|
||||
label: 'Rotate Left',
|
||||
onClick: handleRotateLeft,
|
||||
},
|
||||
{
|
||||
id: 'rotate-right',
|
||||
icon: <RotateRightIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="rotate-right-rounded" width={20} height={20} />,
|
||||
label: 'Rotate Right',
|
||||
onClick: handleRotateRight,
|
||||
},
|
||||
{
|
||||
id: 'delete',
|
||||
icon: <DeleteIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="delete-rounded" width={20} height={20} />,
|
||||
label: 'Delete Page',
|
||||
onClick: handleDelete,
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
id: 'split',
|
||||
icon: <ContentCutIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="content-cut-rounded" width={20} height={20} />,
|
||||
label: 'Split After',
|
||||
onClick: handleSplit,
|
||||
hidden: pageIndex >= totalPages - 1,
|
||||
},
|
||||
{
|
||||
id: 'insert',
|
||||
icon: <AddIcon style={{ fontSize: 20 }} />,
|
||||
icon: <LocalIcon icon="add-rounded" width={20} height={20} />,
|
||||
label: 'Insert File After',
|
||||
onClick: handleInsertFileAfter,
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import AppsIcon from '@mui/icons-material/AppsRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
||||
import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
|
||||
import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
|
||||
@ -54,7 +54,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
|
||||
return (
|
||||
<div className="mt-4 mb-2">
|
||||
<QuickAccessButton
|
||||
icon={<AppsIcon sx={{ fontSize: isActive ? '1.875rem' : '1.5rem' }} />}
|
||||
icon={<LocalIcon icon="apps" width={isActive ? '1.875rem' : '1.5rem'} height={isActive ? '1.875rem' : '1.5rem'} />}
|
||||
label={t("quickAccess.allTools", "Tools")}
|
||||
isActive={isActive}
|
||||
onClick={handleNavClick}
|
||||
|
||||
@ -3,7 +3,7 @@ import { Button, Group } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileState } from '@app/contexts/FileContext';
|
||||
import { useFileActions } from '@app/contexts/file/fileHooks';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Z_INDEX_TOAST } from '@app/styles/zIndex';
|
||||
|
||||
interface DismissAllErrorsButtonProps {
|
||||
@ -33,7 +33,7 @@ const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ classNa
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
leftSection={<CloseIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="close-rounded" width={20} height={20} />}
|
||||
onClick={handleDismissAllErrors}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { ReactNode, useState, useMemo } from 'react';
|
||||
import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from '@mantine/core';
|
||||
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export interface DropdownItem {
|
||||
value: string;
|
||||
@ -133,7 +132,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
|
||||
<Text size="sm" style={{ flex: 1 }}>
|
||||
{getDisplayText()}
|
||||
</Text>
|
||||
<UnfoldMoreIcon style={{
|
||||
<LocalIcon icon="unfold-more-rounded" width={18} height={18} style={{
|
||||
fontSize: '1rem',
|
||||
color: 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))'
|
||||
}} />
|
||||
@ -160,7 +159,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
leftSection={<SearchIcon style={{ fontSize: '1rem' }} />}
|
||||
leftSection={<LocalIcon icon="search-rounded" width="1rem" height="1rem" />}
|
||||
size="sm"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import { Card, Stack, Text, Group, Badge, Button, Box, Image, ThemeIcon, ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||
import StorageIcon from "@mui/icons-material/Storage";
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
|
||||
import { StirlingFileStub } from "@app/types/fileContext";
|
||||
import { getFileSize, getFileDate } from "@app/utils/fileUtils";
|
||||
@ -95,7 +92,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
|
||||
onView();
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="visibility-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -110,7 +107,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
|
||||
onEdit();
|
||||
}}
|
||||
>
|
||||
<EditIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="edit-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -157,7 +154,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
|
||||
radius="sm"
|
||||
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
|
||||
>
|
||||
<PictureAsPdfIcon style={{ fontSize: 40 }} />
|
||||
<LocalIcon icon="picture-as-pdf-rounded" width={40} height={40} />
|
||||
</ThemeIcon>
|
||||
{file.size > 100 * 1024 * 1024 && (
|
||||
<Text size="xs" c="dimmed" mt={4}>Large File</Text>
|
||||
@ -182,7 +179,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
|
||||
color="green"
|
||||
variant="light"
|
||||
size="sm"
|
||||
leftSection={<StorageIcon style={{ fontSize: 12 }} />}
|
||||
leftSection={<LocalIcon icon="storage-rounded" width={12} height={12} />}
|
||||
>
|
||||
DB
|
||||
</Badge>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Menu, Loader, Group, Text } from '@mantine/core';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import FitText from '@app/components/shared/FitText';
|
||||
import { PrivateContent } from '@app/components/shared/PrivateContent';
|
||||
|
||||
@ -30,12 +29,12 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
|
||||
{switchingTo === "viewer" ? (
|
||||
<Loader size="xs" />
|
||||
) : (
|
||||
<VisibilityIcon fontSize="small" />
|
||||
<LocalIcon icon="visibility-rounded" width={20} height={20} />
|
||||
)}
|
||||
<PrivateContent>
|
||||
<FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
|
||||
</PrivateContent>
|
||||
<KeyboardArrowDownIcon fontSize="small" />
|
||||
<LocalIcon icon="keyboard-arrow-down-rounded" width={20} height={20} />
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown style={{
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import { Box, Flex, Group, Text, Button, TextInput, Select } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import SortIcon from "@mui/icons-material/Sort";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import FileCard from "@app/components/shared/FileCard";
|
||||
import { StirlingFileStub } from "@app/types/fileContext";
|
||||
import { FileId } from "@app/types/file";
|
||||
@ -81,7 +80,7 @@ const FileGrid = ({
|
||||
{showSearch && (
|
||||
<TextInput
|
||||
placeholder={t("fileManager.searchFiles", "Search files...")}
|
||||
leftSection={<SearchIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="search-rounded" width={20} height={20} />}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.currentTarget.value)}
|
||||
style={{ flexGrow: 1, maxWidth: 300, minWidth: 200 }}
|
||||
@ -97,7 +96,7 @@ const FileGrid = ({
|
||||
]}
|
||||
value={sortBy}
|
||||
onChange={(value) => setSortBy(value as SortOption)}
|
||||
leftSection={<SortIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="sort-rounded" width={20} height={20} />}
|
||||
style={{ minWidth: 150 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -13,7 +13,7 @@ import {
|
||||
ThemeIcon,
|
||||
SimpleGrid
|
||||
} from '@mantine/core';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileId } from '@app/types/file';
|
||||
import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
|
||||
@ -213,7 +213,7 @@ const FilePickerModal = ({
|
||||
color="red"
|
||||
size={40}
|
||||
>
|
||||
<PictureAsPdfIcon style={{ fontSize: 24 }} />
|
||||
<LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} />
|
||||
</ThemeIcon>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Box, Center } from '@mantine/core';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { StirlingFileStub } from '@app/types/fileContext';
|
||||
import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
|
||||
import DocumentStack from '@app/components/shared/filePreview/DocumentStack';
|
||||
@ -43,9 +43,11 @@ const FilePreview: React.FC<FilePreviewProps> = ({
|
||||
return (
|
||||
<Box style={{ width: '100%', height: '100%' }}>
|
||||
<Center style={{ width: '100%', height: '100%' }}>
|
||||
<InsertDriveFileIcon
|
||||
style={{
|
||||
fontSize: '4rem',
|
||||
<LocalIcon
|
||||
icon="article-rounded"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
style={{
|
||||
color: 'var(--mantine-color-gray-4)',
|
||||
opacity: 0.6
|
||||
}}
|
||||
|
||||
80
frontend/src/core/components/shared/LocalIcon.test.ts
Normal file
80
frontend/src/core/components/shared/LocalIcon.test.ts
Normal file
@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Test to validate that all LocalIcon usages reference valid icons
|
||||
* in the Material Symbols bundle.
|
||||
*
|
||||
* This prevents missing icon errors by checking at test time rather than runtime.
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { execSync } from 'child_process';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
describe('LocalIcon Validation', () => {
|
||||
it('should have all LocalIcon icons available in the icon bundle', () => {
|
||||
// Load the generated icon bundle
|
||||
const iconBundlePath = path.join(__dirname, '../../../assets/material-symbols-icons.json');
|
||||
const iconBundle = JSON.parse(fs.readFileSync(iconBundlePath, 'utf-8'));
|
||||
const availableIcons = new Set(Object.keys(iconBundle.icons || iconBundle));
|
||||
|
||||
// Use grep to find all LocalIcon component usages in the codebase
|
||||
const srcPath = path.join(__dirname, '../../../');
|
||||
|
||||
let grepOutput: string;
|
||||
try {
|
||||
grepOutput = execSync(
|
||||
`grep -r 'LocalIcon' --include="*.tsx" --include="*.ts" ${srcPath} | grep 'icon='`,
|
||||
{ encoding: 'utf-8' }
|
||||
);
|
||||
} catch (error: any) {
|
||||
// grep returns exit code 1 if no matches, but we want to continue
|
||||
if (error.status === 1) {
|
||||
grepOutput = '';
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Extract all icon names from LocalIcon usages
|
||||
// Match: icon="icon-name" (string literals only, not variables)
|
||||
const iconMatches = grepOutput.matchAll(/icon="([a-z0-9-]+)"/g);
|
||||
const usedIcons = new Set<string>();
|
||||
|
||||
for (const match of iconMatches) {
|
||||
// Only add valid icon names (lowercase with hyphens, minimum 3 chars, exclude "icon" itself)
|
||||
const iconName = match[1];
|
||||
if (/^[a-z0-9-]+$/.test(iconName) && iconName.length > 2 && iconName !== 'icon') {
|
||||
usedIcons.add(iconName);
|
||||
}
|
||||
}
|
||||
|
||||
// Find icons that are used but not available
|
||||
const missingIcons: string[] = [];
|
||||
for (const icon of usedIcons) {
|
||||
if (!availableIcons.has(icon)) {
|
||||
missingIcons.push(icon);
|
||||
}
|
||||
}
|
||||
|
||||
// Fail the test if there are missing icons
|
||||
if (missingIcons.length > 0) {
|
||||
const errorMessage = [
|
||||
'\n❌ Found LocalIcon usages with missing icons:',
|
||||
'',
|
||||
...missingIcons.map(icon => ` - "${icon}"`),
|
||||
'',
|
||||
'These icons do not exist in the Material Symbols icon bundle.',
|
||||
'Please use the icon generation script to see available alternatives:',
|
||||
' npm run generate-icons:verbose',
|
||||
'',
|
||||
'Or search Material Symbols at: https://fonts.google.com/icons',
|
||||
].join('\n');
|
||||
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
// Success message
|
||||
expect(missingIcons).toHaveLength(0);
|
||||
console.log(`✅ Validated ${usedIcons.size} unique icon(s) - all present in bundle`);
|
||||
});
|
||||
});
|
||||
@ -1,9 +1,7 @@
|
||||
import { Modal, Text, Button, Group, Stack } from "@mantine/core";
|
||||
import { useNavigationGuard } from "@app/contexts/NavigationContext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
|
||||
interface NavigationWarningModalProps {
|
||||
onApplyAndContinue?: () => Promise<void>;
|
||||
@ -70,16 +68,16 @@ const NavigationWarningModal = ({ onApplyAndContinue, onExportAndContinue }: Nav
|
||||
{/* Desktop layout: 2 groups side by side */}
|
||||
<Group justify="space-between" gap="xl" visibleFrom="md">
|
||||
<Group gap="sm">
|
||||
<Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
|
||||
<Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="arrow-back-rounded" width={20} height={20} />}>
|
||||
{t("keepWorking", "Keep Working")}
|
||||
</Button>
|
||||
</Group>
|
||||
<Group gap="sm">
|
||||
<Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
|
||||
<Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="delete-outline-rounded" width={20} height={20} />}>
|
||||
{t("discardChanges", "Discard Changes")}
|
||||
</Button>
|
||||
{onApplyAndContinue && (
|
||||
<Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
|
||||
<Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}>
|
||||
{t("applyAndContinue", "Apply & Leave")}
|
||||
</Button>
|
||||
)}
|
||||
@ -88,14 +86,14 @@ const NavigationWarningModal = ({ onApplyAndContinue, onExportAndContinue }: Nav
|
||||
|
||||
{/* Mobile layout: centered stack of 4 buttons */}
|
||||
<Stack align="center" gap="sm" hiddenFrom="md">
|
||||
<Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
|
||||
<Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="arrow-back-rounded" width={20} height={20} />}>
|
||||
{t("keepWorking", "Keep Working")}
|
||||
</Button>
|
||||
<Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
|
||||
<Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="delete-outline-rounded" width={20} height={20} />}>
|
||||
{t("discardChanges", "Discard Changes")}
|
||||
</Button>
|
||||
{onApplyAndContinue && (
|
||||
<Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
|
||||
<Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}>
|
||||
{t("applyAndContinue", "Apply & Leave")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Menu, Loader, Group, Text, Checkbox } from '@mantine/core';
|
||||
import { LocalIcon } from '@app/components/shared/LocalIcon';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import FitText from '@app/components/shared/FitText';
|
||||
import { getFileColorWithOpacity } from '@app/components/pageEditor/fileColors';
|
||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||
@ -117,7 +114,7 @@ const FileMenuItem: React.FC<FileMenuItemProps> = ({
|
||||
color: 'var(--mantine-color-dimmed)',
|
||||
}}
|
||||
>
|
||||
<DragIndicatorIcon fontSize="small" />
|
||||
<LocalIcon icon="drag-indicator" width={20} height={20} />
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={file.isSelected}
|
||||
@ -174,7 +171,7 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
|
||||
<LocalIcon icon="dashboard-customize-rounded" width="1.4rem" height="1.4rem" />
|
||||
)}
|
||||
<span className="ph-no-capture">{selectedCount}/{totalCount} files selected</span>
|
||||
<KeyboardArrowDownIcon fontSize="small" />
|
||||
<LocalIcon icon="keyboard-arrow-down-rounded" width={20} height={20} />
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown className="ph-no-capture" style={{
|
||||
@ -222,7 +219,7 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" style={{ width: '100%' }}>
|
||||
<AddIcon fontSize="small" style={{ color: 'var(--mantine-color-text)' }} />
|
||||
<LocalIcon icon="add-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-text)' }} />
|
||||
<Text size="sm" fw={500} style={{ color: 'var(--mantine-color-text)' }} className="ph-no-capture">
|
||||
Add File
|
||||
</Text>
|
||||
|
||||
@ -16,8 +16,6 @@ import { ViewerContext } from '@app/contexts/ViewerContext';
|
||||
import { useSignature } from '@app/contexts/SignatureContext';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { RightRailFooterExtensions } from '@app/components/rightRail/RightRailFooterExtensions';
|
||||
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
||||
import LightModeIcon from '@mui/icons-material/LightMode';
|
||||
|
||||
import { useSidebarContext } from '@app/contexts/SidebarContext';
|
||||
import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '@app/types/rightRail';
|
||||
@ -206,9 +204,9 @@ export default function RightRail() {
|
||||
onClick={toggleTheme}
|
||||
>
|
||||
{themeMode === 'dark' ? (
|
||||
<LightModeIcon sx={{ fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="light-mode-rounded" width="1.5rem" height="1.5rem" />
|
||||
) : (
|
||||
<DarkModeIcon sx={{ fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="dark-mode-rounded" width="1.5rem" height="1.5rem" />
|
||||
)}
|
||||
</ActionIcon>,
|
||||
t('rightRail.toggleTheme', 'Toggle Theme'),
|
||||
|
||||
@ -2,10 +2,7 @@ import React, { useState, useCallback, useMemo } from "react";
|
||||
import { SegmentedControl, Loader } from "@mantine/core";
|
||||
import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
|
||||
import rainbowStyles from '@app/styles/rainbow.module.css';
|
||||
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
|
||||
import GridViewIcon from "@mui/icons-material/GridView";
|
||||
import FolderIcon from "@mui/icons-material/Folder";
|
||||
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
|
||||
import { PageEditorFileDropdown } from '@app/components/shared/PageEditorFileDropdown';
|
||||
import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
|
||||
@ -55,7 +52,7 @@ const createViewOptions = (
|
||||
{switchingTo === "viewer" ? (
|
||||
<Loader size="sm" />
|
||||
) : (
|
||||
<InsertDriveFileIcon fontSize="medium" />
|
||||
<LocalIcon icon="article-rounded" width={24} height={24} />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
@ -84,7 +81,7 @@ const createViewOptions = (
|
||||
{switchingTo === "pageEditor" ? (
|
||||
<Loader size="sm" />
|
||||
) : (
|
||||
<GridViewIcon fontSize="medium" />
|
||||
<LocalIcon icon="grid-view-rounded" width={24} height={24} />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
@ -94,7 +91,7 @@ const createViewOptions = (
|
||||
const fileEditorOption = {
|
||||
label: (
|
||||
<div style={viewOptionStyle}>
|
||||
{switchingTo === "fileEditor" ? <Loader size="sm" /> : <FolderIcon fontSize="medium" />}
|
||||
{switchingTo === "fileEditor" ? <Loader size="sm" /> : <LocalIcon icon="folder-rounded" width={24} height={24} />}
|
||||
</div>
|
||||
),
|
||||
value: "fileEditor",
|
||||
@ -114,7 +111,7 @@ const createViewOptions = (
|
||||
{switchingTo === view.workbenchId ? (
|
||||
<Loader size="sm" />
|
||||
) : (
|
||||
view.icon || <PictureAsPdfIcon fontSize="medium" />
|
||||
view.icon || <LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} />
|
||||
)}
|
||||
<span>{view.label}</span>
|
||||
</div>
|
||||
|
||||
@ -3,12 +3,7 @@ import { Modal, Stack, Text, Badge, Button, Group, Loader, Center, Divider, Box,
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { updateService, UpdateSummary, FullUpdateInfo, MachineInfo } from '@app/services/updateService';
|
||||
import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
|
||||
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
|
||||
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
interface UpdateModalProps {
|
||||
opened: boolean;
|
||||
@ -163,7 +158,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap" align="flex-start">
|
||||
<InfoOutlinedIcon style={{ fontSize: 18, color: 'var(--mantine-color-blue-filled)', marginTop: 2 }} />
|
||||
<LocalIcon icon="info-rounded" width={18} height={18} style={{ color: 'var(--mantine-color-blue-filled)', marginTop: 2 }} />
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="xs" fw={600} mb={4} tt="uppercase">
|
||||
{t('update.recommendedAction', 'Recommended Action')}
|
||||
@ -187,7 +182,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap" align="flex-start">
|
||||
<WarningAmberIcon style={{ fontSize: 18, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
|
||||
<LocalIcon icon="warning-rounded" width={18} height={18} style={{ color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="xs" fw={600} mb={4} tt="uppercase">
|
||||
{t('update.breakingChangesDetected', 'Breaking Changes Detected')}
|
||||
@ -236,7 +231,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
target="_blank"
|
||||
variant="light"
|
||||
size="xs"
|
||||
rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
|
||||
rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
|
||||
>
|
||||
{t('update.viewGuide', 'View Guide')}
|
||||
</Button>
|
||||
@ -312,14 +307,14 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
variant="light"
|
||||
size="xs"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
|
||||
rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
|
||||
>
|
||||
{t('update.releaseNotes', 'Release Notes')}
|
||||
</Button>
|
||||
{isExpanded ? (
|
||||
<ExpandLessIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
|
||||
<LocalIcon icon="expand-less-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
|
||||
) : (
|
||||
<ExpandMoreIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
|
||||
<LocalIcon icon="expand-more-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
@ -346,7 +341,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" align="flex-start" wrap="nowrap" mb="xs">
|
||||
<WarningAmberIcon style={{ fontSize: 16, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
|
||||
<LocalIcon icon="warning-rounded" width={16} height={16} style={{ color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
|
||||
<Text size="xs" fw={600} tt="uppercase">
|
||||
{t('update.breakingChanges', 'Breaking Changes')}
|
||||
</Text>
|
||||
@ -363,7 +358,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
variant="light"
|
||||
color="orange"
|
||||
size="xs"
|
||||
rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
|
||||
rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
|
||||
>
|
||||
{t('update.migrationGuide', 'Migration Guide')}
|
||||
</Button>
|
||||
@ -391,7 +386,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
component="a"
|
||||
href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
|
||||
target="_blank"
|
||||
rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
|
||||
rightSection={<LocalIcon icon="open-in-new-rounded" width={16} height={16} />}
|
||||
>
|
||||
{t('update.viewAllReleases', 'View All Releases')}
|
||||
</Button>
|
||||
@ -401,7 +396,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
|
||||
href={downloadUrl}
|
||||
target="_blank"
|
||||
color="green"
|
||||
leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="download-rounded" width={16} height={16} />}
|
||||
>
|
||||
{t('update.downloadLatest', 'Download Latest')}
|
||||
</Button>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { Modal, Text, Button, Group, Stack } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
||||
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
|
||||
import CancelIcon from "@mui/icons-material/Cancel";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
interface ZipWarningModalProps {
|
||||
@ -34,7 +32,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
|
||||
closeOnEscape={true}
|
||||
>
|
||||
<Stack ta="center" p="md" gap="sm">
|
||||
<WarningAmberIcon style={WARNING_ICON_STYLE} />
|
||||
<LocalIcon icon="warning-rounded" width={48} height={48} style={WARNING_ICON_STYLE} />
|
||||
<Text size="md" fw={300}>
|
||||
{zipFileName}
|
||||
</Text>
|
||||
@ -52,7 +50,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
|
||||
variant="light"
|
||||
color="var(--mantine-color-gray-8)"
|
||||
onClick={onCancel}
|
||||
leftSection={<CancelIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="cancel-rounded" width={20} height={20} />}
|
||||
w="10rem"
|
||||
>
|
||||
{t("zipWarning.cancel", "Cancel")}
|
||||
@ -61,7 +59,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
|
||||
variant="filled"
|
||||
color="var(--mantine-color-blue-9)"
|
||||
onClick={onConfirm}
|
||||
leftSection={<CheckCircleOutlineIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}
|
||||
w="10rem"
|
||||
>
|
||||
{t("zipWarning.confirm", "Extract")}
|
||||
@ -74,7 +72,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
|
||||
variant="light"
|
||||
color="var(--mantine-color-gray-8)"
|
||||
onClick={onCancel}
|
||||
leftSection={<CancelIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="cancel-rounded" width={20} height={20} />}
|
||||
w="10rem"
|
||||
>
|
||||
{t("zipWarning.cancel", "Cancel")}
|
||||
@ -83,7 +81,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
|
||||
variant="filled"
|
||||
color="var(--mantine-color-blue-9)"
|
||||
onClick={onConfirm}
|
||||
leftSection={<CheckCircleOutlineIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}
|
||||
w="10rem"
|
||||
>
|
||||
{t("zipWarning.confirm", "Extract")}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Modal, Text, Group, Button, Stack } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import ScheduleIcon from '@mui/icons-material/Schedule';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
|
||||
|
||||
interface RestartConfirmationModalProps {
|
||||
@ -49,14 +48,14 @@ export default function RestartConfirmationModal({
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<ScheduleIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="schedule-rounded" width={16} height={16} />}
|
||||
onClick={onClose}
|
||||
>
|
||||
{t('admin.settings.restart.later', 'Restart Later')}
|
||||
</Button>
|
||||
<Button
|
||||
color="blue"
|
||||
leftSection={<RefreshIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="refresh-rounded" width={16} height={16} />}
|
||||
onClick={onRestart}
|
||||
>
|
||||
{t('admin.settings.restart.now', 'Restart Now')}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@mantine/core';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export interface HoverOverlayProps {
|
||||
onMouseEnter?: (e: React.MouseEvent) => void;
|
||||
@ -54,7 +54,7 @@ const HoverOverlay: React.FC<HoverOverlayProps> = ({
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon style={{ color: 'white', fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="visibility-rounded" width="1.5rem" height="1.5rem" style={{ color: 'white' }} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Box, ActionIcon } from '@mantine/core';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export interface NavigationArrowsProps {
|
||||
onPrevious: () => void;
|
||||
@ -37,7 +36,7 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
|
||||
left: '0'
|
||||
}}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<LocalIcon icon="chevron-left-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
|
||||
{/* Content */}
|
||||
@ -57,7 +56,7 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
|
||||
right: '0'
|
||||
}}
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
<LocalIcon icon="chevron-right-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import React from "react";
|
||||
import JavascriptIcon from "@mui/icons-material/Javascript";
|
||||
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import type { StirlingFileStub } from "@app/types/fileContext";
|
||||
import { detectFileExtension } from "@app/utils/fileUtils";
|
||||
|
||||
@ -19,14 +17,14 @@ export function getFileTypeIcon(file: FileLike, size: number | string = "2rem"):
|
||||
|
||||
// JavaScript
|
||||
if (ext === "js" || mime.includes("javascript")) {
|
||||
return <JavascriptIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
|
||||
return <LocalIcon icon="javascript-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
|
||||
}
|
||||
|
||||
// PDF
|
||||
if (ext === "pdf" || mime === "application/pdf") {
|
||||
return <PictureAsPdfIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
|
||||
return <LocalIcon icon="picture-as-pdf-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
|
||||
}
|
||||
|
||||
// Fallback generic
|
||||
return <InsertDriveFileIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
|
||||
return <LocalIcon icon="article-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { ActionIcon, Divider } from '@mantine/core';
|
||||
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
||||
import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
|
||||
import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
|
||||
@ -180,7 +180,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
|
||||
>
|
||||
<span className="iconContainer">
|
||||
{isBackHover ? (
|
||||
<ArrowBackRoundedIcon sx={{ fontSize: '1.875rem' }} />
|
||||
<LocalIcon icon="arrow-back-rounded" width="1.875rem" height="1.875rem" />
|
||||
) : (
|
||||
indicatorTool.icon
|
||||
)}
|
||||
|
||||
@ -6,8 +6,7 @@ import { ToolId } from '@app/types/toolId';
|
||||
import { useToolSections } from '@app/hooks/useToolSections';
|
||||
import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
|
||||
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
||||
import StarRoundedIcon from '@mui/icons-material/StarRounded';
|
||||
import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import Badge from '@app/components/shared/Badge';
|
||||
import '@app/components/tools/ToolPanel.css';
|
||||
import DetailedToolItem from '@app/components/tools/fullscreen/DetailedToolItem';
|
||||
@ -119,7 +118,7 @@ const FullscreenToolList = ({
|
||||
}}
|
||||
aria-hidden
|
||||
>
|
||||
<StarRoundedIcon />
|
||||
<LocalIcon icon="star-rounded" width={24} height={24} />
|
||||
</span>
|
||||
<Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
|
||||
{t('toolPanel.fullscreen.favorites', 'Favourites')}
|
||||
@ -161,7 +160,7 @@ const FullscreenToolList = ({
|
||||
}}
|
||||
aria-hidden
|
||||
>
|
||||
<ThumbUpRoundedIcon />
|
||||
<LocalIcon icon="thumb-up-rounded" width={24} height={24} />
|
||||
</span>
|
||||
<Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
|
||||
{t('toolPanel.fullscreen.recommended', 'Recommended')}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
|
||||
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
|
||||
import FullscreenToolList from '@app/components/tools/FullscreenToolList';
|
||||
@ -114,8 +114,10 @@ const FullscreenToolSurface = ({
|
||||
aria-label={toggleLabel}
|
||||
style={{ color: 'var(--right-rail-icon)' }}
|
||||
>
|
||||
<DoubleArrowIcon
|
||||
fontSize="small"
|
||||
<LocalIcon
|
||||
icon="double-arrow-rounded"
|
||||
width={20}
|
||||
height={20}
|
||||
style={{ transform: isRTL ? undefined : 'rotate(180deg)' }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
|
||||
@ -11,7 +11,7 @@ import rainbowStyles from '@app/styles/rainbow.module.css';
|
||||
import { ActionIcon, ScrollArea } from '@mantine/core';
|
||||
import { ToolId } from '@app/types/toolId';
|
||||
import { useIsMobile } from '@app/hooks/useIsMobile';
|
||||
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FullscreenToolSurface from '@app/components/tools/FullscreenToolSurface';
|
||||
import { useToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
|
||||
@ -151,8 +151,10 @@ export default function ToolPanel() {
|
||||
aria-label={toggleLabel}
|
||||
className="tool-panel__mode-toggle"
|
||||
>
|
||||
<DoubleArrowIcon
|
||||
fontSize="small"
|
||||
<LocalIcon
|
||||
icon="double-arrow-rounded"
|
||||
width={20}
|
||||
height={20}
|
||||
style={{ transform: isRTL ? 'scaleX(-1)' : undefined }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
Modal
|
||||
} from '@mantine/core';
|
||||
import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { ToolRegistry } from '@app/data/toolsTaxonomy';
|
||||
import ToolConfigurationModal from '@app/components/tools/automate/ToolConfigurationModal';
|
||||
import ToolList from '@app/components/tools/automate/ToolList';
|
||||
@ -196,7 +196,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
|
||||
|
||||
{/* Save Button */}
|
||||
<Button
|
||||
leftSection={<CheckIcon />}
|
||||
leftSection={<LocalIcon icon="check-rounded" width={24} height={24} />}
|
||||
onClick={saveAutomation}
|
||||
disabled={!canSaveAutomation()}
|
||||
fullWidth
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Group, Text, ActionIcon, Menu, Button, Box } from '@mantine/core';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Tooltip } from '@app/components/shared/Tooltip';
|
||||
import { ToolIcon } from '@app/components/shared/ToolIcon';
|
||||
import { ToolRegistry } from '@app/data/toolsTaxonomy';
|
||||
@ -198,14 +195,14 @@ export default function AutomationEntry({
|
||||
pointerEvents: shouldShowMenu ? 'auto' : 'none'
|
||||
}}
|
||||
>
|
||||
<MoreVertIcon style={{ fontSize: 20 }} />
|
||||
<LocalIcon icon="more-vert" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
{onCopy && (
|
||||
<Menu.Item
|
||||
leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="content-copy-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCopy();
|
||||
@ -216,7 +213,7 @@ export default function AutomationEntry({
|
||||
)}
|
||||
{onEdit && (
|
||||
<Menu.Item
|
||||
leftSection={<EditIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="edit-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
@ -227,7 +224,7 @@ export default function AutomationEntry({
|
||||
)}
|
||||
{onDelete && (
|
||||
<Menu.Item
|
||||
leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
|
||||
leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Text, Stack, Group, Card, Progress } from "@mantine/core";
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import CheckIcon from "@mui/icons-material/Check";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { useFileSelection } from "@app/contexts/FileContext";
|
||||
import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
|
||||
import { AutomationConfig, ExecutionStep } from "@app/types/automation";
|
||||
@ -115,7 +114,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
|
||||
const getStepIcon = (step: ExecutionStep) => {
|
||||
switch (step.status) {
|
||||
case EXECUTION_STATUS.COMPLETED:
|
||||
return <CheckIcon style={{ fontSize: 16, color: 'green' }} />;
|
||||
return <LocalIcon icon="check-rounded" width={16} height={16} style={{ color: 'green' }} />;
|
||||
case EXECUTION_STATUS.ERROR:
|
||||
return <span style={{ fontSize: 16, color: 'red' }}>✕</span>;
|
||||
case EXECUTION_STATUS.RUNNING:
|
||||
@ -193,7 +192,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
|
||||
{/* Action Buttons */}
|
||||
<Group justify="space-between" mt="xl">
|
||||
<Button
|
||||
leftSection={<PlayArrowIcon />}
|
||||
leftSection={<LocalIcon icon="play-arrow-rounded" width={24} height={24} />}
|
||||
onClick={executeAutomation}
|
||||
disabled={isExecuting || !selectedFiles || selectedFiles.length === 0}
|
||||
loading={isExecuting}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Title, Stack, Divider } from "@mantine/core";
|
||||
import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import AutomationEntry from "@app/components/tools/automate/AutomationEntry";
|
||||
import { useSuggestedAutomations } from "@app/hooks/tools/automate/useSuggestedAutomations";
|
||||
import { AutomationConfig, SuggestedAutomation } from "@app/types/automation";
|
||||
@ -39,7 +38,7 @@ export default function AutomationSelection({
|
||||
<Stack gap="xs">
|
||||
<AutomationEntry
|
||||
title={t("automate.selection.createNew.title", "Create New Automation")}
|
||||
badgeIcon={AddCircleOutline}
|
||||
badgeIcon={() => <LocalIcon icon="add-circle-outline-rounded" width={24} height={24} />}
|
||||
operations={[]}
|
||||
onClick={onCreateNew}
|
||||
keepIconColor={true}
|
||||
@ -47,13 +46,13 @@ export default function AutomationSelection({
|
||||
/>
|
||||
{/* Saved Automations */}
|
||||
{savedAutomations.map((automation) => {
|
||||
const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
|
||||
const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : () => <LocalIcon icon="settings-rounded" width={24} height={24} />;
|
||||
return (
|
||||
<AutomationEntry
|
||||
key={automation.id}
|
||||
title={automation.name}
|
||||
description={automation.description}
|
||||
badgeIcon={IconComponent || SettingsIcon}
|
||||
badgeIcon={IconComponent || <LocalIcon icon="settings-rounded" width={20} height={20} />}
|
||||
operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
|
||||
onClick={() => onRun(automation)}
|
||||
showMenu={true}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { iconMap, iconOptions } from '@app/components/tools/automate/iconMap';
|
||||
|
||||
interface IconSelectorProps {
|
||||
@ -54,9 +54,11 @@ export default function IconSelector({ value = "SettingsIcon", onChange, size =
|
||||
}}
|
||||
>
|
||||
{React.createElement(selectedIconComponent, { style: { fontSize: iconSize } })}
|
||||
<KeyboardArrowDownIcon
|
||||
<LocalIcon
|
||||
icon="keyboard-arrow-down-rounded"
|
||||
width={iconSize * 0.8}
|
||||
height={iconSize * 0.8}
|
||||
style={{
|
||||
fontSize: iconSize * 0.8,
|
||||
position: "absolute",
|
||||
right: "0.25rem",
|
||||
top: "50%",
|
||||
|
||||
@ -10,10 +10,7 @@ import {
|
||||
Alert
|
||||
} from '@mantine/core';
|
||||
import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import WarningIcon from '@mui/icons-material/Warning';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { ToolRegistry } from '@app/data/toolsTaxonomy';
|
||||
import { ToolId } from '@app/types/toolId';
|
||||
import { getAvailableToExtensions } from '@app/utils/convertUtils';
|
||||
@ -53,7 +50,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
|
||||
const renderToolSettings = () => {
|
||||
if (!SettingsComponent) {
|
||||
return (
|
||||
<Alert icon={<WarningIcon />} color="orange">
|
||||
<Alert icon={<LocalIcon icon="warning-rounded" width={24} height={24} />} color="orange">
|
||||
<Text size="sm">
|
||||
{t('automate.config.noSettings', 'This tool does not have configurable settings.')}
|
||||
</Text>
|
||||
@ -97,7 +94,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
|
||||
onClose={onCancel}
|
||||
title={
|
||||
<Group gap="xs">
|
||||
<SettingsIcon />
|
||||
<LocalIcon icon="settings-rounded" width={24} height={24} />
|
||||
<Title order={3}>
|
||||
{t('automate.config.title', 'Configure {{toolName}}', { toolName: tool.name })}
|
||||
</Title>
|
||||
@ -119,13 +116,13 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<CloseIcon />}
|
||||
leftSection={<LocalIcon icon="close-rounded" width={24} height={24} />}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t('automate.config.cancel', 'Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
leftSection={<CheckIcon />}
|
||||
leftSection={<LocalIcon icon="check-rounded" width={24} height={24} />}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('automate.config.save', 'Save Configuration')}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Text, Stack, Group, ActionIcon } from "@mantine/core";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { AutomationTool } from "@app/types/automation";
|
||||
import { ToolRegistry } from "@app/data/toolsTaxonomy";
|
||||
import { ToolId } from "@app/types/toolId";
|
||||
@ -82,7 +80,7 @@ export default function ToolList({
|
||||
color: "var(--mantine-color-gray-6)",
|
||||
}}
|
||||
>
|
||||
<CloseIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="close-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
|
||||
@ -109,7 +107,7 @@ export default function ToolList({
|
||||
title={t("automate.creation.tools.configure", "Configure tool")}
|
||||
style={{ color: "var(--mantine-color-gray-6)" }}
|
||||
>
|
||||
<SettingsIcon style={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="settings-rounded" width={16} height={16} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
@ -161,7 +159,7 @@ export default function ToolList({
|
||||
>
|
||||
<AutomationEntry
|
||||
title={t("automate.creation.tools.addTool", "Add Tool")}
|
||||
badgeIcon={AddCircleOutline}
|
||||
badgeIcon={() => <LocalIcon icon="add-circle-outline-rounded" width={24} height={24} />}
|
||||
operations={[]}
|
||||
onClick={onToolAdd}
|
||||
keepIconColor={true}
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import CompressIcon from '@mui/icons-material/Compress';
|
||||
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
|
||||
import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
|
||||
import CropIcon from '@mui/icons-material/Crop';
|
||||
import TextFieldsIcon from '@mui/icons-material/TextFields';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import CloudIcon from '@mui/icons-material/Cloud';
|
||||
import StorageIcon from '@mui/icons-material/Storage';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import RotateLeftIcon from '@mui/icons-material/RotateLeft';
|
||||
import RotateRightIcon from '@mui/icons-material/RotateRight';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import ContentCutIcon from '@mui/icons-material/ContentCut';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import WorkIcon from '@mui/icons-material/Work';
|
||||
import BuildIcon from '@mui/icons-material/Build';
|
||||
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
|
||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import SecurityIcon from '@mui/icons-material/Security';
|
||||
import StarIcon from '@mui/icons-material/Star';
|
||||
|
||||
export const iconMap = {
|
||||
SettingsIcon,
|
||||
CompressIcon,
|
||||
SwapHorizIcon,
|
||||
CleaningServicesIcon,
|
||||
CropIcon,
|
||||
TextFieldsIcon,
|
||||
PictureAsPdfIcon,
|
||||
EditIcon,
|
||||
DeleteIcon,
|
||||
FolderIcon,
|
||||
CloudIcon,
|
||||
StorageIcon,
|
||||
SearchIcon,
|
||||
DownloadIcon,
|
||||
UploadIcon,
|
||||
PlayArrowIcon,
|
||||
RotateLeftIcon,
|
||||
RotateRightIcon,
|
||||
VisibilityIcon,
|
||||
ContentCutIcon,
|
||||
ContentCopyIcon,
|
||||
WorkIcon,
|
||||
BuildIcon,
|
||||
AutoAwesomeIcon,
|
||||
SmartToyIcon,
|
||||
CheckIcon,
|
||||
SecurityIcon,
|
||||
StarIcon
|
||||
};
|
||||
|
||||
export const iconOptions = [
|
||||
{ value: 'SettingsIcon', label: 'Settings' },
|
||||
{ value: 'CompressIcon', label: 'Compress' },
|
||||
{ value: 'SwapHorizIcon', label: 'Convert' },
|
||||
{ value: 'CleaningServicesIcon', label: 'Clean' },
|
||||
{ value: 'CropIcon', label: 'Crop' },
|
||||
{ value: 'TextFieldsIcon', label: 'Text' },
|
||||
{ value: 'PictureAsPdfIcon', label: 'PDF' },
|
||||
{ value: 'EditIcon', label: 'Edit' },
|
||||
{ value: 'DeleteIcon', label: 'Delete' },
|
||||
{ value: 'FolderIcon', label: 'Folder' },
|
||||
{ value: 'CloudIcon', label: 'Cloud' },
|
||||
{ value: 'StorageIcon', label: 'Storage' },
|
||||
{ value: 'SearchIcon', label: 'Search' },
|
||||
{ value: 'DownloadIcon', label: 'Download' },
|
||||
{ value: 'UploadIcon', label: 'Upload' },
|
||||
{ value: 'PlayArrowIcon', label: 'Play' },
|
||||
{ value: 'RotateLeftIcon', label: 'Rotate Left' },
|
||||
{ value: 'RotateRightIcon', label: 'Rotate Right' },
|
||||
{ value: 'VisibilityIcon', label: 'View' },
|
||||
{ value: 'ContentCutIcon', label: 'Cut' },
|
||||
{ value: 'ContentCopyIcon', label: 'Copy' },
|
||||
{ value: 'WorkIcon', label: 'Work' },
|
||||
{ value: 'BuildIcon', label: 'Build' },
|
||||
{ value: 'AutoAwesomeIcon', label: 'Magic' },
|
||||
{ value: 'SmartToyIcon', label: 'Robot' },
|
||||
{ value: 'CheckIcon', label: 'Check' },
|
||||
{ value: 'SecurityIcon', label: 'Security' },
|
||||
{ value: 'StarIcon', label: 'Star' }
|
||||
];
|
||||
|
||||
export type IconKey = keyof typeof iconMap;
|
||||
95
frontend/src/core/components/tools/automate/iconMap.tsx
Normal file
95
frontend/src/core/components/tools/automate/iconMap.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
// Icon wrapper components
|
||||
const SettingsIcon = (props: any) => <LocalIcon icon="settings-rounded" width={24} height={24} {...props} />;
|
||||
const CompressIcon = (props: any) => <LocalIcon icon="compress-rounded" width={24} height={24} {...props} />;
|
||||
const SwapHorizIcon = (props: any) => <LocalIcon icon="swap-horiz-rounded" width={24} height={24} {...props} />;
|
||||
const CleaningServicesIcon = (props: any) => <LocalIcon icon="cleaning-services-rounded" width={24} height={24} {...props} />;
|
||||
const CropIcon = (props: any) => <LocalIcon icon="crop-rounded" width={24} height={24} {...props} />;
|
||||
const TextFieldsIcon = (props: any) => <LocalIcon icon="text-fields-rounded" width={24} height={24} {...props} />;
|
||||
const PictureAsPdfIcon = (props: any) => <LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} {...props} />;
|
||||
const EditIcon = (props: any) => <LocalIcon icon="edit-rounded" width={24} height={24} {...props} />;
|
||||
const DeleteIcon = (props: any) => <LocalIcon icon="delete-rounded" width={24} height={24} {...props} />;
|
||||
const FolderIcon = (props: any) => <LocalIcon icon="folder-rounded" width={24} height={24} {...props} />;
|
||||
const CloudIcon = (props: any) => <LocalIcon icon="cloud" width={24} height={24} {...props} />;
|
||||
const StorageIcon = (props: any) => <LocalIcon icon="storage-rounded" width={24} height={24} {...props} />;
|
||||
const SearchIcon = (props: any) => <LocalIcon icon="search-rounded" width={24} height={24} {...props} />;
|
||||
const DownloadIcon = (props: any) => <LocalIcon icon="download-rounded" width={24} height={24} {...props} />;
|
||||
const UploadIcon = (props: any) => <LocalIcon icon="upload-rounded" width={24} height={24} {...props} />;
|
||||
const PlayArrowIcon = (props: any) => <LocalIcon icon="play-arrow-rounded" width={24} height={24} {...props} />;
|
||||
const RotateLeftIcon = (props: any) => <LocalIcon icon="rotate-left-rounded" width={24} height={24} {...props} />;
|
||||
const RotateRightIcon = (props: any) => <LocalIcon icon="rotate-right-rounded" width={24} height={24} {...props} />;
|
||||
const VisibilityIcon = (props: any) => <LocalIcon icon="visibility-rounded" width={24} height={24} {...props} />;
|
||||
const ContentCutIcon = (props: any) => <LocalIcon icon="content-cut-rounded" width={24} height={24} {...props} />;
|
||||
const ContentCopyIcon = (props: any) => <LocalIcon icon="content-copy-rounded" width={24} height={24} {...props} />;
|
||||
const WorkIcon = (props: any) => <LocalIcon icon="work" width={24} height={24} {...props} />;
|
||||
const BuildIcon = (props: any) => <LocalIcon icon="build-rounded" width={24} height={24} {...props} />;
|
||||
const AutoAwesomeIcon = (props: any) => <LocalIcon icon="auto-awesome-rounded" width={24} height={24} {...props} />;
|
||||
const SmartToyIcon = (props: any) => <LocalIcon icon="smart-toy-rounded" width={24} height={24} {...props} />;
|
||||
const CheckIcon = (props: any) => <LocalIcon icon="check-rounded" width={24} height={24} {...props} />;
|
||||
const SecurityIcon = (props: any) => <LocalIcon icon="security-rounded" width={24} height={24} {...props} />;
|
||||
const StarIcon = (props: any) => <LocalIcon icon="star-rounded" width={24} height={24} {...props} />;
|
||||
|
||||
export const iconMap = {
|
||||
SettingsIcon,
|
||||
CompressIcon,
|
||||
SwapHorizIcon,
|
||||
CleaningServicesIcon,
|
||||
CropIcon,
|
||||
TextFieldsIcon,
|
||||
PictureAsPdfIcon,
|
||||
EditIcon,
|
||||
DeleteIcon,
|
||||
FolderIcon,
|
||||
CloudIcon,
|
||||
StorageIcon,
|
||||
SearchIcon,
|
||||
DownloadIcon,
|
||||
UploadIcon,
|
||||
PlayArrowIcon,
|
||||
RotateLeftIcon,
|
||||
RotateRightIcon,
|
||||
VisibilityIcon,
|
||||
ContentCutIcon,
|
||||
ContentCopyIcon,
|
||||
WorkIcon,
|
||||
BuildIcon,
|
||||
AutoAwesomeIcon,
|
||||
SmartToyIcon,
|
||||
CheckIcon,
|
||||
SecurityIcon,
|
||||
StarIcon
|
||||
};
|
||||
|
||||
export const iconOptions = [
|
||||
{ value: 'SettingsIcon', label: 'Settings' },
|
||||
{ value: 'CompressIcon', label: 'Compress' },
|
||||
{ value: 'SwapHorizIcon', label: 'Convert' },
|
||||
{ value: 'CleaningServicesIcon', label: 'Clean' },
|
||||
{ value: 'CropIcon', label: 'Crop' },
|
||||
{ value: 'TextFieldsIcon', label: 'Text' },
|
||||
{ value: 'PictureAsPdfIcon', label: 'PDF' },
|
||||
{ value: 'EditIcon', label: 'Edit' },
|
||||
{ value: 'DeleteIcon', label: 'Delete' },
|
||||
{ value: 'FolderIcon', label: 'Folder' },
|
||||
{ value: 'CloudIcon', label: 'Cloud' },
|
||||
{ value: 'StorageIcon', label: 'Storage' },
|
||||
{ value: 'SearchIcon', label: 'Search' },
|
||||
{ value: 'DownloadIcon', label: 'Download' },
|
||||
{ value: 'UploadIcon', label: 'Upload' },
|
||||
{ value: 'PlayArrowIcon', label: 'Play' },
|
||||
{ value: 'RotateLeftIcon', label: 'Rotate Left' },
|
||||
{ value: 'RotateRightIcon', label: 'Rotate Right' },
|
||||
{ value: 'VisibilityIcon', label: 'View' },
|
||||
{ value: 'ContentCutIcon', label: 'Cut' },
|
||||
{ value: 'ContentCopyIcon', label: 'Copy' },
|
||||
{ value: 'WorkIcon', label: 'Work' },
|
||||
{ value: 'BuildIcon', label: 'Build' },
|
||||
{ value: 'AutoAwesomeIcon', label: 'Magic' },
|
||||
{ value: 'SmartToyIcon', label: 'Robot' },
|
||||
{ value: 'CheckIcon', label: 'Check' },
|
||||
{ value: 'SecurityIcon', label: 'Security' },
|
||||
{ value: 'StarIcon', label: 'Star' }
|
||||
];
|
||||
|
||||
export type IconKey = keyof typeof iconMap;
|
||||
@ -1,6 +1,6 @@
|
||||
import { useMemo } from "react";
|
||||
import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
|
||||
import { isImageFormat, isWebFormat } from "@app/utils/convertUtils";
|
||||
@ -256,7 +256,7 @@ const ConvertSettings = ({
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">{t("convert.selectSourceFormatFirst", "Select a source format first")}</Text>
|
||||
<KeyboardArrowDownIcon
|
||||
<LocalIcon icon="keyboard-arrow-down-rounded"
|
||||
style={{
|
||||
fontSize: '1rem',
|
||||
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
|
||||
interface FormatOption {
|
||||
value: string;
|
||||
@ -93,7 +93,7 @@ const GroupedFormatDropdown = ({
|
||||
<Text size="sm" c={value ? undefined : 'dimmed'}>
|
||||
{selectedLabel}
|
||||
</Text>
|
||||
<KeyboardArrowDownIcon
|
||||
<LocalIcon icon="keyboard-arrow-down-rounded"
|
||||
style={{
|
||||
fontSize: '1rem',
|
||||
transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { Stack, Text, Box, Group, ActionIcon, Center, Alert } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import RestartAltIcon from "@mui/icons-material/RestartAlt";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { CropParametersHook } from "@app/hooks/tools/crop/useCropParameters";
|
||||
import { useSelectedFiles } from "@app/contexts/file/fileHooks";
|
||||
import CropAreaSelector from "@app/components/tools/crop/CropAreaSelector";
|
||||
@ -164,7 +164,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
|
||||
title={t("crop.reset", "Reset to full PDF")}
|
||||
aria-label={t("crop.reset", "Reset to full PDF")}
|
||||
>
|
||||
<RestartAltIcon style={{ fontSize: '1rem' }} />
|
||||
<LocalIcon icon="restart-alt-rounded" width="1rem" height="1rem" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import SortIcon from '@mui/icons-material/Sort';
|
||||
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
||||
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
interface MergeFileSorterProps {
|
||||
onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void;
|
||||
@ -55,14 +53,14 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
|
||||
disabled={disabled}
|
||||
title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')}
|
||||
>
|
||||
{ascending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
|
||||
{ascending ? <LocalIcon icon="arrow-upward-rounded" width={24} height={24} /> : <LocalIcon icon="arrow-downward-rounded" width={24} height={24} />}
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
size="xs"
|
||||
leftSection={<SortIcon />}
|
||||
leftSection={<LocalIcon icon="sort-rounded" width={24} height={24} />}
|
||||
onClick={handleSort}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
|
||||
@ -13,13 +13,7 @@ import {
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import WarningIcon from '@mui/icons-material/Warning';
|
||||
import ErrorIcon from '@mui/icons-material/Error';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import FontDownloadIcon from '@mui/icons-material/FontDownload';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
import { PdfJsonDocument } from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
|
||||
import {
|
||||
@ -42,15 +36,15 @@ const FontStatusBadge = ({ analysis }: { analysis: FontAnalysis }) => {
|
||||
const icon = useMemo(() => {
|
||||
switch (analysis.status) {
|
||||
case 'perfect':
|
||||
return <CheckCircleIcon sx={{ fontSize: 14 }} />;
|
||||
return <LocalIcon icon="check-circle-rounded" width={14} height={14} />;
|
||||
case 'embedded-subset':
|
||||
return <InfoIcon sx={{ fontSize: 14 }} />;
|
||||
return <LocalIcon icon="info-rounded" width={14} height={14} />;
|
||||
case 'system-fallback':
|
||||
return <WarningIcon sx={{ fontSize: 14 }} />;
|
||||
return <LocalIcon icon="warning-rounded" width={14} height={14} />;
|
||||
case 'missing':
|
||||
return <ErrorIcon sx={{ fontSize: 14 }} />;
|
||||
return <LocalIcon icon="error-rounded" width={14} height={14} />;
|
||||
default:
|
||||
return <InfoIcon sx={{ fontSize: 14 }} />;
|
||||
return <LocalIcon icon="info-rounded" width={14} height={14} />;
|
||||
}
|
||||
}, [analysis.status]);
|
||||
|
||||
@ -78,7 +72,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
|
||||
<Stack gap={4}>
|
||||
<Group justify="space-between">
|
||||
<Group gap={4}>
|
||||
<FontDownloadIcon sx={{ fontSize: 16 }} />
|
||||
<LocalIcon icon="font-download-rounded" width={16} height={16} />
|
||||
<Text size="xs" fw={500} lineClamp={1}>
|
||||
{analysis.baseName}
|
||||
</Text>
|
||||
@ -90,7 +84,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
|
||||
</Group>
|
||||
<Group gap={4}>
|
||||
<FontStatusBadge analysis={analysis} />
|
||||
{expanded ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
|
||||
{expanded ? <LocalIcon icon="expand-less-rounded" width={16} height={16} /> : <LocalIcon icon="expand-more-rounded" width={16} height={16} />}
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
@ -177,12 +171,12 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
|
||||
|
||||
const statusIcon = useMemo(() => {
|
||||
if (canReproducePerfectly) {
|
||||
return <CheckCircleIcon sx={{ fontSize: 16 }} />;
|
||||
return <LocalIcon icon="check-circle-rounded" width={16} height={16} />;
|
||||
}
|
||||
if (hasWarnings) {
|
||||
return <WarningIcon sx={{ fontSize: 16 }} />;
|
||||
return <LocalIcon icon="warning-rounded" width={16} height={16} />;
|
||||
}
|
||||
return <InfoIcon sx={{ fontSize: 16 }} />;
|
||||
return <LocalIcon icon="info-rounded" width={16} height={16} />;
|
||||
}, [canReproducePerfectly, hasWarnings]);
|
||||
|
||||
// Early return AFTER all hooks are declared
|
||||
@ -214,12 +208,12 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
|
||||
{/* Warning badges BEFORE expansion */}
|
||||
<Group gap={4} wrap="wrap">
|
||||
{summary.systemFallback > 0 && (
|
||||
<Badge size="xs" color="yellow" variant="filled" leftSection={<WarningIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="yellow" variant="filled" leftSection={<LocalIcon icon="warning-rounded" width={12} height={12} />}>
|
||||
{summary.systemFallback} {t('pdfTextEditor.fontAnalysis.fallback', 'fallback')}
|
||||
</Badge>
|
||||
)}
|
||||
{summary.missing > 0 && (
|
||||
<Badge size="xs" color="red" variant="filled" leftSection={<ErrorIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="red" variant="filled" leftSection={<LocalIcon icon="error-rounded" width={12} height={12} />}>
|
||||
{summary.missing} {t('pdfTextEditor.fontAnalysis.missing', 'missing')}
|
||||
</Badge>
|
||||
)}
|
||||
@ -249,22 +243,22 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
|
||||
{/* Summary Statistics */}
|
||||
<Group gap={4} wrap="wrap">
|
||||
{summary.perfect > 0 && (
|
||||
<Badge size="xs" color="green" variant="light" leftSection={<CheckCircleIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="green" variant="light" leftSection={<LocalIcon icon="check-circle-rounded" width={12} height={12} />}>
|
||||
{summary.perfect} {t('pdfTextEditor.fontAnalysis.perfect', 'perfect')}
|
||||
</Badge>
|
||||
)}
|
||||
{summary.embeddedSubset > 0 && (
|
||||
<Badge size="xs" color="blue" variant="light" leftSection={<InfoIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="blue" variant="light" leftSection={<LocalIcon icon="info-rounded" width={12} height={12} />}>
|
||||
{summary.embeddedSubset} {t('pdfTextEditor.fontAnalysis.subset', 'subset')}
|
||||
</Badge>
|
||||
)}
|
||||
{summary.systemFallback > 0 && (
|
||||
<Badge size="xs" color="yellow" variant="light" leftSection={<WarningIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="yellow" variant="light" leftSection={<LocalIcon icon="warning-rounded" width={12} height={12} />}>
|
||||
{summary.systemFallback} {t('pdfTextEditor.fontAnalysis.fallback', 'fallback')}
|
||||
</Badge>
|
||||
)}
|
||||
{summary.missing > 0 && (
|
||||
<Badge size="xs" color="red" variant="light" leftSection={<ErrorIcon sx={{ fontSize: 12 }} />}>
|
||||
<Badge size="xs" color="red" variant="light" leftSection={<LocalIcon icon="error-rounded" width={12} height={12} />}>
|
||||
{summary.missing} {t('pdfTextEditor.fontAnalysis.missing', 'missing')}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
@ -23,18 +23,7 @@ import {
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
|
||||
import FileDownloadIcon from '@mui/icons-material/FileDownloadOutlined';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdfOutlined';
|
||||
import AutorenewIcon from '@mui/icons-material/Autorenew';
|
||||
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
|
||||
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import MergeTypeIcon from '@mui/icons-material/MergeType';
|
||||
import CallSplitIcon from '@mui/icons-material/CallSplit';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFileOutlined';
|
||||
import SaveIcon from '@mui/icons-material/SaveOutlined';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Rnd } from 'react-rnd';
|
||||
import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
|
||||
|
||||
@ -1412,7 +1401,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<CloseIcon style={{ fontSize: 12 }} />
|
||||
<LocalIcon icon="close-rounded" width={12} height={12} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Box>
|
||||
@ -1473,7 +1462,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
<Stack gap="sm" pb="md">
|
||||
<Group justify="space-between" align="center">
|
||||
<Group gap="xs" align="center">
|
||||
<DescriptionIcon fontSize="small" />
|
||||
<LocalIcon icon="description-rounded" width={20} height={20} />
|
||||
<Title order={3}>{t('pdfTextEditor.title', 'PDF JSON Editor')}</Title>
|
||||
{hasChanges && <Badge color="orange" variant="light" size="sm">{t('pdfTextEditor.badges.unsaved', 'Edited')}</Badge>}
|
||||
</Group>
|
||||
@ -1482,7 +1471,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
<Stack gap="xs">
|
||||
<Button
|
||||
variant="subtle"
|
||||
leftSection={<AutorenewIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="autorenew-rounded" width={20} height={20} />}
|
||||
onClick={onReset}
|
||||
disabled={!hasDocument || isConverting}
|
||||
fullWidth
|
||||
@ -1491,7 +1480,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<FileDownloadIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="download-rounded" width={20} height={20} />}
|
||||
onClick={onDownloadJson}
|
||||
disabled={!hasDocument || isConverting}
|
||||
fullWidth
|
||||
@ -1499,7 +1488,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
{t('pdfTextEditor.actions.downloadJson', 'Download JSON')}
|
||||
</Button>
|
||||
<Button
|
||||
leftSection={<PictureAsPdfIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />}
|
||||
onClick={onGeneratePdf}
|
||||
loading={isGeneratingPdf}
|
||||
disabled={!hasDocument || !hasChanges || isConverting}
|
||||
@ -1510,7 +1499,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
<Button
|
||||
variant="filled"
|
||||
color="green"
|
||||
leftSection={<SaveIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="save-rounded" width={20} height={20} />}
|
||||
onClick={onSaveToWorkbench}
|
||||
loading={isSavingToWorkbench}
|
||||
disabled={!hasDocument || !hasChanges || isConverting}
|
||||
@ -1623,7 +1612,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
<Accordion.Item value="disclaimer">
|
||||
<Accordion.Control>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<InfoOutlinedIcon fontSize="small" />
|
||||
<LocalIcon icon="info-rounded" width={20} height={20} />
|
||||
<Text size="sm" fw={500}>
|
||||
{t('pdfTextEditor.disclaimer.heading', 'Preview Limitations')}
|
||||
</Text>
|
||||
@ -1661,7 +1650,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
icon={<WarningAmberIcon fontSize="small" />}
|
||||
icon={<LocalIcon icon="warning-rounded" width={20} height={20} />}
|
||||
color="red"
|
||||
radius="md"
|
||||
style={{ gridColumn: '2 / 3' }}
|
||||
@ -1698,7 +1687,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
}}
|
||||
>
|
||||
<Stack align="center" gap="md" style={{ pointerEvents: 'none' }}>
|
||||
<UploadFileIcon sx={{ fontSize: 48, color: 'var(--mantine-color-blue-5)' }} />
|
||||
<LocalIcon icon="upload-file-rounded" width={48} height={48} style={{ color: 'var(--mantine-color-blue-5)' }} />
|
||||
<Text size="lg" fw={600}>
|
||||
{t('pdfTextEditor.empty.title', 'No document loaded')}
|
||||
</Text>
|
||||
@ -1736,7 +1725,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
</Group>
|
||||
)}
|
||||
</div>
|
||||
<AutorenewIcon sx={{ fontSize: 36 }} className="animate-spin" />
|
||||
<LocalIcon icon="autorenew-rounded" width={36} height={36} className="animate-spin" />
|
||||
</Group>
|
||||
<Progress value={conversionProgress?.percent || 0} size="lg" radius="md" />
|
||||
</Stack>
|
||||
@ -1787,7 +1776,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
onClose={handleDismissWelcomeBanner}
|
||||
title={
|
||||
<Group gap="xs">
|
||||
<InfoOutlinedIcon fontSize="small" />
|
||||
<LocalIcon icon="info-rounded" width={20} height={20} />
|
||||
<Text fw={600}>{t('pdfTextEditor.welcomeBanner.title', 'Welcome to PDF Text Editor (Early Access)')}</Text>
|
||||
</Group>
|
||||
}
|
||||
@ -1952,7 +1941,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
aria-label={t('pdfTextEditor.manual.merge', 'Merge selection')}
|
||||
onClick={handleMergeSelection}
|
||||
>
|
||||
<MergeTypeIcon fontSize="small" />
|
||||
<LocalIcon icon="merge-type-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -1965,7 +1954,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
aria-label={t('pdfTextEditor.manual.ungroup', 'Ungroup selection')}
|
||||
onClick={handleUngroupSelection}
|
||||
>
|
||||
<CallSplitIcon fontSize="small" />
|
||||
<LocalIcon icon="call-split-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -1979,7 +1968,7 @@ const selectionToolbarPosition = useMemo(() => {
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<MoreVertIcon fontSize="small" />
|
||||
<LocalIcon icon="more-vert" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { Stack, Text, Box, ActionIcon, Group, Center } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
|
||||
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { RotateParametersHook } from "@app/hooks/tools/rotate/useRotateParameters";
|
||||
import { useSelectedFiles } from "@app/contexts/file/fileHooks";
|
||||
import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
|
||||
@ -83,7 +82,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
|
||||
aria-label={t("rotate.rotateLeft", "Rotate Anticlockwise")}
|
||||
title={t("rotate.rotateLeft", "Rotate Anticlockwise")}
|
||||
>
|
||||
<RotateLeftIcon style={{ fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="rotate-left-rounded" width="1.5rem" height="1.5rem" />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon
|
||||
@ -94,7 +93,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
|
||||
aria-label={t("rotate.rotateRight", "Rotate Clockwise")}
|
||||
title={t("rotate.rotateRight", "Rotate Clockwise")}
|
||||
>
|
||||
<RotateRightIcon style={{ fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Text, Anchor } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useFilesModalContext } from "@app/contexts/FilesModalContext";
|
||||
import { useAllFiles } from "@app/contexts/FileContext";
|
||||
import { useFileManager } from "@app/hooks/useFileManager";
|
||||
@ -76,7 +75,7 @@ const FileStatusIndicator = ({
|
||||
onClick={handleNativeUpload}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<UploadIcon style={{ fontSize: '0.875rem' }} />
|
||||
<LocalIcon icon="upload-rounded" width="0.875rem" height="0.875rem" />
|
||||
{t("files.upload", "Upload")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
@ -90,7 +89,7 @@ const FileStatusIndicator = ({
|
||||
onClick={() => openFilesModal({})}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '0.875rem' }} />
|
||||
<LocalIcon icon="folder-rounded" width="0.875rem" height="0.875rem" />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
@ -110,7 +109,7 @@ const FileStatusIndicator = ({
|
||||
onClick={handleNativeUpload}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<UploadIcon style={{ fontSize: '0.875rem' }} />
|
||||
<LocalIcon icon="upload-rounded" width="0.875rem" height="0.875rem" />
|
||||
{t("files.uploadFiles", "Upload Files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
@ -125,7 +124,7 @@ const FileStatusIndicator = ({
|
||||
onClick={() => openFilesModal({})}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '0.875rem' }} />
|
||||
<LocalIcon icon="folder-rounded" width="0.875rem" height="0.875rem" />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Stack, Group, ActionIcon, Text } from '@mantine/core';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export interface NavigationControlsProps {
|
||||
currentIndex: number;
|
||||
@ -27,7 +26,7 @@ const NavigationControls = ({
|
||||
disabled={totalFiles <= 1}
|
||||
data-testid="review-panel-prev"
|
||||
>
|
||||
<ChevronLeftIcon style={{ fontSize: '1rem' }} />
|
||||
<LocalIcon icon="chevron-left-rounded" width="1rem" height="1rem" />
|
||||
</ActionIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
{currentIndex + 1} of {totalFiles}
|
||||
@ -40,7 +39,7 @@ const NavigationControls = ({
|
||||
disabled={totalFiles <= 1}
|
||||
data-testid="review-panel-next"
|
||||
>
|
||||
<ChevronRightIcon style={{ fontSize: '1rem' }} />
|
||||
<LocalIcon icon="chevron-right-rounded" width="1rem" height="1rem" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Button, Stack } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import UndoIcon from "@mui/icons-material/Undo";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import ErrorNotification from "@app/components/tools/shared/ErrorNotification";
|
||||
import ResultsPreview from "@app/components/tools/shared/ResultsPreview";
|
||||
import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
|
||||
@ -80,7 +80,7 @@ function ReviewStepContent<TParams = unknown>({
|
||||
{onUndo && (
|
||||
<Tooltip content={t("undoOperationTooltip", "Click to undo the last operation and restore the original files")}>
|
||||
<Button
|
||||
leftSection={<UndoIcon />}
|
||||
leftSection={<LocalIcon icon="undo-rounded" width={24} height={24} />}
|
||||
variant="outline"
|
||||
color="var(--mantine-color-gray-6)"
|
||||
onClick={handleUndo}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ActionIcon, Box, Button, Group, Stack, Text, ScrollArea, TextInput } from "@mantine/core";
|
||||
import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
|
||||
import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
|
||||
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
|
||||
import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import "@app/components/tools/showJS/ShowJSView.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
|
||||
@ -153,7 +150,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
|
||||
}}
|
||||
aria-label={t("common.previous", "Previous")}
|
||||
>
|
||||
<ArrowUpwardRoundedIcon fontSize="small" />
|
||||
<LocalIcon icon="arrow-upward-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
@ -163,7 +160,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
|
||||
}}
|
||||
aria-label={t("common.next", "Next")}
|
||||
>
|
||||
<ArrowDownwardRoundedIcon fontSize="small" />
|
||||
<LocalIcon icon="arrow-downward-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
<Group gap="xs" align="center" className="showjs-toolbar-controls">
|
||||
@ -173,7 +170,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
|
||||
className="showjs-outline-button"
|
||||
onClick={handleDownload}
|
||||
disabled={!downloadUrl}
|
||||
leftSection={<DownloadRoundedIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="download-rounded" width={20} height={20} />}
|
||||
>
|
||||
{terminology.download}
|
||||
</Button>
|
||||
@ -182,7 +179,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
|
||||
variant="subtle"
|
||||
className="showjs-outline-button"
|
||||
onClick={handleCopy}
|
||||
leftSection={<ContentCopyRoundedIcon fontSize="small" />}
|
||||
leftSection={<LocalIcon icon="content-copy-rounded" width={20} height={20} />}
|
||||
>
|
||||
{copied ? t("common.copied", "Copied!") : t("common.copy", "Copy")}
|
||||
</Button>
|
||||
|
||||
@ -2,8 +2,7 @@ import React from "react";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import type { MantineSize } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import StarRoundedIcon from '@mui/icons-material/StarRounded';
|
||||
import StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
|
||||
interface FavoriteStarProps {
|
||||
isFavorite: boolean;
|
||||
@ -35,9 +34,9 @@ const FavoriteStar: React.FC<FavoriteStarProps> = ({ isFavorite, onToggle, class
|
||||
aria-label={isFavorite ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
|
||||
>
|
||||
{isFavorite ? (
|
||||
<StarRoundedIcon fontSize="inherit" style={{ color: 'var(--special-color-favorites)', fontSize: '1rem' }} />
|
||||
<LocalIcon icon="star-rounded" width={16} height={16} style={{ color: 'var(--special-color-favorites)' }} />
|
||||
) : (
|
||||
<StarBorderRoundedIcon fontSize="inherit" style={{ fontSize: '1rem' }} />
|
||||
<LocalIcon icon="star-outline-rounded" width={16} height={16} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import '@app/components/tools/validateSignature/reportView/styles.css';
|
||||
|
||||
const ThumbnailPreview = ({
|
||||
@ -22,7 +22,7 @@ const ThumbnailPreview = ({
|
||||
|
||||
return (
|
||||
<div className="thumbnail-placeholder">
|
||||
<PictureAsPdfIcon fontSize="large" />
|
||||
<LocalIcon icon="picture-as-pdf-rounded" width={32} height={32} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,7 +3,6 @@ import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput, Button } f
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useViewer } from '@app/contexts/ViewerContext';
|
||||
import { PdfBookmarkObject, PdfActionType } from '@embedpdf/models';
|
||||
import BookmarksIcon from '@mui/icons-material/BookmarksRounded';
|
||||
import '@app/components/viewer/BookmarkSidebar.css';
|
||||
|
||||
interface BookmarkSidebarProps {
|
||||
@ -442,7 +441,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
|
||||
<div className="bookmark-sidebar__header">
|
||||
<div className="bookmark-sidebar__header-title">
|
||||
<span className="bookmark-sidebar__header-icon">
|
||||
<BookmarksIcon />
|
||||
<LocalIcon icon="bookmarks-rounded" width={24} height={24} />
|
||||
</span>
|
||||
<Text fw={600} size="sm" tt="uppercase" lts={0.5}>
|
||||
Bookmarks
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Box, Center, Text, ActionIcon } from '@mantine/core';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
import { useFileState, useFileActions } from "@app/contexts/FileContext";
|
||||
import { useFileWithUrl } from "@app/hooks/useFileWithUrl";
|
||||
@ -311,7 +311,7 @@ const EmbedPdfViewerContent = ({
|
||||
style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 1000, borderRadius: '50%' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<CloseIcon />
|
||||
<LocalIcon icon="close-rounded" width={24} height={24} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
|
||||
|
||||
@ -3,12 +3,7 @@ import { Button, Paper, Group, NumberInput } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useViewer } from '@app/contexts/ViewerContext';
|
||||
import { Tooltip } from '@app/components/shared/Tooltip';
|
||||
import FirstPageIcon from '@mui/icons-material/FirstPage';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
import LastPageIcon from '@mui/icons-material/LastPage';
|
||||
import DescriptionIcon from '@mui/icons-material/Description';
|
||||
import ViewWeekIcon from '@mui/icons-material/ViewWeek';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
interface PdfViewerToolbarProps {
|
||||
// Page navigation props (placeholders for now)
|
||||
@ -139,7 +134,7 @@ export function PdfViewerToolbar({
|
||||
style={{ minWidth: '2.5rem' }}
|
||||
title={t("viewer.firstPage", "First Page")}
|
||||
>
|
||||
<FirstPageIcon fontSize="small" />
|
||||
<LocalIcon icon="first-page-rounded" width={20} height={20} />
|
||||
</Button>
|
||||
|
||||
{/* Previous Page Button */}
|
||||
@ -154,7 +149,7 @@ export function PdfViewerToolbar({
|
||||
style={{ minWidth: '2.5rem' }}
|
||||
title={t("viewer.previousPage", "Previous Page")}
|
||||
>
|
||||
<ArrowBackIosIcon fontSize="small" />
|
||||
<LocalIcon icon="arrow-back-ios-rounded" width={20} height={20} />
|
||||
</Button>
|
||||
|
||||
{/* Page Input */}
|
||||
@ -191,7 +186,7 @@ export function PdfViewerToolbar({
|
||||
style={{ minWidth: '2.5rem' }}
|
||||
title={t("viewer.nextPage", "Next Page")}
|
||||
>
|
||||
<ArrowForwardIosIcon fontSize="small" />
|
||||
<LocalIcon icon="arrow-forward-ios-rounded" width={20} height={20} />
|
||||
</Button>
|
||||
|
||||
{/* Last Page Button */}
|
||||
@ -206,7 +201,7 @@ export function PdfViewerToolbar({
|
||||
style={{ minWidth: '2.5rem' }}
|
||||
title={t("viewer.lastPage", "Last Page")}
|
||||
>
|
||||
<LastPageIcon fontSize="small" />
|
||||
<LocalIcon icon="last-page-rounded" width={20} height={20} />
|
||||
</Button>
|
||||
|
||||
{/* Dual Page Toggle */}
|
||||
@ -228,7 +223,7 @@ export function PdfViewerToolbar({
|
||||
disabled={scrollState.totalPages <= 1}
|
||||
style={{ minWidth: '2.5rem' }}
|
||||
>
|
||||
{isDualPageActive ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
|
||||
{isDualPageActive ? <LocalIcon icon="description-rounded" width={20} height={20} /> : <LocalIcon icon="view-week" width={20} height={20} />}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@ -4,18 +4,8 @@ import { ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
|
||||
import { BaseToolProps } from '@app/types/tool';
|
||||
import { WorkbenchType } from '@app/types/workbench';
|
||||
import { LinkToolId, RegularToolId, SuperToolId, ToolId, ToolKind } from '@app/types/toolId';
|
||||
import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
|
||||
import SecurityRoundedIcon from '@mui/icons-material/SecurityRounded';
|
||||
import VerifiedUserRoundedIcon from '@mui/icons-material/VerifiedUserRounded';
|
||||
import RateReviewRoundedIcon from '@mui/icons-material/RateReviewRounded';
|
||||
import ViewAgendaRoundedIcon from '@mui/icons-material/ViewAgendaRounded';
|
||||
import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
|
||||
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
|
||||
import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded';
|
||||
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
|
||||
import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
|
||||
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
|
||||
import { ProprietaryToolId } from '@app/types/proprietaryToolId';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
export enum SubcategoryId {
|
||||
SIGNING = 'signing',
|
||||
@ -100,32 +90,22 @@ export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
|
||||
};
|
||||
|
||||
export const getSubcategoryIcon = (subcategory: SubcategoryId): React.ReactNode => {
|
||||
switch (subcategory) {
|
||||
case SubcategoryId.SIGNING:
|
||||
return React.createElement(DrawRoundedIcon);
|
||||
case SubcategoryId.DOCUMENT_SECURITY:
|
||||
return React.createElement(SecurityRoundedIcon);
|
||||
case SubcategoryId.VERIFICATION:
|
||||
return React.createElement(VerifiedUserRoundedIcon);
|
||||
case SubcategoryId.DOCUMENT_REVIEW:
|
||||
return React.createElement(RateReviewRoundedIcon);
|
||||
case SubcategoryId.PAGE_FORMATTING:
|
||||
return React.createElement(ViewAgendaRoundedIcon);
|
||||
case SubcategoryId.EXTRACTION:
|
||||
return React.createElement(FileDownloadRoundedIcon);
|
||||
case SubcategoryId.REMOVAL:
|
||||
return React.createElement(DeleteSweepRoundedIcon);
|
||||
case SubcategoryId.AUTOMATION:
|
||||
return React.createElement(SmartToyRoundedIcon);
|
||||
case SubcategoryId.GENERAL:
|
||||
return React.createElement(BuildRoundedIcon);
|
||||
case SubcategoryId.ADVANCED_FORMATTING:
|
||||
return React.createElement(TuneRoundedIcon);
|
||||
case SubcategoryId.DEVELOPER_TOOLS:
|
||||
return React.createElement(CodeRoundedIcon);
|
||||
default:
|
||||
return React.createElement(BuildRoundedIcon);
|
||||
}
|
||||
const iconMap: Record<SubcategoryId, string> = {
|
||||
[SubcategoryId.SIGNING]: 'draw-rounded',
|
||||
[SubcategoryId.DOCUMENT_SECURITY]: 'security-rounded',
|
||||
[SubcategoryId.VERIFICATION]: 'verified-user-rounded',
|
||||
[SubcategoryId.DOCUMENT_REVIEW]: 'rate-review-rounded',
|
||||
[SubcategoryId.PAGE_FORMATTING]: 'view-agenda-rounded',
|
||||
[SubcategoryId.EXTRACTION]: 'file-download-rounded',
|
||||
[SubcategoryId.REMOVAL]: 'delete-sweep-rounded',
|
||||
[SubcategoryId.AUTOMATION]: 'smart-toy-rounded',
|
||||
[SubcategoryId.GENERAL]: 'build-rounded',
|
||||
[SubcategoryId.ADVANCED_FORMATTING]: 'tune-rounded',
|
||||
[SubcategoryId.DEVELOPER_TOOLS]: 'code-rounded',
|
||||
};
|
||||
|
||||
const iconName = iconMap[subcategory] || 'build-rounded';
|
||||
return React.createElement(LocalIcon, { icon: iconName, width: 24, height: 24 });
|
||||
};
|
||||
|
||||
export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
||||
|
||||
/**
|
||||
* File action icons for web builds
|
||||
* Desktop builds override this with different icons
|
||||
*/
|
||||
export function useFileActionIcons() {
|
||||
return {
|
||||
upload: UploadIcon,
|
||||
download: DownloadOutlinedIcon,
|
||||
uploadIconName: 'upload' as const,
|
||||
downloadIconName: 'download' as const,
|
||||
};
|
||||
}
|
||||
18
frontend/src/core/hooks/useFileActionIcons.tsx
Normal file
18
frontend/src/core/hooks/useFileActionIcons.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
/**
|
||||
* File action icons for web builds
|
||||
* Desktop builds override this with different icons
|
||||
*/
|
||||
export function useFileActionIcons() {
|
||||
// Create wrapper components for LocalIcon that match the MUI icon interface
|
||||
const UploadIcon = (props: any) => <LocalIcon icon="upload-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
|
||||
const DownloadIcon = (props: any) => <LocalIcon icon="download-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
|
||||
|
||||
return {
|
||||
upload: UploadIcon,
|
||||
download: DownloadIcon,
|
||||
uploadIconName: 'upload-rounded' as const,
|
||||
downloadIconName: 'download-rounded' as const,
|
||||
};
|
||||
}
|
||||
@ -3,13 +3,14 @@ import { useNavigationState } from '@app/contexts/NavigationContext';
|
||||
import { useToolNavigation } from '@app/hooks/useToolNavigation';
|
||||
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
||||
import { ToolId } from '@app/types/toolId';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
// Material UI Icons
|
||||
import CompressIcon from '@mui/icons-material/Compress';
|
||||
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
|
||||
import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
|
||||
import CropIcon from '@mui/icons-material/Crop';
|
||||
import TextFieldsIcon from '@mui/icons-material/TextFields';
|
||||
// Icon wrapper components
|
||||
const CompressIcon = (props: any) => <LocalIcon icon="compress-rounded" width={24} height={24} {...props} />;
|
||||
const SwapHorizIcon = (props: any) => <LocalIcon icon="swap-horiz-rounded" width={24} height={24} {...props} />;
|
||||
const CleaningServicesIcon = (props: any) => <LocalIcon icon="cleaning-services-rounded" width={24} height={24} {...props} />;
|
||||
const CropIcon = (props: any) => <LocalIcon icon="crop-rounded" width={24} height={24} {...props} />;
|
||||
const TextFieldsIcon = (props: any) => <LocalIcon icon="text-fields-rounded" width={24} height={24} {...props} />;
|
||||
|
||||
export interface SuggestedTool {
|
||||
id: ToolId;
|
||||
@ -12,8 +12,6 @@ import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import { useFileContext } from "@app/contexts/file/fileHooks";
|
||||
import { useNavigationActions } from "@app/contexts/NavigationContext";
|
||||
import { useViewer } from "@app/contexts/ViewerContext";
|
||||
import AppsIcon from '@mui/icons-material/AppsRounded';
|
||||
|
||||
import ToolPanel from "@app/components/tools/ToolPanel";
|
||||
import Workbench from "@app/components/layout/Workbench";
|
||||
import QuickAccessBar from "@app/components/shared/QuickAccessBar";
|
||||
@ -235,7 +233,7 @@ export default function HomePage() {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AppsIcon sx={{ fontSize: '1.5rem' }} />
|
||||
<LocalIcon icon="apps" width="1.5rem" height="1.5rem" />
|
||||
<span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'Tools')}</span>
|
||||
</button>
|
||||
<button
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CompareRoundedIcon from '@mui/icons-material/CompareRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Box, Group, Stack, Text, Button, Modal, ActionIcon } from '@mantine/core';
|
||||
import SwapVertRoundedIcon from '@mui/icons-material/SwapVertRounded';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
|
||||
import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
|
||||
import { BaseToolProps, ToolComponent } from '@app/types/tool';
|
||||
@ -54,7 +52,7 @@ const Compare = (props: BaseToolProps) => {
|
||||
const operation = base.operation as CompareOperationHook;
|
||||
const params = base.params.parameters;
|
||||
|
||||
const compareIcon = useMemo(() => <CompareRoundedIcon fontSize="small" />, []);
|
||||
const compareIcon = useMemo(() => <LocalIcon icon="compare-rounded" width={20} height={20} />, []);
|
||||
const [swapConfirmOpen, setSwapConfirmOpen] = useState(false);
|
||||
const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
|
||||
const performClearSelected = useCallback(() => {
|
||||
@ -366,7 +364,7 @@ const Compare = (props: BaseToolProps) => {
|
||||
}}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<AddIcon fontSize="small" />
|
||||
<LocalIcon icon="add-rounded" width={20} height={20} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Box>
|
||||
@ -516,7 +514,7 @@ const Compare = (props: BaseToolProps) => {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<SwapVertRoundedIcon fontSize="medium" />
|
||||
<LocalIcon icon="swap-vert-rounded" width={24} height={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { alert } from '@app/components/toast';
|
||||
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
|
||||
import EditTableOfContentsWorkbenchView, { EditTableOfContentsWorkbenchViewData } from '@app/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView';
|
||||
@ -59,7 +59,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
|
||||
|
||||
const WORKBENCH_VIEW_ID = 'editTableOfContentsWorkbench';
|
||||
const WORKBENCH_ID = 'custom:editTableOfContents' as const;
|
||||
const viewIcon = useMemo(() => <MenuBookRoundedIcon fontSize="small" />, []);
|
||||
const viewIcon = useMemo(() => <LocalIcon icon="menu-book-rounded" width={20} height={20} />, []);
|
||||
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [isLoadingBookmarks, setIsLoadingBookmarks] = useState(false);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import LinkIcon from '@mui/icons-material/Link';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { Stack, Group, Divider, Text, UnstyledButton } from '@mantine/core';
|
||||
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
|
||||
import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
|
||||
@ -41,7 +40,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
|
||||
|
||||
const REPORT_VIEW_ID = 'getPdfInfoReport';
|
||||
const REPORT_WORKBENCH_ID = 'custom:getPdfInfoReport' as const;
|
||||
const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
|
||||
const reportIcon = useMemo(() => <LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />, []);
|
||||
|
||||
const base = useBaseTool(
|
||||
'getPdfInfo',
|
||||
@ -134,7 +133,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
|
||||
style={{ width: '100%', textAlign: 'left', padding: '8px 4px' }}
|
||||
>
|
||||
<Group justify="flex-start" gap="sm">
|
||||
<LinkIcon fontSize="small" style={{ opacity: 0.7 }} />
|
||||
<LocalIcon icon="link-rounded" width={20} height={20} style={{ opacity: 0.7 }} />
|
||||
<Text size="md" c="dimmed">
|
||||
{t(c.labelKey, c.fallback)}
|
||||
</Text>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
|
||||
import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
|
||||
import type { BaseToolProps, ToolComponent } from '@app/types/tool';
|
||||
@ -25,7 +25,7 @@ const ShowJS = (props: BaseToolProps) => {
|
||||
|
||||
const VIEW_ID = 'showJSView';
|
||||
const WORKBENCH_ID = 'custom:showJS' as const;
|
||||
const viewIcon = useMemo(() => <CodeRoundedIcon fontSize="small" />, []);
|
||||
const viewIcon = useMemo(() => <LocalIcon icon="code-rounded" width={20} height={20} />, []);
|
||||
|
||||
const base = useBaseTool('showJS', useShowJSParameters, useShowJSOperation, props, { minFiles: 1 });
|
||||
const operation = base.operation as ShowJSOperationHook;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
|
||||
import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
|
||||
import { BaseToolProps, ToolComponent } from '@app/types/tool';
|
||||
@ -26,7 +26,7 @@ const ValidateSignature = (props: BaseToolProps) => {
|
||||
|
||||
const REPORT_VIEW_ID = 'validateSignatureReport';
|
||||
const REPORT_WORKBENCH_ID = 'custom:validateSignatureReport' as const;
|
||||
const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
|
||||
const reportIcon = useMemo(() => <LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />, []);
|
||||
|
||||
const base = useBaseTool(
|
||||
'validateSignature',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
||||
import { useFileSelection, useFileManagement, useFileContext } from '@app/contexts/FileContext';
|
||||
@ -1680,7 +1680,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
|
||||
id: WORKBENCH_VIEW_ID,
|
||||
workbenchId: WORKBENCH_ID,
|
||||
label: viewLabel,
|
||||
icon: <DescriptionIcon fontSize="small" />,
|
||||
icon: <LocalIcon icon="description-rounded" width={20} height={20} />,
|
||||
component: PdfTextEditorView,
|
||||
});
|
||||
setLeftPanelView('hidden');
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
|
||||
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
||||
|
||||
/**
|
||||
* File action icons for desktop builds
|
||||
* Overrides core implementation with desktop-appropriate icons
|
||||
*/
|
||||
export function useFileActionIcons() {
|
||||
return {
|
||||
upload: FolderOpenOutlinedIcon,
|
||||
download: SaveOutlinedIcon,
|
||||
uploadIconName: 'folder-rounded' as const,
|
||||
downloadIconName: 'save-rounded' as const,
|
||||
};
|
||||
}
|
||||
18
frontend/src/desktop/hooks/useFileActionIcons.tsx
Normal file
18
frontend/src/desktop/hooks/useFileActionIcons.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
|
||||
/**
|
||||
* File action icons for desktop builds
|
||||
* Overrides core implementation with desktop-appropriate icons
|
||||
*/
|
||||
export function useFileActionIcons() {
|
||||
// Create wrapper components for LocalIcon that match the MUI icon interface
|
||||
const FolderOpenIcon = (props: any) => <LocalIcon icon="folder-open-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
|
||||
const SaveIcon = (props: any) => <LocalIcon icon="save-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
|
||||
|
||||
return {
|
||||
upload: FolderOpenIcon,
|
||||
download: SaveIcon,
|
||||
uploadIconName: 'folder-open-rounded' as const,
|
||||
downloadIconName: 'save-rounded' as const,
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TextInput, Button, Stack, Paper, Text, Loader, Group, Alert } from '@mantine/core';
|
||||
import WarningIcon from '@mui/icons-material/Warning';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { alert } from '@app/components/toast';
|
||||
import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
|
||||
import { useRestartServer } from '@app/components/shared/config/useRestartServer';
|
||||
@ -79,7 +79,7 @@ export default function AdminLegalSection() {
|
||||
|
||||
{/* Legal Disclaimer */}
|
||||
<Alert
|
||||
icon={<WarningIcon style={{ fontSize: 18 }} />}
|
||||
icon={<LocalIcon icon="warning-rounded" width={18} height={18} />}
|
||||
title={t('admin.settings.legal.disclaimer.title', 'Legal Responsibility Warning')}
|
||||
color="yellow"
|
||||
variant="light"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user