fix: update styles to be more based on body values

Parkreiner · Parkreiner · commit 40aaa1177214 · 2024-10-18T14:24:08.000Z
diff --git a/plugins/backstage-plugin-coder/src/components/A11yInfoCard/A11yInfoCard.tsx b/plugins/backstage-plugin-coder/src/components/A11yInfoCard/A11yInfoCard.tsx
@@ -6,6 +6,7 @@
  */
 import React, { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
 import { makeStyles } from '@material-ui/core';
+import { scaleCssUnit } from '../../utils/styling';
 
 export type A11yInfoCardProps = Readonly<
   HTMLAttributes<HTMLDivElement> & {
@@ -23,10 +24,7 @@ const useStyles = makeStyles(theme => ({
   },
 
   headerContent: {
-    // Not a fan of using a random <h5> element's styles, but it's the only
-    // typographic category that has a font size of 1.5x the base font size. We
-    // need that size to match the header sizes of the official InfoCard.
-    fontSize: theme.typography.h5.fontSize ?? '1.5rem',
+    fontSize: scaleCssUnit(theme.typography.body1.fontSize, 1.5),
     color: theme.palette.text.primary,
     fontWeight: 700,
     borderBottom: `1px solid ${theme.palette.divider}`,
diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/CoderAuthFormDialog.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/CoderAuthFormDialog.tsx
@@ -7,6 +7,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogActions from '@material-ui/core/DialogActions';
 import { CoderAuthForm } from '../CoderAuthForm/CoderAuthForm';
+import { scaleCssUnit } from '../../utils/styling';
 
 const useStyles = makeStyles(theme => ({
   trigger: {
@@ -41,7 +42,7 @@ const useStyles = makeStyles(theme => ({
   },
 
   dialogTitle: {
-    fontSize: theme.typography.h5.fontSize ?? '24px',
+    fontSize: scaleCssUnit(theme.typography.body1.fontSize, 1.5),
     borderBottom: `${theme.palette.divider} 1px solid`,
     padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
   },
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx
@@ -2,6 +2,7 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 import { type Theme, makeStyles } from '@material-ui/core';
 import { useWorkspacesCardContext } from './Root';
 import type { HtmlHeader } from '../../typesConstants';
+import { scaleCssUnit } from '../../utils/styling';
 
 type StyleKey = 'root' | 'header' | 'hgroup' | 'subheader';
 const useStyles = makeStyles<Theme, {}, StyleKey>(theme => ({
@@ -18,17 +19,16 @@ const useStyles = makeStyles<Theme, {}, StyleKey>(theme => ({
   },
 
   header: {
-    // Want the header text to be set solid (typography term for setting line
-    // height equal to font size) to reduce gaps between it and the subtitle,
-    // but only MUI's h3 line height is the smallest value/closest match
-    lineHeight: theme.typography.h3.lineHeight ?? 1,
-    fontSize: theme.typography.h5.fontSize ?? '1.5rem',
+    // Setting line height solid (when leading and font size are equal) to make
+    // it easier for header and subtitle to sit next to each other
+    lineHeight: 1,
+    fontSize: scaleCssUnit(theme.typography.body1.fontSize, 1.5),
     margin: 0,
   },
 
   subheader: {
     margin: '0',
-    fontSize: theme.typography.subtitle2.fontSize ?? '0.875rem',
+    fontSize: scaleCssUnit(theme.typography.body1.fontSize, 0.875),
     fontWeight: 400,
     color: theme.palette.text.secondary,
     paddingTop: theme.spacing(0.5),
