Fix small issues

Change-type: patch
balena-io-modules · Sep 11, 2023 · c27f7e7 · c27f7e7
1 parent 81f19c0
commit c27f7e7
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 42 deletions.
diff --git a/.storybook/global.css b/.storybook/global.css
@@ -0,0 +1,31 @@
+/* Prevent intercom lanucher from showing up */
+.ic-launcher #intercom-container,
+.intercom-launcher {
+	display: none;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	font-family: 'Source Sans Pro', Helvetica, sans-serif;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+	color: #00aeef; /** TODO fetch from design tokens **/
+}
+
+a:hover {
+	color: #008bbf;
+}
+
+table {
+	border-spacing: 0;
+	border-collapse: collapse;
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&family=Ubuntu+Mono:wght@400;700&display=fallback&display=swap"
+	rel="stylesheet"
+/>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Preview } from '@storybook/react';
 import { AnalyticsContextProvider } from '../src/contexts/AnalyticsContext';
-import { ThemeProvider } from '@mui/material';
+import { CssBaseline, ScopedCssBaseline, ThemeProvider } from '@mui/material';
 import { theme } from '../src/theme';
+import './global.css';
 
 const preview: Preview = {
 	parameters: {
@@ -13,11 +14,18 @@ const preview: Preview = {
 				date: /Date$/,
 			},
 		},
+		options: {
+			storySort: {
+				order: ['*', 'Other'],
+			},
+		},
 	},
 	decorators: [
 		(Story) => (
 			<ThemeProvider theme={theme}>
-				<Story />
+				<ScopedCssBaseline>
+					<Story />
+				</ScopedCssBaseline>
 			</ThemeProvider>
 		),
 		(Story) => (

diff --git a/src/components/DownloadImageDialog/ApplicationInstructions.tsx b/src/components/DownloadImageDialog/ApplicationInstructions.tsx
@@ -17,14 +17,7 @@ import {
 	KeysOfUnion,
 	OsSpecificContractInstructions,
 } from './models';
-
-const StyledSpan = styled(Typography)(
-	({ theme }) => `
-	a {
-		color: ${theme.typography.link.color}
-	}
-`,
-);
+import { OrderedListItem } from '../OrderedListItem';
 
 export type OsOptions = ReturnType<typeof getUserOs>;
 
@@ -198,25 +191,8 @@ const InstructionsItem = (props: InstructionsItemProps) => {
 	}
 
 	return (
-		<ListItem>
-			<ListItemIcon>
-				<Box
-					sx={{
-						borderRadius: '50%',
-						backgroundColor: 'info.main',
-						width: '30px',
-						height: '30px',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'center',
-						color: 'white',
-						fontWeight: 'bold',
-					}}
-				>
-					{index + 1}
-				</Box>
-			</ListItemIcon>
-			<StyledSpan dangerouslySetInnerHTML={{ __html: text }} />
+		<OrderedListItem index={index + 1}>
+			<Typography dangerouslySetInnerHTML={{ __html: text }} />
 
 			{hasChildren && (
 				<List>
@@ -225,7 +201,7 @@ const InstructionsItem = (props: InstructionsItemProps) => {
 					})}
 				</List>
 			)}
-		</ListItem>
+		</OrderedListItem>
 	);
 };
 

diff --git a/src/components/DownloadImageDialog/DownloadImageDialog.stories.tsx b/src/components/DownloadImageDialog/DownloadImageDialog.stories.tsx
@@ -823,7 +823,7 @@ const Template = (
 };
 
 const meta = {
-	title: 'Other/DownloadImageDialog',
+	title: 'Patterns/DownloadImageDialog',
 	component: Template,
 	tags: ['autodocs'],
 } satisfies Meta<typeof Template>;

diff --git a/src/components/DownloadImageDialog/ImageForm.tsx b/src/components/DownloadImageDialog/ImageForm.tsx
@@ -205,7 +205,7 @@ export const ImageForm: React.FC<ImageFormProps> = memo(
 							<InputLabel sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
 								Select device type{' '}
 								<Tooltip title="Applications can support any devices that share the same architecture as their default device type.">
-									<HelpIcon color="info" />
+									<HelpIcon color="info" sx={{ fontSize: '1rem', ml: 1 }} />
 								</Tooltip>
 							</InputLabel>
 							<Select
@@ -367,9 +367,13 @@ export const ImageForm: React.FC<ImageFormProps> = memo(
 								<MUILinkWithTracking
 									href={POLL_INTERVAL_DOCS}
 									target="_blank"
-									height="24px"
+									sx={{
+										display: 'flex',
+										alignItems: 'center',
+										height: '1.5rem',
+									}}
 								>
-									<ArticleIcon />
+									<ArticleIcon sx={{ ml: 1, fontSize: '1.15rem' }} />
 								</MUILinkWithTracking>
 							</FormLabel>
 							<TextField

diff --git a/src/components/DownloadImageDialog/index.tsx b/src/components/DownloadImageDialog/index.tsx
@@ -434,7 +434,7 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 				</Button>
 			</DialogTitle>
 			<DialogContent>
-				<Grid container py={3} spacing={4}>
+				<Grid container pb={3} spacing={4}>
 					<Grid item xs={12} sm={12} md={6} lg={7}>
 						{(isFetching || isDownloadingConfig) && (
 							<Skeleton variant="rectangular" height="200px" />
@@ -491,7 +491,7 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 					);
 				})}
 			</DialogContent>
