feat(ui): Update the SiteAppBar to mui.

.github/workflows/actions.yml

@@ -14,4 +14,4 @@ jobs:
     - name: Run the CI script in yarn to check code style and unit tests.
       run: yarn ci
     - name: Check that no files were changed
-      run: "[ -z $(git status --porcelain) ]"
+      run: "git status; [ -z $(git status --porcelain) ]"

.yarnrc.yml

@@ -12,7 +12,6 @@ packageExtensions:
       "@opentelemetry/semantic-conventions": "*"
   "@mui/system@*":
     dependencies:
-      styled-components: '*'
       react-dom: '*'
       react-is: '*'
   "@mui/x-date-pickers@*":

RELEASE_NOTES.md

@@ -276,6 +276,7 @@ functionality of the site is easier to discover.
   - Cube List navbar
   - Markdown
   - Autocard
+  - Site App Bar
 - Allow controlling dark mode without refreshing.
 - Redesigns of both light and dark mode color schemes.
 

client/babel.config.cjs

@@ -24,12 +24,6 @@ module.exports = (api) => {
       '@babel/preset-react',
     ],
     plugins: [
-      [
-        'babel-plugin-styled-components',
-        {
-          pure: true,
-        },
-      ],
       !isTest && [
         'babel-plugin-direct-import',
         {

client/components/AutocardListGroup.js

@@ -50,7 +50,13 @@ const AutocardListGroup = ({ cards, heading, sort, orderedSort, showOther, rowTa
       <ListSubheader
         className={`list-group-heading${canGroupModal ? ' clickable' : ''}`}
         onClick={canGroupModal ? handleClick : undefined}
-        sx={{ backgroundColor: 'background.darker', paddingLeft: 0.5, paddingRight: 0, paddingY: 1 }}
+        sx={{
+          backgroundColor: 'background.darker',
+          paddingLeft: 0.5,
+          paddingRight: 0,
+          paddingY: 1,
+          borderRadius: '4px 4px 0px 0px',
+        }}
         disableSticky={!useSticky}
       >
         <Typography variant="subtitle2">{heading}</Typography>

client/components/CubeNavbar.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Box, Link, Toolbar, Typography } from '@mui/material';
+import { Box, Button, Link, Toolbar, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import CubeContext from '@cubeartisan/client/components/contexts/CubeContext.js';
@@ -9,23 +9,27 @@ const CubeNavItem = ({ link, activeLink, children }) => {
   const { cube } = useContext(CubeContext);
   if (link === activeLink) {
     return (
-      <Typography
-        variant="subtitle1"
-        sx={{ backgroundColor: 'background.paper', height: '100%', padding: 2, lineHeight: 1.5 }}
-      >
-        {children}
-      </Typography>
+      <Button variant="text" sx={{ borderRadius: 8 }}>
+        <Typography
+          variant="subtitle1"
+          sx={{ backgroundColor: 'background.paper', height: '100%', padding: 2, lineHeight: 1.5, borderRadius: 2 }}
+        >
+          {children}
+        </Typography>
+      </Button>
     );
   }
   return (
-    <Link
-      variant="subtitle1"
-      href={`/cube/${encodeURIComponent(getCubeId(cube))}/${link}`}
-      color="primary"
-      sx={{ height: '100%', padding: 2, lineHeight: 1.5 }}
-    >
-      {children}
-    </Link>
+    <Button>
+      <Link
+        variant="subtitle1"
+        href={`/cube/${encodeURIComponent(getCubeId(cube))}/${link}`}
+        color="primary"
+        sx={{ height: '100%', padding: 2, lineHeight: 1.5 }}
+      >
+        {children}
+      </Link>
+    </Button>
   );
 };
 CubeNavItem.propTypes = {
@@ -41,12 +45,22 @@ const CubeNavbar = ({ activeLink }) => {
   const { cube } = useContext(CubeContext);
   const subtitle = getCubeDescription(cube);
   return (
-    <Toolbar sx={{ width: '100%', backgroundColor: 'background.darker', alignItems: 'end' }}>
-      <Box>
+    <Toolbar sx={{ width: '100%', backgroundColor: 'background.darker', alignItems: 'end', display: 'flex' }}>
+      <Box component="span" sx={{ marginRight: 'auto' }}>
         <Typography variant="h5">{cube.name}</Typography>
         {cube.type && <Typography variant="subtitle1"> ({subtitle})</Typography>}
       </Box>
-      <Box sx={{ marginLeft: 'auto', flexFlow: 'row', flexWrap: 'wrap', height: '100%', display: 'flex' }}>
+      <Box
+        component="span"
+        sx={{
+          marginLeft: 'auto',
+          flexFlow: 'row',
+          flexWrap: 'wrap',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <CubeNavItem link="overview" activeLink={activeLink}>
           Overview
         </CubeNavItem>