feat: Apply component guidelines for @backstage/core-component for Layout folder

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -61,7 +61,7 @@ export function BottomLink(props: BottomLinkProps) {
   const classes = useStyles();
 
   return (
-    <div>
+    <Box>
       <Divider />
       <Link to={link} onClick={onClick} underline="none">
         <Box display="flex" alignItems="center" className={classes.root}>
@@ -73,6 +73,6 @@ export function BottomLink(props: BottomLinkProps) {
           <ArrowIcon className={classes.arrow} />
         </Box>
       </Link>
-    </div>
+    </Box>
   );
 }

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -13,16 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/**
- * TODO favoriteable capability
- */
-
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 
+/**
+ * TODO: favoriteable capability
+ */
+
 /** @public */
 export type ContentHeaderClassKey =
   | 'container'
@@ -120,17 +120,17 @@ export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
   return (
     <>
       <Helmet title={title} />
-      <div className={classes.container}>
-        <div className={classes.leftItemsBox}>
+      <Box className={classes.container}>
+        <Box className={classes.leftItemsBox}>
           {renderedTitle}
           {description && (
             <Typography className={classes.description} variant="body2">
               {description}
             </Typography>
           )}
-        </div>
-        <div className={classes.rightItemsBox}>{children}</div>
-      </div>
+        </Box>
+        <Box className={classes.rightItemsBox}>{children}</Box>
+      </Box>
     </>
   );
 }

packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import Typography from '@material-ui/core/Typography';
 import React, { ComponentClass, Component, ErrorInfo } from 'react';
 import { Button } from '../../components/Button';
 import { ErrorPanel } from '../../components/ErrorPanel';
