From 74527eaa8fb944d8f516f49992a5ccf90da9bd4b Mon Sep 17 00:00:00 2001 From: somebody1234 Date: Fri, 23 Jun 2023 18:47:04 +1000 Subject: [PATCH] Extract SVGs to files (#7076) * Extract SVGs to individual files Probably not working for cloud frontend (`watch-dashboard`, `build-dashboard`) yet Dynamic SVGs were not extracted out * Make file SVGs work for `watch-dashboard` and `build-dashboard` * Document SVG loaders * Address QA issues --- app/ide-desktop/eslint.config.js | 2 +- app/ide-desktop/lib/assets/arrow_right.svg | 4 + .../lib/assets/arrow_right_small.svg | 3 + app/ide-desktop/lib/assets/arrow_up.svg | 6 + app/ide-desktop/lib/assets/at.svg | 5 + app/ide-desktop/lib/assets/bars.svg | 5 + app/ide-desktop/lib/assets/close.svg | 7 + app/ide-desktop/lib/assets/cloud.svg | 4 + app/ide-desktop/lib/assets/computer.svg | 5 + app/ide-desktop/lib/assets/create_account.svg | 4 + app/ide-desktop/lib/assets/dashed_border.svg | 4 + app/ide-desktop/lib/assets/default_user.svg | 5 + app/ide-desktop/lib/assets/directory.svg | 5 + app/ide-desktop/lib/assets/down_caret.svg | 3 + app/ide-desktop/lib/assets/download.svg | 6 + app/ide-desktop/lib/assets/exclamation.svg | 4 + app/ide-desktop/lib/assets/file.svg | 5 + app/ide-desktop/lib/assets/go_back.svg | 4 + app/ide-desktop/lib/assets/lock.svg | 4 + .../lib/assets/magnifying_glass.svg | 6 + app/ide-desktop/lib/assets/package.json | 17 + app/ide-desktop/lib/assets/play.svg | 5 + app/ide-desktop/lib/assets/plus.svg | 7 + app/ide-desktop/lib/assets/plus_circled.svg | 4 + app/ide-desktop/lib/assets/secret.svg | 5 + app/ide-desktop/lib/assets/speech_bubble.svg | 4 + app/ide-desktop/lib/assets/upload.svg | 7 + app/ide-desktop/lib/content/esbuild-config.ts | 3 +- app/ide-desktop/lib/dashboard/bundle.ts | 3 +- .../lib/dashboard/esbuild-config.ts | 10 + .../components/forgotPassword.tsx | 17 +- .../src/authentication/components/login.tsx | 25 +- .../components/registration.tsx | 28 +- .../components/resetPassword.tsx | 33 +- .../authentication/components/setUsername.tsx | 11 +- .../src/authentication/components/svgIcon.tsx | 16 +- .../src/authentication/src/components/svg.tsx | 307 ++---------------- .../components/changePasswordModal.tsx | 30 +- .../components/confirmDeleteModal.tsx | 5 +- .../src/dashboard/components/createForm.tsx | 5 +- .../src/dashboard/components/dashboard.tsx | 25 +- .../src/dashboard/components/label.tsx | 14 +- .../components/projectActionButton.tsx | 7 +- .../src/dashboard/components/renameModal.tsx | 5 +- .../src/dashboard/components/svgIcon.tsx | 22 ++ .../src/dashboard/components/templates.tsx | 6 +- .../src/dashboard/components/topBar.tsx | 26 +- .../dashboard/components/uploadFileModal.tsx | 5 +- .../src/authentication/src/fileInfo.ts | 4 +- .../lib/dashboard/src/tailwind.css | 2 +- app/ide-desktop/lib/dashboard/watch.ts | 3 +- app/ide-desktop/lib/icons/package.json | 6 +- app/ide-desktop/lib/types/modules.d.ts | 5 + app/ide-desktop/package-lock.json | 14 +- app/ide-desktop/package.json | 3 +- 55 files changed, 396 insertions(+), 384 deletions(-) create mode 100644 app/ide-desktop/lib/assets/arrow_right.svg create mode 100644 app/ide-desktop/lib/assets/arrow_right_small.svg create mode 100644 app/ide-desktop/lib/assets/arrow_up.svg create mode 100644 app/ide-desktop/lib/assets/at.svg create mode 100644 app/ide-desktop/lib/assets/bars.svg create mode 100644 app/ide-desktop/lib/assets/close.svg create mode 100644 app/ide-desktop/lib/assets/cloud.svg create mode 100644 app/ide-desktop/lib/assets/computer.svg create mode 100644 app/ide-desktop/lib/assets/create_account.svg create mode 100644 app/ide-desktop/lib/assets/dashed_border.svg create mode 100644 app/ide-desktop/lib/assets/default_user.svg create mode 100644 app/ide-desktop/lib/assets/directory.svg create mode 100644 app/ide-desktop/lib/assets/down_caret.svg create mode 100644 app/ide-desktop/lib/assets/download.svg create mode 100644 app/ide-desktop/lib/assets/exclamation.svg create mode 100644 app/ide-desktop/lib/assets/file.svg create mode 100644 app/ide-desktop/lib/assets/go_back.svg create mode 100644 app/ide-desktop/lib/assets/lock.svg create mode 100644 app/ide-desktop/lib/assets/magnifying_glass.svg create mode 100644 app/ide-desktop/lib/assets/package.json create mode 100644 app/ide-desktop/lib/assets/play.svg create mode 100644 app/ide-desktop/lib/assets/plus.svg create mode 100644 app/ide-desktop/lib/assets/plus_circled.svg create mode 100644 app/ide-desktop/lib/assets/secret.svg create mode 100644 app/ide-desktop/lib/assets/speech_bubble.svg create mode 100644 app/ide-desktop/lib/assets/upload.svg create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/svgIcon.tsx diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js index 1a594bb9249..7b5930d1ae0 100644 --- a/app/ide-desktop/eslint.config.js +++ b/app/ide-desktop/eslint.config.js @@ -28,7 +28,7 @@ const NAME = 'enso' * `yargs` and `react-hot-toast` are modules we explicitly want the default imports of. * `node:process` is here because `process.on` does not exist on the namespace import. */ const DEFAULT_IMPORT_ONLY_MODULES = - 'node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*' + 'node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|enso-assets.*' const ALLOWED_DEFAULT_IMPORT_MODULES = `${DEFAULT_IMPORT_ONLY_MODULES}|postcss|react-hot-toast` const OUR_MODULES = 'enso-content-config|enso-common|enso-common\\u002Fsrc\\u002Fdetect' const RELATIVE_MODULES = diff --git a/app/ide-desktop/lib/assets/arrow_right.svg b/app/ide-desktop/lib/assets/arrow_right.svg new file mode 100644 index 00000000000..51797037949 --- /dev/null +++ b/app/ide-desktop/lib/assets/arrow_right.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/arrow_right_small.svg b/app/ide-desktop/lib/assets/arrow_right_small.svg new file mode 100644 index 00000000000..a9ad328d9e7 --- /dev/null +++ b/app/ide-desktop/lib/assets/arrow_right_small.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/arrow_up.svg b/app/ide-desktop/lib/assets/arrow_up.svg new file mode 100644 index 00000000000..9edd16891f0 --- /dev/null +++ b/app/ide-desktop/lib/assets/arrow_up.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/at.svg b/app/ide-desktop/lib/assets/at.svg new file mode 100644 index 00000000000..12aee2ec887 --- /dev/null +++ b/app/ide-desktop/lib/assets/at.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/bars.svg b/app/ide-desktop/lib/assets/bars.svg new file mode 100644 index 00000000000..bbb1acf2aa6 --- /dev/null +++ b/app/ide-desktop/lib/assets/bars.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/close.svg b/app/ide-desktop/lib/assets/close.svg new file mode 100644 index 00000000000..9b90fe324b0 --- /dev/null +++ b/app/ide-desktop/lib/assets/close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/cloud.svg b/app/ide-desktop/lib/assets/cloud.svg new file mode 100644 index 00000000000..b458372f509 --- /dev/null +++ b/app/ide-desktop/lib/assets/cloud.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/computer.svg b/app/ide-desktop/lib/assets/computer.svg new file mode 100644 index 00000000000..85a81d955aa --- /dev/null +++ b/app/ide-desktop/lib/assets/computer.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/create_account.svg b/app/ide-desktop/lib/assets/create_account.svg new file mode 100644 index 00000000000..4cc3c2b0917 --- /dev/null +++ b/app/ide-desktop/lib/assets/create_account.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/dashed_border.svg b/app/ide-desktop/lib/assets/dashed_border.svg new file mode 100644 index 00000000000..d042f377629 --- /dev/null +++ b/app/ide-desktop/lib/assets/dashed_border.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/default_user.svg b/app/ide-desktop/lib/assets/default_user.svg new file mode 100644 index 00000000000..b64ff009cc4 --- /dev/null +++ b/app/ide-desktop/lib/assets/default_user.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/directory.svg b/app/ide-desktop/lib/assets/directory.svg new file mode 100644 index 00000000000..551ee9b90e4 --- /dev/null +++ b/app/ide-desktop/lib/assets/directory.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/down_caret.svg b/app/ide-desktop/lib/assets/down_caret.svg new file mode 100644 index 00000000000..229512d72af --- /dev/null +++ b/app/ide-desktop/lib/assets/down_caret.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/download.svg b/app/ide-desktop/lib/assets/download.svg new file mode 100644 index 00000000000..865e0e6f302 --- /dev/null +++ b/app/ide-desktop/lib/assets/download.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/exclamation.svg b/app/ide-desktop/lib/assets/exclamation.svg new file mode 100644 index 00000000000..637ae0a032f --- /dev/null +++ b/app/ide-desktop/lib/assets/exclamation.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/file.svg b/app/ide-desktop/lib/assets/file.svg new file mode 100644 index 00000000000..5223df6f6d8 --- /dev/null +++ b/app/ide-desktop/lib/assets/file.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/go_back.svg b/app/ide-desktop/lib/assets/go_back.svg new file mode 100644 index 00000000000..4c32fdd70f5 --- /dev/null +++ b/app/ide-desktop/lib/assets/go_back.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/lock.svg b/app/ide-desktop/lib/assets/lock.svg new file mode 100644 index 00000000000..7847a520f6d --- /dev/null +++ b/app/ide-desktop/lib/assets/lock.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/magnifying_glass.svg b/app/ide-desktop/lib/assets/magnifying_glass.svg new file mode 100644 index 00000000000..abc528d93c9 --- /dev/null +++ b/app/ide-desktop/lib/assets/magnifying_glass.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/package.json b/app/ide-desktop/lib/assets/package.json new file mode 100644 index 00000000000..8cca4df267a --- /dev/null +++ b/app/ide-desktop/lib/assets/package.json @@ -0,0 +1,17 @@ +{ + "name": "enso-assets", + "type": "module", + "version": "1.0.0", + "author": { + "name": "Enso Team", + "email": "contact@enso.org" + }, + "homepage": "https://github.com/enso-org/enso/tree/develop/app/ide-desktop/lib/assets", + "repository": { + "type": "git", + "url": "git@github.com:enso-org/enso.git" + }, + "bugs": { + "url": "https://github.com/enso-org/enso/issues" + } +} diff --git a/app/ide-desktop/lib/assets/play.svg b/app/ide-desktop/lib/assets/play.svg new file mode 100644 index 00000000000..e37b6a46cc0 --- /dev/null +++ b/app/ide-desktop/lib/assets/play.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/plus.svg b/app/ide-desktop/lib/assets/plus.svg new file mode 100644 index 00000000000..7d5c4ce7877 --- /dev/null +++ b/app/ide-desktop/lib/assets/plus.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/plus_circled.svg b/app/ide-desktop/lib/assets/plus_circled.svg new file mode 100644 index 00000000000..cadc64cd248 --- /dev/null +++ b/app/ide-desktop/lib/assets/plus_circled.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/secret.svg b/app/ide-desktop/lib/assets/secret.svg new file mode 100644 index 00000000000..d77454027db --- /dev/null +++ b/app/ide-desktop/lib/assets/secret.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/speech_bubble.svg b/app/ide-desktop/lib/assets/speech_bubble.svg new file mode 100644 index 00000000000..f83994782d9 --- /dev/null +++ b/app/ide-desktop/lib/assets/speech_bubble.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/assets/upload.svg b/app/ide-desktop/lib/assets/upload.svg new file mode 100644 index 00000000000..fa737847318 --- /dev/null +++ b/app/ide-desktop/lib/assets/upload.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/app/ide-desktop/lib/content/esbuild-config.ts b/app/ide-desktop/lib/content/esbuild-config.ts index 36b6898f668..7d8907e4199 100644 --- a/app/ide-desktop/lib/content/esbuild-config.ts +++ b/app/ide-desktop/lib/content/esbuild-config.ts @@ -106,7 +106,8 @@ export function bundlerOptions(args: Arguments) { '.css': 'copy', '.map': 'copy', '.wasm': 'copy', - '.svg': 'copy', + // The `file` loader copies the file, and replaces the import with the path to the file. + '.svg': 'file', '.png': 'copy', '.ttf': 'copy', }, diff --git a/app/ide-desktop/lib/dashboard/bundle.ts b/app/ide-desktop/lib/dashboard/bundle.ts index e3b6c6fa747..f42fb5e142f 100644 --- a/app/ide-desktop/lib/dashboard/bundle.ts +++ b/app/ide-desktop/lib/dashboard/bundle.ts @@ -33,8 +33,7 @@ async function bundle() { path.resolve(THIS_PATH, 'src', 'index.html'), path.resolve(THIS_PATH, 'src', 'index.tsx') ) - // eslint-disable-next-line @typescript-eslint/naming-convention - opts.loader = { '.html': 'copy' } + opts.loader['.html'] = 'copy' await esbuild.build(opts) return } catch (error) { diff --git a/app/ide-desktop/lib/dashboard/esbuild-config.ts b/app/ide-desktop/lib/dashboard/esbuild-config.ts index 42d9f964328..e929b7ed4b6 100644 --- a/app/ide-desktop/lib/dashboard/esbuild-config.ts +++ b/app/ide-desktop/lib/dashboard/esbuild-config.ts @@ -112,6 +112,16 @@ export function bundlerOptions(args: Arguments) { entryPoints: [path.resolve(THIS_PATH, 'src', 'tailwind.css')], outdir: outputPath, outbase: 'src', + loader: { + // The CSS file needs to import a single SVG as a data URL. + // For `bundle.ts` and `watch.ts`, `index.js` also includes various SVG icons + // which need to be bundled. + // The `dataurl` loader replaces the import with the file, as a data URL. Using the + // `file` loader, which copies the file and replaces the import with the path, + // is an option, however this loader avoids adding extra files to the bundle. + // eslint-disable-next-line @typescript-eslint/naming-convention + '.svg': 'dataurl', + }, plugins: [ esbuildPluginNodeModules.NodeModulesPolyfillPlugin(), esbuildPluginTime(), diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx index 58e01e0f065..32377164e9b 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx @@ -3,6 +3,10 @@ import * as react from 'react' import * as router from 'react-router-dom' +import ArrowRightIcon from 'enso-assets/arrow_right.svg' +import AtIcon from 'enso-assets/at.svg' +import GoBackIcon from 'enso-assets/go_back.svg' + import * as app from '../../components/app' import * as auth from '../providers/auth' import * as svg from '../../components/svg' @@ -46,8 +50,9 @@ function ForgotPassword() { E-Mail Address:
- - + + + Send link - {svg.RIGHT_ARROW} + + +
@@ -81,7 +88,9 @@ function ForgotPassword() { 'text-center' } > - {svg.GO_BACK} + + + Go back to login diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx index f45038929d0..60682546798 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx @@ -2,6 +2,11 @@ import * as react from 'react' import * as router from 'react-router-dom' +import ArrowRightIcon from 'enso-assets/arrow_right.svg' +import AtIcon from 'enso-assets/at.svg' +import CreateAccountIcon from 'enso-assets/create_account.svg' +import LockIcon from 'enso-assets/lock.svg' + import * as fontawesomeIcons from '@fortawesome/free-brands-svg-icons' import * as app from '../../components/app' @@ -52,7 +57,7 @@ function Login() { }} className="relative mt-6 border rounded-md py-2 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200" > - + Login with Google @@ -156,7 +165,9 @@ function Login() { 'text-xs text-center' } > - {svg.CREATE_ACCOUNT} + + + You don't have an account? diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx index b343ba68b31..d5509b20293 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx @@ -3,6 +3,11 @@ import * as react from 'react' import * as router from 'react-router-dom' import toast from 'react-hot-toast' +import AtIcon from 'enso-assets/at.svg' +import CreateAccountIcon from 'enso-assets/create_account.svg' +import GoBackIcon from 'enso-assets/go_back.svg' +import LockIcon from 'enso-assets/lock.svg' + import * as app from '../../components/app' import * as auth from '../providers/auth' import * as svg from '../../components/svg' @@ -58,8 +63,9 @@ function Registration() { E-Mail Address:
- - + + +
- - + + +
- - + + + Register - {svg.CREATE_ACCOUNT} + + +
@@ -138,7 +148,9 @@ function Registration() { 'text-sm text-center' } > - {svg.GO_BACK} + + + Already have an account?
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx index ed0712eadbb..15e9960215c 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx @@ -4,6 +4,11 @@ import * as react from 'react' import * as router from 'react-router-dom' import toast from 'react-hot-toast' +import ArrowRightIcon from 'enso-assets/arrow_right.svg' +import AtIcon from 'enso-assets/at.svg' +import GoBackIcon from 'enso-assets/go_back.svg' +import LockIcon from 'enso-assets/lock.svg' + import * as app from '../../components/app' import * as auth from '../providers/auth' import * as svg from '../../components/svg' @@ -72,8 +77,9 @@ function ResetPassword() { E-Mail Address:
- - + + +
- - + + +
- - + + +
- - + + + Reset - {svg.RIGHT_ARROW} + + +
@@ -169,7 +180,9 @@ function ResetPassword() { 'text-center' } > - {svg.GO_BACK} + + + Go back to login
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx index f50904edaa7..8072d43a4c4 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx @@ -2,6 +2,9 @@ * registration. */ import * as react from 'react' +import ArrowRightIcon from 'enso-assets/arrow_right.svg' +import AtIcon from 'enso-assets/at.svg' + import * as auth from '../providers/auth' import * as backendProvider from '../../providers/backend' import * as svg from '../../components/svg' @@ -41,7 +44,9 @@ function SetUsername() { >
- + + + Set username - {svg.RIGHT_ARROW} + + +
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/svgIcon.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/svgIcon.tsx index 042b56ab9aa..3ac8eda35a0 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/svgIcon.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/svgIcon.tsx @@ -1,24 +1,20 @@ /** @file Styled wrapper around SVG images. */ +import * as React from 'react' // =============== // === SvgIcon === // =============== /** Props for a {@link SvgIcon}. */ -export interface SvgIconProps { - svg: JSX.Element -} +export interface SvgIconProps extends React.PropsWithChildren {} /** A fixed-size container for a SVG image. */ function SvgIcon(props: SvgIconProps) { + const { children } = props + return ( -
- {props.svg} +
+ {children}
) } diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/components/svg.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/components/svg.tsx index da5c910ab1b..caf25a6f4a9 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/components/svg.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/components/svg.tsx @@ -4,273 +4,10 @@ * the `svg` files when building for Electron. Once the build scripts have been adapted to allow for * for this, the contents of this file should be moved back to standalone SVG files. */ -// ================= -// === Constants === -// ================= - -export const AT = ( - -) - -export const LOCK = ( - -) - -export const RIGHT_ARROW = - -export const CREATE_ACCOUNT = ( - -) - -export const GO_BACK = ( - -) - // =================================== // === SVGs with custom formatting === // =================================== -/** Icon used to indicate a warning. */ -export const EXCLAMATION_ICON = ( - - - -) - -/** Icon representing a file being uploaded. */ -export const UPLOAD_ICON = ( - - - - - -) - -/** Icon representing a file being downloaded. */ -export const DOWNLOAD_ICON = ( - - - - - -) - -/** Icon representing a directory. */ -export const DIRECTORY_ICON = ( - - - -) - -/** Icon representing a secret. */ -export const SECRET_ICON = ( - - - -) - -/** Icon representing a file whose filetype does not have an associated icon. */ -export const FILE_ICON = ( - - - -) - -/** Icon typically indicating that the item on the right is a child of the item on the left. */ -export const SMALL_RIGHT_ARROW_ICON = ( - - - -) - -/** Displayed when a project is ready to start. */ -export const PLAY_ICON = ( - - - - -) - -/** Displayed when a project is ready for opening an IDE. */ -export const ARROW_UP_ICON = ( - - - - - -) - -/** `+`-shaped icon representing creation of an item. */ -export const ADD_ICON = ( - - - - - - - -) - -/** An icon representing creation of an item. */ -export const CIRCLED_PLUS_ICON = ( - - - -) - -/** Icon with three bars. */ -export const BARS_ICON = ( - - - - - -) - -/** Icon indicating a search input. */ -export const MAGNIFYING_GLASS_ICON = ( - - - - - - -) - -/** Icon indicating a chat dialog. */ -export const SPEECH_BUBBLE_ICON = ( - - - - -) - -/** `x`-shaped icon representing the closing of a window. */ -export const CLOSE_ICON = ( - - - - - - - -) - -export const CLOUD_ICON = ( - - - -) - -export const COMPUTER_ICON = ( - - - -) - -/** An icon representing a user without a profile picture. */ -export const DEFAULT_USER_ICON = ( - - - -) - -/** An icon representing a menu that can be expanded downwards. */ -export const DOWN_CARET_ICON = ( - - - -) - /** Props for a {@link Spinner}. */ export interface SpinnerProps { size: number @@ -352,31 +89,33 @@ export function StopIcon(props: StopIconProps) { ) } -// =========== -// === Svg === -// =========== +// =============== +// === SvgMask === +// =============== -/** Props for a {@link Svg}. */ -export interface SvgProps { - path: string +/** Props for a {@link SvgMask}. */ +export interface SvgMaskProps { + /** The URL of the SVG to use as the mask. */ + src: string } -/** Component for rendering SVG icons. - * - * @param props - Extra props for the SVG path. The `props.data` field in particular contains the - * SVG path data. */ -function Svg(props: SvgProps) { +/** Use an SVG as a mask. This lets the SVG use the text color (`currentColor`). */ +export function SvgMask(props: SvgMaskProps) { + const { src } = props + const urlSrc = `url(${JSON.stringify(src)})` + return ( - - - + {/* This is required for this component to have the right size. */} + +
) } diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/changePasswordModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/changePasswordModal.tsx index 34f76bb5929..5addda02ce5 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/changePasswordModal.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/changePasswordModal.tsx @@ -1,8 +1,10 @@ /** @file Managing the logic and displaying the UI for the password change function. */ import * as react from 'react' - import toast from 'react-hot-toast' +import ArrowRightIcon from 'enso-assets/arrow_right.svg' +import LockIcon from 'enso-assets/lock.svg' + import * as auth from '../../authentication/providers/auth' import * as modalProvider from '../../providers/modal' import * as svg from '../../components/svg' @@ -10,6 +12,7 @@ import * as validation from '../validation' import Input from './input' import Modal from './modal' +import SvgIcon from './svgIcon' // ========================== // === ResetPasswordModal === @@ -61,10 +64,9 @@ function ChangePasswordModal() { Old Password:
-
- {svg.LOCK} -
- + + +
-
- {svg.LOCK} -
- + + +
-
- {svg.LOCK} -
- + + + Reset - {svg.RIGHT_ARROW} + + +
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx index 8952304f4cb..a1572cb15ef 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx @@ -2,8 +2,9 @@ import * as react from 'react' import toast from 'react-hot-toast' +import CloseIcon from 'enso-assets/close.svg' + import * as modalProvider from '../../providers/modal' -import * as svg from '../../components/svg' import Modal from './modal' @@ -58,7 +59,7 @@ function ConfirmDeleteModal(props: ConfirmDeleteModalProps) { className="relative bg-white shadow-soft rounded-lg w-96 p-2" > Are you sure you want to delete the {assetType} '{name}'?
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx index a52d1dd3bc7..c3d6f16762d 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx @@ -4,8 +4,9 @@ import * as react from 'react' +import CloseIcon from 'enso-assets/close.svg' + import * as modalProvider from '../../providers/modal' -import * as svg from '../../components/svg' import Modal from './modal' @@ -46,7 +47,7 @@ function CreateForm(props: CreateFormProps) { }} >

