Merge pull request #205 from cboard-org/improve-main-buttons

Improve the styling of the main flow buttons

src/app/[locale]/dashboard/[id]/@promptForm/PromptForm.tsx

@@ -29,27 +29,32 @@ import styles from './styles';
 import Tooltip from '@mui/material/Tooltip';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import Button from '@mui/material/Button';
 
 const totalRows = 12;
 const totalColumns = 12;
 
 function SubmitButton({ text }: { text: string }) {
   const { pending } = useFormStatus();
+  const message = useTranslations('PromptForm');
 
   return (
     <Box>
       <Tooltip title={text}>
-        <IconButton
+        <Button
           type="submit"
           disabled={pending}
-          sx={styles.submitIconButton}
+          sx={styles.submitButton}
+          startIcon={
+            pending ? (
+              <CircularProgress size={25} sx={{ justifyContent: 'center' }} />
+            ) : (
+              <AutoFixNormalIcon sx={styles.submitIcon} />
+            )
+          }
         >
-          {pending ? (
-            <CircularProgress size={25} sx={{ justifyContent: 'center' }} />
-          ) : (
-            <AutoFixNormalIcon sx={styles.submitIcon} />
-          )}
-        </IconButton>
+          {message('submitText')}
+        </Button>
       </Tooltip>
     </Box>
   );

src/app/[locale]/dashboard/[id]/@promptForm/styles.ts

@@ -10,13 +10,19 @@ export default {
     width: '100%',
     maxWidth: INITIAL_CONTENT_MAX_WIDTH,
   },
-  submitIconButton: {
+  submitButton: {
+    color: (theme) => theme.palette.primary.contrastText,
+    marginRight: '6px',
+    minWidth: '112px',
+    borderRadius,
     backgroundColor: (theme) => theme.palette.primary.main,
     '&:hover': {
       backgroundColor: (theme) => theme.palette.primary.dark,
     },
   },
-  submitIcon: { color: (theme) => theme.palette.primary.contrastText },
+  submitIcon: {
+    color: (theme) => theme.palette.primary.contrastText,
+  },
   promptImputsContainer: {
     color: (theme) => theme.palette.primary.contrastText,
   },

src/components/ExportToCboard/ExportToCboard.tsx

@@ -2,6 +2,7 @@
 import Button from '@mui/material/Button';
 import NorthEast from '@mui/icons-material/NorthEast';
 import { useTranslations } from 'next-intl';
+import styles from './styles';
 import { useExportToCboard } from './useExportToCboard';
 import { useBoundStore } from '@/providers/StoreProvider';
 
@@ -15,7 +16,7 @@ export default function ExportToCboard() {
       variant="contained"
       color="primary"
       startIcon={<NorthEast />}
-      sx={{ fontSize: '0.7rem' }}
+      sx={styles.exportButton}
       onClick={() => board && onExport(board)}
     >
       {message('exportToCboard')}

src/components/ExportToCboard/styles.ts

@@ -0,0 +1,9 @@
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+const borderRadius = 6;
+
+export default {
+  exportButton: {
+    borderRadius,
+  },
+} satisfies Record<string, SxProps>;

src/intl/cbuilder.json

@@ -18,7 +18,8 @@
     "prompt": "Create a board about:",
     "useAiPictograms": "Use AI Pictograms",
     "newBoard": "New board",
-    "newAACBoard": "New AAC board"
+    "newAACBoard": "New AAC board",
+    "submitText": "Create"
   },
   "Board": {
     "InitialContent": {

src/intl/dictionaries/en-US.json

@@ -18,7 +18,8 @@
     "prompt": "Create a board about:",
     "useAiPictograms": "Use AI Pictograms",
     "newBoard": "New board",
-    "newAACBoard": "New AAC board"
+    "newAACBoard": "New AAC board",
+    "submitText": "Create"
   },
   "Board": {
     "InitialContent": {

src/intl/dictionaries/es-ES.json

@@ -18,7 +18,8 @@
     "prompt": "Crea un tablero sobre:",
     "useAiPictograms": "Usar pictogramas de IA",
     "newBoard": "Nuevo tablero",
-    "newAACBoard": "Nuevo tablero de CAA"
+    "newAACBoard": "Nuevo tablero de CAA",
+    "submitText": "Crear"
   },
   "Board": {
     "InitialContent": {