@@ -40,9 +41,11 @@ const SlackLink = (props: { slackChannel?: string | SlackChannel }) => {
   if (!slackChannel) {
     return null;
   } else if (typeof slackChannel === 'string') {
-    return <>Please contact {slackChannel} for help.</>;
+    return <Typography>Please contact {slackChannel} for help.</Typography>;
   } else if (!slackChannel.href) {
-    return <>Please contact {slackChannel.name} for help.</>;
+    return (
+      <Typography>Please contact {slackChannel.name} for help.</Typography>
+    );
   }
 
   return (

packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -44,7 +44,7 @@ const ActionItem = ({
   onClick,
 }: HeaderActionMenuItem) => {
   return (
-    <React.Fragment>
+    <Fragment>
       <ListItem
         data-testid="header-action-item"
         disabled={disabled}
@@ -58,7 +58,7 @@ const ActionItem = ({
         {icon && <ListItemIcon>{icon}</ListItemIcon>}
         <ListItemText primary={label} secondary={secondaryLabel} />
       </ListItem>
-    </React.Fragment>
+    </Fragment>
   );
 };
 

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles(
     },
     label: {
       color: theme.palette.common.white,
-      fontWeight: 'bold',
+      fontWeight: theme.typography.fontWeightBold,
       letterSpacing: 0,
       fontSize: theme.typography.fontSize,
       marginBottom: theme.spacing(1) / 2,
@@ -77,10 +77,10 @@ export function HeaderLabel(props: HeaderLabelProps) {
   );
   return (
     <Grid item>
-      <span className={classes.root}>
+      <Typography component="span" className={classes.root}>
         <Typography className={classes.label}>{label}</Typography>
         {url ? <Link to={url}>{content}</Link> : content}
-      </span>
+      </Typography>
     </Grid>
   );
 }

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-// TODO(blam): Remove this implementation when the Tabs are ready
-// This is just a temporary solution to implementing tabs for now
-
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import React, { useCallback, useEffect, useState } from 'react';
 
+// TODO(blam): Remove this implementation when the Tabs are ready
+// This is just a temporary solution to implementing tabs for now
+
 /** @public */
 export type HeaderTabsClassKey =
   | 'tabsWrapper'
@@ -38,10 +38,10 @@ const useStyles = makeStyles(
       minWidth: 0,
     },
     defaultTab: {
-      padding: theme.spacing(3, 3),
       ...theme.typography.caption,
+      padding: theme.spacing(3, 3),
       textTransform: 'uppercase',
-      fontWeight: 'bold',
+      fontWeight: theme.typography.fontWeightBold,
       color: theme.palette.text.secondary,
     },
     selected: {
@@ -97,7 +97,7 @@ export function HeaderTabs(props: HeaderTabsProps) {
   }, [selectedIndex]);
 
   return (
-    <div className={styles.tabsWrapper}>
+    <Box className={styles.tabsWrapper}>
       <Tabs
         selectionFollowsFocus
         indicatorColor="primary"
@@ -120,6 +120,6 @@ export function HeaderTabs(props: HeaderTabsProps) {
           />
         ))}
       </Tabs>
-    </div>
+    </Box>
   );
 }

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -47,7 +47,7 @@ const useStyles = makeStyles(
       padding: theme.spacing(2, 2, 2, 2.5),
     },
     headerTitle: {
-      fontWeight: 700,
+      fontWeight: theme.typography.fontWeightBold,
     },
     headerSubheader: {
       paddingTop: theme.spacing(1),

packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import Box from '@material-ui/core/Box';
 import {
   createStyles,
   makeStyles,
@@ -65,8 +65,8 @@ export function ItemCardGrid(props: ItemCardGridProps) {
   const { children, ...otherProps } = props;
   const classes = useStyles(otherProps);
   return (
-    <div className={classes.root} {...otherProps}>
+    <Box className={classes.root} {...otherProps}>
       {children}
-    </div>
+    </Box>
   );
 }

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { BackstageTheme } from '@backstage/theme';
+import Box from '@material-ui/core/Box';
 import { createStyles, makeStyles, WithStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
 export type ItemCardHeaderClassKey = 'root';
@@ -77,7 +77,7 @@ export function ItemCardHeader(props: ItemCardHeaderProps) {
   const { title, subtitle, children } = props;
   const classes = useStyles(props);
   return (
-    <div className={classes.root}>
+    <Box className={classes.root}>
       {subtitle && (
         <Typography variant="subtitle2" component="h3">
           {subtitle}
@@ -89,6 +89,6 @@ export function ItemCardHeader(props: ItemCardHeaderProps) {
         </Typography>
       )}
       {children}
-    </div>
+    </Box>
   );
 }

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -13,28 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { BackstageTheme } from '@backstage/theme';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import classnames from 'classnames';
-
-import React, { useState, useContext, useRef } from 'react';
-import Button from '@material-ui/core/Button';
+import React, { useContext, useRef, useState } from 'react';
 
 import {
   makeSidebarConfig,
   makeSidebarSubmenuConfig,
   SidebarConfig,
   SidebarConfigContext,
-  SubmenuConfig,
   SidebarOptions,
+  SubmenuConfig,
   SubmenuOptions,
 } from './config';
-import { BackstageTheme } from '@backstage/theme';
+import { MobileSidebar } from './MobileSidebar';
 import { useContent } from './Page';
 import { SidebarOpenStateProvider } from './SidebarOpenStateContext';
 import { useSidebarPinState } from './SidebarPinStateContext';
-import { MobileSidebar } from './MobileSidebar';
 
 /** @public */
 export type SidebarClassKey = 'drawer' | 'drawerOpen';
@@ -191,7 +190,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
     <nav style={{}} aria-label="sidebar nav">
       <A11ySkipSidebar />
       <SidebarOpenStateProvider value={{ isOpen, setOpen }}>
-        <div
+        <Box
           className={classes.root}
           data-testid="sidebar-root"
           onMouseEnter={disableExpandOnHover ? () => {} : handleOpen}
@@ -199,14 +198,14 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
           onMouseLeave={disableExpandOnHover ? () => {} : handleClose}
           onBlur={disableExpandOnHover ? () => {} : handleClose}
         >
-          <div
+          <Box
             className={classnames(classes.drawer, {
               [classes.drawerOpen]: isOpen,
             })}
           >
             {children}
-          </div>
-        </div>
+          </Box>
+        </Box>
       </SidebarOpenStateProvider>
     </nav>
   );

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -13,19 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { BackstageTheme } from '@backstage/theme';
+import Box from '@material-ui/core/Box';
 import Collapse from '@material-ui/core/Collapse';
-import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
-import React, { useContext, useState } from 'react';
 import { useLocalStorageValue } from '@react-hookz/web';
+import React, { useContext, useState } from 'react';
+
 import {
-  SidebarConfigContext,
-  SidebarConfig,
   SIDEBAR_INTRO_LOCAL_STORAGE,
+  SidebarConfig,
+  SidebarConfigContext,
 } from './config';
 import { SidebarDivider } from './Items';
 import { useSidebarOpenState } from './SidebarOpenStateContext';
@@ -45,8 +46,8 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       // XXX (@koroeskohr): should I be using a Mui theme variable?
       fontSize: 12,
       width: props.sidebarConfig.drawerWidthOpen,
-      marginTop: 18,
-      marginBottom: 12,
+      marginTop: theme.spacing(2.25),
+      marginBottom: theme.spacing(1.5),
       paddingLeft: props.sidebarConfig.iconPadding,
       paddingRight: props.sidebarConfig.iconPadding,
     }),
@@ -54,13 +55,13 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       display: 'flex',
       justifyContent: 'flex-end',
       alignItems: 'center',
-      marginTop: 12,
+      marginTop: theme.spacing(1.5),
     },
     introDismissLink: {
       color: '#dddddd',
       display: 'flex',
       alignItems: 'center',
-      marginBottom: 4,
+      marginBottom: theme.spacing(0.5),
       '&:hover': {
         color: theme.palette.linkHover,
         transition: theme.transitions.create('color', {
@@ -78,7 +79,7 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
     introDismissIcon: {
       width: 18,
       height: 18,
-      marginRight: 12,
+      marginRight: theme.spacing(1.5),
     },
   }),
   { name: 'BackstageSidebarIntro' },
@@ -103,17 +104,17 @@ export function IntroCard(props: IntroCardProps) {
   const handleClose = () => onClose();
 
   return (
-    <div className={classes.introCard}>
+    <Box className={classes.introCard}>
       <Typography variant="subtitle2">{text}</Typography>
-      <div className={classes.introDismiss}>
+      <Box className={classes.introDismiss}>
         <IconButton onClick={handleClose} className={classes.introDismissLink}>
           <CloseIcon className={classes.introDismissIcon} />
           <Typography component="span" className={classes.introDismissText}>
             Dismiss
           </Typography>
         </IconButton>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -13,23 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { IconComponent, useElementFilter } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, styled, Theme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Badge from '@material-ui/core/Badge';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { makeStyles, styled, Theme } from '@material-ui/core/styles';
 import {
   CreateCSSProperties,
   StyledComponentProps,
 } from '@material-ui/core/styles/withStyles';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import SearchIcon from '@material-ui/icons/Search';
-import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import classnames from 'classnames';
+import { Location } from 'history';
 import React, {
   ComponentProps,
   ComponentType,
@@ -48,18 +49,18 @@ import {
   useLocation,
   useResolvedPath,
 } from 'react-router-dom';
+
 import {
+  SidebarConfig,
   SidebarConfigContext,
   SidebarItemWithSubmenuContext,
-  SidebarConfig,
 } from './config';
-import { SidebarSubmenuProps, SidebarSubmenu } from './SidebarSubmenu';
 import DoubleArrowLeft from './icons/DoubleArrowLeft';
 import DoubleArrowRight from './icons/DoubleArrowRight';
-import { isLocationMatch } from './utils';
-import { Location } from 'history';
 import { useSidebarOpenState } from './SidebarOpenStateContext';
+import { SidebarSubmenu, SidebarSubmenuProps } from './SidebarSubmenu';
 import { SidebarSubmenuItemProps } from './SidebarSubmenuItem';
+import { isLocationMatch } from './utils';
 
 /** @public */
 export type SidebarItemClassKey =
@@ -145,7 +146,7 @@ const makeSidebarStyles = (sidebarConfig: SidebarConfig) =>
       },
       searchField: {
         color: '#b5b5b5',
-        fontWeight: 'bold',
+        fontWeight: theme.typography.fontWeightBold,
         fontSize: theme.typography.fontSize,
       },
       searchFieldHTMLInput: {
@@ -373,10 +374,10 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
     !isOpen && hasSubmenu ? { display: 'flex', marginLeft: '24px' } : {};
 
   const displayItemIcon = (
-    <div style={divStyle}>
+    <Box style={divStyle}>
       <Icon fontSize="small" />
       {!isOpen && hasSubmenu ? <ArrowRightIcon /> : <></>}
-    </div>
+    </Box>
   );
 
   const itemIcon = (
@@ -393,9 +394,9 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   const openContent = (
     <>
-      <div data-testid="login-button" className={classes.iconContainer}>
+      <Box data-testid="login-button" className={classes.iconContainer}>
         {itemIcon}
-      </div>
+      </Box>
       {text && (
         <Typography variant="subtitle2" className={classes.label}>
           {text}
@@ -572,7 +573,7 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) {
   };
 
   return (
-    <div className={classes.searchRoot}>
+    <Box className={classes.searchRoot}>
       <SidebarItem
         icon={Icon}
         to={props.to}
@@ -595,7 +596,7 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) {
           }}
         />
       </SidebarItem>
-    </div>
+    </Box>
   );
 }
 
@@ -620,13 +621,13 @@ export const SidebarSpacer = styled('div')(
 export type SidebarDividerClassKey = 'root';
 
 export const SidebarDivider = styled('hr')(
-  {
+  ({ theme }) => ({
     height: 1,
     width: '100%',
     background: '#383838',
     border: 'none',
-    margin: '12px 0px',
-  },
+    margin: theme.spacing(1.2, 0),
+  }),
   { name: 'BackstageSidebarDivider' },
 ) as ComponentType<ComponentProps<'hr'> & StyledComponentProps<'root'>>;
 
@@ -693,9 +694,9 @@ export const SidebarExpandButton = () => {
       aria-label="Expand Sidebar"
       data-testid="sidebar-expand-button"
     >
-      <div className={classes.arrows}>
+      <Box className={classes.arrows}>
         {isOpen ? <DoubleArrowLeft /> : <DoubleArrowRight />}
-      </div>
+      </Box>
     </button>
   );
 };

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { BackstageTheme } from '@backstage/theme';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
-
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React, {
   createContext,
   useCallback,
@@ -25,10 +26,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SidebarConfigContext, SidebarConfig } from './config';
-import { BackstageTheme } from '@backstage/theme';
+
+import { SidebarConfig, SidebarConfigContext } from './config';
 import { LocalStorage } from './localStorage';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { SidebarPinStateProvider } from './SidebarPinStateContext';
 
 export type SidebarPageClassKey = 'root';
@@ -122,7 +122,7 @@ export function SidebarPage(props: SidebarPageProps) {
       }}
     >
       <PageContext.Provider value={pageContext}>
-        <div className={classes.root}>{props.children}</div>
+        <Box className={classes.root}>{props.children}</Box>
       </PageContext.Provider>
     </SidebarPinStateProvider>
   );

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -13,17 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { BackstageTheme } from '@backstage/theme';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import classnames from 'classnames';
 import React, { ReactNode, useContext, useEffect, useState } from 'react';
+
 import {
-  SidebarItemWithSubmenuContext,
   SidebarConfigContext,
+  SidebarItemWithSubmenuContext,
   SubmenuConfig,
 } from './config';
 import { useSidebarOpenState } from './SidebarOpenStateContext';
-import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles<
   BackstageTheme,
@@ -77,9 +79,9 @@ const useStyles = makeStyles<
     }),
     title: {
       fontSize: theme.typography.h5.fontSize,
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       color: '#FFF',
-      padding: 20,
+      padding: theme.spacing(2.5),
       [theme.breakpoints.down('xs')]: {
         display: 'none',
       },
@@ -120,7 +122,7 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
   }, [isHoveredOn]);
 
   return (
-    <div
+    <Box
       className={classnames(classes.drawer, {
         [classes.drawerOpen]: isSubmenuOpen,
       })}
@@ -129,6 +131,6 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
         {props.title}
       </Typography>
       {props.children}
-    </div>
+    </Box>
   );
 };

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -26,6 +26,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { SidebarItemWithSubmenuContext } from './config';
 import { isLocationMatch } from './utils';