{title}

{children} diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx index 9e7786d4660..19d879f56ee 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx @@ -3,6 +3,14 @@ import * as react from 'react' import toast from 'react-hot-toast' +import ArrowRightSmallIcon from 'enso-assets/arrow_right_small.svg' +import DefaultUserIcon from 'enso-assets/default_user.svg' +import DirectoryIcon from 'enso-assets/directory.svg' +import DownloadIcon from 'enso-assets/download.svg' +import PlusIcon from 'enso-assets/plus.svg' +import SecretIcon from 'enso-assets/secret.svg' +import UploadIcon from 'enso-assets/upload.svg' + import * as common from 'enso-common' import * as backendModule from '../backend' @@ -14,7 +22,6 @@ import * as localBackend from '../localBackend' import * as newtype from '../../newtype' import * as projectManager from '../projectManager' import * as remoteBackendModule from '../remoteBackend' -import * as svg from '../../components/svg' import * as uploadMultipleFiles from '../../uploadMultipleFiles' import * as authProvider from '../../authentication/providers/auth' @@ -602,7 +609,7 @@ function Dashboard(props: DashboardProps) { enterDirectory(directoryAsset) }} > - {svg.DIRECTORY_ICON} {directoryAsset.title} + {directoryAsset.title}
), [backendModule.AssetType.secret]: secret => ( @@ -622,7 +629,7 @@ function Dashboard(props: DashboardProps) { } }} > - {svg.SECRET_ICON} {secret.title} + {secret.title}
), [backendModule.AssetType.file]: file => ( @@ -642,7 +649,7 @@ function Dashboard(props: DashboardProps) { } }} > - {fileInfo.fileIcon()} {file.title} + {file.title}
), } @@ -663,7 +670,7 @@ function Dashboard(props: DashboardProps) { key={user.user.organization_id} permissions={PERMISSION[user.permission]} > - {svg.DEFAULT_USER_ICON} + ))} @@ -756,7 +763,7 @@ function Dashboard(props: DashboardProps) { } }} > - {svg.ADD_ICON} +
) : ( @@ -995,7 +1002,7 @@ function Dashboard(props: DashboardProps) { - {svg.SMALL_RIGHT_ARROW_ICON} + )} {directory?.title ?? '/'} @@ -1027,7 +1034,7 @@ function Dashboard(props: DashboardProps) { )) }} > - {svg.UPLOAD_ICON} +
{EXPERIMENTAL.columnModeSwitcher && ( diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx index 61f52b5dea1..b2bef0770a0 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx @@ -1,7 +1,7 @@ /** @file A label, which may be either user-defined, or a system warning message. */ import * as react from 'react' -import * as svg from '../../components/svg' +import ExclamationIcon from 'enso-assets/exclamation.svg' // ============= // === Types === @@ -28,8 +28,16 @@ const CSS_CLASS: Record = { /** A mapping of label type to its corresponding icon. */ const STATUS_ICON: Record = { [Status.none]: null, - [Status.warning]:
{svg.EXCLAMATION_ICON}
, - [Status.severeWarning]:
{svg.EXCLAMATION_ICON}
, + [Status.warning]: ( +
+ +
+ ), + [Status.severeWarning]: ( +
+ +
+ ), } // ================= diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx index 5551bb5d7cd..19a8a33b08d 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx @@ -2,6 +2,9 @@ import * as react from 'react' import toast from 'react-hot-toast' +import ArrowUpIcon from 'enso-assets/arrow_up.svg' +import PlayIcon from 'enso-assets/play.svg' + import * as backendModule from '../backend' import * as backendProvider from '../../providers/backend' import * as localBackend from '../localBackend' @@ -347,7 +350,7 @@ function ProjectActionButton(props: ProjectActionButtonProps) { doOpenManually() }} > - {svg.PLAY_ICON} + ) case backendModule.ProjectState.openInProgress: @@ -381,7 +384,7 @@ function ProjectActionButton(props: ProjectActionButtonProps) { openIde() }} > - {svg.ARROW_UP_ICON} + ) diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx index b3d2600a1d7..7400b578e4e 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx @@ -2,8 +2,9 @@ import * as react from 'react' import toast from 'react-hot-toast' +import CloseIcon from 'enso-assets/close.svg' + import * as modalProvider from '../../providers/modal' -import * as svg from '../../components/svg' import Input from './input' import Modal from './modal' @@ -62,7 +63,7 @@ function RenameModal(props: RenameModalProps) { className="relative bg-white shadow-soft rounded-lg w-96 p-2" > What do you want to rename the {assetType} '{name}' to?
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/svgIcon.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/svgIcon.tsx new file mode 100644 index 00000000000..3ac8eda35a0 --- /dev/null +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/svgIcon.tsx @@ -0,0 +1,22 @@ +/** @file Styled wrapper around SVG images. */ +import * as React from 'react' + +// =============== +// === SvgIcon === +// =============== + +/** Props for a {@link SvgIcon}. */ +export interface SvgIconProps extends React.PropsWithChildren {} + +/** A fixed-size container for a SVG image. */ +function SvgIcon(props: SvgIconProps) { + const { children } = props + + return ( +
+ {children} +
+ ) +} + +export default SvgIcon diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx index 57a340db61c..8b17ecd124f 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx @@ -1,5 +1,5 @@ /** @file Renders the list of templates from which a project can be created. */ -import * as svg from '../../components/svg' +import PlusCircledIcon from 'enso-assets/plus_circled.svg' // ================= // === Templates === @@ -78,7 +78,9 @@ function TemplatesRender(props: TemplatesRenderProps) { >
- +

