fix: Design Fit and Finish (#193)

Author: alexs-mparticle

core-sdk-samples/higgs-shop-sample-app/src/components/APIKeyModal/APIKeyEntryModal.test.tsx

@@ -31,9 +31,7 @@ describe('API Key Entry Modal', () => {
             name: /learn/i,
         });
 
-        const keyTextField = screen.getByRole('textbox', {
-            name: /key/i,
-        });
+        const keyTextField = screen.getByTestId('apiKey-entry');
 
         const saveAndGoButton = screen.getByRole('button', {
             name: 'Save & Go',
@@ -55,19 +53,15 @@ describe('API Key Entry Modal', () => {
             <APIKeyEntryModal isOpen initialKey='XXXXXX' />,
         );
 
-        const keyTextField = screen.getByRole('textbox', {
-            name: /key/i,
-        });
+        const keyTextField = screen.getByTestId('apiKey-entry');
 
         expect(keyTextField).toHaveValue('XXXXXX');
     });
 
     test('should enable Save & Go button if API Key is Entered', async () => {
         renderWithAPIKeyContext(<APIKeyEntryModal isOpen />);
 
-        const keyTextField = screen.getByRole('textbox', {
-            name: /key/i,
-        });
+        const keyTextField = screen.getByTestId('apiKey-entry');
 
         const saveAndGoButton = screen.getByRole('button', {
             name: 'Save & Go',
@@ -83,9 +77,7 @@ describe('API Key Entry Modal', () => {
     test('should close only if API Key is entered and reload window', async () => {
         renderWithAPIKeyContext(<APIKeyEntryModal isOpen />);
 
-        const keyTextField = screen.getByRole('textbox', {
-            name: /key/i,
-        });
+        const keyTextField = screen.getByTestId('apiKey-entry');
 
         const saveAndGoButton = screen.getByRole('button', {
             name: 'Save & Go',

core-sdk-samples/higgs-shop-sample-app/src/components/APIKeyModal/APIKeyEntryModal.tsx

@@ -87,18 +87,31 @@ const APIKeyEntryModal: React.FC<APIKeyEntryModalProps> = ({
             </Grid>
             <Grid item>
                 <DialogContent>
-                    <Typography variant='body1' align='center'>
+                    <Typography
+                        variant='body1'
+                        align='center'
+                        sx={{
+                            fontSize: '14px',
+                            fontWeight: '700',
+                            lineHeight: '20px',
+                            letterSpacing: '0.13px',
+                        }}
+                    >
                         To get started, add the web key you generated in
                         mParticle to connect this sample app to your account.
                     </Typography>
                 </DialogContent>
             </Grid>
             <Grid item xs={12} sx={{ width: '100%' }}>
-                <DialogContent>
+                <DialogContent sx={{ py: 0 }}>
                     <FormControl fullWidth focused required>
                         <TextField
                             id='apiKey'
-                            label='Key'
+                            // Use inputProps to target for testing because of Material UI's
+                            // component abstraction and because we are not using a label
+                            // to fetch via getByRole
+                            // https://stackoverflow.com/questions/57110557/react-testing-library-the-given-element-does-not-have-a-value-setter-when-firee
+                            inputProps={{ 'data-testid': 'apiKey-entry' }}
                             value={currentAPIKey}
                             placeholder='Paste your Key here'
                             onChange={(e) => setCurrentAPIKey(e.target.value)}

core-sdk-samples/higgs-shop-sample-app/src/components/APIKeyModal/APIKeyEnvMessageModal.tsx

@@ -21,18 +21,18 @@ const APIKeyEnvMessageModal: React.FC<APIKeyEnvMessageModalProps> = ({
             buttonAction={
                 <>
                     <Button
-                        variant='contained'
+                        variant='outlined'
                         target='_blank'
-                        href={SAMPLE_APP_README_GITHUB_REPOSITORY_URL}
+                        href={DOCSITE_API_KEY_QUICKSTART}
                     >
-                        Go to Readme
+                        Go to Docs
                     </Button>
                     <Button
                         variant='contained'
                         target='_blank'
-                        href={DOCSITE_API_KEY_QUICKSTART}
+                        href={SAMPLE_APP_README_GITHUB_REPOSITORY_URL}
                     >
-                        Go to Docs
+                        Go to Readme
                     </Button>
                 </>
             }

core-sdk-samples/higgs-shop-sample-app/src/components/MessageModal/MessageModal.tsx

@@ -2,6 +2,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    Grid,
     Typography,
 } from '@mui/material';
 import React from 'react';
@@ -18,12 +19,30 @@ const MessageModal: React.FC<MessageModalProps> = ({
 }) => {
     return (
         <Dialog open={open}>
-            <DialogContent>
-                <Typography variant='body1' align='center'>
-                    {message}
-                </Typography>
-            </DialogContent>
-            {buttonAction && <DialogActions>{buttonAction}</DialogActions>}
+            <Grid
+                container
+                columns={1}
+                spacing={2}
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Grid item>
+                    <DialogContent>
+                        <Typography variant='body1' align='center'>
+                            {message}
+                        </Typography>
+                    </DialogContent>
+                </Grid>
+                {buttonAction && (
+                    <Grid item>
+                        <DialogActions>{buttonAction}</DialogActions>
+                    </Grid>
+                )}
+            </Grid>
         </Dialog>
     );
 };

core-sdk-samples/higgs-shop-sample-app/src/components/NavigationMenu/NavigationMenu.tsx

@@ -160,28 +160,15 @@ const NavigationMenu: React.FC = () => {
     // The following desktop navigation items use mParticle.logEvent
     // internally so that they stay DRY and handle optional callbacks.
     const topNavDesktopItems: ReactElement[] = [
-        // Space for missing About Us section
-        <Box key='spacer' sx={{ width: '220px' }} />,
-
         <NavigationMenuItem
             testId='desktop-nav-shop-button'
             component={Link}
             to='/shop'
             sx={classes.link}
-            label='Shop'
+            label='Shop All'
             key='Shop'
         />,
 
-        // Hide until About us content is available
-        // <NavigationMenuItem
-        //     testId='desktop-nav-about-button'
-        //     component={Link}
-        //     to='/about'
-        //     sx={classes.link}
-        //     label='About'
-        //     key='About'
-        // />,
-
         <MenuItem
             data-testid='desktop-nav-home-button'
             aria-label='Desktop Home Page'
@@ -193,15 +180,18 @@ const NavigationMenu: React.FC = () => {
             <HiggsmartLogo />
         </MenuItem>,
 
-        <NavigationMenuItem
-            testId='desktop-nav-account-button'
+        <IconButton
+            aria-label='Account'
+            data-testid='desktop-nav-account-button'
             component={Link}
-            to='/account'
+            to='/Account'
             sx={classes.link}
-            label='Account'
-            iconLeft={<PersonIcon sx={classes.topnavLinkIcon} />}
             key='Account'
-        />,
+        >
+            <Badge color='primary'>
+                <PersonIcon sx={classes.topnavLinkIcon} />
+            </Badge>
+        </IconButton>,
 
         <IconButton
             aria-label='Cart'
@@ -229,18 +219,6 @@ const NavigationMenu: React.FC = () => {
             iconLeft={<CheckroomIcon sx={classes.drawerLinkIcon} />}
         />,
 
-        // Hide until About us content is available
-        // <NavigationMenuItem
-        //     testId='drawer-nav-about-button'
-        //     key='about'
-        //     component={Link}
-        //     to='/about'
-        //     sx={classes.drawerLink}
-        //     clickCallback={closeDrawer}
-        //     label='About'
-        //     iconLeft={<InfoIcon sx={classes.drawerLinkIcon} />}
-        // />,
-
         <NavigationMenuItem
             testId='drawer-nav-account-button'
             key='account'

core-sdk-samples/higgs-shop-sample-app/src/contexts/theme.tsx

@@ -30,6 +30,15 @@ const theme = createTheme({
             lineHeight: '56px',
             textAlign: 'center',
         },
+        h4: {
+            color: '#FFFFFF',
+            fontFamily,
+            fontStyle: 'normal',
+            fontWeight: 800,
+            fontSize: '34px',
+            lineHeight: '36px',
+            textAlign: 'center',
+        },
         h5: {
             color: '#FFFFFF',
             fontFamily,