+import Box from '@material-ui/core/Box';
 
 const useStyles = makeStyles<BackstageTheme>(
   theme => ({
@@ -39,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(
       display: 'flex',
       alignItems: 'center',
       color: theme.palette.navigation.color,
-      padding: 20,
+      padding: theme.spacing(2.5),
       cursor: 'pointer',
       position: 'relative',
       background: 'none',
@@ -53,8 +54,8 @@ const useStyles = makeStyles<BackstageTheme>(
       color: '#FFF',
     },
     label: {
-      margin: 14,
-      marginLeft: 7,
+      margin: theme.spacing(1.75),
+      marginLeft: theme.spacing(1),
       fontSize: theme.typography.body2.fontSize,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -155,7 +156,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
       return isActive;
     });
     return (
-      <div className={classes.itemContainer}>
+      <Box className={classes.itemContainer}>
         <Tooltip title={title} enterDelay={500} enterNextDelay={500}>
           <button
             onClick={handleClickDropdown}
@@ -183,7 +184,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
           </button>
         </Tooltip>
         {dropdownItems && showDropDown && (
-          <div className={classes.dropdown}>
+          <Box className={classes.dropdown}>
             {dropdownItems.map((object, key) => (
               <Tooltip
                 key={key}
@@ -204,14 +205,14 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
                 </Link>
               </Tooltip>
             ))}
-          </div>
+          </Box>
         )}
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div className={classes.itemContainer}>
+    <Box className={classes.itemContainer}>
       <Tooltip title={title} enterDelay={500} enterNextDelay={500}>
         <Link
           to={to!}
@@ -235,6 +236,6 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
           </Typography>
         </Link>
       </Tooltip>
-    </div>
+    </Box>
   );
 };

packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import React from 'react';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import React from 'react';
 
 const useStyles = makeStyles({
   iconContainer: {
@@ -34,14 +34,14 @@ const DoubleArrowLeft = () => {
   const classes = useStyles();
 
   return (
-    <div className={classes.iconContainer}>
-      <div className={classes.arrow1}>
+    <Box className={classes.iconContainer}>
+      <Box className={classes.arrow1}>
         <ArrowBackIosIcon style={{ fontSize: '12px' }} />
-      </div>
-      <div>
+      </Box>
+      <Box>
         <ArrowBackIosIcon style={{ fontSize: '12px' }} />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 

packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import React from 'react';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import React from 'react';
 
 const useStyles = makeStyles({
   iconContainer: {
@@ -34,14 +34,14 @@ const DoubleArrowRight = () => {
   const classes = useStyles();
 
   return (
-    <div className={classes.iconContainer}>
-      <div className={classes.arrow1}>
+    <Box className={classes.iconContainer}>
+      <Box className={classes.arrow1}>
         <ArrowForwardIosIcon style={{ fontSize: '12px' }} />
-      </div>
-      <div>
+      </Box>
+      <Box>
         <ArrowForwardIosIcon style={{ fontSize: '12px' }} />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 

packages/core-components/src/layout/TabbedCard/TabbedCard.tsx

@@ -96,7 +96,7 @@ export function TabbedCard(props: PropsWithChildren<Props>) {
   } else {
     React.Children.map(children, child => {
       if (React.isValidElement(child) && child?.props.value === value) {
-        selectedTabContent = child?.props.children;
+        selectedTabContent = child?.props?.children;
       }
     });
   }
@@ -142,7 +142,7 @@ const useCardTabStyles = makeStyles(
       },
     },
     selected: {
-      fontWeight: 'bold',
+      fontWeight: theme.typography.fontWeightBold,
     },
   }),
   { name: 'BackstageCardTab' },