update UI for initial onboarding screen (#109)

Author: achou11

messages/renderer/en.json

@@ -89,8 +89,14 @@
   "screens.DeviceNamingScreen.title": {
     "message": "Name Your Device"
   },
+  "screens.IntroToCoMapeo.appDescription": {
+    "message": "View and manage observations collected with CoMapeo Mobile."
+  },
   "screens.IntroToCoMapeo.collaborate": {
-    "message": "Collaborate with others"
+    "message": "Collaborate on projects"
+  },
+  "screens.IntroToCoMapeo.comapeoDesktop": {
+    "message": "<b><orange>Co</orange>Mapeo</b> <blue>Desktop</blue>"
   },
   "screens.IntroToCoMapeo.designedFor": {
     "message": "Designed with and for Indigenous peoples & frontline communities"
@@ -104,9 +110,6 @@
   "screens.IntroToCoMapeo.ownData": {
     "message": "Own and control your data"
   },
-  "screens.IntroToCoMapeo.viewAndManage": {
-    "message": "View and manage observations in CoMapeo Mobile Projects."
-  },
   "screens.JoinProjectScreen.declineInvite": {
     "message": "Decline Invite"
   },

src/main/app.js

@@ -180,8 +180,10 @@ function setupIpc({ intl }) {
  */
 function initMainWindow({ appMode, services }) {
 	const mainWindow = new BrowserWindow({
-		height: 600,
-		width: 800,
+		width: 1200,
+		minWidth: 800,
+		height: 800,
+		minHeight: 500,
 		show: false,
 		backgroundColor: '#050F77',
 		webPreferences: { preload: MAIN_WINDOW_PRELOAD_PATH },

src/renderer/src/App.tsx

@@ -1,3 +1,4 @@
+import { StrictMode } from 'react'
 import { ClientApiProvider } from '@comapeo/core-react'
 import { CssBaseline, ThemeProvider } from '@mui/material'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -28,21 +29,25 @@ declare module '@tanstack/react-router' {
 	}
 }
 
-const PersistedProjectIdStore = createActiveProjectIdStore({
+const persistedProjectIdStore = createActiveProjectIdStore({
 	persist: true,
 })
 
-export const App = () => (
-	<ThemeProvider theme={theme}>
-		<CssBaseline />
-		<IntlProvider>
-			<QueryClientProvider client={queryClient}>
-				<ClientApiProvider clientApi={clientApi}>
-					<ActiveProjectIdProvider store={PersistedProjectIdStore}>
-						<RouterProvider router={router} />
-					</ActiveProjectIdProvider>
-				</ClientApiProvider>
-			</QueryClientProvider>
-		</IntlProvider>
-	</ThemeProvider>
-)
+export function App() {
+	return (
+		<StrictMode>
+			<ThemeProvider theme={theme}>
+				<CssBaseline />
+				<IntlProvider>
+					<QueryClientProvider client={queryClient}>
+						<ClientApiProvider clientApi={clientApi}>
+							<ActiveProjectIdProvider store={persistedProjectIdStore}>
+								<RouterProvider router={router} />
+							</ActiveProjectIdProvider>
+						</ClientApiProvider>
+					</QueryClientProvider>
+				</IntlProvider>
+			</ThemeProvider>
+		</StrictMode>
+	)
+}

src/renderer/src/Theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material/styles'
+import { createTheme, responsiveFontSizes } from '@mui/material/styles'
 
 import {
 	ALMOST_BLACK,
@@ -20,10 +20,35 @@ declare module '@mui/material/Button' {
 	}
 }
 
-const theme = createTheme({
+declare module '@mui/material/styles' {
+	interface TypographyVariants {
+		bannerTitle: React.CSSProperties
+		bannerSubtitle: React.CSSProperties
+	}
+
+	interface TypographyVariantsOptions {
+		bannerTitle?: React.CSSProperties
+		bannerSubtitle?: React.CSSProperties
+	}
+
+	interface TypeText {
+		inverted: string
+	}
+}
+
+declare module '@mui/material/Typography' {
+	interface TypographyPropsVariantOverrides {
+		bannerTitle: true
+		bannerSubtitle: true
+	}
+}
+
+const baseTheme = createTheme({
+	spacing: 4,
 	typography: {
-		fontFamily: 'Rubik, sans-serif',
-		fontSize: 12,
+		fontFamily: `'Rubik Variable', sans-serif`,
+		fontWeightBold: 500,
+		fontSize: 16,
 		body1: {
 			fontSize: '1rem',
 		},
@@ -38,7 +63,6 @@ const theme = createTheme({
 		},
 		button: {
 			fontSize: '1rem',
-			fontWeight: 700,
 			textTransform: 'none',
 		},
 		caption: {
@@ -52,11 +76,21 @@ const theme = createTheme({
 			fontSize: '1.5rem',
 			fontWeight: 600,
 		},
+		bannerTitle: {
+			fontSize: '6rem',
+			lineHeight: 1,
+		},
+		bannerSubtitle: {
+			fontSize: '1.5rem',
+			fontWeight: 500,
+			lineHeight: 1.25,
+		},
 	},
 	palette: {
 		text: {
 			primary: ALMOST_BLACK,
 			secondary: DARK_GREY,
+			inverted: WHITE,
 		},
 		primary: {
 			main: COMAPEO_BLUE,
@@ -95,7 +129,7 @@ const theme = createTheme({
 				variant: 'contained',
 			},
 			styleOverrides: {
-				root: ({ ownerState }) => ({
+				root: ({ ownerState, theme }) => ({
 					...(ownerState.variant === 'outlined' && {
 						borderColor: '#CCCCD6',
 						borderWidth: 1,
@@ -106,16 +140,30 @@ const theme = createTheme({
 							borderWidth: 1,
 						},
 					}),
-					borderRadius: 32,
-					textTransform: 'none',
-					fontSize: '1rem',
-					fontWeight: 400,
-					paddingVertical: 12,
+					borderRadius: theme.spacing(8),
 				}),
 			},
 		},
 	},
-	spacing: 1,
+})
+
+const theme = responsiveFontSizes(baseTheme, {
+	breakpoints: ['xs', 'sm', 'md', 'lg', 'xl'],
+	variants: [
+		'bannerSubtitle',
+		'bannerTitle',
+		'body1',
+		'body2',
+		'button',
+		'caption',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'subtitle1',
+		'subtitle2',
+	],
 })
 
 export { theme }

src/renderer/src/components/button-link.tsx

@@ -0,0 +1,10 @@
+/**
+ * Based on
+ * https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#button
+ */
+import MUIButton, { type ButtonProps } from '@mui/material/Button'
+import { createLink } from '@tanstack/react-router'
+
+export const ButtonLink = createLink((props: ButtonProps<'a'>) => {
+	return <MUIButton component="a" ref={props.ref} {...props} />
+})

src/renderer/src/contexts/IntlContext.tsx

@@ -3,11 +3,27 @@ import {
 	use,
 	useCallback,
 	useState,
+	type ComponentProps,
 	type PropsWithChildren,
 } from 'react'
 import { IntlProvider as ReactIntlProvider } from 'react-intl'
 
 import en from '../../../../translations/renderer/en.json'
+import { CORNFLOWER_BLUE, ORANGE } from '../colors'
+
+const RICH_TEXT_MAPPINGS: ComponentProps<
+	typeof ReactIntlProvider
+>['defaultRichTextElements'] = {
+	b: (parts) => {
+		return <b>{parts}</b>
+	},
+	orange: (parts) => {
+		return <span style={{ color: ORANGE }}>{parts}</span>
+	},
+	blue: (parts) => {
+		return <span style={{ color: CORNFLOWER_BLUE }}>{parts}</span>
+	},
+}
 
 const messages = { en }
 
@@ -28,6 +44,7 @@ export function IntlProvider({ children }: PropsWithChildren) {
 			messages={messages[locale]}
 			locale={locale}
 			defaultLocale="en"
+			defaultRichTextElements={RICH_TEXT_MAPPINGS}
 		>
 			<LocaleContext value={updateLocale}>{children}</LocaleContext>
 		</ReactIntlProvider>

src/renderer/src/index.css

@@ -1,11 +1,11 @@
-html,
-body,
-#app {
+@import '@fontsource-variable/rubik';
+
+html {
 	font-family:
 		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
 		sans-serif;
-	margin: auto;
-	height: 100%;
-	margin: 0;
-	padding: 0;
+}
+
+body {
+	min-height: 100vh;
 }