Feature: Schema title bar

cypress/e2e/schema/activity-log.spec.js

@@ -33,9 +33,11 @@ describe("Schema: Activity Log Tab", () => {
   });
 
   it("Shows the no logs found message", () => {
-    cy.visit(
-      "/schema/6-ce80dbfe90-ptjpm6/activity-log?from=2099-02-15&to=2099-03-15"
-    );
+    cy.waitOn("/v1/env/audits*", () => {
+      cy.visit(
+        "/schema/6-ce80dbfe90-ptjpm6/activity-log?from=2099-02-15&to=2099-03-15"
+      );
+    });
 
     cy.contains("No Logs Found");
   });

cypress/e2e/schema/models.spec.js

@@ -60,4 +60,19 @@ describe("Schema: Models", () => {
     });
     cy.contains("Delete Forever").click();
   });
+  it("Can navigate via breadcrumbs", () => {
+    cy.waitOn(
+      "/v1/content/models/6-ce80dbfe90-ptjpm6/fields?showDeleted=true",
+      () => {
+        cy.waitOn("/bin/1-6c9618c-r26pt/groups", () => {
+          cy.waitOn("/v1/content/models", () => {
+            cy.visit("/schema/6-ce80dbfe90-ptjpm6/fields");
+          });
+        });
+      }
+    );
+
+    cy.getBySelector("breadcrumbs").find(".MuiBreadcrumbs-li").first().click();
+    cy.location("pathname").should("eq", "/schema");
+  });
 });

package.json

@@ -57,7 +57,7 @@
     "@tinymce/tinymce-react": "^3.12.6",
     "@welldone-software/why-did-you-render": "^6.1.1",
     "@zesty-io/core": "1.9.1",
-    "@zesty-io/material": "0.10.0",
+    "@zesty-io/material": "^0.11.0",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",

src/apps/content-editor/src/app/views/Analytics/views/AnalyticsDashboard/index.tsx

