Merge branch 'cmwimo/CT-2389' into cmwimo/CT-2392

Author: Clement Mwimo

architectureDecisionRecords/0001Styling.md

@@ -14,10 +14,18 @@ Tailwind pollutes your jsx with a lot of classnames, and requires you to learn a
 
 CSS modules gives a lot of the benefits of styled components, but with faster performance. Using CSS modules will keep our basic css skills in tact.
 
+We also need to work with both CSS modules and MXUI. MXUI uses [MUI](https://mui.com/) under the hood, which provides its own styling mechanisms (the `sx` and `xs` props). This means we need clear guidance on when to reach for CSS modules versus MUI's built-in styling props.
+
 ## Decision
 
 We will use CSS modules to style our html.
 
+When we need to add spacing between two elements, we should use a MUI [Stack](https://mui.com/material-ui/react-stack/) with a `spacing` prop.
+
+When styling elements we should use CSS modules instead of using the `sx` or `xs` props that MUI provides. The only exception to using the `xs` prop is if you need to write breakpoint specific code. MUI does not expose its breakpoints as css theme variables.
+
+When using a Stack we can use all the flexbox related props directly on the Stack except for `gap` and `flexDirection`. We should use the Stack's `direction` and `spacing` props instead. This allows us to quickly write layout code without having to make specific classes for every stack.
+
 ## Consequences
 
-We will have a performant and easy to use system for styling.
+We will have a performant and easy to use system for styling that works consistently across CSS modules and MXUI/MUI.

architectureDecisionRecords/0005SmallPullRequests.md

@@ -0,0 +1,26 @@
+# Title
+
+Small Pull Requests
+
+## Date proposed
+
+08-13-2026
+
+## Context
+
+Large pull requests have the following issues:
+
+1. Exhausting and time consuming to review
+1. Even more exhausting to re-review
+1. Higher likelihood of important things being missed
+1. Higher likelihood of suboptimal work being approved
+1. Slow feedback cycle. You can follow a suboptimal path for longer before getting feedback. This results in more wasted work.
+1. Big merge conflicts
+
+## Decision
+
+We will strive to create small, focused pull requests that fulfill a single purpose.
+
+## Consequences
+
+Code will get merged faster. Code will be of higher quality. Fewer bugs will be introduced. Less time will be wasted on suboptimal paths.

src/ConnectedTokenProvider.tsx

@@ -112,6 +112,17 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        // MUI sizes icon slot children off the button size (medium 20px, large 22px),
+        // which beats the Icon's own size prop. Our chevrons are always 24px.
+        endIcon: {
+          '& > *:nth-of-type(1)': {
+            fontSize: '24px',
+          },
+        },
+      },
+    },
     MuiChip: {
       styleOverrides: {
         label: {
@@ -193,6 +204,7 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
               '--mui-palette-primary-dark': combinedTheme.palette.primary.dark,
               '--mui-palette-primary-contrastText': combinedTheme.palette.primary.contrastText,
               '--mui-palette-error-main': combinedTheme.palette.error.main,
+              '--mui-palette-error-contrastText': combinedTheme.palette.error.contrastText,
               '--mui-palette-text-primary': combinedTheme.palette.text.primary,
               '--mui-palette-text-secondary': combinedTheme.palette.text.secondary,
               '--mui-palette-background-default': combinedTheme.palette.background.default,

src/components/ConnectSuccessSurvey.module.css

@@ -18,10 +18,6 @@
   width: 100%;
 }
 
-.errorMessageText:global(.MuiTypography-root) {
-  font-size: 12px;
-}
-
 .toggleButton:global(.MuiToggleButton-root) {
   align-items: center;
   color: var(--mui-palette-primary-main);

src/components/ConnectSuccessSurvey.tsx

@@ -169,7 +169,7 @@ export const ConnectSuccessSurvey = React.forwardRef<
               spacing={0.5}
             >
               <Icon color="error" fill={true} name="error" size={16} />
-              <Text className={styles.errorMessageText} color="error" variant="XSmall">
+              <Text color="error" truncate={false} variant="ParagraphSmall">
                 {__('Please select an option before continuing.')}
               </Text>
             </Stack>

src/components/DeleteMemberSurvey.js

@@ -148,7 +148,9 @@ export const DeleteMemberSurvey = (props) => {
                           'Why do you want to disconnect %1?',
                           member.name,
                         )}
-                        <span className={styles.asterisk}>*</span>
+                        <Text color="error" component="span" truncate={false} variant="Paragraph">
+                          *
+                        </Text>
                       </Text>
                     </FormLabel>
                     <div>
@@ -174,9 +176,18 @@ export const DeleteMemberSurvey = (props) => {
                   </Stack>
                 </FormControl>
 
-                <span className={styles.requiredNote}>
-                  <span className={styles.requiredNoteAsterisk}>*</span> {__('Required')}
-                </span>
+                <Text
+                  className={styles.requiredNote}
+                  color="textSecondary"
+                  component="span"
+                  truncate={false}
+                  variant="Small"
+                >
+                  <Text color="error" component="span" truncate={false} variant="Small">
+                    *
+                  </Text>{' '}
+                  {__('Required')}
+                </Text>
               </Stack>
 
               {isSubmitted && !selectedReason && (

src/components/DeleteMemberSurvey.module.css

@@ -14,22 +14,10 @@
   width: 100%;
 }
 
-.asterisk {
-  color: var(--mui-palette-error-main);
-  font-size: 15px;
-}
-
-.requiredNote {
-  color: var(--mui-palette-text-secondary);
-  font-size: 13px;
+.requiredNote:global(.MuiTypography-root) {
   margin-bottom: var(--spacing-1-point-5);
 }
 
-.requiredNoteAsterisk {
-  color: var(--mui-palette-error-main);
-  font-size: 13px;
-}
-
 .buttons:global(.MuiStack-root) {
   margin-top: var(--spacing-2-point-5);
 }

src/components/GenericError.module.css

@@ -1,5 +1,5 @@
 .container:global(.MuiStack-root) {
-  background-color: var(--mui-palette-common-white);
+  background-color: var(--mui-palette-background-paper);
   height: 100%;
   text-align: center;
 }

src/components/InstitutionTile.js

@@ -6,8 +6,7 @@ import { __ } from 'src/utilities/Intl'
 import { useTokens } from '@kyper/tokenprovider'
 
 import { Button, Chip } from '@mui/material'
-import { ChevronRight } from '@kyper/icon/ChevronRight'
-import { InstitutionLogo } from '@mxenabled/mxui'
+import { Icon, InstitutionLogo } from '@mxenabled/mxui'
 
 import { formatUrl } from 'src/utilities/FormatUrl'
 import {
@@ -34,11 +33,7 @@ export const InstitutionTile = (props) => {
       aria-label={__('Add account with %1', institution.name)}
       className={'institutionButton '}
       data-test={`${institution.name.replace(/\s+/g, '-')}-row`}
-      endIcon={
-        !institution.is_disabled_by_client && (
-          <ChevronRight color={tokens.TextColor.Default} height={16} width={16} />
-        )
-      }
+      endIcon={!institution.is_disabled_by_client && <Icon name="chevron_right" size={24} />}
       fullWidth={true}
       onClick={selectInstitution}
       startIcon={

src/components/RequiredFieldNote.module.css

@@ -5,7 +5,6 @@
 
 .note:global(.MuiTypography-root) {
   color: var(--mui-palette-text-secondary);
-  font-size: 13px;
 }
 
 .asterisk:global(.MuiTypography-root) {