New empty project

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx index b25c1db09e2..8199698befc 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx @@ -1,9 +1,15 @@ /** @file The top-bar of dashboard. */ import * as react from 'react' +import BarsIcon from 'enso-assets/bars.svg' +import CloudIcon from 'enso-assets/cloud.svg' +import ComputerIcon from 'enso-assets/computer.svg' +import DefaultUserIcon from 'enso-assets/default_user.svg' +import MagnifyingGlassIcon from 'enso-assets/magnifying_glass.svg' +import SpeechBubbleIcon from 'enso-assets/speech_bubble.svg' + import * as backendModule from '../backend' import * as dashboard from './dashboard' -import * as svg from '../../components/svg' import * as backendProvider from '../../providers/backend' import * as modalProvider from '../../providers/modal' @@ -63,7 +69,7 @@ function TopBar(props: TopBarProps) { : 'opacity-50' } rounded-full px-1.5 py-1`} > - {svg.COMPUTER_ICON} +
)} @@ -91,7 +97,9 @@ function TopBar(props: TopBarProps) { > {projectName ?? 'Dashboard'} -
{svg.BARS_ICON}
+
+ +
-
{svg.MAGNIFYING_GLASS_ICON}
+
+ +
help chat -
{svg.SPEECH_BUBBLE_ICON}
+
+ +
{/* User profile and menu. */}
@@ -130,7 +142,7 @@ function TopBar(props: TopBarProps) { }} className="rounded-full w-8 h-8 bg-cover cursor-pointer" > - {svg.DEFAULT_USER_ICON} +
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx index 1927b92e92c..09100a0ac7f 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx @@ -2,11 +2,12 @@ import * as react from 'react' import toast from 'react-hot-toast' +import CloseIcon from 'enso-assets/close.svg' + import * as backendModule from '../backend' import * as backendProvider from '../../providers/backend' import * as fileInfo from '../../fileInfo' import * as modalProvider from '../../providers/modal' -import * as svg from '../../components/svg' import Modal from './modal' @@ -67,7 +68,7 @@ function UploadFileModal(props: UploadFileModalProps) { className="absolute right-0 top-0 m-2" onClick={unsetModal} > - {svg.CLOSE_ICON} +