@@ -193,7 +193,7 @@ const AnalyticsDashboard = ({ loading }: Props) => {
         height="100%"
       >
         <AnalyticsDashboardHeader />
-        <Box pb={8} px={2} overflow="auto" height="100%">
+        <Box pb={8} px={4} overflow="auto" height="100%">
           <Box display="flex" py={2} justifyContent="space-between">
             <AnalyticsDateFilter />
             <Typography variant="h6" fontWeight="600" maxWidth={304} noWrap>
@@ -466,14 +466,16 @@ const AnalyticsDashboardHeader = () => {
       <Box
         display="flex"
         justifyContent="space-between"
-        p={2}
-        borderBottom={`1px inset ${theme.palette.border}`}
+        px={4}
+        pt={4}
+        pb={1.75}
+        borderBottom={`2px solid ${theme.palette.border}`}
         bgcolor={theme.palette.background.paper}
       >
-        <Typography variant="h5" fontWeight="600">
+        <Typography variant="h3" fontWeight="700">
           Dashboard
         </Typography>
-        <Box display="flex" gap={1.5}>
+        <Box display="flex" gap={1.5} height="fit-content">
           {topUsedModels?.reverse()?.map((model: any) => (
             <CreateItemButton modelZUID={model[0]} />
           ))}

src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx

@@ -142,7 +142,12 @@ export const FieldFormInput = ({
     <Grid item xs={fieldConfig.gridSize}>
       {fieldConfig.type === "input" && (
         <>
-          <Box mb={0.5}>
+          <Stack
+            flexDirection="row"
+            alignItems="center"
+            mb={!!fieldConfig.subLabel ? 0 : 0.5}
+            height={18}
+          >
             <Typography component="span" variant="body2" fontWeight={600}>
               {fieldConfig.label}
             </Typography>
@@ -151,6 +156,7 @@ export const FieldFormInput = ({
                 component="span"
                 variant="body2"
                 color="text.secondary"
+                sx={{ whiteSpace: "pre" }}
               >
                 {" "}
                 (optional)
@@ -164,12 +170,17 @@ export const FieldFormInput = ({
                 />
               </Tooltip>
             )}
-            {fieldConfig.subLabel && (
-              <Typography component="p" variant="body3" color="text.secondary">
-                {fieldConfig.subLabel}
-              </Typography>
-            )}
-          </Box>
+          </Stack>
+          {fieldConfig.subLabel && (
+            <Typography
+              component="p"
+              variant="body3"
+              color="text.secondary"
+              mb={0.5}
+            >
+              {fieldConfig.subLabel}
+            </Typography>
+          )}
           <InputTextField
             autoFocus={fieldConfig.autoFocus}
             data-cy={`FieldFormInput_${fieldConfig.name}`}

src/apps/schema/src/app/components/AddFieldModal/FieldItem.tsx

@@ -79,6 +79,7 @@ export const FieldItem = ({
             primaryTypographyProps={{
               fontSize: 14,
               fontWeight: 700,
+              color: "text.primary",
             }}
             secondaryTypographyProps={{
               variant: "body3",

src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx

@@ -464,17 +464,14 @@ export const FieldForm = ({
   return (
     <>
       <DialogTitle
+        component="div"
         sx={{
-          padding: 0,
+          borderBottom: "2px solid",
+          borderColor: "border",
+          pb: 0,
         }}
       >
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          px={2.5}
-          pt={2.5}
-        >
+        <Box display="flex" justifyContent="space-between" alignItems="center">
           <Box display="flex" alignItems="center">
             {!isUpdateField && (
               <IconButton
@@ -495,7 +492,7 @@ export const FieldForm = ({
               />
             </Box>
             <Box display="flex" flexDirection="column">
-              <Typography variant="h5" fontWeight={600}>
+              <Typography variant="h5" fontWeight={700}>
                 {isUpdateField
                   ? `Edit ${fieldData.label}`
                   : `Add ${name} Field`}
@@ -521,7 +518,8 @@ export const FieldForm = ({
           value={activeTab}
           onChange={(_, value: ActiveTab) => setActiveTab(value)}
           sx={{
-            px: 2.5,
+            position: "relative",
+            top: "2px",
           }}
         >
           <Tab
@@ -550,24 +548,21 @@ export const FieldForm = ({
       <DialogContent
         dividers
         sx={{
-          p: 2.5,
-          position: "relative",
+          pt: 2.5,
+          pl: activeTab === "details" ? 0 : 2.5,
+          backgroundColor: "grey.50",
+          borderTop: 0,
         }}
       >
         {activeTab === "details" && (
           <Grid
             data-cy="DetailsTab"
             container
-            spacing={2.5}
-            maxWidth="480px"
+            rowSpacing={2.5}
+            columnSpacing={2.5}
+            width="inherit"
             minHeight={448}
-            mt={-2.5} //Offset grid item default top padding
             ml={0}
-            sx={{
-              "&.MuiGrid-container .MuiGrid-item": {
-                pl: 0,
-              },
-            }}
           >
             {FORM_CONFIG[type]?.details?.map((fieldConfig, index) => {
               // Only show tooltip field when updating a field that already has a tooltip value
@@ -660,7 +655,7 @@ export const FieldForm = ({
       {isUpdateField ? (
         <DialogActions
           sx={{
-            p: 2.5,
+            pt: 2.5,
           }}
         >
           <Button
@@ -689,8 +684,7 @@ export const FieldForm = ({
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            px: 3,
-            py: 2,
+            pt: 2.5,
           }}
         >
           <Button variant="outlined" color="inherit" onClick={onBackClick}>
@@ -707,15 +701,15 @@ export const FieldForm = ({
               loading={isCreatingField || isBulkUpdating}
               onClick={handleAddAnotherField}
             >
-              Add another field
+              Add Another Field
             </LoadingButton>
             <LoadingButton
               data-cy="FieldFormAddFieldBtn"
               loading={isCreatingField || isBulkUpdating}
               onClick={handleSubmitForm}
               variant="contained"
             >
-              Done
+              Add Field
             </LoadingButton>
           </Box>
         </DialogActions>

src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Typography,
   IconButton,
+  Stack,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import CloseIcon from "@mui/icons-material/Close";
@@ -67,41 +68,49 @@ export const FieldSelection = ({ onFieldClick, onModalClose }: Props) => {
 
   return (
     <>
-      <DialogTitle sx={{ px: 3, py: 2.5 }}>
-        <Box display="flex" justifyContent="space-between" pb={2}>
-          Select a Field Type
+      <DialogTitle component="div">
+        <Stack
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="flex-start"
+        >
+          <Stack gap={2}>
+            <Typography variant="h5" fontWeight={700}>
+              Select a Field Type
+            </Typography>
+            <Box width="349px">
+              <TextField
+                data-cy="FieldSelectionFilter"
+                fullWidth
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon fontSize="small" />
+                    </InputAdornment>
+                  ),
+                }}
+                onChange={handleFilterFields}
+                placeholder="Search field types"
+                autoFocus
+                size="small"
+              />
+            </Box>
+          </Stack>
           <IconButton
             size="small"
             onClick={onModalClose}
             data-cy="AddFieldCloseBtn"
           >
             <CloseIcon fontSize="small" />
           </IconButton>
-        </Box>
-        <Box width="349px">
-          <TextField
-            data-cy="FieldSelectionFilter"
-            fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon fontSize="small" />
-                </InputAdornment>
-              ),
-            }}
-            onChange={handleFilterFields}
-            placeholder="Search field types"
-            autoFocus
-            size="small"
-          />
-        </Box>
+        </Stack>
       </DialogTitle>
       <DialogContent
         data-cy="FieldSelection"
         dividers
         sx={{
-          px: 3,
-          py: 1.5,
+          pt: 2.5,
+          backgroundColor: "grey.50",
           "&.MuiDialogContent-dividers": {
             borderColor: "border",
           },