feat: modernize UI with MUI and ODE tokens

formulus-formplayer/package.json

@@ -13,6 +13,7 @@
     "@mui/icons-material": "^6.4.8",
     "@mui/material": "^6.4.8",
     "@mui/x-date-pickers": "^7.28.0",
+    "@ode/tokens": "file:../packages/tokens",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",

formulus-formplayer/src/App.tsx

@@ -3,7 +3,8 @@ import "./App.css";
 import { JsonForms } from "@jsonforms/react";
 import { materialRenderers, materialCells } from "@jsonforms/material-renderers";
 import { JsonSchema7 } from "@jsonforms/core";
-import { Alert, Snackbar, CircularProgress, Box, Typography } from '@mui/material';
+import { Alert, Snackbar, CircularProgress, Box, Typography, ThemeProvider } from '@mui/material';
+import { theme } from './theme';
 import Ajv from 'ajv';
 import addErrors from 'ajv-errors';
 import addFormats from 'ajv-formats';
@@ -557,15 +558,16 @@ function App() {
   });
 
   return (
-    <FormContext.Provider value={{ formInitData }}>
-      <div
-        className="App"
-        style={{
-          display: 'flex',
-          height: '100dvh', // Use dynamic viewport height for mobile keyboard support
-          width: '100%'
-        }}
-      >
+    <ThemeProvider theme={theme}>
+      <FormContext.Provider value={{ formInitData }}>
+        <div
+          className="App"
+          style={{
+            display: 'flex',
+            height: '100dvh', // Use dynamic viewport height for mobile keyboard support
+            width: '100%'
+          }}
+        >
         {/* Main app content - 60% width in development mode */}
         <div
           style={{
@@ -641,7 +643,8 @@ function App() {
           </div>
         )}
       </div>
-    </FormContext.Provider>
+      </FormContext.Provider>
+    </ThemeProvider>
   );
 }
 

formulus-formplayer/src/FormLayout.tsx

@@ -145,14 +145,14 @@ const FormLayout: React.FC<FormLayoutProps> = ({
           >
             {previousButton && (
               <Button
-                variant="contained"
+                variant="outlined"
                 onClick={previousButton.onClick}
                 disabled={previousButton.disabled}
                 fullWidth={false}
                 sx={{
-                  // Ensure buttons are touch-friendly
-                  minHeight: { xs: '44px', sm: '36px' }, // iOS recommended touch target
-                  fontSize: { xs: '1rem', sm: '0.875rem' },
+                  // Ensure buttons are touch-friendly (Material Design minimum: 48dp)
+                  minHeight: { xs: '48px', sm: '48px' },
+                  fontSize: { xs: '0.875rem', sm: '0.875rem' },
                 }}
               >
                 {previousButton.label || 'Previous'}
@@ -165,9 +165,9 @@ const FormLayout: React.FC<FormLayoutProps> = ({
                 disabled={nextButton.disabled}
                 fullWidth={false}
                 sx={{
-                  // Ensure buttons are touch-friendly
-                  minHeight: { xs: '44px', sm: '36px' }, // iOS recommended touch target
-                  fontSize: { xs: '1rem', sm: '0.875rem' },
+                  // Ensure buttons are touch-friendly (Material Design minimum: 48dp)
+                  minHeight: { xs: '48px', sm: '48px' },
+                  fontSize: { xs: '0.875rem', sm: '0.875rem' },
                 }}
               >
                 {nextButton.label || 'Next'}

formulus-formplayer/src/PhotoQuestionRenderer.tsx

@@ -240,13 +240,14 @@ const PhotoQuestionRenderer: React.FC<PhotoQuestionProps> = ({
         </Card>
       ) : (
         <Box sx={{ 
-          border: '2px dashed #ccc', 
+          border: '2px dashed', 
+          borderColor: 'divider',
           borderRadius: 2, 
           p: 3, 
           textAlign: 'center',
-          backgroundColor: '#fafafa'
+          backgroundColor: 'grey.50'
         }}>
-          <PhotoCamera sx={{ fontSize: 48, color: '#ccc', mb: 2 }} />
+          <PhotoCamera sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
           <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
             {currentPhotoData?.filename ? 'Photo taken' : 'No photo taken yet'}
           </Typography>

formulus-formplayer/src/QrcodeQuestionRenderer.tsx

@@ -220,13 +220,14 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
         </Card>
       ) : (
         <Box sx={{ 
-          border: '2px dashed #ccc', 
+          border: '2px dashed', 
+          borderColor: 'divider',
           borderRadius: 2, 
           p: 3, 
           textAlign: 'center',
-          backgroundColor: '#fafafa'
+          backgroundColor: 'grey.50'
         }}>
-          <QrCodeScanner sx={{ fontSize: 48, color: '#ccc', mb: 2 }} />
+          <QrCodeScanner sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
           <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
             No QR code scanned yet
           </Typography>
@@ -255,7 +256,6 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
               disabled={!enabled}
               variant="outlined"
               placeholder="Enter QR code value manually..."
-              size="small"
             />
           </Box>
         </Box>

formulus-formplayer/src/SignatureQuestionRenderer.tsx

@@ -259,13 +259,14 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
             Draw your signature below:
           </Typography>
           <Box sx={{ 
-            border: '2px dashed #ccc', 
+            border: '2px dashed', 
+            borderColor: 'divider',
             borderRadius: 1, 
             p: 1, 
             mb: 2,
             display: 'flex',
             justifyContent: 'center',
-            backgroundColor: '#fafafa'
+            backgroundColor: 'grey.50'
           }}>
             <canvas
               ref={canvasRef}