diff --git a/.gitignore b/.gitignore index cb47bf4..1bcec8e 100644 --- a/.gitignore +++ b/.gitignore @@ -65,3 +65,6 @@ translations/ # Built renderer-code during Forge packaging process dist/ + +# Vite build directory +.vite/build/ diff --git a/messages/renderer/en.json b/messages/renderer/en.json index 2c63c08..839b3dc 100644 --- a/messages/renderer/en.json +++ b/messages/renderer/en.json @@ -1,2 +1,20 @@ { + "screens.IntroToCoMapeo.collaborate": { + "message": "Collaborate with others" + }, + "screens.IntroToCoMapeo.designedFor": { + "message": "Designed with and for Indigenous peoples & frontline communities" + }, + "screens.IntroToCoMapeo.getStarted": { + "message": "Get Started" + }, + "screens.IntroToCoMapeo.mapAnywhere": { + "message": "Map anywhere and everywhere" + }, + "screens.IntroToCoMapeo.ownData": { + "message": "Own and control your data" + }, + "screens.IntroToCoMapeo.viewAndManage": { + "message": "View and manage observations in CoMapeo Mobile Projects." + } } diff --git a/package-lock.json b/package-lock.json index ecf0d66..1ec586a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,7 +70,8 @@ "react-intl": "^7.0.1", "typescript": "^5.6.3", "typescript-eslint": "^8.15.0", - "vite": "^5.4.11" + "vite": "^5.4.11", + "vite-plugin-svgr": "^4.3.0" } }, "node_modules/@ampproject/remapping": { @@ -3540,6 +3541,29 @@ "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", "license": "BSD-3-Clause" }, + "node_modules/@rollup/pluginutils": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz", + "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz", @@ -3783,6 +3807,258 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "license": "MIT", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@szmarczak/http-timer": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz", @@ -5877,6 +6153,19 @@ "node": ">=6" } }, + "node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001669", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz", @@ -6862,6 +7151,17 @@ "csstype": "^3.0.2" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/dot-prop": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz", @@ -7743,6 +8043,19 @@ "once": "^1.4.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -8296,6 +8609,13 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true, + "license": "MIT" + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -10813,6 +11133,16 @@ "loose-envify": "cli.js" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lowercase-keys": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", @@ -11854,6 +12184,17 @@ "dev": true, "license": "MIT" }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "license": "MIT", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-abi": { "version": "3.71.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.71.0.tgz", @@ -14480,6 +14821,17 @@ "npm": ">= 3.0.0" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/socks": { "version": "2.8.3", "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz", @@ -15333,6 +15685,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true, + "license": "MIT" + }, "node_modules/tar": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz", @@ -16688,6 +17047,21 @@ } } }, + "node_modules/vite-plugin-svgr": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz", + "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.1.3", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": ">=2.6.0" + } + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 92a7197..51347e6 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,8 @@ "react-intl": "^7.0.1", "typescript": "^5.6.3", "typescript-eslint": "^8.15.0", - "vite": "^5.4.11" + "vite": "^5.4.11", + "vite-plugin-svgr": "^4.3.0" }, "overrides": { "better-sqlite3": "11.5.0" diff --git a/src/renderer/custom.d.ts b/src/renderer/custom.d.ts new file mode 100644 index 0000000..8137c8e --- /dev/null +++ b/src/renderer/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: React.FC> + export default content +} diff --git a/src/renderer/src/Theme.ts b/src/renderer/src/Theme.ts index 8d362f5..f6f0c8b 100644 --- a/src/renderer/src/Theme.ts +++ b/src/renderer/src/Theme.ts @@ -13,7 +13,7 @@ import { const theme = createTheme({ typography: { fontFamily: 'Rubik, sans-serif', - fontSize: 16, + fontSize: 12, body1: { fontSize: '1rem', }, @@ -77,7 +77,7 @@ const theme = createTheme({ borderWidth: 2, }, }), - borderRadius: 30, + borderRadius: 4, textTransform: 'none', }), }, diff --git a/src/renderer/src/colors.ts b/src/renderer/src/colors.ts index 06309c6..9476147 100644 --- a/src/renderer/src/colors.ts +++ b/src/renderer/src/colors.ts @@ -1,6 +1,7 @@ export const COMAPEO_BLUE = '#0066FF' export const DARK_COMAPEO_BLUE = '#050F77' export const LIGHT_COMAPEO_BLUE = '#CCE0FF' +export const CORNFLOWER_BLUE = '#80A0FF' export const ORANGE = '#FF9933' export const DARK_ORANGE = '#E86826' @@ -8,3 +9,4 @@ export const DARK_ORANGE = '#E86826' export const GREEN = '#59A553' export const RED = '#D92222' export const BLACK = '#000000' +export const WHITE = '#ffffff' diff --git a/src/renderer/src/images/TopoLogo.svg b/src/renderer/src/images/TopoLogo.svg new file mode 100644 index 0000000..34f7f03 --- /dev/null +++ b/src/renderer/src/images/TopoLogo.svg @@ -0,0 +1,3423 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/images/calling.png b/src/renderer/src/images/calling.png new file mode 100644 index 0000000..881488e Binary files /dev/null and b/src/renderer/src/images/calling.png differ diff --git a/src/renderer/src/images/closed_lock_with_key.png b/src/renderer/src/images/closed_lock_with_key.png new file mode 100644 index 0000000..adae9ab Binary files /dev/null and b/src/renderer/src/images/closed_lock_with_key.png differ diff --git a/src/renderer/src/images/raised_fist_medium_skin_tone.png b/src/renderer/src/images/raised_fist_medium_skin_tone.png new file mode 100644 index 0000000..4cf7786 Binary files /dev/null and b/src/renderer/src/images/raised_fist_medium_skin_tone.png differ diff --git a/src/renderer/src/images/world_map.png b/src/renderer/src/images/world_map.png new file mode 100644 index 0000000..02079cd Binary files /dev/null and b/src/renderer/src/images/world_map.png differ diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css index 0cd0d63..8fa93f2 100644 --- a/src/renderer/src/index.css +++ b/src/renderer/src/index.css @@ -1,7 +1,10 @@ -body { +html, +body, +#app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: auto; - max-width: 38rem; - padding: 2rem; + height: 100%; + margin: 0; + padding: 0; } diff --git a/src/renderer/src/routeTree.gen.ts b/src/renderer/src/routeTree.gen.ts index e4ecc98..bc13be6 100644 --- a/src/renderer/src/routeTree.gen.ts +++ b/src/renderer/src/routeTree.gen.ts @@ -13,6 +13,8 @@ import { createFileRoute } from '@tanstack/react-router' import { Route as MapTabsMapImport } from './routes/(MapTabs)/_Map' import { Route as MapTabsMapTab1Import } from './routes/(MapTabs)/_Map.tab1' import { Route as MapTabsMapTab2Import } from './routes/(MapTabs)/_Map.tab2' +import { Route as OnboardingImport } from './routes/Onboarding' +import { Route as OnboardingDataPrivacyImport } from './routes/Onboarding.DataPrivacy' import { Route as WelcomeImport } from './routes/Welcome' // Import Routes @@ -36,12 +38,24 @@ const WelcomeRoute = WelcomeImport.update({ getParentRoute: () => rootRoute, } as any) +const OnboardingRoute = OnboardingImport.update({ + id: '/Onboarding', + path: '/Onboarding', + getParentRoute: () => rootRoute, +} as any) + const IndexRoute = IndexImport.update({ id: '/', path: '/', getParentRoute: () => rootRoute, } as any) +const OnboardingDataPrivacyRoute = OnboardingDataPrivacyImport.update({ + id: '/DataPrivacy', + path: '/DataPrivacy', + getParentRoute: () => OnboardingRoute, +} as any) + const MapTabsMapRoute = MapTabsMapImport.update({ id: '/_Map', getParentRoute: () => MapTabsRoute, @@ -70,6 +84,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexImport parentRoute: typeof rootRoute } + '/Onboarding': { + id: '/Onboarding' + path: '/Onboarding' + fullPath: '/Onboarding' + preLoaderRoute: typeof OnboardingImport + parentRoute: typeof rootRoute + } '/Welcome': { id: '/Welcome' path: '/Welcome' @@ -91,6 +112,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof MapTabsMapImport parentRoute: typeof MapTabsRoute } + '/Onboarding/DataPrivacy': { + id: '/Onboarding/DataPrivacy' + path: '/DataPrivacy' + fullPath: '/Onboarding/DataPrivacy' + preLoaderRoute: typeof OnboardingDataPrivacyImport + parentRoute: typeof OnboardingImport + } '/(MapTabs)/_Map/tab1': { id: '/(MapTabs)/_Map/tab1' path: '/tab1' @@ -110,6 +138,18 @@ declare module '@tanstack/react-router' { // Create and export the route tree +interface OnboardingRouteChildren { + OnboardingDataPrivacyRoute: typeof OnboardingDataPrivacyRoute +} + +const OnboardingRouteChildren: OnboardingRouteChildren = { + OnboardingDataPrivacyRoute: OnboardingDataPrivacyRoute, +} + +const OnboardingRouteWithChildren = OnboardingRoute._addFileChildren( + OnboardingRouteChildren, +) + interface MapTabsMapRouteChildren { MapTabsMapTab1Route: typeof MapTabsMapTab1Route MapTabsMapTab2Route: typeof MapTabsMapTab2Route @@ -137,14 +177,18 @@ const MapTabsRouteWithChildren = export interface FileRoutesByFullPath { '/': typeof MapTabsMapRouteWithChildren + '/Onboarding': typeof OnboardingRouteWithChildren '/Welcome': typeof WelcomeRoute + '/Onboarding/DataPrivacy': typeof OnboardingDataPrivacyRoute '/tab1': typeof MapTabsMapTab1Route '/tab2': typeof MapTabsMapTab2Route } export interface FileRoutesByTo { '/': typeof MapTabsMapRouteWithChildren + '/Onboarding': typeof OnboardingRouteWithChildren '/Welcome': typeof WelcomeRoute + '/Onboarding/DataPrivacy': typeof OnboardingDataPrivacyRoute '/tab1': typeof MapTabsMapTab1Route '/tab2': typeof MapTabsMapTab2Route } @@ -152,24 +196,40 @@ export interface FileRoutesByTo { export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute + '/Onboarding': typeof OnboardingRouteWithChildren '/Welcome': typeof WelcomeRoute '/(MapTabs)': typeof MapTabsRouteWithChildren '/(MapTabs)/_Map': typeof MapTabsMapRouteWithChildren + '/Onboarding/DataPrivacy': typeof OnboardingDataPrivacyRoute '/(MapTabs)/_Map/tab1': typeof MapTabsMapTab1Route '/(MapTabs)/_Map/tab2': typeof MapTabsMapTab2Route } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/Welcome' | '/tab1' | '/tab2' + fullPaths: + | '/' + | '/Onboarding' + | '/Welcome' + | '/Onboarding/DataPrivacy' + | '/tab1' + | '/tab2' fileRoutesByTo: FileRoutesByTo - to: '/' | '/Welcome' | '/tab1' | '/tab2' + to: + | '/' + | '/Onboarding' + | '/Welcome' + | '/Onboarding/DataPrivacy' + | '/tab1' + | '/tab2' id: | '__root__' | '/' + | '/Onboarding' | '/Welcome' | '/(MapTabs)' | '/(MapTabs)/_Map' + | '/Onboarding/DataPrivacy' | '/(MapTabs)/_Map/tab1' | '/(MapTabs)/_Map/tab2' fileRoutesById: FileRoutesById @@ -177,12 +237,14 @@ export interface FileRouteTypes { export interface RootRouteChildren { IndexRoute: typeof IndexRoute + OnboardingRoute: typeof OnboardingRouteWithChildren WelcomeRoute: typeof WelcomeRoute MapTabsRoute: typeof MapTabsRouteWithChildren } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, + OnboardingRoute: OnboardingRouteWithChildren, WelcomeRoute: WelcomeRoute, MapTabsRoute: MapTabsRouteWithChildren, } @@ -198,6 +260,7 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", + "/Onboarding", "/Welcome", "/(MapTabs)" ] @@ -205,6 +268,12 @@ export const routeTree = rootRoute "/": { "filePath": "index.tsx" }, + "/Onboarding": { + "filePath": "Onboarding.tsx", + "children": [ + "/Onboarding/DataPrivacy" + ] + }, "/Welcome": { "filePath": "Welcome.tsx" }, @@ -222,6 +291,10 @@ export const routeTree = rootRoute "/(MapTabs)/_Map/tab2" ] }, + "/Onboarding/DataPrivacy": { + "filePath": "Onboarding.DataPrivacy.tsx", + "parent": "/Onboarding" + }, "/(MapTabs)/_Map/tab1": { "filePath": "(MapTabs)/_Map.tab1.tsx", "parent": "/(MapTabs)/_Map" diff --git a/src/renderer/src/routes/Onboarding.DataPrivacy.tsx b/src/renderer/src/routes/Onboarding.DataPrivacy.tsx new file mode 100644 index 0000000..41dc365 --- /dev/null +++ b/src/renderer/src/routes/Onboarding.DataPrivacy.tsx @@ -0,0 +1,14 @@ +import * as React from 'react' +import { createFileRoute } from '@tanstack/react-router' + +export const Route = createFileRoute('/Onboarding/DataPrivacy')({ + component: DataPrivacyComponent, +}) + +function DataPrivacyComponent() { + return ( +
+