-			<DialogActions sx={{ display: 'flex', justifyContent: 'start' }}>
+			<DialogActions sx={{ display: 'flex', justifyContent: 'end' }}>
 				<DropDownButton className="e2e-download-image-submit" items={actions} />
 			</DialogActions>
 		</Dialog>

diff --git a/src/components/OrderedListItem/OrderedListItem.stories.tsx b/src/components/OrderedListItem/OrderedListItem.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OrderedListItem } from '.';
+import { Typography } from '@mui/material';
+
+const meta = {
+	title: 'Typography/Ordered List Item',
+	component: OrderedListItem,
+	tags: ['autodocs'],
+} satisfies Meta<typeof OrderedListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		index: 1,
+		children: <Typography variant="body1">Hello world</Typography>,
+	},
+};
diff --git a/src/components/OrderedListItem/index.tsx b/src/components/OrderedListItem/index.tsx
@@ -0,0 +1,44 @@
+import {
+	Avatar,
+	Box,
+	ListItem,
+	ListItemIcon,
+	ListItemProps,
+	Typography,
+} from '@mui/material';
+
+export interface OrderedListItemProps extends ListItemProps {
+	index: number;
+}
+
+export const OrderedListItem: React.FC<OrderedListItemProps> = ({
+	index,
+	children,
+	...orderedListItemProps
+}) => {
+	return (
+		<ListItem
+			sx={{ pl: 0, ...orderedListItemProps.sx }}
+			{...orderedListItemProps}
+		>
+			<ListItemIcon>
+				<Box
+					sx={{
+						borderRadius: '50%',
+						backgroundColor: 'info.main',
+						width: '1.5em',
+						height: '1.5em',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+					}}
+				>
+					<Typography variant="body2" color="white">
+						{index}
+					</Typography>
+				</Box>
+			</ListItemIcon>
+			{children}
+		</ListItem>
+	);
+};
diff --git a/src/theme.ts b/src/theme.ts
@@ -181,23 +181,23 @@ export const theme = createTheme({
 		h6: {
 			fontSize: '1rem',
 			'@media (min-width:600px)': {
-				fontSize: '1.125 rem',
+				fontSize: '1.125rem',
 			},
 		},
 		bodyLarge: {
 			fontSize: '1.125rem',
 			'@media (min-width:600px)': {
-				fontSize: '1.25 rem',
+				fontSize: '1.25rem',
 			},
 		},
 		body1: {
-			fontSize: '1rem',
+			fontSize: '.875rem',
 		},
 		body2: {
-			fontSize: '0.875rem',
+			fontSize: '0.75rem',
 		},
 		smallText: {
-			fontSize: '12px',
+			fontSize: '0.75rem',
 			color: '#828282',
 		},
 		link: {
@@ -237,7 +237,9 @@ export const theme = createTheme({
 			dark: '#0C0C0C',
 		},
 		background: {
-			default: '#F8F9FD',
+			// FIXME was added for hub but causes issues for ui. Should we have a theme
+			// override for hub ?
+			// default: '#F8F9FD',
 		},
 		text: {
 			primary: '#2A506F',
@@ -348,6 +350,7 @@ export const theme = createTheme({
 			styleOverrides: {
 				tooltip: {
 					backgroundColor: 'black',
+					fontSize: '.75rem',
 				},
 				arrow: {
 					color: 'black',
@@ -358,6 +361,18 @@ export const theme = createTheme({
 			styleOverrides: {
 				root: {
 					color: '#00AEEF',
+					textDecoration: 'none',
+					'&:hover': {
+						color: '#008bbf',
+					},
+				},
+			},
+		},
+		MuiListItemIcon: {
+			styleOverrides: {
+				root: {
+					minWidth: 'auto',
+					marginRight: '.5rem',
 				},
 			},
 		},