feat: add support to rename flow step

packages/web/src/styles/theme.js

@@ -158,6 +158,10 @@ export const defaultTheme = createTheme({
         fontSize: referenceTheme.typography.pxToRem(16),
       },
     },
+    stepApp: {
+      fontSize: referenceTheme.typography.pxToRem(12),
+      color: '#5C5C5C',
+    },
   },
   components: {
     MuiAppBar: {
@@ -211,6 +215,23 @@ export const defaultTheme = createTheme({
         }),
       },
     },
+    MuiChip: {
+      variants: [
+        {
+          props: { variant: 'stepType' },
+          style: ({ theme }) => ({
+            color: '#001F52',
+            fontSize: theme.typography.pxToRem(12),
+            border: '1px solid',
+            borderColor: alpha(theme.palette.primary.main, 0.3),
+            bgcolor: alpha(
+              theme.palette.primary.main,
+              theme.palette.action.selectedOpacity,
+            ),
+          }),
+        },
+      ],
+    },
     MuiContainer: {
       defaultProps: {
         maxWidth: 'xl',
@@ -294,6 +315,7 @@ export const defaultTheme = createTheme({
     },
   },
 });
+
 export const mationTheme = createTheme(
   deepmerge(defaultTheme, {
     palette: {
@@ -315,4 +337,5 @@ export const mationTheme = createTheme(
     },
   }),
 );
+
 export default defaultTheme;