Step 1: User Information

+
+ ) +} diff --git a/src/renderer/src/routes/Onboarding.tsx b/src/renderer/src/routes/Onboarding.tsx new file mode 100644 index 0000000..ef1c48f --- /dev/null +++ b/src/renderer/src/routes/Onboarding.tsx @@ -0,0 +1,198 @@ +import { styled } from '@mui/material/styles' +import { createFileRoute, useNavigate } from '@tanstack/react-router' +import { defineMessages, useIntl } from 'react-intl' + +import { CORNFLOWER_BLUE, DARK_COMAPEO_BLUE, ORANGE, WHITE } from '../colors' +import { Button } from '../components/Button' +import { Text } from '../components/Text' +import TopoBackground from '../images/TopoLogo.svg' +import Calling from '../images/calling.png' +import LockedWithKey from '../images/closed_lock_with_key.png' +import RaisedFistMediumSkinTone from '../images/raised_fist_medium_skin_tone.png' +import WorldMap from '../images/world_map.png' + +export const Route = createFileRoute('/Onboarding')({ + component: OnboardingComponent, +}) + +const m = defineMessages({ + getStarted: { + id: 'screens.IntroToCoMapeo.getStarted', + defaultMessage: 'Get Started', + }, + mapWorldTogether: { + id: 'screens.IntroToCoMapeo.viewAndManage', + defaultMessage: 'View and manage observations in CoMapeo Mobile Projects.', + }, + mapAnywhere: { + id: 'screens.IntroToCoMapeo.mapAnywhere', + defaultMessage: 'Map anywhere and everywhere', + }, + collaborate: { + id: 'screens.IntroToCoMapeo.collaborate', + defaultMessage: 'Collaborate with others', + }, + ownData: { + id: 'screens.IntroToCoMapeo.ownData', + defaultMessage: 'Own and control your data', + }, + designedFor: { + id: 'screens.IntroToCoMapeo.designedFor', + defaultMessage: + 'Designed with and for Indigenous peoples & frontline communities', + }, +}) + +const Container = styled('div')({ + position: 'relative', + backgroundColor: DARK_COMAPEO_BLUE, + width: '100%', + height: '100vh', + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', +}) + +const Background = styled(TopoBackground)({ + position: 'absolute', + width: '100%', + height: '100%', + opacity: 0.5, + zIndex: 0, +}) + +const ContentWrapper = styled('div')({ + display: 'grid', + gridTemplateColumns: '1fr 2fr 2fr 1fr', + columnGap: 32, + alignItems: 'center', + width: '100%', + height: '60%', + zIndex: 1, +}) + +const LeftSection = styled('div')({ + gridColumn: 2, + paddingLeft: 32, + maxHeight: 189, +}) + +const RightSection = styled('div')({ + gridColumn: 3, + maxWidth: 400, + paddingLeft: 32, +}) + +const LogoSection = styled('div')({ + display: 'flex', + flexDirection: 'column', +}) + +const LogoText = styled(Text)({ + fontSize: 64, +}) + +const Co = styled('span')({ + color: ORANGE, + fontWeight: 500, +}) + +const Mapeo = styled('span')({ + color: WHITE, + fontWeight: 700, +}) + +const DesktopText = styled(Text)(() => ({ + color: CORNFLOWER_BLUE, + fontSize: 64, + fontWeight: 500, + marginTop: -24, +})) + +const MainText = styled(Text)(() => ({ + color: WHITE, + fontSize: 16, + fontWeight: 500, + marginTop: 12, + maxWidth: 300, +})) + +const TextBox = styled('div')({ + width: '100%', + maxWidth: 300, + padding: '32px 24px', + borderWidth: 1, + borderColor: WHITE, + borderStyle: 'solid', + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + display: 'flex', + flexDirection: 'column', + gap: 16, +}) + +const TextItem = styled('div')({ + display: 'flex', + alignItems: 'center', + gap: 16, +}) + +const StyledText = styled(Text)(({ theme }) => ({ + color: WHITE, + fontSize: theme.typography.caption.fontSize, +})) + +function OnboardingComponent() { + const navigate = useNavigate() + const { formatMessage } = useIntl() + + return ( + + + + + + + Co + Mapeo + + Desktop + + {formatMessage(m.mapWorldTogether)} + + + + + + World Map + {formatMessage(m.mapAnywhere)} + + + + {formatMessage(m.collaborate)} + + + + {formatMessage(m.ownData)} + + + + {formatMessage(m.designedFor)} + + + + + + + + ) +} + +export default OnboardingComponent diff --git a/src/renderer/src/routes/index.tsx b/src/renderer/src/routes/index.tsx index 5f19996..31eaf8a 100644 --- a/src/renderer/src/routes/index.tsx +++ b/src/renderer/src/routes/index.tsx @@ -9,11 +9,18 @@ export const Route = createFileRoute('/')({ function RouteComponent() { const router = useRouter() + const hasCreatedDeviceName = false // determine if user has created a device name // if they do have a device name, navigate to Map // Otherwise navigate to Welcome + React.useEffect(() => { + if (!hasCreatedDeviceName) { + router.navigate({ to: '/Onboarding' }) + } else { + router.navigate({ to: '/tab1' }) + } + }, [hasCreatedDeviceName]) - router.navigate({ to: '/Welcome' }) return ( diff --git a/src/renderer/vite-env.d.ts b/src/renderer/vite-env.d.ts index 653591f..e0d0326 100644 --- a/src/renderer/vite-env.d.ts +++ b/src/renderer/vite-env.d.ts @@ -1,4 +1,5 @@ /// +/// // interface ImportMetaEnv { // // Define any renderer-exposed environment variables diff --git a/src/renderer/vite.config.js b/src/renderer/vite.config.js index d26473e..6c872d9 100644 --- a/src/renderer/vite.config.js +++ b/src/renderer/vite.config.js @@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url' import { TanStackRouterVite } from '@tanstack/router-plugin/vite' import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' +import svgr from 'vite-plugin-svgr' const PROJECT_ROOT_DIR = fileURLToPath(new URL('../../', import.meta.url)) @@ -28,6 +29,15 @@ export default defineConfig((configEnv) => { outDir: path.join(PROJECT_ROOT_DIR, 'dist/renderer'), emptyOutDir: true, }, - plugins: [TanStackRouterVite(), react()], + plugins: [ + TanStackRouterVite(), + react(), + svgr({ + include: '**/*.svg', + svgrOptions: { + icon: true, + }, + }), + ], } })