From d5105daf602d4587cd00440b3f9bc2b2663dbc68 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 28 Sep 2021 21:42:34 +1000
Subject: [PATCH 01/15] UserItem: fix multiselect styles being overridden

---
 src/components/Settings/UserManagement/UserItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/UserManagement/UserItem.tsx b/src/components/Settings/UserManagement/UserItem.tsx
index 5d42967ff..2221cd9ea 100644
--- a/src/components/Settings/UserManagement/UserItem.tsx
+++ b/src/components/Settings/UserManagement/UserItem.tsx
@@ -126,24 +126,24 @@ export default function UserItem({ id, user, roles: rolesProp }: User) {
               sx: {
                 mr: 0.5,
 
-                "& .MuiInputLabel-root": {
+                "&& .MuiInputLabel-root": {
                   opacity: 0,
                   mt: -3,
                 },
 
-                "& .MuiFilledInput-root": {
+                "&& .MuiFilledInput-root": {
                   bgcolor: "transparent",
                   boxShadow: 0,
                   "&::before": { content: "none" },
 
                   "&:hover, &.Mui-focused": { bgcolor: "action.hover" },
                 },
-                "& .MuiSelect-select.MuiFilledInput-input": {
+                "&& .MuiSelect-select.MuiFilledInput-input": {
                   typography: "button",
                   pl: 1,
                   pr: 3.25,
                 },
-                "& .MuiSelect-icon": {
+                "&& .MuiSelect-icon": {
                   right: 2,
                 },
               },

From bc4a99d7fe70d5dd9a9b0f853671123f55343ea6 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 28 Sep 2021 22:53:37 +1000
Subject: [PATCH 02/15] remove title case from UI text to follow google,
 microsoft & github style guides

---
 src/components/Auth/MarketingBanner.tsx       |  2 +-
 src/components/CodeEditorHelper/index.tsx     | 11 +----
 .../ConnectServiceSelect/PopupContents.tsx    |  2 +-
 src/components/EmptyState.tsx                 |  2 +-
 src/components/ErrorBoundary.tsx              |  4 +-
 src/components/Home/AccessDenied.tsx          |  4 +-
 src/components/Navigation/Breadcrumbs.tsx     |  2 +-
 .../Navigation/Notifications/index.tsx        |  2 +-
 .../Settings/ProjectSettings/About.tsx        |  6 +--
 .../ProjectSettings/Authentication.tsx        |  2 +-
 .../Settings/ProjectSettings/RowyRun.tsx      |  6 +--
 src/components/Settings/ThemeColorPicker.tsx  |  4 +-
 .../Settings/UserManagement/InviteUser.tsx    |  8 ++--
 .../Settings/UserManagement/UserItem.tsx      |  4 +-
 .../Settings/UserSettings/Account.tsx         |  2 +-
 src/components/Setup/Step1RowyRun.tsx         |  4 +-
 src/components/Setup/Step2ServiceAccount.tsx  |  4 +-
 src/components/Setup/Step3ProjectOwner.tsx    |  4 +-
 src/components/Setup/Step4Rules.tsx           |  6 +--
 src/components/SideDrawer/Form/index.tsx      |  2 +-
 src/components/Table/BulkActions/index.tsx    |  8 ++--
 src/components/Table/CellValidation.tsx       |  4 +-
 src/components/Table/ColumnHeader.tsx         |  6 +--
 .../FieldSettings/DefaultValueInput.tsx       |  2 +-
 .../Table/ColumnMenu/FieldSettings/index.tsx  |  4 +-
 .../Table/ColumnMenu/FieldsDropdown.tsx       |  4 +-
 .../Table/ColumnMenu/NameChange.tsx           |  4 +-
 src/components/Table/ColumnMenu/NewColumn.tsx |  6 +--
 .../Table/ColumnMenu/TypeChange.tsx           |  2 +-
 src/components/Table/EmptyTable.tsx           |  6 +--
 src/components/Table/Filters/index.tsx        |  4 +-
 src/components/Table/FinalColumnHeader.tsx    |  2 +-
 src/components/Table/HiddenFields.tsx         |  2 +-
 src/components/Table/Settings/Menu.tsx        |  2 +-
 src/components/Table/Settings/Webhooks.tsx    |  2 +-
 .../Table/Skeleton/HeaderRowSkeleton.tsx      |  2 +-
 .../Table/Skeleton/TableHeaderSkeleton.tsx    |  2 +-
 .../Table/TableHeader/Export/Download.tsx     |  6 +--
 .../Table/TableHeader/Export/Export.tsx       |  4 +-
 .../Table/TableHeader/Export/index.tsx        |  2 +-
 .../TableHeader/Extensions/ExtensionList.tsx  |  2 +-
 .../Extensions/ExtensionMigration.tsx         |  2 +-
 .../TableHeader/Extensions/ExtensionModal.tsx | 18 ++++----
 .../Table/TableHeader/Extensions/index.tsx    |  2 +-
 .../Table/TableHeader/ImportCsv.tsx           |  4 +-
 .../Table/TableHeader/ReExecute.tsx           |  4 +-
 .../Table/TableHeader/RowHeight.tsx           |  6 +--
 .../Table/TableHeader/TableLogs.tsx           | 12 +++---
 .../Table/TableHeader/TableSettings.tsx       |  2 +-
 src/components/Table/TableHeader/index.tsx    |  2 +-
 .../Table/formatters/FinalColumn.tsx          |  8 ++--
 src/components/Table/index.tsx                |  2 +-
 src/components/TableSettings/form.tsx         | 14 +++----
 src/components/TableSettings/index.tsx        |  8 ++--
 .../Wizards/ImportCsvWizard/Step1Columns.tsx  | 10 ++---
 .../ImportCsvWizard/Step2NewColumns.tsx       |  8 ++--
 .../Wizards/ImportCsvWizard/index.tsx         |  6 +--
 .../Wizards/ImportWizard/Step1Columns.tsx     |  4 +-
 .../Wizards/ImportWizard/Step2Rename.tsx      |  4 +-
 .../Wizards/ImportWizard/Step3Types.tsx       |  8 ++--
 src/components/Wizards/ImportWizard/index.tsx |  8 ++--
 src/components/fields/Action/Settings.tsx     | 16 +++----
 src/components/fields/Aggregate/Settings.tsx  |  2 +-
 .../ConnectServiceSelect/PopupContents.tsx    |  2 +-
 .../fields/ConnectService/Settings.tsx        | 10 ++---
 .../fields/ConnectTable/Settings.tsx          | 10 ++---
 src/components/fields/Derivative/Settings.tsx | 22 +++++-----
 .../fields/File/SideDrawerField.tsx           |  2 +-
 src/components/fields/File/TableCell.tsx      |  2 +-
 src/components/fields/ShortText/Settings.tsx  |  4 +-
 .../fields/SingleSelect/Settings.tsx          |  6 +--
 src/components/fields/Slider/Settings.tsx     |  8 ++--
 src/components/fields/Status/Settings.tsx     | 42 ++++++++++---------
 src/components/fields/SubTable/Settings.tsx   |  2 +-
 src/hooks/useTable/useTableData.tsx           |  2 +-
 src/pages/Auth/ImpersonatorAuth.tsx           |  4 +-
 src/pages/Auth/JwtAuth.tsx                    |  2 +-
 src/pages/Auth/SetupGuide.tsx                 |  4 +-
 src/pages/Auth/SignOut.tsx                    |  4 +-
 src/pages/Auth/SignUp.tsx                     |  2 +-
 src/pages/Auth/index.tsx                      |  2 +-
 src/pages/Deploy.tsx                          |  2 +-
 src/pages/Home.tsx                            |  8 ++--
 src/pages/PageNotFound.tsx                    |  6 +--
 src/pages/RowyRunTest.tsx                     |  2 +-
 src/pages/Settings/UserManagement.tsx         |  4 +-
 src/pages/Setup.tsx                           | 16 +++----
 87 files changed, 236 insertions(+), 239 deletions(-)

diff --git a/src/components/Auth/MarketingBanner.tsx b/src/components/Auth/MarketingBanner.tsx
index bc0f91d74..200213343 100644
--- a/src/components/Auth/MarketingBanner.tsx
+++ b/src/components/Auth/MarketingBanner.tsx
@@ -76,7 +76,7 @@ export default function MarketingBanner() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            Join our Community
+            Join our community
           </Button>
           <Button
             variant="outlined"
diff --git a/src/components/CodeEditorHelper/index.tsx b/src/components/CodeEditorHelper/index.tsx
index 660f5e3e3..28e45fc0c 100644
--- a/src/components/CodeEditorHelper/index.tsx
+++ b/src/components/CodeEditorHelper/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Stack,
-  Typography,
-  Grid,
-  Tooltip,
-  Chip,
-  Button,
-} from "@mui/material";
+import { Stack, Typography, Grid, Tooltip, Chip, Button } from "@mui/material";
 import OpenIcon from "@mui/icons-material/OpenInNew";
 export interface ICodeEditorHelperProps {
   docLink: string;
@@ -79,7 +72,7 @@ export default function CodeEditorHelper({
         href={docLink}
         style={{ flexShrink: 0 }}
       >
-        Examples & Docs
+        Examples & docs
       </Button>
     </Stack>
   );
diff --git a/src/components/ConnectServiceSelect/PopupContents.tsx b/src/components/ConnectServiceSelect/PopupContents.tsx
index cfd77e597..0b6b71c7e 100644
--- a/src/components/ConnectServiceSelect/PopupContents.tsx
+++ b/src/components/ConnectServiceSelect/PopupContents.tsx
@@ -194,7 +194,7 @@ export default function PopupContents({
               color="primary"
               className={classes.selectAllButton}
             >
-              Clear Selection
+              Clear selection
             </Button>
           </Grid>
         </Grid>
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 6ac2a78d0..11e28d992 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -29,7 +29,7 @@ export interface IEmptyStateProps extends Partial<GridProps> {
  * Override with props that are passed to the root MUI `Grid` component.
  */
 export default function EmptyState({
-  message = "Nothing Here",
+  message = "Nothing here",
   description,
   Icon = ErrorIcon,
   fullScreen = false,
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index aa9f78ae1..5c20b96d3 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -27,7 +27,7 @@ class ErrorBoundary extends React.Component<
 
       return (
         <EmptyState
-          message="Something Went Wrong"
+          message="Something went wrong"
           description={
             <>
               <span>{this.state.errorMessage}</span>
@@ -50,7 +50,7 @@ class ErrorBoundary extends React.Component<
                   rel="noopener noreferrer"
                   endIcon={<OpenInNewIcon />}
                 >
-                  Report Issue
+                  Report issue
                 </Button>
               )}
             </>
diff --git a/src/components/Home/AccessDenied.tsx b/src/components/Home/AccessDenied.tsx
index e2ac2f486..5c103085d 100644
--- a/src/components/Home/AccessDenied.tsx
+++ b/src/components/Home/AccessDenied.tsx
@@ -15,7 +15,7 @@ export default function AccessDenied() {
     <EmptyState
       fullScreen
       Icon={SecurityIcon}
-      message="Access Denied"
+      message="Access denied"
       description={
         <>
           <Typography>
@@ -38,7 +38,7 @@ export default function AccessDenied() {
           </Typography>
 
           <Button component={Link} to={routes.signOut}>
-            Sign Out
+            Sign out
           </Button>
         </>
       }
diff --git a/src/components/Navigation/Breadcrumbs.tsx b/src/components/Navigation/Breadcrumbs.tsx
index c44cee6e9..b12898f8e 100644
--- a/src/components/Navigation/Breadcrumbs.tsx
+++ b/src/components/Navigation/Breadcrumbs.tsx
@@ -34,7 +34,7 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       separator={<ArrowRightIcon />}
-      aria-label="sub-table breadcrumbs"
+      aria-label="Sub-table breadcrumbs"
       sx={{
         "& ol": {
           pl: 2,
diff --git a/src/components/Navigation/Notifications/index.tsx b/src/components/Navigation/Notifications/index.tsx
index ee160e685..162e2a3ea 100644
--- a/src/components/Navigation/Notifications/index.tsx
+++ b/src/components/Navigation/Notifications/index.tsx
@@ -98,7 +98,7 @@ const Notification = () => {
                 secondary={notification.subtitle}
               />
               <ListItemSecondaryAction>
-                <IconButton edge="end" aria-label="delete">
+                <IconButton edge="end" aria-label="Delete">
                   <DeleteIcon />
                 </IconButton>
               </ListItemSecondaryAction>
diff --git a/src/components/Settings/ProjectSettings/About.tsx b/src/components/Settings/ProjectSettings/About.tsx
index 84827fc85..de51d51a8 100644
--- a/src/components/Settings/ProjectSettings/About.tsx
+++ b/src/components/Settings/ProjectSettings/About.tsx
@@ -161,7 +161,7 @@ export default function About() {
                 onClick={checkForUpdate}
                 loading={checkState === "LOADING"}
               >
-                Check for Updates
+                Check for updates
               </LoadingButton>
             ) : (
               <Button
@@ -172,7 +172,7 @@ export default function About() {
                   <InlineOpenInNewIcon sx={{ fontSize: "18px !important" }} />
                 }
               >
-                How to Update
+                How to update
               </Button>
             )}
           </Grid>
@@ -189,7 +189,7 @@ export default function About() {
           justifyContent="space-between"
         >
           <Grid item>
-            <Typography>Firebase Project: {projectId}</Typography>
+            <Typography>Firebase project: {projectId}</Typography>
           </Grid>
 
           <Grid item>
diff --git a/src/components/Settings/ProjectSettings/Authentication.tsx b/src/components/Settings/ProjectSettings/Authentication.tsx
index 5980a7bfd..f4a7af5ca 100644
--- a/src/components/Settings/ProjectSettings/Authentication.tsx
+++ b/src/components/Settings/ProjectSettings/Authentication.tsx
@@ -21,7 +21,7 @@ export default function Authentication({
   return (
     <>
       <MultiSelect
-        label="Sign-In Options"
+        label="Sign-in options"
         value={signInOptions}
         options={Object.keys(authOptions).map((option) => ({
           value: option,
diff --git a/src/components/Settings/ProjectSettings/RowyRun.tsx b/src/components/Settings/ProjectSettings/RowyRun.tsx
index cf89505e8..5d51d20da 100644
--- a/src/components/Settings/ProjectSettings/RowyRun.tsx
+++ b/src/components/Settings/ProjectSettings/RowyRun.tsx
@@ -157,7 +157,7 @@ export default function RowyRun({
       target="_blank"
       rel="noopener noreferrer"
     >
-      Deploy Instructions
+      Deploy instructions
     </Button>
   );
 
@@ -212,7 +212,7 @@ export default function RowyRun({
                   onClick={checkForUpdate}
                   loading={checkState === "LOADING"}
                 >
-                  Check for Updates
+                  Check for updates
                 </LoadingButton>
               ) : (
                 deployButton
@@ -248,7 +248,7 @@ export default function RowyRun({
         <Grid container spacing={1} alignItems="center" direction="row">
           <Grid item xs>
             <TextField
-              label="Cloud Run Instance URL"
+              label="Cloud Run instance URL"
               id="rowyRunUrl"
               value={inputRowyRunUrl}
               onChange={(e) => setInputRowyRunUrl(e.target.value)}
diff --git a/src/components/Settings/ThemeColorPicker.tsx b/src/components/Settings/ThemeColorPicker.tsx
index cf43c479b..c22900d93 100644
--- a/src/components/Settings/ThemeColorPicker.tsx
+++ b/src/components/Settings/ThemeColorPicker.tsx
@@ -51,7 +51,7 @@ export default function ThemeColorPicker({
       >
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
-            Light Theme
+            Light theme
           </Typography>
           <ColorPicker
             width={244}
@@ -100,7 +100,7 @@ export default function ThemeColorPicker({
 
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
-            Dark Theme
+            Dark theme
           </Typography>
           <ColorPicker
             width={244}
diff --git a/src/components/Settings/UserManagement/InviteUser.tsx b/src/components/Settings/UserManagement/InviteUser.tsx
index 404f547a1..0c581c75f 100644
--- a/src/components/Settings/UserManagement/InviteUser.tsx
+++ b/src/components/Settings/UserManagement/InviteUser.tsx
@@ -48,19 +48,19 @@ export default function InviteUser() {
   return (
     <>
       <Button
-        aria-label="Invite User"
+        aria-label="Invite user"
         onClick={() => setOpen(true)}
         variant="text"
         color="primary"
         startIcon={<AddIcon />}
         sx={{ "&&": { mb: -0.5 } }}
       >
-        Invite User
+        Invite user
       </Button>
 
       {open && (
         <Modal
-          title="Invite User"
+          title="Invite user"
           onClose={() => setOpen(false)}
           maxWidth="xs"
           body={
@@ -80,7 +80,7 @@ export default function InviteUser() {
               </DialogContentText>
 
               <TextField
-                label="Email Address"
+                label="Email address"
                 id="invite-email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
diff --git a/src/components/Settings/UserManagement/UserItem.tsx b/src/components/Settings/UserManagement/UserItem.tsx
index 2221cd9ea..3fdc086cb 100644
--- a/src/components/Settings/UserManagement/UserItem.tsx
+++ b/src/components/Settings/UserManagement/UserItem.tsx
@@ -163,9 +163,9 @@ export default function UserItem({ id, user, roles: rolesProp }: User) {
               <CopyIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip title="Delete">
+          <Tooltip title="Delete…">
             <IconButton
-              aria-label="Delete"
+              aria-label="Delete…"
               color="error"
               onClick={handleDelete}
             >
diff --git a/src/components/Settings/UserSettings/Account.tsx b/src/components/Settings/UserSettings/Account.tsx
index 90ef50a3d..96e6958bf 100644
--- a/src/components/Settings/UserSettings/Account.tsx
+++ b/src/components/Settings/UserSettings/Account.tsx
@@ -27,7 +27,7 @@ export default function Account({ settings }: IUserSettingsChildProps) {
 
       <Grid item>
         <Button component={Link} to={routes.signOut}>
-          Sign Out
+          Sign out
         </Button>
       </Grid>
     </Grid>
diff --git a/src/components/Setup/Step1RowyRun.tsx b/src/components/Setup/Step1RowyRun.tsx
index f4d89755e..ee55026e1 100644
--- a/src/components/Setup/Step1RowyRun.tsx
+++ b/src/components/Setup/Step1RowyRun.tsx
@@ -85,7 +85,7 @@ export default function Step1RowyRun({
       rel="noopener noreferrer"
       endIcon={<OpenInNewIcon />}
     >
-      Deploy Instructions
+      Deploy instructions
     </Button>
   );
 
@@ -122,7 +122,7 @@ export default function Step1RowyRun({
               >
                 <TextField
                   id="rowyRunUrl"
-                  label="Rowy Run Instance URL"
+                  label="Rowy Run instance URL"
                   placeholder="https://*.run.app"
                   value={rowyRunUrl}
                   onChange={(e) => setRowyRunUrl(e.target.value)}
diff --git a/src/components/Setup/Step2ServiceAccount.tsx b/src/components/Setup/Step2ServiceAccount.tsx
index 26dc7132e..2582fd567 100644
--- a/src/components/Setup/Step2ServiceAccount.tsx
+++ b/src/components/Setup/Step2ServiceAccount.tsx
@@ -120,7 +120,7 @@ export default function Step2ServiceAccount({
                 rel="noopener noreferrer"
                 endIcon={<OpenInNewIcon />}
               >
-                Set Up Service Account
+                Set up service account
               </LoadingButton>
               <LoadingButton
                 variant="contained"
@@ -142,7 +142,7 @@ export default function Step2ServiceAccount({
                   rel="noopener noreferrer"
                   color="text.primary"
                 >
-                  Setup Guide
+                  Setup guide
                   <InlineOpenInNewIcon />
                 </Link>
               </Typography>
diff --git a/src/components/Setup/Step3ProjectOwner.tsx b/src/components/Setup/Step3ProjectOwner.tsx
index 6228e3b8a..73fe92ad0 100644
--- a/src/components/Setup/Step3ProjectOwner.tsx
+++ b/src/components/Setup/Step3ProjectOwner.tsx
@@ -101,7 +101,7 @@ export default function Step3ProjectOwner({
                 rel="noopener noreferrer"
                 endIcon={<OpenInNewIcon />}
               >
-                Set Up in Firebase Console
+                Set up in Firebase Console
               </Button>
 
               <Button
@@ -155,7 +155,7 @@ export default function Step3ProjectOwner({
                 loading={hasRoles === "LOADING"}
                 onClick={setRoles}
               >
-                Assign Roles
+                Assign roles
               </LoadingButton>
 
               {typeof hasRoles === "string" && hasRoles !== "LOADING" && (
diff --git a/src/components/Setup/Step4Rules.tsx b/src/components/Setup/Step4Rules.tsx
index f80fed07f..404351cf0 100644
--- a/src/components/Setup/Step4Rules.tsx
+++ b/src/components/Setup/Step4Rules.tsx
@@ -140,7 +140,7 @@ export default function Step4Rules({
               startIcon={<CopyIcon />}
               onClick={() => navigator.clipboard.writeText(rules)}
             >
-              Copy to Clipboard
+              Copy to clipboard
             </Button>
           </>
         )}
@@ -168,7 +168,7 @@ export default function Step4Rules({
         >
           <TextField
             id="new-rules"
-            label="New Rules"
+            label="New rules"
             value={newRules}
             onChange={(e) => setNewRules(e.target.value)}
             multiline
@@ -189,7 +189,7 @@ export default function Step4Rules({
             onClick={setRules}
             loading={rulesStatus === "LOADING"}
           >
-            Set Firestore Rules
+            Set Firestore rules
           </LoadingButton>
 
           {rulesStatus !== "LOADING" && typeof rulesStatus === "string" && (
diff --git a/src/components/SideDrawer/Form/index.tsx b/src/components/SideDrawer/Form/index.tsx
index 13b8d54ec..65f639f8e 100644
--- a/src/components/SideDrawer/Form/index.tsx
+++ b/src/components/SideDrawer/Form/index.tsx
@@ -113,7 +113,7 @@ export default function Form({ values }: IFormProps) {
         <FieldWrapper
           type="debug"
           name="_debug_path"
-          label="Document Path"
+          label="Document path"
           debugText={values.ref?.path ?? values.id ?? "No ref"}
         />
       </Stack>
diff --git a/src/components/Table/BulkActions/index.tsx b/src/components/Table/BulkActions/index.tsx
index bd015d066..f9b8f9552 100644
--- a/src/components/Table/BulkActions/index.tsx
+++ b/src/components/Table/BulkActions/index.tsx
@@ -262,11 +262,11 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
                   color="secondary"
                   onClick={() => {
                     requestConfirmation({
-                      title: "Duplicate Rows?",
+                      title: "Duplicate rows?",
                       body: `Are you sure you want to duplicate the ${numSelected} selected row${
                         numSelected !== 1 ? "s" : ""
                       }?`,
-                      confirm: "Duplicate Rows",
+                      confirm: "Duplicate rows",
                       handleConfirm: handleDuplicate,
                     });
                   }}
@@ -283,11 +283,11 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
                   color="secondary"
                   onClick={() => {
                     requestConfirmation({
-                      title: "Delete Rows?",
+                      title: "Delete rows?",
                       body: `Are you sure you want to delete the ${numSelected} select row${
                         numSelected !== 1 ? "s" : ""
                       }?`,
-                      confirm: "Delete Rows",
+                      confirm: "Delete rows",
                       handleConfirm: handleDelete,
                     });
                   }}
diff --git a/src/components/Table/CellValidation.tsx b/src/components/Table/CellValidation.tsx
index 02fb78dbc..16d9bf04c 100644
--- a/src/components/Table/CellValidation.tsx
+++ b/src/components/Table/CellValidation.tsx
@@ -67,7 +67,7 @@ export default function CellValidation({
       <>
         <RichTooltip
           icon={<ErrorIcon fontSize="inherit" color="error" />}
-          title="Invalid Data"
+          title="Invalid data"
           message="This row will not be saved until all the required fields contain valid data"
           placement="right"
           render={({ openTooltip }) => <Dot onClick={openTooltip} />}
@@ -82,7 +82,7 @@ export default function CellValidation({
       <>
         <RichTooltip
           icon={<WarningIcon fontSize="inherit" color="warning" />}
-          title="Required Field"
+          title="Required field"
           message="This row will not be saved until all the required fields contain valid data"
           placement="right"
           render={({ openTooltip }) => <Dot onClick={openTooltip} />}
diff --git a/src/components/Table/ColumnHeader.tsx b/src/components/Table/ColumnHeader.tsx
index fb33e31cd..c5e720b12 100644
--- a/src/components/Table/ColumnHeader.tsx
+++ b/src/components/Table/ColumnHeader.tsx
@@ -263,7 +263,7 @@ export default function DraggableHeaderRenderer<R>({
             title={
               isAsc
                 ? "Unsort"
-                : `Sort by ${isDesc ? "Ascending" : "Descending"}`
+                : `Sort by ${isDesc ? "ascending" : "descending"}`
             }
           >
             <IconButton
@@ -274,7 +274,7 @@ export default function DraggableHeaderRenderer<R>({
               aria-label={
                 isAsc
                   ? "Unsort"
-                  : `Sort by ${isDesc ? "Ascending" : "Descending"}`
+                  : `Sort by ${isDesc ? "ascending" : "descending"}`
               }
               className={clsx(classes.sortIcon, isAsc && classes.sortIconAsc)}
             >
@@ -290,7 +290,7 @@ export default function DraggableHeaderRenderer<R>({
             (column as any).type
           ))) && (
         <Grid item>
-          <Tooltip title="Column Settings">
+          <Tooltip title="Column settings">
             <IconButton
               size="small"
               className={classes.dropdownButton}
diff --git a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index 8b2f7b636..45bc8cecb 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -60,7 +60,7 @@ export default function DefaultValueInput({
     <>
       <TextField
         select
-        label="Default Value Type"
+        label="Default value type"
         value={config.defaultValue?.type ?? "undefined"}
         onChange={(e) => handleChange("defaultValue.type")(e.target.value)}
         fullWidth
diff --git a/src/components/Table/ColumnMenu/FieldSettings/index.tsx b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
index 917351e08..ce388fe7a 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/index.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/index.tsx
@@ -91,7 +91,7 @@ export default function FieldSettings(props: IMenuModalProps) {
                 sx={{ borderTop: 1, borderColor: "divider", pt: 3 }}
               >
                 <Typography variant="subtitle1">
-                  Rendered Field Config
+                  Rendered field config
                 </Typography>
                 {createElement(rendedFieldSettings, {
                   config: newConfig,
@@ -114,7 +114,7 @@ export default function FieldSettings(props: IMenuModalProps) {
           onClick: () => {
             if (showRebuildPrompt) {
               requestConfirmation({
-                title: "Deploy Changes",
+                title: "Deploy changes",
                 body: "You have made changes that affect the behavior of the cloud function of this table, Would you like to redeploy it now?",
                 confirm: "Deploy",
                 cancel: "Later",
diff --git a/src/components/Table/ColumnMenu/FieldsDropdown.tsx b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
index 766ae6723..43fc77025 100644
--- a/src/components/Table/ColumnMenu/FieldsDropdown.tsx
+++ b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
@@ -49,8 +49,8 @@ export default function FieldsDropdown({
           {option.label}
         </>
       )}
-      label={label || "Field Type"}
-      labelPlural="Field Types"
+      label={label || "Field type"}
+      labelPlural="field types"
       TextFieldProps={{
         hiddenLabel: hideLabel,
         helperText: value && getFieldProp("description", value),
diff --git a/src/components/Table/ColumnMenu/NameChange.tsx b/src/components/Table/ColumnMenu/NameChange.tsx
index 04dbbf736..a23206723 100644
--- a/src/components/Table/ColumnMenu/NameChange.tsx
+++ b/src/components/Table/ColumnMenu/NameChange.tsx
@@ -19,7 +19,7 @@ export default function NameChange({
   return (
     <Modal
       onClose={handleClose}
-      title="Rename Column"
+      title="Rename column"
       maxWidth="xs"
       children={
         <TextField
@@ -27,7 +27,7 @@ export default function NameChange({
           autoFocus
           variant="filled"
           id="name"
-          label="Column Name"
+          label="Column name"
           type="text"
           fullWidth
           onChange={(e) => {
diff --git a/src/components/Table/ColumnMenu/NewColumn.tsx b/src/components/Table/ColumnMenu/NewColumn.tsx
index 6f00e1a6e..78ea9b7c6 100644
--- a/src/components/Table/ColumnMenu/NewColumn.tsx
+++ b/src/components/Table/ColumnMenu/NewColumn.tsx
@@ -43,7 +43,7 @@ export default function NewColumn({
   return (
     <Modal
       onClose={handleClose}
-      title="Add New Column"
+      title="Add new column"
       fullWidth
       maxWidth="xs"
       children={
@@ -54,7 +54,7 @@ export default function NewColumn({
               autoFocus
               variant="filled"
               id="columnName"
-              label="Column Name"
+              label="Column name"
               type="text"
               fullWidth
               onChange={(e) => setColumnLabel(e.target.value)}
@@ -67,7 +67,7 @@ export default function NewColumn({
               value={fieldKey}
               variant="filled"
               id="fieldKey"
-              label="Field Key"
+              label="Field key"
               type="text"
               fullWidth
               onChange={(e) => setFieldKey(e.target.value)}
diff --git a/src/components/Table/ColumnMenu/TypeChange.tsx b/src/components/Table/ColumnMenu/TypeChange.tsx
index 6e9a227b2..93a2fafb9 100644
--- a/src/components/Table/ColumnMenu/TypeChange.tsx
+++ b/src/components/Table/ColumnMenu/TypeChange.tsx
@@ -18,7 +18,7 @@ export default function FormDialog({
   return (
     <Modal
       onClose={handleClose}
-      title="Change Column Type"
+      title="Change column type"
       children={<FieldsDropdown value={newType} onChange={setType} />}
       actions={{
         primary: {
diff --git a/src/components/Table/EmptyTable.tsx b/src/components/Table/EmptyTable.tsx
index 7c82e1fdc..0fb9944d0 100644
--- a/src/components/Table/EmptyTable.tsx
+++ b/src/components/Table/EmptyTable.tsx
@@ -19,7 +19,7 @@ export default function EmptyTable() {
       <>
         <div>
           <Typography variant="h6" component="h2" gutterBottom>
-            Get Started
+            Get started
           </Typography>
           <Typography>
             There is existing data in the Firestore collection:
@@ -51,7 +51,7 @@ export default function EmptyTable() {
       <>
         <div>
           <Typography variant="h6" component="h2" gutterBottom>
-            Get Started
+            Get started
           </Typography>
           <Typography>
             There is no data in the Firestore collection:
@@ -113,7 +113,7 @@ export default function EmptyTable() {
               }
               disabled={!columnMenuRef?.current}
             >
-              Add Column
+              Add column
             </Button>
 
             <ColumnMenu />
diff --git a/src/components/Table/Filters/index.tsx b/src/components/Table/Filters/index.tsx
index f1a6ca06a..c8aac8eea 100644
--- a/src/components/Table/Filters/index.tsx
+++ b/src/components/Table/Filters/index.tsx
@@ -455,7 +455,7 @@ const Filters = () => {
                 SelectProps={{ displayEmpty: true }}
               >
                 <MenuItem disabled value="" style={{ display: "none" }}>
-                  Select Column
+                  Select column
                 </MenuItem>
                 {filterColumns.map((c) => (
                   <MenuItem key={c.key} value={c.key}>
@@ -483,7 +483,7 @@ const Filters = () => {
                 SelectProps={{ displayEmpty: true }}
               >
                 <MenuItem disabled value="" style={{ display: "none" }}>
-                  Select Condition
+                  Select condition
                 </MenuItem>
                 {operators.map((operator) => (
                   <MenuItem key={operator.value} value={operator.value}>
diff --git a/src/components/Table/FinalColumnHeader.tsx b/src/components/Table/FinalColumnHeader.tsx
index 98b90175d..75eb32a95 100644
--- a/src/components/Table/FinalColumnHeader.tsx
+++ b/src/components/Table/FinalColumnHeader.tsx
@@ -69,7 +69,7 @@ const FinalColumnHeader: Column<any>["headerRenderer"] = ({ column }) => {
         className={classes.button}
         startIcon={<AddColumnIcon />}
       >
-        Add Column
+        Add column
       </Button>
     </Grid>
   );
diff --git a/src/components/Table/HiddenFields.tsx b/src/components/Table/HiddenFields.tsx
index 04881fa22..c8455aa3e 100644
--- a/src/components/Table/HiddenFields.tsx
+++ b/src/components/Table/HiddenFields.tsx
@@ -140,7 +140,7 @@ export default function HiddenFields() {
           },
         } as any)}
         label="Hidden fields"
-        labelPlural="Fields"
+        labelPlural="fields"
         options={tableColumns}
         value={hiddenFields ?? []}
         onChange={setHiddenFields}
diff --git a/src/components/Table/Settings/Menu.tsx b/src/components/Table/Settings/Menu.tsx
index 532c8997a..010a03d8e 100644
--- a/src/components/Table/Settings/Menu.tsx
+++ b/src/components/Table/Settings/Menu.tsx
@@ -24,7 +24,7 @@ export default function SettingsMenu({ modal, setModal }) {
   return (
     <div>
       <IconButton
-        aria-label="more"
+        aria-label="More"
         aria-controls="long-menu"
         aria-haspopup="true"
         onClick={handleClick}
diff --git a/src/components/Table/Settings/Webhooks.tsx b/src/components/Table/Settings/Webhooks.tsx
index ad6407ed3..bb00aa4e3 100644
--- a/src/components/Table/Settings/Webhooks.tsx
+++ b/src/components/Table/Settings/Webhooks.tsx
@@ -130,7 +130,7 @@ export default function WebhooksDialog({ open, handleClose }) {
               }}
               // classes={{ root: classes.formControlLabel, label: classes.label }}
             />
-            <InputLabel htmlFor="webhook-type">Webhook Type</InputLabel>
+            <InputLabel htmlFor="webhook-type">Webhook type</InputLabel>
             <Select
               autoFocus
               value={state.type}
diff --git a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
index f8d467c2f..03439c40c 100644
--- a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
+++ b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
@@ -39,7 +39,7 @@ export default function HeaderRowSkeleton() {
           sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}
         >
           <Button variant="contained" startIcon={<AddColumnIcon />}>
-            Add Column
+            Add column
           </Button>
         </Skeleton>
       </Stack>
diff --git a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
index 50d9c9b1f..5709b638d 100644
--- a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
+++ b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
@@ -26,7 +26,7 @@ export default function TableHeaderSkeleton() {
       >
         <ButtonSkeleton>
           <Button variant="contained" startIcon={<AddRowIcon />}>
-            Add Row
+            Add row
           </Button>
         </ButtonSkeleton>
 
diff --git a/src/components/Table/TableHeader/Export/Download.tsx b/src/components/Table/TableHeader/Export/Download.tsx
index 50fa4eb8f..37aa2a600 100644
--- a/src/components/Table/TableHeader/Export/Download.tsx
+++ b/src/components/Table/TableHeader/Export/Download.tsx
@@ -138,7 +138,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Columns to Export"
+        label="Columns to export"
         labelPlural="columns"
         TextFieldProps={{
           helperText: "Only File and Image columns are downloadable",
@@ -149,7 +149,7 @@ export default function Export({ query, closeModal }) {
 
       <TextField
         fullWidth
-        label="Package Name"
+        label="Package name"
         value={packageName}
         helperText={`${packageName}.zip`}
         onChange={(e) => setPackageName(e.target.value)}
@@ -180,7 +180,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Column Values to Include in File Names"
+        label="Column values to include in file names"
         labelPlural="columns"
         TextFieldProps={{
           autoFocus: true,
diff --git a/src/components/Table/TableHeader/Export/Export.tsx b/src/components/Table/TableHeader/Export/Export.tsx
index 2df9c7d77..226194554 100644
--- a/src/components/Table/TableHeader/Export/Export.tsx
+++ b/src/components/Table/TableHeader/Export/Export.tsx
@@ -163,7 +163,7 @@ export default function Export({ query, closeModal }) {
             )
           : []
         ).map((column: any) => ({ label: column.name, value: column.key }))}
-        label="Columns to Export"
+        label="Columns to export"
         labelPlural="columns"
         TextFieldProps={{
           autoFocus: true,
@@ -179,7 +179,7 @@ export default function Export({ query, closeModal }) {
           { label: ".json", value: "json" },
           { label: ".csv", value: "csv" },
         ]}
-        label="Export Type"
+        label="Export type"
         onChange={(v) => {
           if (v) {
             setExportType(v as "csv" | "json");
diff --git a/src/components/Table/TableHeader/Export/index.tsx b/src/components/Table/TableHeader/Export/index.tsx
index 1bf9469a8..ee24afeb8 100644
--- a/src/components/Table/TableHeader/Export/index.tsx
+++ b/src/components/Table/TableHeader/Export/index.tsx
@@ -114,7 +114,7 @@ export default function Export() {
                   <Tab className={classes.tab} label="Export" value="Export" />
                   <Tab
                     className={classes.tab}
-                    label="Download Attachments"
+                    label="Download attachments"
                     value="Download"
                   />
                 </TabList>
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionList.tsx b/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
index 3acecad94..e6e5b2c8b 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionList.tsx
@@ -117,7 +117,7 @@ export default function ExtensionList({
           }}
         >
           <EmptyState
-            message="Add Your First Extension"
+            message="Add your first extension"
             description="Your extensions will appear here."
             Icon={ExtensionIcon}
           />
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
index 5b79049a2..1f9fe65b5 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
@@ -92,7 +92,7 @@ export default function ExtensionMigration({
 
           <div>
             <Typography variant="subtitle1" component="h3" gutterBottom>
-              1. Back Up Existing Sparks
+              1. Back up existing Sparks
             </Typography>
             <Typography paragraph>
               Back up your existing Sparks to a .ts file.
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx b/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
index 9ff548b43..b02f76bf7 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx
@@ -137,7 +137,7 @@ export default function ExtensionModal({
               <TextField
                 size="small"
                 required
-                label="Extension Name"
+                label="Extension name"
                 variant="filled"
                 fullWidth
                 autoFocus
@@ -178,7 +178,7 @@ export default function ExtensionModal({
             <Grid item xs={4}>
               <TextField
                 size="small"
-                label="Extension Type"
+                label="Extension type"
                 value={extensionObject.type}
                 variant="filled"
                 fullWidth
@@ -202,7 +202,7 @@ export default function ExtensionModal({
             >
               <Tab
                 value="triggersRequirements"
-                label="Triggers & Requirements"
+                label="Triggers & requirements"
               />
               <Tab value="parameters" label="Parameters" />
             </TabList>
@@ -286,7 +286,7 @@ export default function ExtensionModal({
                         mb: 1,
                       }}
                     >
-                      Required Fields (optional)
+                      Required fields (optional)
                     </FormLabel>
                     <Typography gutterBottom>
                       Optionally, select the fields that are required for the
@@ -353,7 +353,7 @@ export default function ExtensionModal({
                             <IconButton
                               color="secondary"
                               component="span"
-                              aria-label="Delete Firestore Field"
+                              aria-label="Delete Firestore field"
                               onClick={() => {
                                 setExtensionObject({
                                   ...extensionObject,
@@ -368,7 +368,7 @@ export default function ExtensionModal({
                             </IconButton>
                             <TextField
                               id={`extensions-requiredFields-firestoreField-${index}`}
-                              label="Firestore Field"
+                              label="Firestore field"
                               sx={{
                                 flexDirection: "row",
                                 alignItems: "baseline",
@@ -410,7 +410,7 @@ export default function ExtensionModal({
                             });
                           }}
                         >
-                          Add Firestore Field
+                          Add Firestore field
                         </Button>
                       </Stack>
                     </FormGroup>
@@ -464,7 +464,7 @@ export default function ExtensionModal({
             <StyledTabPanel value="parameters">
               <div style={{ flexGrow: 1 }}>
                 <Typography variant="subtitle2" gutterBottom>
-                  Extension Body
+                  Extension body
                 </Typography>
 
                 <CodeEditor
@@ -523,7 +523,7 @@ export default function ExtensionModal({
 
             if (warningMessage) {
               requestConfirmation({
-                title: "Validation Failed",
+                title: "Validation failed",
                 body: `${warningMessage}. Continue?`,
                 confirm: "Yes, I know what I’m doing",
                 cancel: "No, I’ll fix the errors",
diff --git a/src/components/Table/TableHeader/Extensions/index.tsx b/src/components/Table/TableHeader/Extensions/index.tsx
index 0b4738162..247edc89c 100644
--- a/src/components/Table/TableHeader/Extensions/index.tsx
+++ b/src/components/Table/TableHeader/Extensions/index.tsx
@@ -61,7 +61,7 @@ export default function ExtensionsEditor() {
   const handleClose = () => {
     if (edited) {
       requestConfirmation({
-        title: "Discard Changes",
+        title: "Discard changes",
         body: "You will lose changes you have made to extensions",
         confirm: "Discard",
         handleConfirm: () => {
diff --git a/src/components/Table/TableHeader/ImportCsv.tsx b/src/components/Table/TableHeader/ImportCsv.tsx
index caa26b7e1..7cbaa762c 100644
--- a/src/components/Table/TableHeader/ImportCsv.tsx
+++ b/src/components/Table/TableHeader/ImportCsv.tsx
@@ -247,7 +247,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
               inputProps={{ minRows: 3 }}
               autoFocus
               fullWidth
-              label="Paste CSV Text"
+              label="Paste CSV text"
               placeholder="column, column, …"
               onChange={(e) => {
                 if (csvData !== null) setCsvData(null);
@@ -269,7 +269,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
               variant="filled"
               autoFocus
               fullWidth
-              label="Paste URL to CSV File"
+              label="Paste URL to CSV file"
               placeholder="https://"
               onChange={(e) => {
                 if (csvData !== null) setCsvData(null);
diff --git a/src/components/Table/TableHeader/ReExecute.tsx b/src/components/Table/TableHeader/ReExecute.tsx
index d31804ff9..bfa5ccc52 100644
--- a/src/components/Table/TableHeader/ReExecute.tsx
+++ b/src/components/Table/TableHeader/ReExecute.tsx
@@ -44,7 +44,7 @@ export default function ReExecute() {
   return (
     <>
       <TableHeaderButton
-        title="Force Refresh"
+        title="Force refresh"
         onClick={() => setOpen(true)}
         icon={<LoopIcon />}
       />
@@ -55,7 +55,7 @@ export default function ReExecute() {
           maxWidth="xs"
           fullWidth
           hideCloseButton
-          title="Force Refresh?"
+          title="Force refresh?"
           children="All Extensions and Derivatives in this table will re-execute."
           actions={{
             primary: {
diff --git a/src/components/Table/TableHeader/RowHeight.tsx b/src/components/Table/TableHeader/RowHeight.tsx
index f97dd2c50..11394c6d0 100644
--- a/src/components/Table/TableHeader/RowHeight.tsx
+++ b/src/components/Table/TableHeader/RowHeight.tsx
@@ -26,7 +26,7 @@ export default function RowHeight() {
     <>
       <TableHeaderButton
         disabled={!tableState || !tableActions}
-        title="Row Height"
+        title="Row height"
         icon={<RowHeightIcon />}
         onClick={handleOpen}
         ref={buttonRef}
@@ -50,10 +50,10 @@ export default function RowHeight() {
             style: { zIndex: theme.zIndex.tooltip },
           },
         }}
-        label="Row Height"
+        label="Row height"
         id="row-height-select"
       >
-        <ListSubheader>Row Height</ListSubheader>
+        <ListSubheader>Row height</ListSubheader>
         {ROW_HEIGHTS.map((height) => (
           <MenuItem key={height} value={height}>
             {height - 1}px
diff --git a/src/components/Table/TableHeader/TableLogs.tsx b/src/components/Table/TableHeader/TableLogs.tsx
index 660c45fb1..4d7d351d6 100644
--- a/src/components/Table/TableHeader/TableLogs.tsx
+++ b/src/components/Table/TableHeader/TableLogs.tsx
@@ -308,14 +308,14 @@ function SnackLog({ log, onClose, onOpenPanel }) {
     >
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Typography variant="overline">
-          {!log && <span className={classes.whiteText}>Build Pending...</span>}
+          {!log && <span className={classes.whiteText}>Build pending…</span>}
           {log?.status === "SUCCESS" && (
             <span
               style={{
                 color: "#aed581",
               }}
             >
-              Build Completed
+              Build completed
             </span>
           )}
           {log?.status === "FAIL" && (
@@ -324,7 +324,7 @@ function SnackLog({ log, onClose, onOpenPanel }) {
                 color: "#e57373",
               }}
             >
-              Build Failed
+              Build failed
             </span>
           )}
           {log?.status === "BUILDING" && (
@@ -421,7 +421,7 @@ export default function TableLogs() {
   return (
     <>
       <TableHeaderButton
-        title="Build Logs"
+        title="Build logs"
         onClick={() => setPanelOpen(true)}
         icon={
           <>
@@ -467,14 +467,14 @@ export default function TableLogs() {
           fullHeight
           title={
             <>
-              Build Logs <Chip label="ALPHA" size="small" />
+              Build logs <Chip label="ALPHA" size="small" />
             </>
           }
           children={
             <>
               {!latestStatus && (
                 <EmptyState
-                  message="No Logs Found"
+                  message="No logs found"
                   description={
                     "When you start building, your logs should be shown here shortly"
                   }
diff --git a/src/components/Table/TableHeader/TableSettings.tsx b/src/components/Table/TableHeader/TableSettings.tsx
index 05005c2fe..ecb4f8874 100644
--- a/src/components/Table/TableHeader/TableSettings.tsx
+++ b/src/components/Table/TableHeader/TableSettings.tsx
@@ -18,7 +18,7 @@ export default function TableSettings() {
   return (
     <>
       <TableHeaderButton
-        title="Table Settings"
+        title="Table settings"
         onClick={() => setOpen(true)}
         icon={<SettingsIcon />}
         disabled={!table}
diff --git a/src/components/Table/TableHeader/index.tsx b/src/components/Table/TableHeader/index.tsx
index 5baad4b2f..778e7ac48 100644
--- a/src/components/Table/TableHeader/index.tsx
+++ b/src/components/Table/TableHeader/index.tsx
@@ -98,7 +98,7 @@ export default function TableHeader() {
         startIcon={<AddRowIcon />}
         // sx={{ pr: 1.5 }}
       >
-        Add Row
+        Add row
       </Button>
       {/*
         <Button
diff --git a/src/components/Table/formatters/FinalColumn.tsx b/src/components/Table/formatters/FinalColumn.tsx
index 38f782d70..ffc9b0571 100644
--- a/src/components/Table/formatters/FinalColumn.tsx
+++ b/src/components/Table/formatters/FinalColumn.tsx
@@ -34,7 +34,7 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
   const handleDelete = async () => tableActions?.row.delete(row.id);
   return (
     <Stack direction="row" spacing={0.5}>
-      <Tooltip title="Duplicate Row">
+      <Tooltip title="Duplicate row">
         <IconButton
           size="small"
           color="inherit"
@@ -53,14 +53,14 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
             });
             if (tableActions) tableActions?.row.add(clonedRow);
           }}
-          aria-label="Duplicate Row"
+          aria-label="Duplicate row"
           className="row-hover-iconButton"
         >
           <CopyCellsIcon />
         </IconButton>
       </Tooltip>
 
-      <Tooltip title={`Delete Row${altPress ? "" : "…"}`}>
+      <Tooltip title={`Delete row${altPress ? "" : "…"}`}>
         <IconButton
           size="small"
           color="inherit"
@@ -87,7 +87,7 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
                   });
                 }
           }
-          aria-label={`Delete Row${altPress ? "" : "…"}`}
+          aria-label={`Delete row${altPress ? "" : "…"}`}
           className="row-hover-iconButton"
           sx={{
             ".rdg-row:hover &.row-hover-iconButton": {
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 2cd24a3c7..5735e5e6d 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -99,7 +99,7 @@ export default function Table() {
         {
           isNew: true,
           key: "new",
-          name: "Add Column",
+          name: "Add column",
           type: FieldType.last,
           index: _columns.length ?? 0,
           width: 204,
diff --git a/src/components/TableSettings/form.tsx b/src/components/TableSettings/form.tsx
index ed5f304c7..97ffceb43 100644
--- a/src/components/TableSettings/form.tsx
+++ b/src/components/TableSettings/form.tsx
@@ -17,7 +17,7 @@ export const tableSettings = (
     {
       type: FieldType.shortText,
       name: "name",
-      label: "Table Name",
+      label: "Table name",
       required: true,
     },
     {
@@ -29,7 +29,7 @@ export const tableSettings = (
     {
       type: FieldType.shortText,
       name: "collection",
-      label: "Collection Name",
+      label: "Collection name",
       required: true,
       assistiveText: (
         <Link
@@ -48,20 +48,20 @@ export const tableSettings = (
     {
       type: FieldType.singleSelect,
       name: "tableType",
-      label: "Table Type",
+      label: "Table type",
       labelPlural: "table types",
       searchable: false,
       defaultValue: "primaryCollection",
       options: [
         {
-          label: "Primary Collection",
+          label: "Primary collection",
           description: `
           Connect this table to the <strong>single collection</strong>
           matching the collection name entered above`,
           value: "primaryCollection",
         },
         {
-          label: "Collection Group",
+          label: "Collection group",
           description: `
           Connect this table to <strong>all collections and subcollections</strong>
           matching the collection name entered above`,
@@ -113,7 +113,7 @@ export const tableSettings = (
     {
       type: FieldType.multiSelect,
       name: "roles",
-      label: "Accessed By",
+      label: "Accessed by",
       options: roles ?? [],
       required: true,
       freeText: true,
@@ -146,7 +146,7 @@ export const tableSettings = (
       defaultValue: 1,
       min: 1,
       max: 5,
-      label: "Collection Depth",
+      label: "Collection depth",
       displayCondition: "return values.tableType === 'collectionGroup'",
       assistiveText: (
         <>
diff --git a/src/components/TableSettings/index.tsx b/src/components/TableSettings/index.tsx
index 14ec015ff..6b89ce061 100644
--- a/src/components/TableSettings/index.tsx
+++ b/src/components/TableSettings/index.tsx
@@ -150,8 +150,8 @@ export default function TableSettingsDialog({
       onClose={handleClose}
       title={
         mode === TableSettingsDialogModes.create
-          ? "Create Table"
-          : "Update Table"
+          ? "Create table"
+          : "Update table"
       }
       fields={tableSettings(
         mode,
@@ -229,7 +229,7 @@ export default function TableSettingsDialog({
                 onClick={handleResetStructure}
                 // endIcon={<GoIcon />}
               >
-                Reset Table Structure…
+                Reset table structure…
               </Button>
             </Confirmation>
 
@@ -264,7 +264,7 @@ export default function TableSettingsDialog({
                 onClick={handleDelete}
                 // endIcon={<GoIcon />}
               >
-                Delete Table…
+                Delete table…
               </Button>
             </Confirmation>
           </div>
diff --git a/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx b/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
index a6db6d8f7..a42afc647 100644
--- a/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
@@ -165,13 +165,13 @@ export default function Step1Columns({
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Select Columns ({config.pairs.length} of {csvData.columns.length})
+              Select columns ({config.pairs.length} of {csvData.columns.length})
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Table Columns
+            Table columns
           </Typography>
         </Grid>
       </Grid>
@@ -263,10 +263,10 @@ export default function Step1Columns({
                     displayEmpty
                     labelPlural="columns"
                     freeText
-                    AddButtonProps={{ children: "Add New Column" }}
+                    AddButtonProps={{ children: "Add new column" }}
                     AddDialogProps={{
-                      title: "Add New Column",
-                      textFieldLabel: "Column Name",
+                      title: "Add new column",
+                      textFieldLabel: "Column name",
                     }}
                   />
                 )}
diff --git a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
index 962f84713..54b93db22 100644
--- a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
@@ -60,7 +60,7 @@ export default function Step2NewColumns({
         <Grid container spacing={2} className={classes.typeSelectRow}>
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              New Table Columns
+              New table columns
             </Typography>
             <Divider />
 
@@ -91,7 +91,7 @@ export default function Step2NewColumns({
               component="h2"
               className={classes.typeHeading}
             >
-              Column Type: {config.newColumns[fieldToEdit].name}
+              Column type: {config.newColumns[fieldToEdit].name}
             </Typography>
 
             <FieldsDropdown
@@ -109,13 +109,13 @@ export default function Step2NewColumns({
           {!isXs && (
             <Grid item xs={12} sm={6}>
               <Typography variant="subtitle2" gutterBottom component="h2">
-                Raw Data
+                Raw data
               </Typography>
             </Grid>
           )}
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Column Preview
+              Column preview
             </Typography>
           </Grid>
         </Grid>
diff --git a/src/components/Wizards/ImportCsvWizard/index.tsx b/src/components/Wizards/ImportCsvWizard/index.tsx
index 5ba460d40..996a61cc0 100644
--- a/src/components/Wizards/ImportCsvWizard/index.tsx
+++ b/src/components/Wizards/ImportCsvWizard/index.tsx
@@ -115,7 +115,7 @@ export default function ImportCsvWizard({
       steps={
         [
           {
-            title: "Choose Columns",
+            title: "Choose columns",
             description: (
               <>
                 <Typography paragraph>
@@ -148,7 +148,7 @@ export default function ImportCsvWizard({
             disableNext: config.pairs.length === 0,
           },
           config.newColumns.length > 0 && {
-            title: "Set Column Types",
+            title: "Set column types",
             description:
               "Set the type of each column to display your data correctly. Some column types have been suggested based on your data.",
             content: (
@@ -168,7 +168,7 @@ export default function ImportCsvWizard({
           {
             title: "Preview",
             description:
-              "Preview your data with your configured columns. You can change column types by clicking “Edit Type” from the column menu at any time.",
+              "Preview your data with your configured columns. You can change column types by clicking “Edit type” from the column menu at any time.",
             content: (
               <Step3Preview
                 csvData={{ ...csvData, rows: parsedRows }}
diff --git a/src/components/Wizards/ImportWizard/Step1Columns.tsx b/src/components/Wizards/ImportWizard/Step1Columns.tsx
index 0506240b6..46a98b9a4 100644
--- a/src/components/Wizards/ImportWizard/Step1Columns.tsx
+++ b/src/components/Wizards/ImportWizard/Step1Columns.tsx
@@ -108,7 +108,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
     <Grid container spacing={3}>
       <Grid item xs={12} sm={6}>
         <Typography variant="subtitle2" gutterBottom component="h2">
-          Select Columns ({selectedFields.length} of {allFields.length})
+          Select columns ({selectedFields.length} of {allFields.length})
         </Typography>
         <Divider />
 
@@ -167,7 +167,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
       </Grid>
       <Grid item xs={12} sm={6}>
         <Typography variant="subtitle2" gutterBottom component="h2">
-          Sort Table Columns
+          Sort table columns
         </Typography>
         <Divider />
 
diff --git a/src/components/Wizards/ImportWizard/Step2Rename.tsx b/src/components/Wizards/ImportWizard/Step2Rename.tsx
index 11f486079..efe48bd66 100644
--- a/src/components/Wizards/ImportWizard/Step2Rename.tsx
+++ b/src/components/Wizards/ImportWizard/Step2Rename.tsx
@@ -66,13 +66,13 @@ export default function Step2Rename({
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Field Names
+              Field names
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Set Column Names
+            Set column names
           </Typography>
         </Grid>
       </Grid>
diff --git a/src/components/Wizards/ImportWizard/Step3Types.tsx b/src/components/Wizards/ImportWizard/Step3Types.tsx
index 433f7ef90..cad1c3a4a 100644
--- a/src/components/Wizards/ImportWizard/Step3Types.tsx
+++ b/src/components/Wizards/ImportWizard/Step3Types.tsx
@@ -45,7 +45,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
       <Grid container spacing={2} className={classes.typeSelectRow}>
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Table Columns
+            Table columns
           </Typography>
           <Divider />
 
@@ -78,7 +78,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
             component="h2"
             className={classes.typeHeading}
           >
-            Column Type: {config[fieldToEdit].name}
+            Column type: {config[fieldToEdit].name}
           </Typography>
 
           <FieldsDropdown
@@ -94,13 +94,13 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
         {!isXs && (
           <Grid item xs={12} sm={6}>
             <Typography variant="subtitle2" gutterBottom component="h2">
-              Raw Data
+              Raw data
             </Typography>
           </Grid>
         )}
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" gutterBottom component="h2">
-            Column Preview
+            Column preview
           </Typography>
         </Grid>
       </Grid>
diff --git a/src/components/Wizards/ImportWizard/index.tsx b/src/components/Wizards/ImportWizard/index.tsx
index 501e23b7a..64c9602b3 100644
--- a/src/components/Wizards/ImportWizard/index.tsx
+++ b/src/components/Wizards/ImportWizard/index.tsx
@@ -64,7 +64,7 @@ export default function ImportWizard() {
       title="Import"
       steps={[
         {
-          title: "Choose Columns",
+          title: "Choose columns",
           description: (
             <>
               <Typography gutterBottom>
@@ -88,7 +88,7 @@ export default function ImportWizard() {
           disableNext: Object.keys(config).length === 0,
         },
         {
-          title: "Rename Columns",
+          title: "Rename columns",
           description:
             "Rename your table columns with user-friendly names. These changes will not update the field names in your database.",
           content: (
@@ -101,7 +101,7 @@ export default function ImportWizard() {
           ),
         },
         {
-          title: "Set Column Types",
+          title: "Set column types",
           description:
             "Set the type of each column to display your data correctly. Some column types have been suggested based on your data.",
           content: (
@@ -116,7 +116,7 @@ export default function ImportWizard() {
         {
           title: "Preview",
           description:
-            "Preview your data with your configured columns. You can change column types by clicking “Edit Type” from the column menu at any time.",
+            "Preview your data with your configured columns. You can change column types by clicking “Edit type” from the column menu at any time.",
           content: (
             <Step4Preview
               config={config}
diff --git a/src/components/fields/Action/Settings.tsx b/src/components/fields/Action/Settings.tsx
index 07247936c..a7e374fda 100644
--- a/src/components/fields/Action/Settings.tsx
+++ b/src/components/fields/Action/Settings.tsx
@@ -30,7 +30,7 @@ const Settings = ({ config, handleChange }) => {
         Authenticated user must have at least one of these to run the script
       </Typography>
       <MultiSelect
-        label={"Allowed Roles"}
+        label="Allowed roles"
         options={roles ?? []}
         value={config.requiredRoles ?? []}
         onChange={handleChange("requiredRoles")}
@@ -42,19 +42,19 @@ const Settings = ({ config, handleChange }) => {
       </Typography>
 
       <MultiSelect
-        label={"Required fields"}
+        label="Required fields"
         options={columnOptions}
         value={config.requiredFields ?? []}
         onChange={handleChange("requiredFields")}
       />
       <Divider />
-      <Typography variant="overline">Confirmation Template</Typography>
+      <Typography variant="overline">Confirmation template</Typography>
       <Typography variant="body2">
         The action button will not ask for confirmation if this is left empty
       </Typography>
 
       <TextField
-        label="Confirmation Template"
+        label="Confirmation template"
         placeholder="Are sure you want to invest {{stockName}}?"
         value={config.confirmation}
         onChange={(e) => {
@@ -80,7 +80,7 @@ const Settings = ({ config, handleChange }) => {
       />
       {!Boolean(config.isActionScript) ? (
         <TextField
-          label="callable name"
+          label="Callable name"
           name="callableName"
           value={config.callableName}
           fullWidth
@@ -161,10 +161,10 @@ const Settings = ({ config, handleChange }) => {
           {config["undo.enabled"] && (
             <>
               <Typography variant="overline">
-                Undo Confirmation Template
+                Undo confirmation template
               </Typography>
               <TextField
-                label="template"
+                label="Template"
                 placeholder="are you sure you want to sell your stocks in {{stockName}}"
                 value={config["undo.confirmation"]}
                 onChange={(e) => {
@@ -172,7 +172,7 @@ const Settings = ({ config, handleChange }) => {
                 }}
                 fullWidth
               />
-              <Typography variant="overline">Undo Action script</Typography>
+              <Typography variant="overline">Undo action script</Typography>
               <Suspense fallback={<FieldSkeleton height={300} />}>
                 <CodeEditor
                   height={300}
diff --git a/src/components/fields/Aggregate/Settings.tsx b/src/components/fields/Aggregate/Settings.tsx
index f739c9403..8d8895a80 100644
--- a/src/components/fields/Aggregate/Settings.tsx
+++ b/src/components/fields/Aggregate/Settings.tsx
@@ -21,7 +21,7 @@ const Settings = ({ config, handleChange }) => {
   return (
     <>
       <MultiSelect
-        label={"Sub Tables"}
+        label="Sub-tables"
         options={columnOptions}
         value={config.requiredFields ?? []}
         onChange={handleChange("subtables")}
diff --git a/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx b/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
index cd42447bb..708cd0faf 100644
--- a/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
+++ b/src/components/fields/ConnectService/ConnectServiceSelect/PopupContents.tsx
@@ -192,7 +192,7 @@ export default function PopupContents({
               color="primary"
               className={classes.selectAllButton}
             >
-              Clear Selection
+              Clear selection
             </Button>
           </Grid>
         </Grid>
diff --git a/src/components/fields/ConnectService/Settings.tsx b/src/components/fields/ConnectService/Settings.tsx
index f71a4fa1e..fd4205e19 100644
--- a/src/components/fields/ConnectService/Settings.tsx
+++ b/src/components/fields/ConnectService/Settings.tsx
@@ -4,7 +4,7 @@ export default function Settings({ config, handleChange }) {
   return (
     <>
       <TextField
-        label="Webservice Url"
+        label="Web service URL"
         name="url"
         value={config.url}
         fullWidth
@@ -13,7 +13,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Results key Path"
+        label="Results key path"
         name="resultsKey"
         helperText="Can be specified as a key path"
         placeholder="data.results"
@@ -24,7 +24,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Primary Key"
+        label="Primary key"
         name="primaryKey"
         value={config.primaryKey}
         fullWidth
@@ -33,7 +33,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="Title Key (optional)"
+        label="Title key (optional)"
         name="titleKey"
         value={config.titleKey}
         fullWidth
@@ -42,7 +42,7 @@ export default function Settings({ config, handleChange }) {
         }}
       />
       <TextField
-        label="SubTitle Key (optional)"
+        label="Subtitle key (optional)"
         name="subtitleKey"
         value={config.subtitleKey}
         fullWidth
diff --git a/src/components/fields/ConnectTable/Settings.tsx b/src/components/fields/ConnectTable/Settings.tsx
index fc0fcbb61..61a272c22 100644
--- a/src/components/fields/ConnectTable/Settings.tsx
+++ b/src/components/fields/ConnectTable/Settings.tsx
@@ -50,10 +50,10 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         onChange={handleChange("index")}
         multiple={false}
         label="Table"
-        labelPlural="Tables"
+        labelPlural="tables"
       />
       <TextField
-        label="Filter Template"
+        label="Filter template"
         name="filters"
         fullWidth
         value={config.filters}
@@ -62,7 +62,7 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         }}
       />
       <MultiSelect
-        label={"Primary Keys"}
+        label="Primary keys"
         value={config.primaryKeys ?? []}
         options={columns.filter((c) =>
           [FieldType.shortText, FieldType.singleSelect].includes(c.type)
@@ -70,13 +70,13 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         onChange={handleChange("primaryKeys")}
       />
       <MultiSelect
-        label={"Snapshot Fields"}
+        label="Snapshot fields"
         value={config.snapshotFields ?? []}
         options={columns.filter((c) => ![FieldType.subTable].includes(c.type))}
         onChange={handleChange("snapshotFields")}
       />
       <MultiSelect
-        label={"Tracked Fields"}
+        label="Tracked fields"
         value={config.trackedFields ?? []}
         options={columns.filter((c) => ![FieldType.subTable].includes(c.type))}
         onChange={handleChange("trackedFields")}
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 74a8af037..5de64c181 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -28,7 +28,7 @@ const Settings = ({ config, handleChange }) => {
       <Grid container direction="row" spacing={2} flexWrap="nowrap">
         <Grid item xs={12} md={6}>
           <MultiSelect
-            label={"Listener Fields"}
+            label="Listener fields"
             options={columnOptions}
             value={config.listenerFields ?? []}
             onChange={handleChange("listenerFields")}
@@ -41,7 +41,7 @@ const Settings = ({ config, handleChange }) => {
 
         <Grid item xs={12} md={6}>
           <FieldsDropdown
-            label="Output Field Type"
+            label="Output field type"
             value={config.renderFieldType}
             options={Object.values(FieldType).filter(
               (f) =>
@@ -59,15 +59,15 @@ const Settings = ({ config, handleChange }) => {
         </Grid>
       </Grid>
 
-<div>
-      <InputLabel>Derivative Script</InputLabel>
-      <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
-      <Suspense fallback={<FieldSkeleton height={200} />}>
-        <CodeEditor
-          script={config.script}
-          handleChange={handleChange("script")}
-        />
-      </Suspense>
+      <div>
+        <InputLabel>Derivative script</InputLabel>
+        <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
+        <Suspense fallback={<FieldSkeleton height={200} />}>
+          <CodeEditor
+            script={config.script}
+            handleChange={handleChange("script")}
+          />
+        </Suspense>
       </div>
     </>
   );
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index ab1ffc774..e462cf5c2 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -126,7 +126,7 @@ function ControlledFileUploader({
                 <div>
                   <Confirmation
                     message={{
-                      title: "Delete File?",
+                      title: "Delete file?",
                       confirm: "Delete",
                     }}
                     functionName={!disabled ? "onDelete" : ""}
diff --git a/src/components/fields/File/TableCell.tsx b/src/components/fields/File/TableCell.tsx
index cd6c92e1c..9d6095561 100644
--- a/src/components/fields/File/TableCell.tsx
+++ b/src/components/fields/File/TableCell.tsx
@@ -156,7 +156,7 @@ export default function File_({
                       : () =>
                           requestConfirmation({
                             handleConfirm: () => handleDelete(file.ref),
-                            title: "Delete File",
+                            title: "Delete file",
                             body: "Are you sure you want to delete this file?",
                             confirm: "Delete",
                           })
diff --git a/src/components/fields/ShortText/Settings.tsx b/src/components/fields/ShortText/Settings.tsx
index 7592fdbe7..90efca642 100644
--- a/src/components/fields/ShortText/Settings.tsx
+++ b/src/components/fields/ShortText/Settings.tsx
@@ -5,7 +5,7 @@ export default function Settings({ handleChange, config }) {
     <>
       <TextField
         type="number"
-        label="Character Limit"
+        label="Character limit"
         id="character-limit"
         value={config.maxLength}
         fullWidth
@@ -16,7 +16,7 @@ export default function Settings({ handleChange, config }) {
       />
       <TextField
         type="text"
-        label="Validation Regex"
+        label="Validation regex"
         id="validation-regex"
         value={config.validationRegex}
         fullWidth
diff --git a/src/components/fields/SingleSelect/Settings.tsx b/src/components/fields/SingleSelect/Settings.tsx
index 7a89f7464..b34a7dd37 100644
--- a/src/components/fields/SingleSelect/Settings.tsx
+++ b/src/components/fields/SingleSelect/Settings.tsx
@@ -59,7 +59,7 @@ export default function Settings({ handleChange, config }) {
               </Grid>
               <Grid item>
                 <IconButton
-                  aria-label="remove"
+                  aria-label="Remove"
                   onClick={() =>
                     handleChange("options")(
                       options.filter((o: string) => o !== option)
@@ -79,7 +79,7 @@ export default function Settings({ handleChange, config }) {
       <Grid container direction="row" alignItems="center">
         <Grid item>
           <IconButton
-            aria-label="add new"
+            aria-label="Add new"
             onClick={() => {
               handleAdd();
             }}
@@ -92,7 +92,7 @@ export default function Settings({ handleChange, config }) {
             value={newOption}
             className={classes.field}
             fullWidth
-            label={"New Option"}
+            label="New option"
             id="new-option"
             onChange={(e) => {
               setNewOption(e.target.value);
diff --git a/src/components/fields/Slider/Settings.tsx b/src/components/fields/Slider/Settings.tsx
index 633d68d22..7ae48102f 100644
--- a/src/components/fields/Slider/Settings.tsx
+++ b/src/components/fields/Slider/Settings.tsx
@@ -4,7 +4,7 @@ import Subheading from "components/Table/ColumnMenu/Subheading";
 export default function Settings({ handleChange, config }) {
   return (
     <>
-      <Subheading>Slider Config</Subheading>
+      <Subheading>Slider config</Subheading>
 
       <TextField
         variant="filled"
@@ -13,7 +13,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("min")(parseFloat(e.target.value))}
         value={config["min"]}
         id={`settings-field-min`}
-        label="Minimum Value"
+        label="Minimum value"
         type="number"
       />
 
@@ -24,7 +24,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("max")(parseFloat(e.target.value))}
         value={config["max"]}
         id={`settings-field-max`}
-        label="Maximum Value"
+        label="Maximum value"
         type="number"
       />
 
@@ -35,7 +35,7 @@ export default function Settings({ handleChange, config }) {
         onChange={(e) => handleChange("step")(parseFloat(e.target.value))}
         value={config["step"]}
         id={`settings-field-step`}
-        label="Step Value"
+        label="Step value"
         type="number"
       />
 
diff --git a/src/components/fields/Status/Settings.tsx b/src/components/fields/Status/Settings.tsx
index cb2a43628..63a829f81 100644
--- a/src/components/fields/Status/Settings.tsx
+++ b/src/components/fields/Status/Settings.tsx
@@ -8,6 +8,7 @@ import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 
 import EditIcon from "@mui/icons-material/Edit";
+import AddIcon from "@mui/icons-material/Add";
 import Modal from "components/Modal";
 import DeleteIcon from "@mui/icons-material/Delete";
 import Typography from "@mui/material/Typography";
@@ -64,19 +65,19 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
   return (
     <Modal
       open={modal.isOpen}
-      title={`${modal.index ? "Edit" : "Add"} Condition`}
+      title={`${modal.index ? "Edit" : "Add"} condition`}
       maxWidth={"xs"}
       onClose={handleClose}
       actions={{
         primary:
           modal.index === null
             ? {
-                children: "Add Condition",
+                children: "Add condition",
                 onClick: handleAdd,
                 disabled: false,
               }
             : {
-                children: "Save Changes",
+                children: "Save changes",
                 onClick: handleSave,
                 disabled: false,
               },
@@ -90,7 +91,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               }
             : {
                 startIcon: <DeleteIcon />,
-                children: "Remove Condition",
+                children: "Remove condition",
                 onClick: handleRemove,
               },
       }}
@@ -108,7 +109,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
             onChange={handleUpdate("type")}
             value={modal.condition.type}
             multiple={false}
-            label={"Select data type"}
+            label="Select data type"
           />
           <Typography variant="overline">Condition </Typography>
           {modal.condition.type === "boolean" && (
@@ -120,7 +121,7 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               onChange={(v) => handleUpdate("value")(v === "true")}
               value={modal.condition.value ? "true" : "false"}
               multiple={false}
-              label={"Select Condition Value"}
+              label="Select condition value"
             />
           )}
 
@@ -129,21 +130,21 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
               <div style={{ width: "45%" }}>
                 <MultiSelect
                   options={[
-                    { label: "Less Than", value: "<" },
-                    { label: "Less Than or Equal", value: "<=" },
+                    { label: "Less than", value: "<" },
+                    { label: "Less than or equal", value: "<=" },
                     { label: "Equal", value: "==" },
-                    { label: "Equal or More Than", value: ">=" },
-                    { label: "More Than", value: ">" },
+                    { label: "Equal or more than", value: ">=" },
+                    { label: "More than", value: ">" },
                   ]}
                   onChange={handleUpdate("operator")}
                   value={modal.condition.operator}
                   multiple={false}
-                  label={"Select Operator"}
+                  label="Select operator"
                 />
               </div>
               <TextField
-                type={"number"}
-                label={"Value"}
+                type="number"
+                label="Value"
                 value={modal.condition.value}
                 onChange={(e) => handleUpdate("value")(e.target.value)}
               />
@@ -152,16 +153,16 @@ const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
           {modal.condition.type === "string" && (
             <TextField
               fullWidth
-              label={"Value"}
+              label="Value"
               value={modal.condition.value}
               onChange={(e) => handleUpdate("value")(e.target.value)}
             />
           )}
 
-          <Typography variant="overline">assigned label (output)</Typography>
+          <Typography variant="overline">Assigned label (output)</Typography>
           <TextField
             value={modal.condition.label}
-            label={"Type the cell output"}
+            label="Type the cell output"
             fullWidth
             onChange={(e) => handleUpdate("label")(e.target.value)}
           />
@@ -212,13 +213,16 @@ export default function Settings({ handleChange, config }: ISettingsProps) {
         })
       ) : (
         <>
-          no conditions set yet
+          No conditions set yet
           <br />
         </>
       )}
 
-      <Button onClick={() => setModal({ ...EMPTY_STATE, isOpen: true })}>
-        + ADD CONDITION
+      <Button
+        onClick={() => setModal({ ...EMPTY_STATE, isOpen: true })}
+        startIcon={<AddIcon />}
+      >
+        Add condition
       </Button>
       <ConditionModal
         modal={modal}
diff --git a/src/components/fields/SubTable/Settings.tsx b/src/components/fields/SubTable/Settings.tsx
index 04271a779..1c30cd756 100644
--- a/src/components/fields/SubTable/Settings.tsx
+++ b/src/components/fields/SubTable/Settings.tsx
@@ -18,7 +18,7 @@ const Settings = ({ config, handleChange }) => {
   return (
     <>
       <MultiSelect
-        label={"Parent Label"}
+        label="Parent label"
         options={columnOptions}
         value={config.parentLabel ?? []}
         onChange={handleChange("parentLabel")}
diff --git a/src/hooks/useTable/useTableData.tsx b/src/hooks/useTable/useTableData.tsx
index e1a06d90a..8b50d65b0 100644
--- a/src/hooks/useTable/useTableData.tsx
+++ b/src/hooks/useTable/useTableData.tsx
@@ -189,7 +189,7 @@ const useTableData = () => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Create Index
+                  Create index
                 </Button>
               ),
             }
diff --git a/src/pages/Auth/ImpersonatorAuth.tsx b/src/pages/Auth/ImpersonatorAuth.tsx
index ff6089ab1..9ffee15dc 100644
--- a/src/pages/Auth/ImpersonatorAuth.tsx
+++ b/src/pages/Auth/ImpersonatorAuth.tsx
@@ -45,7 +45,7 @@ export default function ImpersonatorAuthPage() {
   return (
     <AuthLayout
       loading={loading}
-      title="Admin Auth"
+      title="Admin auth"
       description={
         <>
           <Typography
@@ -99,7 +99,7 @@ export default function ImpersonatorAuthPage() {
             disabled={email === ""}
             onClick={() => handleAuth(email)}
           >
-            Sign In
+            Sign in
           </Button>
         </>
       )}
diff --git a/src/pages/Auth/JwtAuth.tsx b/src/pages/Auth/JwtAuth.tsx
index ea4be5491..d75bef300 100644
--- a/src/pages/Auth/JwtAuth.tsx
+++ b/src/pages/Auth/JwtAuth.tsx
@@ -27,7 +27,7 @@ export default function JwtAuthPage() {
   };
 
   return (
-    <AuthLayout loading={loading} title="Test Authentication">
+    <AuthLayout loading={loading} title="Test auth">
       <TextField
         name="JWT"
         label="JWT"
diff --git a/src/pages/Auth/SetupGuide.tsx b/src/pages/Auth/SetupGuide.tsx
index 7d8933824..601e4dec0 100644
--- a/src/pages/Auth/SetupGuide.tsx
+++ b/src/pages/Auth/SetupGuide.tsx
@@ -9,7 +9,7 @@ import { name } from "@root/package.json";
 export default function AuthSetupGuide() {
   return (
     <AuthLayout
-      title="Set Up Firebase Authentication"
+      title="Set up Firebase Authentication"
       description={
         <>
           To sign in to {name}, first set up Firebase Authentication in the
@@ -25,7 +25,7 @@ export default function AuthSetupGuide() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Setup Guide
+        Setup guide
       </Button>
     </AuthLayout>
   );
diff --git a/src/pages/Auth/SignOut.tsx b/src/pages/Auth/SignOut.tsx
index 74bff1f75..97e8f202a 100644
--- a/src/pages/Auth/SignOut.tsx
+++ b/src/pages/Auth/SignOut.tsx
@@ -12,9 +12,9 @@ export default function SignOutPage() {
   }, []);
 
   return (
-    <AuthLayout title="Signed Out">
+    <AuthLayout title="Signed out">
       <Button component={Link} to="/auth" variant="outlined">
-        Sign In Again
+        Sign in again
       </Button>
     </AuthLayout>
   );
diff --git a/src/pages/Auth/SignUp.tsx b/src/pages/Auth/SignUp.tsx
index 57a0100e6..7d709aa41 100644
--- a/src/pages/Auth/SignUp.tsx
+++ b/src/pages/Auth/SignUp.tsx
@@ -27,7 +27,7 @@ export default function SignUpPage() {
         <AuthLayout
           hideLogo={!isMobile}
           hideLinks={!isMobile}
-          title="Sign Up"
+          title="Sign up"
           description={
             <>
               Welcome! To join this project, sign in with the email address
diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
index b21e42039..98454375f 100644
--- a/src/pages/Auth/index.tsx
+++ b/src/pages/Auth/index.tsx
@@ -14,7 +14,7 @@ export default function AuthPage() {
   }
 
   return (
-    <AuthLayout title="Sign In">
+    <AuthLayout title="Sign in">
       <FirebaseUi uiConfig={uiConfig} />
     </AuthLayout>
   );
diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx
index 6c376c3e0..23f8ec448 100644
--- a/src/pages/Deploy.tsx
+++ b/src/pages/Deploy.tsx
@@ -44,7 +44,7 @@ export default function DeployPage() {
           hideLogo={!isMobile}
           hideProject
           hideLinks={!isMobile}
-          title="Get Started"
+          title="Get started"
           description={
             <>
               <FormControl component="fieldset" variant="standard">
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 21e2ec010..e44f8b2b2 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -105,7 +105,7 @@ export default function HomePage() {
     return <AccessDenied />;
 
   const createTableFab = (
-    <Tooltip title="Create Table">
+    <Tooltip title="Create table">
       <Zoom in>
         <Fab
           color="secondary"
@@ -146,7 +146,7 @@ export default function HomePage() {
 
     return (
       <EmptyState
-        message="No Tables"
+        message="No tables"
         description="There are no tables in this project. Sign in with an admin account to create tables."
         fullScreen
         style={{ marginTop: -APP_BAR_HEIGHT }}
@@ -206,7 +206,7 @@ export default function HomePage() {
   return (
     <Container component="main" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       <FloatingSearch
-        label="Search Tables"
+        label="Search tables"
         onChange={(e) => handleQuery(e.target.value)}
         paperSx={{
           maxWidth: (theme) => ({ md: theme.breakpoints.values.sm - 48 }),
@@ -227,7 +227,7 @@ export default function HomePage() {
             sx={{ pl: 2, cursor: "default" }}
           >
             {query ? `${results.length} of ${tables.length}` : tables.length}{" "}
-            Tables
+            tables
           </Typography>
 
           <ToggleButtonGroup
diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
index d7111e9fe..3013aad14 100644
--- a/src/pages/PageNotFound.tsx
+++ b/src/pages/PageNotFound.tsx
@@ -18,7 +18,7 @@ export default function PageNotFound() {
 
   if (!currentUser)
     return (
-      <AuthLayout title="Page Not Found">
+      <AuthLayout title="Page not found">
         <Button
           variant="outlined"
           sx={{ mt: 3 }}
@@ -31,9 +31,9 @@ export default function PageNotFound() {
     );
 
   return (
-    <Navigation title="Page Not Found" titleComponent={() => <div />}>
+    <Navigation title="Page not found" titleComponent={() => <div />}>
       <EmptyState
-        message="Page Not Found"
+        message="Page not found"
         description={
           <Button
             variant="outlined"
diff --git a/src/pages/RowyRunTest.tsx b/src/pages/RowyRunTest.tsx
index cde725865..341f2ed13 100644
--- a/src/pages/RowyRunTest.tsx
+++ b/src/pages/RowyRunTest.tsx
@@ -85,7 +85,7 @@ export default function TestView() {
           label="Localhost?"
         />
         <TextField
-          label="Defined Route"
+          label="Defined route"
           select
           value={
             Object.values(runRoutes).find((r) => r.path === path)?.path ?? ""
diff --git a/src/pages/Settings/UserManagement.tsx b/src/pages/Settings/UserManagement.tsx
index 41a0b0e17..2b6bd0736 100644
--- a/src/pages/Settings/UserManagement.tsx
+++ b/src/pages/Settings/UserManagement.tsx
@@ -46,7 +46,7 @@ export default function UserManagementPage() {
   return (
     <Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       <FloatingSearch
-        label="Search Users"
+        label="Search users"
         onChange={(e) => handleQuery(e.target.value)}
       />
 
@@ -62,7 +62,7 @@ export default function UserManagementPage() {
             {!loading && query
               ? `${results.length} of ${usersState.documents.length}`
               : usersState.documents.length}{" "}
-            Users
+            users
           </Typography>
 
           <InviteUser />
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index c37ce72da..4b11ae672 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -157,7 +157,7 @@ export default function SetupPage() {
           color="primary"
           type="submit"
         >
-          Get Started
+          Get started
         </LoadingButton>
       ) : (
         <Tooltip title="Please accept the terms and conditions">
@@ -168,7 +168,7 @@ export default function SetupPage() {
               color="primary"
               disabled
             >
-              Get Started
+              Get started
             </LoadingButton>
           </div>
         </Tooltip>
@@ -177,25 +177,25 @@ export default function SetupPage() {
     {
       id: "rowyRun",
       shortTitle: `${name} Run`,
-      title: `Set Up ${name} Run`,
+      title: `Set up ${name} Run`,
       body: <Step1RowyRun {...stepProps} />,
     },
     {
       id: "serviceAccount",
-      shortTitle: `Service Account`,
-      title: `Set Up Service Account`,
+      shortTitle: `Service account`,
+      title: `Set up service account`,
       body: <Step2ServiceAccount {...stepProps} />,
     },
     {
       id: "projectOwner",
-      shortTitle: `Project Owner`,
-      title: `Set Up Project Owner`,
+      shortTitle: `Project owner`,
+      title: `Set up project owner`,
       body: <Step3ProjectOwner {...stepProps} />,
     },
     {
       id: "rules",
       shortTitle: `Rules`,
-      title: `Set Up Firestore Rules`,
+      title: `Set up Firestore Rules`,
       body: <Step4Rules {...stepProps} />,
     },
     completion.migrate !== undefined

From a32c7a0c5b481b23977b551c1b19df4662167384 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 10:40:44 +1000
Subject: [PATCH 03/15] customise MultiSelect add item icons from theme

---
 package.json             |  3 +--
 src/theme/components.tsx | 27 +++++++++++++++++++++++++++
 yarn.lock                |  8 ++++----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d0062e3bf..0a27d64c4 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,7 @@
     "@mui/lab": "^5.0.0-alpha.47",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
-    "@rowy/form-builder": "^0.1.2",
-    "@rowy/multiselect": "^0.1.12",
+    "@rowy/multiselect": "^0.2.0",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 55442d2f8..7f1ff186c 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1,10 +1,13 @@
 import { Theme, ThemeOptions } from "@mui/material/styles";
 import type {} from "@mui/lab/themeAugmentation";
+import { MultiSelectProps } from "@rowy/multiselect";
 import { toRem } from "./typography";
 
 import RadioIcon from "theme/RadioIcon";
 import CheckboxIcon from "theme/CheckboxIcon";
 import CheckboxIndeterminateIcon from "theme/CheckboxIndeterminateIcon";
+import AddCircleIcon from "@mui/icons-material/AddCircleOutline";
+import { SvgIcon } from "@mui/material";
 
 import { colord, extend } from "colord";
 import mixPlugin from "colord/plugins/mix";
@@ -16,6 +19,17 @@ declare module "@mui/material/styles/createTransitions" {
   }
 }
 
+declare module "@mui/material/styles" {
+  interface Components {
+    RowyMultiSelect?: {
+      defaultProps?: Omit<
+        MultiSelectProps<any>,
+        "multiple" | "value" | "onChange" | "options"
+      >;
+    };
+  }
+}
+
 export const components = (theme: Theme): ThemeOptions => {
   const buttonPrimaryHover = colord(theme.palette.primary.main)
     .mix(theme.palette.primary.contrastText, 0.12)
@@ -901,6 +915,19 @@ export const components = (theme: Theme): ThemeOptions => {
           },
         },
       },
+
+      RowyMultiSelect: {
+        defaultProps: {
+          AddButtonProps: {
+            singleIcon: <AddCircleIcon />,
+            multipleIcon: (
+              <SvgIcon>
+                <path d="M17 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10Zm0 2H7a2 2 0 0 0-1.995 1.85L5 7v10a2 2 0 0 0 1.85 1.995L7 19h10a2 2 0 0 0 1.995-1.85L19 17V7a2 2 0 0 0-1.85-1.995L17 5Zm-6 12h2v-4h4v-2h-4V7h-2v4H7v2h4v4Z" />
+              </SvgIcon>
+            ),
+          },
+        },
+      },
     },
   };
 };
diff --git a/yarn.lock b/yarn.lock
index d995a16ff..8d81228d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2672,10 +2672,10 @@
     use-debounce "^3.4.3"
     yup "^0.32.9"
 
-"@rowy/multiselect@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.12.tgz#03380ceaaed9f6847c59b6ccae6d216ce149d95a"
-  integrity sha512-1JmH5EDt0OSxcUWjQXfqGwp4w2xDJ5OjfS1uV9pXv7AcTw++RqwQKsF15llKYyatvpZohSyaVQIogPh7Zzpe/g==
+"@rowy/multiselect@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.2.0.tgz#b915d3cfcd5f7fc2947e97d242510894e454281e"
+  integrity sha512-PAQ6LCMkEbAS558krXq8UyI8/9rZ/jmNU9cxSyvtnjHF7GVS7ZIRFDU8InV+nzYHsJWF/QYtH7o3X64kRmDrgQ==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"

From 9dfd2ca7da9e28efcb1385b98c5aca521be7a9fd Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 10:41:19 +1000
Subject: [PATCH 04/15] form-builder: support responsive gridCols

---
 package.json | 1 +
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 0a27d64c4..5ba0d58c1 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@mui/lab": "^5.0.0-alpha.47",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
+    "@rowy/form-builder": "^0.2.0",
     "@rowy/multiselect": "^0.2.0",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
diff --git a/yarn.lock b/yarn.lock
index 8d81228d1..56b0093bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2652,10 +2652,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.1.2.tgz#eb19bfa329ad38f0fd9047c0a4f3259c12fac780"
-  integrity sha512-m92jbHUe81KCCr1PiuyC9kpNhRaZylMOunDp3/PMhzxb7Ng+Ua+RQkQYQuVxz59ucapvLDrGtraieeQdU8HChg==
+"@rowy/form-builder@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.2.0.tgz#407c1be0e8fa8e40f57546be4499f7f6b93285de"
+  integrity sha512-YO/kES8k4xj+1tteF+07gIpb/xrk0ZkyRE+2NxA9loSnkJ3XKDIj0/GadF8CMIdS9cEaRgCHLfswK3pkJjKGCg==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@mdi/js" "^5.9.55"

From 26df992b2a8a327094d7bd8287010a3c018bf23c Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 10:42:00 +1000
Subject: [PATCH 05/15] upgrade react-hook-form to v7 to match
 @rowy/form-builder

---
 package.json                                      |  3 ++-
 src/components/SideDrawer/Form/Autosave.tsx       |  6 +++---
 src/components/SideDrawer/Form/Reset.tsx          | 10 +++++-----
 src/components/SideDrawer/Form/index.tsx          |  7 +++----
 src/components/fields/Action/SideDrawerField.tsx  |  2 +-
 .../fields/Checkbox/SideDrawerField.tsx           |  2 +-
 src/components/fields/Code/SideDrawerField.tsx    |  2 +-
 src/components/fields/Color/SideDrawerField.tsx   |  2 +-
 .../fields/ConnectService/SideDrawerField.tsx     |  2 +-
 .../fields/ConnectTable/SideDrawerField.tsx       |  9 ++++-----
 src/components/fields/Date/SideDrawerField.tsx    |  2 +-
 .../fields/DateTime/SideDrawerField.tsx           |  2 +-
 .../fields/Duration/SideDrawerField.tsx           |  2 +-
 src/components/fields/Email/SideDrawerField.tsx   |  2 +-
 src/components/fields/File/SideDrawerField.tsx    |  2 +-
 src/components/fields/Image/SideDrawerField.tsx   |  2 +-
 src/components/fields/Json/SideDrawerField.tsx    |  2 +-
 .../fields/LongText/SideDrawerField.tsx           |  2 +-
 .../fields/MultiSelect/SideDrawerField.tsx        |  2 +-
 src/components/fields/Number/SideDrawerField.tsx  |  2 +-
 .../fields/Percentage/SideDrawerField.tsx         |  2 +-
 src/components/fields/Phone/SideDrawerField.tsx   |  2 +-
 src/components/fields/Rating/SideDrawerField.tsx  |  2 +-
 .../fields/RichText/SideDrawerField.tsx           |  2 +-
 .../fields/ShortText/SideDrawerField.tsx          |  2 +-
 .../fields/SingleSelect/SideDrawerField.tsx       |  2 +-
 src/components/fields/Slider/SideDrawerField.tsx  |  2 +-
 src/components/fields/Status/SideDrawerField.tsx  |  2 +-
 src/components/fields/Url/SideDrawerField.tsx     |  2 +-
 src/components/fields/User/SideDrawerField.tsx    |  2 +-
 src/components/fields/types.ts                    |  3 ++-
 yarn.lock                                         | 15 ++++++++++-----
 32 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 5ba0d58c1..79cea7ee6 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@date-io/date-fns": "1.x",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@hookform/resolvers": "^2.8.1",
     "@mdi/js": "^5.9.55",
     "@monaco-editor/react": "^4.1.0",
     "@mui/icons-material": "^5.0.0",
@@ -51,7 +52,7 @@
     "react-element-scroll-hook": "^1.1.0",
     "react-firebaseui": "^5.0.2",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6",
+    "react-hook-form": "^7.16.1",
     "react-image": "^4.0.3",
     "react-joyride": "^2.3.0",
     "react-json-view": "^1.19.1",
diff --git a/src/components/SideDrawer/Form/Autosave.tsx b/src/components/SideDrawer/Form/Autosave.tsx
index de996ad7a..7dc6854f9 100644
--- a/src/components/SideDrawer/Form/Autosave.tsx
+++ b/src/components/SideDrawer/Form/Autosave.tsx
@@ -4,7 +4,7 @@ import _isEqual from "lodash/isEqual";
 import _pick from "lodash/pick";
 import _pickBy from "lodash/pickBy";
 
-import { Control, UseFormMethods, useWatch } from "react-hook-form";
+import { Control, UseFormReturn, useWatch } from "react-hook-form";
 import { Values } from "./utils";
 
 import { useProjectContext } from "contexts/ProjectContext";
@@ -14,8 +14,8 @@ export interface IAutosaveProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   row: any;
-  reset: UseFormMethods["reset"];
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
 }
 
 const getEditables = (values: Values, tableState?: TableState) =>
diff --git a/src/components/SideDrawer/Form/Reset.tsx b/src/components/SideDrawer/Form/Reset.tsx
index eef61568e..fd75d0385 100644
--- a/src/components/SideDrawer/Form/Reset.tsx
+++ b/src/components/SideDrawer/Form/Reset.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { UseFormMethods } from "react-hook-form";
+import { UseFormReturn } from "react-hook-form";
 import _pickBy from "lodash/pickBy";
 import _isEqual from "lodash/isEqual";
 
@@ -7,9 +7,9 @@ import { Values } from "./utils";
 
 export interface IResetProps {
   defaultValues: Values;
-  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
-  reset: UseFormMethods["reset"];
-  getValues: UseFormMethods["getValues"];
+  dirtyFields: UseFormReturn["formState"]["dirtyFields"];
+  reset: UseFormReturn["reset"];
+  getValues: UseFormReturn["getValues"];
 }
 
 /**
@@ -38,7 +38,7 @@ export default function Reset({
       const diff = _pickBy(getValues(), (v, k) => !_isEqual(v, resetValues[k]));
       // Reset if needed & keep the current dirty fields
       if (Object.keys(diff).length > 0) {
-        reset(resetValues, { isDirty: true, dirtyFields: true });
+        reset(resetValues, { keepDirty: true });
       }
     },
     // `defaultValues` is the `initialValue` of each field type +
diff --git a/src/components/SideDrawer/Form/index.tsx b/src/components/SideDrawer/Form/index.tsx
index 65f639f8e..729342d2a 100644
--- a/src/components/SideDrawer/Form/index.tsx
+++ b/src/components/SideDrawer/Form/index.tsx
@@ -38,10 +38,8 @@ export default function Form({ values }: IFormProps) {
   const { ref: docRef, ...rowValues } = values;
   const defaultValues = { ...initialValues, ...rowValues };
 
-  const { control, reset, formState, getValues } = useForm({
-    mode: "onBlur",
-    defaultValues,
-  });
+  const methods = useForm({ mode: "onBlur", defaultValues });
+  const { control, reset, formState, getValues } = methods;
   const { dirtyFields } = formState;
 
   // const { sideDrawerRef } = useProjectContext();
@@ -105,6 +103,7 @@ export default function Form({ values }: IFormProps) {
                 control,
                 docRef,
                 disabled: field.editable === false,
+                useFormMethods: methods,
               })}
             </FieldWrapper>
           );
diff --git a/src/components/fields/Action/SideDrawerField.tsx b/src/components/fields/Action/SideDrawerField.tsx
index 663620eee..f6d0dd601 100644
--- a/src/components/fields/Action/SideDrawerField.tsx
+++ b/src/components/fields/Action/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function Action({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const hasRan = value && value.status;
 
         return (
diff --git a/src/components/fields/Checkbox/SideDrawerField.tsx b/src/components/fields/Checkbox/SideDrawerField.tsx
index 9a4ae4be0..2e8550e0d 100644
--- a/src/components/fields/Checkbox/SideDrawerField.tsx
+++ b/src/components/fields/Checkbox/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Checkbox({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
           onChange(event.target.checked);
         };
diff --git a/src/components/fields/Code/SideDrawerField.tsx b/src/components/fields/Code/SideDrawerField.tsx
index 67e9e571b..5a4437014 100644
--- a/src/components/fields/Code/SideDrawerField.tsx
+++ b/src/components/fields/Code/SideDrawerField.tsx
@@ -30,7 +30,7 @@ export default function Code({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <CodeEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/Color/SideDrawerField.tsx b/src/components/fields/Color/SideDrawerField.tsx
index 71bae5263..9c40bb299 100644
--- a/src/components/fields/Color/SideDrawerField.tsx
+++ b/src/components/fields/Color/SideDrawerField.tsx
@@ -52,7 +52,7 @@ export default function Color({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         console.log(value);
         return (
           <>
diff --git a/src/components/fields/ConnectService/SideDrawerField.tsx b/src/components/fields/ConnectService/SideDrawerField.tsx
index 09c824a13..9237a0c36 100644
--- a/src/components/fields/ConnectService/SideDrawerField.tsx
+++ b/src/components/fields/ConnectService/SideDrawerField.tsx
@@ -21,7 +21,7 @@ export default function ConnectService({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(
diff --git a/src/components/fields/ConnectTable/SideDrawerField.tsx b/src/components/fields/ConnectTable/SideDrawerField.tsx
index 3ccaaa58d..f7fc12d3c 100644
--- a/src/components/fields/ConnectTable/SideDrawerField.tsx
+++ b/src/components/fields/ConnectTable/SideDrawerField.tsx
@@ -1,7 +1,7 @@
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
 
-import { useTheme, Grid, Chip } from "@mui/material";
+import { Grid, Chip } from "@mui/material";
 
 import ConnectTableSelect from "./ConnectTableSelect";
 
@@ -9,16 +9,15 @@ export default function ConnectTable({
   column,
   control,
   disabled,
+  useFormMethods,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
 
   return (
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (hit: any) => () => {
           // if (multiple)
           onChange(value.filter((v) => v.snapshot.objectID !== hit.objectID));
@@ -29,7 +28,7 @@ export default function ConnectTable({
           <>
             {!disabled && (
               <ConnectTableSelect
-                row={control.getValues()}
+                row={useFormMethods.getValues()}
                 column={column}
                 config={(config as any) ?? {}}
                 value={value}
diff --git a/src/components/fields/Date/SideDrawerField.tsx b/src/components/fields/Date/SideDrawerField.tsx
index 7bc9a02da..65663ea4a 100644
--- a/src/components/fields/Date/SideDrawerField.tsx
+++ b/src/components/fields/Date/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/DateTime/SideDrawerField.tsx b/src/components/fields/DateTime/SideDrawerField.tsx
index 5f0e1924e..f2b9aefb2 100644
--- a/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/src/components/fields/DateTime/SideDrawerField.tsx
@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         const transformedValue = transformValue(value);
 
         const handleChange = (date: Date | null) => {
diff --git a/src/components/fields/Duration/SideDrawerField.tsx b/src/components/fields/Duration/SideDrawerField.tsx
index 555b948fc..f1a536b8d 100644
--- a/src/components/fields/Duration/SideDrawerField.tsx
+++ b/src/components/fields/Duration/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function Duration({ column, control }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (
           !value ||
           !value.start ||
diff --git a/src/components/fields/Email/SideDrawerField.tsx b/src/components/fields/Email/SideDrawerField.tsx
index abe9e2625..0dffb1339 100644
--- a/src/components/fields/Email/SideDrawerField.tsx
+++ b/src/components/fields/Email/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Email({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index e462cf5c2..5cea93190 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -169,7 +169,7 @@ export default function File_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledFileUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index a8c541f97..d52752054 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -272,7 +272,7 @@ export default function Image_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <ControlledImageUploader
           disabled={disabled}
           column={column}
diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx
index 757a54398..46c3f7613 100644
--- a/src/components/fields/Json/SideDrawerField.tsx
+++ b/src/components/fields/Json/SideDrawerField.tsx
@@ -29,7 +29,7 @@ export default function Json({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => {
+      render={({ field: { onChange, value } }) => {
         if (disabled)
           return (
             <div
diff --git a/src/components/fields/LongText/SideDrawerField.tsx b/src/components/fields/LongText/SideDrawerField.tsx
index 6b02f235f..cae115941 100644
--- a/src/components/fields/LongText/SideDrawerField.tsx
+++ b/src/components/fields/LongText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function LongText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/MultiSelect/SideDrawerField.tsx b/src/components/fields/MultiSelect/SideDrawerField.tsx
index 3f1fd0cf5..64314c3d6 100644
--- a/src/components/fields/MultiSelect/SideDrawerField.tsx
+++ b/src/components/fields/MultiSelect/SideDrawerField.tsx
@@ -19,7 +19,7 @@ export default function MultiSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleDelete = (index: number) => () => {
           const newValues = [...value];
           newValues.splice(index, 1);
diff --git a/src/components/fields/Number/SideDrawerField.tsx b/src/components/fields/Number/SideDrawerField.tsx
index 58382147f..998e58f55 100644
--- a/src/components/fields/Number/SideDrawerField.tsx
+++ b/src/components/fields/Number/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Number_({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value));
 
         return (
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 6fb2f1f71..661890dc8 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -39,7 +39,7 @@ export default function Percentage({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (e) => onChange(Number(e.target.value) / 100);
 
         return (
diff --git a/src/components/fields/Phone/SideDrawerField.tsx b/src/components/fields/Phone/SideDrawerField.tsx
index afa99aaae..ee3806bb4 100644
--- a/src/components/fields/Phone/SideDrawerField.tsx
+++ b/src/components/fields/Phone/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function Phone({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/Rating/SideDrawerField.tsx b/src/components/fields/Rating/SideDrawerField.tsx
index ea813bb48..80ad86e00 100644
--- a/src/components/fields/Rating/SideDrawerField.tsx
+++ b/src/components/fields/Rating/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Rating({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <MuiRating
             name={column.key}
diff --git a/src/components/fields/RichText/SideDrawerField.tsx b/src/components/fields/RichText/SideDrawerField.tsx
index a1907cca1..f38f4e306 100644
--- a/src/components/fields/RichText/SideDrawerField.tsx
+++ b/src/components/fields/RichText/SideDrawerField.tsx
@@ -11,7 +11,7 @@ export default function RichText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, value }) => (
+      render={({ field: { onChange, value } }) => (
         <RichTextEditor
           disabled={disabled}
           value={value}
diff --git a/src/components/fields/ShortText/SideDrawerField.tsx b/src/components/fields/ShortText/SideDrawerField.tsx
index 91858dd4a..90e32f582 100644
--- a/src/components/fields/ShortText/SideDrawerField.tsx
+++ b/src/components/fields/ShortText/SideDrawerField.tsx
@@ -12,7 +12,7 @@ export default function ShortText({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <TextField
             variant="filled"
diff --git a/src/components/fields/SingleSelect/SideDrawerField.tsx b/src/components/fields/SingleSelect/SideDrawerField.tsx
index 912e7e67e..3d4dd8c17 100644
--- a/src/components/fields/SingleSelect/SideDrawerField.tsx
+++ b/src/components/fields/SingleSelect/SideDrawerField.tsx
@@ -15,7 +15,7 @@ export default function SingleSelect({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => (
+      render={({ field: { onChange, onBlur, value } }) => (
         <>
           <MultiSelect
             value={sanitiseValue(value)}
diff --git a/src/components/fields/Slider/SideDrawerField.tsx b/src/components/fields/Slider/SideDrawerField.tsx
index f772adddd..8ac3ca8c3 100644
--- a/src/components/fields/Slider/SideDrawerField.tsx
+++ b/src/components/fields/Slider/SideDrawerField.tsx
@@ -32,7 +32,7 @@ export default function Slider({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         const handleChange = (_: any, value: number | number[]) => {
           onChange(value);
           onBlur();
diff --git a/src/components/fields/Status/SideDrawerField.tsx b/src/components/fields/Status/SideDrawerField.tsx
index a64d833fb..be34c2c94 100644
--- a/src/components/fields/Status/SideDrawerField.tsx
+++ b/src/components/fields/Status/SideDrawerField.tsx
@@ -16,7 +16,7 @@ export default function Rating({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => (
+      render={({ field: { value } }) => (
         <Grid container alignItems="center" className={fieldClasses.root}>
           <>{value}</>
         </Grid>
diff --git a/src/components/fields/Url/SideDrawerField.tsx b/src/components/fields/Url/SideDrawerField.tsx
index 4729a2513..8d87377a8 100644
--- a/src/components/fields/Url/SideDrawerField.tsx
+++ b/src/components/fields/Url/SideDrawerField.tsx
@@ -13,7 +13,7 @@ export default function Url({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => {
+      render={({ field: { onChange, onBlur, value } }) => {
         return (
           <Stack direction="row">
             <TextField
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index e7be0ebbc..d560be1c9 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -14,7 +14,7 @@ export default function User({ control, column }: ISideDrawerFieldProps) {
     <Controller
       control={control}
       name={column.key}
-      render={({ value }) => {
+      render={({ field: { value } }) => {
         if (!value || !value.displayName || !value.timestamp)
           return <div className={fieldClasses.root} />;
         const dateLabel = format(
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 8bb9a56a9..7f944ed3c 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -1,7 +1,7 @@
 import { FieldType } from "constants/fields";
 
 import { FormatterProps, EditorProps } from "react-data-grid";
-import { Control } from "react-hook-form";
+import { Control, UseFormReturn } from "react-hook-form";
 import { PopoverProps } from "@mui/material";
 
 export { FieldType };
@@ -49,6 +49,7 @@ export interface ISideDrawerFieldProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   disabled: boolean;
+  useFormMethods: UseFormReturn;
 }
 
 export interface ISettingsProps {
diff --git a/yarn.lock b/yarn.lock
index 56b0093bf..79cd48a88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2153,6 +2153,11 @@
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.0.tgz#32e82b072ff71c71e62fb2901b129642a0c5897e"
   integrity sha512-ALlr0Bg6zDHdRsdqkwfWGPMnIxP4hqMRPvFDHp7lWXQeA7rKykto3cWqQQh1s0PzX043RHwMB6OHVPMwFJqwxg==
 
+"@hookform/resolvers@^2.8.1":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.1.tgz#0d4fdd25bdeb4b98bf4e177c63fc4efa173454dd"
+  integrity sha512-U5lgaCkvD+0e5X8iQmCHiF+jOqjTX6OHUA7zPdeIHI6xdAOoi3rH9MKNuwMwv5Hly2LL6XtDgDkS/k+YG9hOew==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -13569,16 +13574,16 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6:
-  version "6.15.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
-
 react-hook-form@^7.10.0:
   version "7.15.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.15.2.tgz#c4d4fa44a5df755648ab19034062ae37087536b0"
   integrity sha512-tPcLlsTXaOtZkyc1IGGaJfQ6amo2sJiM6DDufE7WG+S4N8s5Wr60HGtnKS7gPnnZL93pFPQYrSj7WDB5An2VVw==
 
+react-hook-form@^7.16.1:
+  version "7.16.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.16.1.tgz#669046df378a71949e5cf8a2398cbe20d5cb27bc"
+  integrity sha512-kcLDmSmlyLUFx2UU5bG/o4+3NeK753fhKodJa8gkplXohGkpAq0/p+TR24OWjZmkEc3ES7ppC5v5d6KUk+fJTA==
+
 react-image@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"

From 39ba3247166c4656950b9948ba83993a96fec0a8 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:17:25 +1000
Subject: [PATCH 06/15] add docs links

---
 src/constants/externalLinks.ts | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/constants/externalLinks.ts b/src/constants/externalLinks.ts
index 2880330a5..ac5fc73ef 100644
--- a/src/constants/externalLinks.ts
+++ b/src/constants/externalLinks.ts
@@ -23,16 +23,36 @@ export const EXTERNAL_LINKS = {
 };
 
 const WIKI_PATHS = {
-  firebaseProject: "/setup/firebase-project",
+  setup: "/setup/install",
+  setupFirebaseProject: "/setup/firebase-project",
+  setupRoles: "/setup/roles",
+  setupUpdate: "/setup/update",
+
+  howToCreateTable: "/how-to/create-table",
+  howToCreateColumn: "/how-to/create-column",
+  howToAddRow: "/how-to/add-row",
+  howToDefaultValues: "/how-to/default-values",
+  howToCustomViews: "/how-to/custom-views",
+
+  fieldTypesSupportedFields: "/field-types/supported-fields",
+  fieldTypesDerivative: "/field-types/derivative",
+  fieldTypesConnectTable: "/field-types/connect-table",
+  fieldTypesAdd: "/field-types/add",
+
   rowyRun: "/rowy-run",
 
+  extensions: "/extensions",
+  extensionsAlgoliaIndex: "/extensions/algolia-index",
+  extensionsSendgridEmail: "/extensions/sendgrid-email",
+  extensionsTwilioMessage: "/extensions/twilio-message",
+  extensionsSlackMessage: "/extensions/slack-message",
+
   updating: "/Updating",
   derivatives: "/field-types/derivative",
   defaultValues: "/Default-Values",
   functions: "/Cloud-Functions",
   securityRules: "/Role-Based-Security-Rules",
   setUpAuth: "/Setting-Up-Firebase-Authentication",
-  extensions: "/Extensions",
 };
 export const WIKI_LINKS = _mapValues(
   WIKI_PATHS,

From 8501f2dcb944fc0d8452259d578e7a6cb82b0884 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:17:41 +1000
Subject: [PATCH 07/15] update InlineOpenInNewIcon

---
 src/components/InlineOpenInNewIcon.tsx | 35 +++++++++++++-------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/InlineOpenInNewIcon.tsx b/src/components/InlineOpenInNewIcon.tsx
index cf7e52718..33869d4c0 100644
--- a/src/components/InlineOpenInNewIcon.tsx
+++ b/src/components/InlineOpenInNewIcon.tsx
@@ -1,18 +1,19 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { styled } from "@mui/material";
 
-export default function InlineOpenInNewIcon(props: SvgIconProps) {
-  return (
-    <OpenInNewIcon
-      aria-label="Open in new tab"
-      {...props}
-      sx={{
-        fontSize: 16,
-        verticalAlign: "text-bottom",
-        ml: 0.5,
-        opacity: 0.6,
-        ...props.sx,
-      }}
-    />
-  );
-}
+export const InlineOpenInNewIcon = styled("span")(() => ({
+  position: "relative",
+  width: "1em",
+  height: "1em",
+  marginLeft: "0.25em",
+  display: "inline-block",
+  verticalAlign: "baseline",
+
+  "&::after": {
+    content: "'\\2197'",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+}));
+
+export default InlineOpenInNewIcon;

From 1a0905b3d27badac7e0446bf044f7b7ce2ffb9be Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:17:57 +1000
Subject: [PATCH 08/15] NavDrawer: align logo

---
 src/components/Navigation/NavDrawer.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Navigation/NavDrawer.tsx b/src/components/Navigation/NavDrawer.tsx
index 6c69e8f6b..b3371efa5 100644
--- a/src/components/Navigation/NavDrawer.tsx
+++ b/src/components/Navigation/NavDrawer.tsx
@@ -87,7 +87,6 @@ export default function NavDrawer({
     >
       <Stack
         direction="row"
-        spacing={1.5}
         alignItems="center"
         sx={{
           height: APP_BAR_HEIGHT,
@@ -109,7 +108,7 @@ export default function NavDrawer({
           <CloseIcon />
         </IconButton>
 
-        <Logo />
+        <Logo style={{ marginLeft: 1 }} />
 
         {canPin && (
           <IconButton

From 25570b4b5ef0989094b71f615d9792d28b2034f6 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:20:30 +1000
Subject: [PATCH 09/15] new table settings dialog

---
 package.json                                  |   5 +-
 src/components/TableSettings/CamelCaseId.tsx  |  70 +++++
 .../TableSettings/SuggestedRules.tsx          | 140 ++++++++++
 src/components/TableSettings/form.tsx         | 256 +++++++++++-------
 src/components/TableSettings/index.tsx        | 171 ++++--------
 src/contexts/ProjectContext.tsx               |   2 +-
 yarn.lock                                     |  28 +-
 7 files changed, 449 insertions(+), 223 deletions(-)
 create mode 100644 src/components/TableSettings/CamelCaseId.tsx
 create mode 100644 src/components/TableSettings/SuggestedRules.tsx

diff --git a/package.json b/package.json
index 79cea7ee6..bb465e58b 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "@mui/lab": "^5.0.0-alpha.47",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
-    "@rowy/form-builder": "^0.2.0",
-    "@rowy/multiselect": "^0.2.0",
+    "@rowy/form-builder": "^0.2.4",
+    "@rowy/multiselect": "^0.2.1",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
@@ -62,6 +62,7 @@
     "react-scroll-sync": "^0.8.0",
     "react-usestateref": "^1.0.5",
     "serve": "^11.3.2",
+    "swr": "^1.0.1",
     "tinymce": "^5.9.2",
     "typescript": "^4.4.2",
     "use-algolia": "^1.4.1",
diff --git a/src/components/TableSettings/CamelCaseId.tsx b/src/components/TableSettings/CamelCaseId.tsx
new file mode 100644
index 000000000..fe69f6ec2
--- /dev/null
+++ b/src/components/TableSettings/CamelCaseId.tsx
@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import { useWatch } from "react-hook-form";
+import _camelCase from "lodash/camelCase";
+
+import { TextField, TextFieldProps } from "@mui/material";
+import { IFieldComponentProps, FieldAssistiveText } from "@rowy/form-builder";
+
+export interface ICamelCaseIdProps
+  extends IFieldComponentProps,
+    Omit<
+      TextFieldProps,
+      "variant" | "name" | "label" | "onBlur" | "onChange" | "value" | "ref"
+    > {
+  watchedField?: string;
+}
+
+export default function CamelCaseId({
+  field: { onChange, onBlur, value, ref },
+
+  name,
+  useFormMethods: { control },
+
+  errorMessage,
+  assistiveText,
+
+  disabled,
+
+  watchedField,
+  ...props
+}: ICamelCaseIdProps) {
+  const watchedValue = useWatch({ control, name: watchedField } as any);
+  useEffect(() => {
+    if (watchedField && typeof watchedValue === "string" && !!watchedValue)
+      onChange(_camelCase(watchedValue));
+  }, [watchedValue]);
+
+  return (
+    <TextField
+      onChange={onChange}
+      onBlur={onBlur}
+      value={value}
+      fullWidth
+      error={!!errorMessage}
+      helperText={
+        (errorMessage || assistiveText) && (
+          <>
+            {errorMessage}
+
+            <FieldAssistiveText style={{ margin: 0 }} disabled={!!disabled}>
+              {assistiveText}
+            </FieldAssistiveText>
+          </>
+        )
+      }
+      name={name}
+      id={`field-${name}`}
+      sx={{ "& .MuiInputBase-input": { fontFamily: "mono" } }}
+      {...props}
+      disabled={disabled}
+      inputProps={{
+        required: false,
+        // https://github.com/react-hook-form/react-hook-form/issues/4485
+        disabled: false,
+        readOnly: disabled,
+        style: disabled ? { cursor: "default" } : undefined,
+      }}
+      inputRef={ref}
+    />
+  );
+}
diff --git a/src/components/TableSettings/SuggestedRules.tsx b/src/components/TableSettings/SuggestedRules.tsx
new file mode 100644
index 000000000..d2bbe7423
--- /dev/null
+++ b/src/components/TableSettings/SuggestedRules.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { useWatch } from "react-hook-form";
+
+import {
+  InputLabel,
+  Collapse,
+  FormControlLabel,
+  Checkbox,
+  Grid,
+  Button,
+} from "@mui/material";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
+import { IFieldComponentProps } from "@rowy/form-builder";
+
+import { useAppContext } from "@src/contexts/AppContext";
+
+type customizationOptions = "allRead" | "authRead" | "subcollections" | "user";
+
+export interface ISuggestedRulesProps extends IFieldComponentProps {}
+
+export default function SuggestedRules({
+  useFormMethods: { control },
+  label,
+}: ISuggestedRulesProps) {
+  const { projectId } = useAppContext();
+
+  const watched = useWatch({ control, name: ["collection", "roles"] } as any);
+  const [collection, roles] = Array.isArray(watched) ? watched : [];
+
+  const [customized, setCustomized] = useState<boolean>(false);
+  const [customizations, setCustomizations] = useState<customizationOptions[]>(
+    []
+  );
+  const handleChange =
+    (option: customizationOptions) =>
+    (e: React.ChangeEvent<HTMLInputElement>) =>
+      setCustomizations((prev) => {
+        const set = new Set(prev || []);
+        if (e.target.checked) set.add(option);
+        else set.delete(option);
+        return Array.from(set);
+      });
+
+  const generatedRules = `match /${collection}/{${
+    customizations.includes("subcollections") ? "document=**" : "docId"
+  }} {
+  allow read, write: if hasAnyRole(${JSON.stringify(roles)});${
+    customizations.includes("allRead")
+      ? "\n  allow read: if true;"
+      : customizations.includes("authRead")
+      ? "\n  allow read: if request.auth != null;"
+      : ""
+  }${
+    customizations.includes("user")
+      ? `\n
+  allow create: if request.auth != null;
+  allow get, update, delete: if isDocOwner(userId);`
+      : ""
+  }
+}`;
+
+  return (
+    <>
+      <InputLabel sx={{ mb: 0.5, ml: 0.25 }}>{label}</InputLabel>
+      <pre style={{ margin: 0, userSelect: "all" }}>{generatedRules}</pre>
+
+      <Collapse in={customized}>
+        <Grid container>
+          <Grid item xs={12} sm={6}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={customizations.includes("allRead")}
+                  onChange={handleChange("allRead")}
+                />
+              }
+              label="Anyone can read"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={customizations.includes("authRead")}
+                  onChange={handleChange("authRead")}
+                />
+              }
+              label="All signed-in users can read"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={customizations.includes("user")}
+                  onChange={handleChange("user")}
+                />
+              }
+              label="Users can create and edit docs"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={customizations.includes("subcollections")}
+                  onChange={handleChange("subcollections")}
+                />
+              }
+              label="Same rules for all subcollections"
+            />
+          </Grid>
+        </Grid>
+      </Collapse>
+
+      <Grid container spacing={1} style={{ marginTop: 0 }}>
+        {!customized && (
+          <Grid item>
+            <Button onClick={() => setCustomized(true)}>Customize…</Button>
+          </Grid>
+        )}
+        <Grid item>
+          <Button onClick={() => navigator.clipboard.writeText(generatedRules)}>
+            Copy to clipboard
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            href={`https://console.firebase.google.com/u/0/project/${projectId}/firestore/rules`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Set rules in Firebase Console
+            <InlineOpenInNewIcon />
+          </Button>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
diff --git a/src/components/TableSettings/form.tsx b/src/components/TableSettings/form.tsx
index 97ffceb43..1761dfe0c 100644
--- a/src/components/TableSettings/form.tsx
+++ b/src/components/TableSettings/form.tsx
@@ -2,7 +2,8 @@ import { Field, FieldType } from "@rowy/form-builder";
 import { TableSettingsDialogModes } from "./index";
 
 import { Link, Typography } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import OpenInNewIcon from "components/InlineOpenInNewIcon";
+import WarningIcon from "@mui/icons-material/WarningAmber";
 
 import { WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
@@ -11,7 +12,8 @@ export const tableSettings = (
   mode: TableSettingsDialogModes | null,
   roles: string[] | undefined,
   sections: string[] | undefined,
-  tables: { label: string; value: any }[] | undefined
+  tables: { label: string; value: any }[] | undefined,
+  collections: string[]
 ): Field[] =>
   [
     {
@@ -19,126 +21,205 @@ export const tableSettings = (
       name: "name",
       label: "Table name",
       required: true,
+      assistiveText: "User-facing name for this table",
+      autoFocus: true,
+      gridCols: { xs: 12, sm: 6 },
     },
     {
-      type: FieldType.shortText,
+      type: "camelCaseId",
       name: "id",
       label: "Table ID",
       required: true,
+      watchedField: "name",
+      assistiveText: `Unique ID for this table used to store configuration. Cannot be edited ${
+        mode === TableSettingsDialogModes.create ? " later" : ""
+      }.`,
+      disabled: mode === TableSettingsDialogModes.update,
+      gridCols: { xs: 12, sm: 6 },
     },
     {
-      type: FieldType.shortText,
+      type: FieldType.singleSelect,
       name: "collection",
-      label: "Collection name",
+      label: "Collection",
+      labelPlural: "collections",
+      options: collections,
+      itemRenderer: (option) => <code key={option.value}>{option.label}</code>,
+      freeText: true,
       required: true,
       assistiveText: (
-        <Link
-          href={`https://console.firebase.google.com/project/_/firestore/data`}
-          target="_blank"
-          rel="noopener"
-        >
-          View your Firestore collections
-          <OpenInNewIcon
-            aria-label="Open in new tab"
-            style={{ verticalAlign: "middle", marginLeft: 4, fontSize: "1em" }}
-          />
-        </Link>
-      ) as any,
+        <>
+          {mode === TableSettingsDialogModes.update ? (
+            <>
+              <WarningIcon
+                color="warning"
+                sx={{ fontSize: 16, mr: 0.5, verticalAlign: "middle" }}
+              />
+              You change which Firestore collection to display. Data in the new
+              collection must be compatible with the existing columns.
+            </>
+          ) : (
+            "Choose which Firestore collection to display."
+          )}{" "}
+          <Link
+            href={`https://console.firebase.google.com/project/_/firestore/data`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Your collections
+            <OpenInNewIcon />
+          </Link>
+        </>
+      ),
+      AddButtonProps: {
+        children: "Add collection",
+      },
+      AddDialogProps: {
+        title: "Add collection",
+        textFieldLabel: (
+          <>
+            Collection name
+            <Typography variant="caption" display="block">
+              (Collection won’t be created until you add a row)
+            </Typography>
+          </>
+        ),
+      },
+      TextFieldProps: {
+        sx: { "& .MuiInputBase-input": { fontFamily: "mono" } },
+      },
+      gridCols: { xs: 12, sm: 6 },
     },
     {
       type: FieldType.singleSelect,
       name: "tableType",
       label: "Table type",
-      labelPlural: "table types",
-      searchable: false,
       defaultValue: "primaryCollection",
       options: [
         {
-          label: "Primary collection",
-          description: `
-          Connect this table to the <strong>single collection</strong>
-          matching the collection name entered above`,
+          label: (
+            <div>
+              Primary collection
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                display="block"
+                sx={{
+                  width: 240,
+                  whiteSpace: "normal",
+                  ".MuiSelect-select &": { display: "none" },
+                }}
+              >
+                Connect this table to the <b>single collection</b> matching the
+                collection name entered above
+              </Typography>
+            </div>
+          ),
           value: "primaryCollection",
         },
         {
-          label: "Collection group",
-          description: `
-          Connect this table to <strong>all collections and subcollections</strong>
-          matching the collection name entered above`,
+          label: (
+            <div>
+              Collection group
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                display="block"
+                sx={{
+                  width: 240,
+                  whiteSpace: "normal",
+                  ".MuiSelect-select &": { display: "none" },
+                }}
+              >
+                Connect this table to <b>all collections and subcollections</b>{" "}
+                matching the collection name entered above
+              </Typography>
+            </div>
+          ),
           value: "collectionGroup",
         },
       ],
       required: true,
       disabled: mode === TableSettingsDialogModes.update,
-      itemRenderer: (option) => (
-        <span key={option.value}>
-          {option.label}
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            component="span"
+      assistiveText: (
+        <>
+          Cannot be edited
+          {mode === TableSettingsDialogModes.create && " later"}.{" "}
+          <Link
+            href="https://firebase.googleblog.com/2019/06/understanding-collection-group-queries.html"
+            target="_blank"
+            rel="noopener noreferrer"
             display="block"
-            dangerouslySetInnerHTML={{ __html: option.description }}
-          />
-        </span>
+          >
+            Learn more about collection groups
+            <OpenInNewIcon />
+          </Link>
+        </>
       ),
-      assistiveText: (
-        <Link
-          href="https://firebase.googleblog.com/2019/06/understanding-collection-group-queries.html"
-          target="_blank"
-          rel="noopener"
-          display="block"
-        >
-          Learn more about collection groups
-          <OpenInNewIcon
-            aria-label="Open in new tab"
-            style={{ verticalAlign: "middle", marginLeft: 4, fontSize: "1em" }}
-          />
-        </Link>
-      ) as any,
+      gridCols: { xs: 12, sm: 6 },
+    },
+
+    {
+      type: FieldType.contentSubHeader,
+      name: "_contentSubHeader_userFacing",
+      label: "Display",
     },
     {
       type: FieldType.singleSelect,
       name: "section",
-      label: "Section",
+      label: "Section (optional)",
+      labelPlural: "sections",
       freeText: true,
       options: sections,
-      required: true,
+      required: false,
+      gridCols: { xs: 12, sm: 6 },
     },
     {
       type: FieldType.paragraph,
       name: "description",
-      label: "Description",
+      label: "Description (optional)",
+      gridCols: { xs: 12, sm: 6 },
+      minRows: 1,
+    },
+
+    {
+      type: FieldType.contentSubHeader,
+      name: "_contentSubHeader_admin",
+      label: "Admin",
     },
     {
       type: FieldType.multiSelect,
       name: "roles",
       label: "Accessed by",
+      labelPlural: "roles",
       options: roles ?? [],
+      defaultValue: ["ADMIN"],
       required: true,
       freeText: true,
-      assistiveText: (
+    },
+    {
+      type: FieldType.contentParagraph,
+      name: "_contentParagraph_rules",
+      label: (
         <>
-          Choose which roles have access to this table. Remember to set the
-          appropriate Firestore Security Rules for this collection.
+          To enable access controls for this table, you must set the
+          corresponding Firestore Security Rules.{" "}
           <Link
-            href={WIKI_LINKS.securityRules}
+            href={WIKI_LINKS.setupRoles + "#table-rules"}
             target="_blank"
-            rel="noopener"
-            display="block"
+            rel="noopener noreferrer"
+            style={{ position: "relative", zIndex: 1 }}
           >
-            Read about role-based security rules
-            <OpenInNewIcon
-              aria-label="Open in new tab"
-              style={{
-                verticalAlign: "middle",
-                marginLeft: 4,
-                fontSize: "1em",
-              }}
-            />
+            Learn how to write rules
+            <OpenInNewIcon />
           </Link>
         </>
-      ) as any,
+      ),
+    },
+    {
+      type: "suggestedRules",
+      name: "_suggestedRules",
+      label: "Suggested Firestore Rules",
+      watchedField: "collection",
     },
     {
       type: FieldType.slider,
@@ -154,7 +235,7 @@ export const tableSettings = (
           <Link
             href="https://firebase.google.com/docs/functions/firestore-events#function_triggers"
             target="_blank"
-            rel="noopener"
+            rel="noopener noreferrer"
           >
             Firestore triggers
           </Link>{" "}
@@ -164,17 +245,10 @@ export const tableSettings = (
           <Link
             href="https://stackoverflow.com/questions/58186741/watch-a-collectiongroup-with-firestore-using-cloud-functions"
             target="_blank"
-            rel="noopener"
+            rel="noopener noreferrer"
           >
             Learn more about this requirement
-            <OpenInNewIcon
-              aria-label="Open in new tab"
-              style={{
-                verticalAlign: "middle",
-                marginLeft: 4,
-                fontSize: "1em",
-              }}
-            />
+            <OpenInNewIcon />
           </Link>
         </>
       ),
@@ -183,26 +257,16 @@ export const tableSettings = (
       ? {
           type: FieldType.singleSelect,
           name: "schemaSource",
-          label: "Copy column config from existing table",
-          labelPlural: "Tables",
+          label: "Copy column config from existing table (optional)",
+          labelPlural: "tables",
           options: tables,
           clearable: true,
           freeText: false,
           itemRenderer: (option: { value: string; label: string }) => (
-            <span key={option.value}>
-              {option.label}
-              <Typography
-                variant="body2"
-                color="textSecondary"
-                component="span"
-                sx={{
-                  fontFamily: (theme) => theme.typography.fontFamilyMono,
-                  display: "block",
-                }}
-              >
-                {option.value}
-              </Typography>
-            </span>
+            <>
+              {option.label}{" "}
+              <code style={{ marginLeft: "auto" }}>{option.value}</code>
+            </>
           ),
         }
       : null,
diff --git a/src/components/TableSettings/index.tsx b/src/components/TableSettings/index.tsx
index 6b89ce061..15978a9ee 100644
--- a/src/components/TableSettings/index.tsx
+++ b/src/components/TableSettings/index.tsx
@@ -1,20 +1,20 @@
-import { useState, useEffect } from "react";
-import _camelCase from "lodash/camelCase";
+import useSWR from "swr";
 import _find from "lodash/find";
 
-import { makeStyles, createStyles } from "@mui/styles";
-import { Button, DialogContentText } from "@mui/material";
-
-import Confirmation from "components/Confirmation";
+import { Stack, Button, DialogContentText } from "@mui/material";
 
 import { FormDialog } from "@rowy/form-builder";
 import { tableSettings } from "./form";
+import CamelCaseId from "./CamelCaseId";
+import SuggestedRules from "./SuggestedRules";
+import Confirmation from "components/Confirmation";
 
 import { useProjectContext, Table } from "contexts/ProjectContext";
 import useRouter from "../../hooks/useRouter";
 import { db } from "../../firebase";
 import { name } from "@root/package.json";
 import { SETTINGS, TABLE_SCHEMAS, TABLE_GROUP_SCHEMAS } from "config/dbPaths";
+import { runRoutes } from "constants/runRoutes";
 import { analytics } from "@src/analytics";
 
 export enum TableSettingsDialogModes {
@@ -27,68 +27,30 @@ export interface ICreateTableDialogProps {
   data: Table | null;
 }
 
-const FORM_EMPTY_STATE = {
-  name: "",
-  collection: "",
-  section: "",
-  description: "",
-  roles: ["ADMIN"],
-};
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    buttonGrid: { padding: theme.spacing(3, 0) },
-    button: { width: 160 },
-
-    formFooter: {
-      marginTop: theme.spacing(4),
-
-      "& button": {
-        paddingLeft: theme.spacing(1.5),
-        display: "flex",
-      },
-    },
-    collectionName: { fontFamily: theme.typography.fontFamilyMono },
-  })
-);
-
 export default function TableSettingsDialog({
   mode,
   clearDialog,
   data,
 }: ICreateTableDialogProps) {
-  const classes = useStyles();
-
-  const { settingsActions, roles, tables } = useProjectContext();
+  const { settingsActions, roles, tables, rowyRun } = useProjectContext();
   const sectionNames = Array.from(
     new Set((tables ?? []).map((t) => t.section))
   );
 
   const router = useRouter();
-  const open = mode !== null;
-
-  const [formState, setForm] = useState(FORM_EMPTY_STATE);
-
-  const handleChange = (key: string, value: any) =>
-    setForm({ ...formState, [key]: value });
 
-  useEffect(() => {
-    if (mode === TableSettingsDialogModes.create)
-      handleChange("collection", _camelCase(formState.name));
-  }, [formState.name]);
-
-  const handleClose = () => {
-    setForm(FORM_EMPTY_STATE);
-    clearDialog();
-  };
+  const { data: collections } = useSWR(
+    "firebaseCollections",
+    () => rowyRun?.({ route: runRoutes.listCollections }),
+    { fallbackData: [], revalidateIfStale: false, dedupingInterval: 60_000 }
+  );
 
-  useEffect(() => {
-    if (data) setForm(data);
-  }, [data]);
+  const open = mode !== null;
 
   if (!open) return null;
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async (v) => {
+    const { _suggestedRules, ...values } = v;
     const data: any = {
       ...values,
     };
@@ -97,7 +59,7 @@ export default function TableSettingsDialog({
       data.schemaSource = _find(tables, { id: values.schemaSource });
 
     if (mode === TableSettingsDialogModes.update) {
-      await Promise.all([settingsActions?.updateTable(data), handleClose()]);
+      await Promise.all([settingsActions?.updateTable(data), clearDialog()]);
     } else {
       settingsActions?.createTable(data);
 
@@ -117,13 +79,13 @@ export default function TableSettingsDialog({
         type: values.tableType,
       }
     );
-    handleClose();
+    clearDialog();
   };
 
   const handleResetStructure = async () => {
     const schemaDocRef = db.doc(`${TABLE_SCHEMAS}/${data!.id}`);
     await schemaDocRef.update({ columns: {} });
-    handleClose();
+    clearDialog();
   };
 
   const handleDelete = async () => {
@@ -142,79 +104,62 @@ export default function TableSettingsDialog({
       .doc(data?.id)
       .delete();
     window.location.reload();
-    handleClose();
+    clearDialog();
   };
 
   return (
     <FormDialog
-      onClose={handleClose}
+      onClose={clearDialog}
       title={
         mode === TableSettingsDialogModes.create
           ? "Create table"
-          : "Update table"
+          : "Table settings"
       }
       fields={tableSettings(
         mode,
         roles,
         sectionNames,
-        tables?.map((table) => ({ label: table.name, value: table.id }))
+        tables?.map((table) => ({ label: table.name, value: table.id })),
+        collections
       )}
-      values={{
-        ...data,
+      customComponents={{
+        camelCaseId: {
+          component: CamelCaseId,
+          defaultValue: "",
+          validation: [["string"]],
+        },
+        suggestedRules: {
+          component: SuggestedRules,
+          defaultValue: "",
+          validation: [["string"]],
+        },
       }}
+      values={{ ...data }}
       onSubmit={handleSubmit}
       SubmitButtonProps={{
         children:
           mode === TableSettingsDialogModes.create ? "Create" : "Update",
       }}
-      // customActions={
-      //   <Grid
-      //     container
-      //     spacing={2}
-      //     justify="center"
-      //     // className={classes.buttonGrid}
-      //   >
-      //     <Grid item>
-      //       <Button
-      //         size="large"
-      //         variant="outlined"
-      //         onClick={handleClose}
-      //         // className={classes.button}
-      //       >
-      //         Cancel
-      //       </Button>
-      //     </Grid>
-      //     <Grid item>
-      //       <Button
-      //         size="large"
-      //         variant="contained"
-      //         type="submit"
-      //         // className={classes.button}
-      //       >
-      //         {mode === TableSettingsDialogModes.create ? "Create" : "Update"}
-      //       </Button>
-      //     </Grid>
-      //   </Grid>
-      // }
       formFooter={
         mode === TableSettingsDialogModes.update ? (
-          <div className={classes.formFooter}>
+          <Stack
+            direction="row"
+            justifyContent="center"
+            spacing={1}
+            sx={{ mt: 6 }}
+          >
             <Confirmation
               message={{
-                title: `Delete the table structure for “${formState.name}”?`,
+                title: `Reset columns of “${data?.name}”?`,
                 body: (
                   <>
-                    <DialogContentText>
-                      This will only delete the column structure for this table,
-                      so you can set up the columns again.
+                    <DialogContentText paragraph>
+                      This will only reset the columns of this column so you can
+                      set up the columns again.
                     </DialogContentText>
                     <DialogContentText>
-                      You will not lose any data in your Firestore collection
-                      named “
-                      <span className={classes.collectionName}>
-                        {formState.collection}
-                      </span>
-                      ” .
+                      You will not lose any data in your Firestore collection{" "}
+                      <code>{data?.collection}</code>.
                     </DialogContentText>
                   </>
                 ),
@@ -227,29 +172,23 @@ export default function TableSettingsDialog({
                 variant="outlined"
                 color="error"
                 onClick={handleResetStructure}
-                // endIcon={<GoIcon />}
+                style={{ width: 150 }}
               >
-                Reset table structure…
+                Reset columns…
               </Button>
             </Confirmation>
 
-            <br />
-
             <Confirmation
               message={{
-                title: `Delete the table “${formState.name}”?`,
+                title: `Delete the table “${data?.name}”?`,
                 body: (
                   <>
-                    <DialogContentText>
+                    <DialogContentText paragraph>
                       This will only delete the {name} configuration data.
                     </DialogContentText>
                     <DialogContentText>
-                      You will not lose any data in your Firestore collection
-                      named “
-                      <span className={classes.collectionName}>
-                        {formState.collection}
-                      </span>
-                      ” .
+                      You will not lose any data in your Firestore collection{" "}
+                      <code>{data?.collection}</code>.
                     </DialogContentText>
                   </>
                 ),
@@ -262,12 +201,12 @@ export default function TableSettingsDialog({
                 variant="outlined"
                 color="error"
                 onClick={handleDelete}
-                // endIcon={<GoIcon />}
+                style={{ width: 150 }}
               >
                 Delete table…
               </Button>
             </Confirmation>
-          </div>
+          </Stack>
         ) : null
       }
     />
diff --git a/src/contexts/ProjectContext.tsx b/src/contexts/ProjectContext.tsx
index 8e12e889d..5716bc679 100644
--- a/src/contexts/ProjectContext.tsx
+++ b/src/contexts/ProjectContext.tsx
@@ -127,7 +127,7 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
     () =>
       Array.isArray(tables)
         ? Array.from(
-            new Set(tables.reduce((a, c) => [...a, ...c.roles], [] as string[]))
+            new Set(tables.reduce((a, c) => [...a, ...c.roles], ["ADMIN"]))
           )
         : [],
     [tables]
diff --git a/yarn.lock b/yarn.lock
index 79cd48a88..84cc3a626 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2657,10 +2657,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.2.0.tgz#407c1be0e8fa8e40f57546be4499f7f6b93285de"
-  integrity sha512-YO/kES8k4xj+1tteF+07gIpb/xrk0ZkyRE+2NxA9loSnkJ3XKDIj0/GadF8CMIdS9cEaRgCHLfswK3pkJjKGCg==
+"@rowy/form-builder@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.2.4.tgz#f8f39c85c6142a730ecc84c7d69c871a97c1ff3f"
+  integrity sha512-Nu5VRcdyPv169xoL7MUZL2Y/2s3nfSJNGmEDcYppiDSZpR/MHN0MFZpv/WwI4Ns9Ogv32hFxkBbI/fF2KGS5Zg==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@mdi/js" "^5.9.55"
@@ -2677,10 +2677,10 @@
     use-debounce "^3.4.3"
     yup "^0.32.9"
 
-"@rowy/multiselect@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.2.0.tgz#b915d3cfcd5f7fc2947e97d242510894e454281e"
-  integrity sha512-PAQ6LCMkEbAS558krXq8UyI8/9rZ/jmNU9cxSyvtnjHF7GVS7ZIRFDU8InV+nzYHsJWF/QYtH7o3X64kRmDrgQ==
+"@rowy/multiselect@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.2.1.tgz#86357156b31b9d16e45e08ef2503a98de7b9885f"
+  integrity sha512-GUDa50Etb81N16K1qq7TVRUc5vOQX5k8OE8SDUnJCrgPOKWkVZaIcIIkEGRpZwEBBvmFocAZGwVO/pEUwNzsAQ==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
@@ -6263,6 +6263,11 @@ depd@~2.0.0:
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -15406,6 +15411,13 @@ swc-loader@^0.1.14:
     "@swc/core" "^1.2.52"
     loader-utils "^2.0.0"
 
+swr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.0.1.tgz#15f62846b87ee000e52fa07812bb65eb62d79483"
+  integrity sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From 6c14cecd516a907d32008aff0960e09b51702031 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:21:10 +1000
Subject: [PATCH 10/15] fix filter toggle label

---
 src/components/Table/Filters/Row.tsx   | 5 -----
 src/components/Table/Filters/index.tsx | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)
 delete mode 100644 src/components/Table/Filters/Row.tsx

diff --git a/src/components/Table/Filters/Row.tsx b/src/components/Table/Filters/Row.tsx
deleted file mode 100644
index d87212b2b..000000000
--- a/src/components/Table/Filters/Row.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const FiltersRow = () => {
-  return <></>;
-};
-
-export default FiltersRow;
diff --git a/src/components/Table/Filters/index.tsx b/src/components/Table/Filters/index.tsx
index c8aac8eea..7ce6b232b 100644
--- a/src/components/Table/Filters/index.tsx
+++ b/src/components/Table/Filters/index.tsx
@@ -248,7 +248,7 @@ const Filters = () => {
             label="Value"
             labelPlacement="top"
             componentsProps={{
-              typography: { variant: "caption", fontWeight: "medium" },
+              typography: { variant: "button" },
             }}
             sx={{
               mr: 0,

From 61dda690a66ebdf666412c9dbb74d3f564a0e405 Mon Sep 17 00:00:00 2001
From: shamsmosowi <shams.mosowi@gmail.com>
Date: Wed, 29 Sep 2021 17:27:05 +1000
Subject: [PATCH 11/15] update packages

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d0062e3bf..202b70270 100644
--- a/package.json
+++ b/package.json
@@ -70,10 +70,10 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "upstream": "git fetch upstream;git merge upstream/v2;git commit -m'merge upstream';git push",
+    "upstream": "git fetch upstream;git merge upstream/main;git commit -m'merge upstream';git push",
     "serve": "serve -s build",
     "start": "craco start",
-    "build": "craco build",
+    "build": "craco build CI=false",
     "test": "craco test --env=jsdom",
     "eject": "craco eject",
     "env": "node createDotEnv",

From 60fa342485d72a6a0d33e72490b18558c462bd21 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 17:33:02 +1000
Subject: [PATCH 12/15] remove old wiki links & use new open in new tab icon

---
 src/components/CodeEditorHelper/index.tsx             |  5 +++--
 src/components/ErrorBoundary.tsx                      |  4 ++--
 src/components/Home/AccessDenied.tsx                  |  2 +-
 src/components/Settings/ProjectSettings/About.tsx     |  6 ++----
 src/components/Setup/Step1RowyRun.tsx                 |  6 +++---
 src/components/Setup/Step2ServiceAccount.tsx          |  5 ++---
 src/components/Setup/Step3ProjectOwner.tsx            |  4 ++--
 .../ColumnMenu/FieldSettings/DefaultValueInput.tsx    |  2 +-
 .../TableHeader/Extensions/ExtensionMigration.tsx     | 11 ++---------
 src/components/fields/Derivative/Settings.tsx         |  2 +-
 src/constants/externalLinks.ts                        |  7 -------
 src/pages/Auth/SetupGuide.tsx                         |  6 +++---
 src/pages/Deploy.tsx                                  |  2 +-
 13 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/src/components/CodeEditorHelper/index.tsx b/src/components/CodeEditorHelper/index.tsx
index 28e45fc0c..ec8aff396 100644
--- a/src/components/CodeEditorHelper/index.tsx
+++ b/src/components/CodeEditorHelper/index.tsx
@@ -1,5 +1,5 @@
 import { Stack, Typography, Grid, Tooltip, Chip, Button } from "@mui/material";
-import OpenIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 export interface ICodeEditorHelperProps {
   docLink: string;
   additionalVariables?: {
@@ -67,12 +67,13 @@ export default function CodeEditorHelper({
 
       <Button
         size="small"
-        endIcon={<OpenIcon />}
         target="_blank"
+        rel="noopener noreferrer"
         href={docLink}
         style={{ flexShrink: 0 }}
       >
         Examples & docs
+        <InlineOpenInNewIcon />
       </Button>
     </Stack>
   );
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 5c20b96d3..f3e60c26e 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -3,7 +3,7 @@ import EmptyState, { IEmptyStateProps } from "./EmptyState";
 
 import { Button } from "@mui/material";
 import ReloadIcon from "@mui/icons-material/Refresh";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 import meta from "../../package.json";
 class ErrorBoundary extends React.Component<
   IEmptyStateProps & { render?: (errorMessage: string) => React.ReactNode }
@@ -48,9 +48,9 @@ class ErrorBoundary extends React.Component<
                   }
                   target="_blank"
                   rel="noopener noreferrer"
-                  endIcon={<OpenInNewIcon />}
                 >
                   Report issue
+                  <InlineOpenInNewIcon />
                 </Button>
               )}
             </>
diff --git a/src/components/Home/AccessDenied.tsx b/src/components/Home/AccessDenied.tsx
index 5c103085d..4af8d5ce2 100644
--- a/src/components/Home/AccessDenied.tsx
+++ b/src/components/Home/AccessDenied.tsx
@@ -28,7 +28,7 @@ export default function AccessDenied() {
           <Typography>
             If you are the project owner, please follow{" "}
             <MuiLink
-              href={WIKI_LINKS.securityRules}
+              href={WIKI_LINKS.setupRoles}
               target="_blank"
               rel="noopener noreferrer"
             >
diff --git a/src/components/Settings/ProjectSettings/About.tsx b/src/components/Settings/ProjectSettings/About.tsx
index de51d51a8..ec38e0456 100644
--- a/src/components/Settings/ProjectSettings/About.tsx
+++ b/src/components/Settings/ProjectSettings/About.tsx
@@ -165,14 +165,12 @@ export default function About() {
               </LoadingButton>
             ) : (
               <Button
-                href={WIKI_LINKS.updating}
+                href={WIKI_LINKS.setupUpdate}
                 target="_blank"
                 rel="noopener noreferrer"
-                endIcon={
-                  <InlineOpenInNewIcon sx={{ fontSize: "18px !important" }} />
-                }
               >
                 How to update
+                <InlineOpenInNewIcon />
               </Button>
             )}
           </Grid>
diff --git a/src/components/Setup/Step1RowyRun.tsx b/src/components/Setup/Step1RowyRun.tsx
index ee55026e1..8ce6eb1e7 100644
--- a/src/components/Setup/Step1RowyRun.tsx
+++ b/src/components/Setup/Step1RowyRun.tsx
@@ -5,7 +5,7 @@ import { ISetupStepBodyProps } from "pages/Setup";
 
 import { Button, Typography, Stack, TextField } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import SetupItem from "./SetupItem";
 
@@ -62,7 +62,7 @@ export default function Step1RowyRun({
     if (!isValidRowyRunUrl && paramsRowyRunUrl) console.log(paramsRowyRunUrl);
   }, [paramsRowyRunUrl, isValidRowyRunUrl]);
 
-  const deployButton = !window.location.hostname.includes(
+  const deployButton = window.location.hostname.includes(
     EXTERNAL_LINKS.rowyAppHostName
   ) ? (
     <a
@@ -83,9 +83,9 @@ export default function Step1RowyRun({
       href={EXTERNAL_LINKS.rowyRunDocs}
       target="_blank"
       rel="noopener noreferrer"
-      endIcon={<OpenInNewIcon />}
     >
       Deploy instructions
+      <InlineOpenInNewIcon />
     </Button>
   );
 
diff --git a/src/components/Setup/Step2ServiceAccount.tsx b/src/components/Setup/Step2ServiceAccount.tsx
index 264cdf7d3..430368364 100644
--- a/src/components/Setup/Step2ServiceAccount.tsx
+++ b/src/components/Setup/Step2ServiceAccount.tsx
@@ -3,7 +3,6 @@ import { ISetupStepBodyProps } from "pages/Setup";
 
 import { Typography, Link, Stack } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import SetupItem from "./SetupItem";
@@ -102,9 +101,9 @@ export default function Step2ServiceAccount({
                 href={`https://console.cloud.google.com/run/deploy/${region}/rowy-run?project=${projectId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                endIcon={<OpenInNewIcon />}
               >
                 Set up service account
+                <InlineOpenInNewIcon />
               </LoadingButton>
               <LoadingButton
                 variant="contained"
@@ -121,7 +120,7 @@ export default function Step2ServiceAccount({
                 Some roles are missing. Also make sure your Firebase project has
                 Firestore and Authentication enabled.{" "}
                 <Link
-                  href={WIKI_LINKS.firebaseProject}
+                  href={WIKI_LINKS.setupFirebaseProject}
                   target="_blank"
                   rel="noopener noreferrer"
                   color="text.primary"
diff --git a/src/components/Setup/Step3ProjectOwner.tsx b/src/components/Setup/Step3ProjectOwner.tsx
index 73fe92ad0..e102058ac 100644
--- a/src/components/Setup/Step3ProjectOwner.tsx
+++ b/src/components/Setup/Step3ProjectOwner.tsx
@@ -3,7 +3,7 @@ import { ISetupStepBodyProps } from "pages/Setup";
 
 import { Typography, Stack, Button, IconButton } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import SetupItem from "./SetupItem";
 import SignInWithGoogle from "./SignInWithGoogle";
@@ -99,9 +99,9 @@ export default function Step3ProjectOwner({
                 }/authentication/providers`}
                 target="_blank"
                 rel="noopener noreferrer"
-                endIcon={<OpenInNewIcon />}
               >
                 Set up in Firebase Console
+                <InlineOpenInNewIcon />
               </Button>
 
               <Button
diff --git a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index 45bc8cecb..05b45960c 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -146,7 +146,7 @@ export default function DefaultValueInput({
 
       {config.defaultValue?.type === "dynamic" && (
         <>
-          <CodeEditorHelper docLink={WIKI_LINKS.defaultValues} />
+          <CodeEditorHelper docLink={WIKI_LINKS.howToDefaultValues} />
           <div className={classes.codeEditorContainer}>
             <CodeEditor
               height={120}
diff --git a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
index 1f9fe65b5..84b7b0126 100644
--- a/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
+++ b/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx
@@ -4,7 +4,7 @@ import firebase from "firebase/app";
 import { Button, Link, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import DownloadIcon from "@mui/icons-material/FileDownloadOutlined";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 import GoIcon from "@mui/icons-material/ChevronRight";
 
 import Modal from "components/Modal";
@@ -126,14 +126,7 @@ export default function ExtensionMigration({
               display="block"
             >
               Read the Extensions documentation
-              <OpenInNewIcon
-                aria-label="Open in new tab"
-                sx={{
-                  fontSize: "1rem",
-                  ml: 0.5,
-                  verticalAlign: "middle",
-                }}
-              />
+              <InlineOpenInNewIcon />
             </Link>
 
             <LoadingButton
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 5de64c181..807829ab7 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -61,7 +61,7 @@ const Settings = ({ config, handleChange }) => {
 
       <div>
         <InputLabel>Derivative script</InputLabel>
-        <CodeEditorHelper docLink={WIKI_LINKS.derivatives} />
+        <CodeEditorHelper docLink={WIKI_LINKS.fieldTypesDerivative} />
         <Suspense fallback={<FieldSkeleton height={200} />}>
           <CodeEditor
             script={config.script}
diff --git a/src/constants/externalLinks.ts b/src/constants/externalLinks.ts
index ac5fc73ef..c65dad2ed 100644
--- a/src/constants/externalLinks.ts
+++ b/src/constants/externalLinks.ts
@@ -46,13 +46,6 @@ const WIKI_PATHS = {
   extensionsSendgridEmail: "/extensions/sendgrid-email",
   extensionsTwilioMessage: "/extensions/twilio-message",
   extensionsSlackMessage: "/extensions/slack-message",
-
-  updating: "/Updating",
-  derivatives: "/field-types/derivative",
-  defaultValues: "/Default-Values",
-  functions: "/Cloud-Functions",
-  securityRules: "/Role-Based-Security-Rules",
-  setUpAuth: "/Setting-Up-Firebase-Authentication",
 };
 export const WIKI_LINKS = _mapValues(
   WIKI_PATHS,
diff --git a/src/pages/Auth/SetupGuide.tsx b/src/pages/Auth/SetupGuide.tsx
index 601e4dec0..f1324f8bf 100644
--- a/src/pages/Auth/SetupGuide.tsx
+++ b/src/pages/Auth/SetupGuide.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import AuthLayout from "components/Auth/AuthLayout";
 
@@ -20,12 +20,12 @@ export default function AuthSetupGuide() {
       <Button
         variant="contained"
         color="primary"
-        endIcon={<OpenInNewIcon />}
-        href={WIKI_LINKS.setUpAuth}
+        href={WIKI_LINKS.setupFirebaseProject}
         target="_blank"
         rel="noopener noreferrer"
       >
         Setup guide
+        <InlineOpenInNewIcon />
       </Button>
     </AuthLayout>
   );
diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx
index 23f8ec448..d922f2e54 100644
--- a/src/pages/Deploy.tsx
+++ b/src/pages/Deploy.tsx
@@ -88,7 +88,7 @@ export default function DeployPage() {
               <Typography sx={{ mt: 3 }}>
                 Don’t have a project? Follow our{" "}
                 <Link
-                  href={WIKI_LINKS.firebaseProject}
+                  href={WIKI_LINKS.setupFirebaseProject}
                   target="_blank"
                   rel="noopener noreferrer"
                 >

From 83859d7c06ff77623fee9edf4c7e5d63dd364408 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 18:07:03 +1000
Subject: [PATCH 13/15] setup: prevent creation of duplicate rules util
 functions

---
 src/components/Setup/Step4Rules.tsx | 24 +++++++++++++++++++++---
 src/pages/Setup.tsx                 |  1 +
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Setup/Step4Rules.tsx b/src/components/Setup/Step4Rules.tsx
index 404351cf0..4ceecd061 100644
--- a/src/components/Setup/Step4Rules.tsx
+++ b/src/components/Setup/Step4Rules.tsx
@@ -8,7 +8,6 @@ import {
   Button,
   Link,
   TextField,
-  Grid,
 } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import CopyIcon from "assets/icons/Copy";
@@ -53,10 +52,20 @@ export default function Step4Rules({
 
   const [newRules, setNewRules] = useState("");
   useEffect(() => {
+    let rulesToInsert = rules;
+
+    if (currentRules.indexOf("function isDocOwner") > -1) {
+      rulesToInsert = rulesToInsert.replace(/function isDocOwner[^}]*}/s, "");
+    }
+    if (currentRules.indexOf("function hasAnyRole") > -1) {
+      rulesToInsert = rulesToInsert.replace(/function hasAnyRole[^}]*}/s, "");
+    }
+
     const inserted = currentRules.replace(
       /match\s*\/databases\/\{database\}\/documents\s*\{/,
-      `match /databases/{database}/documents {\n` + rules
+      `match /databases/{database}/documents {\n` + rulesToInsert
     );
+
     setNewRules(inserted);
   }, [currentRules, rules]);
 
@@ -183,13 +192,22 @@ export default function Step4Rules({
             }}
           />
 
+          <Typography
+            variant="inherit"
+            color={
+              rulesStatus !== "LOADING" && rulesStatus ? "error" : undefined
+            }
+          >
+            Please check the generated rules first.
+          </Typography>
+
           <LoadingButton
             variant="contained"
             color="primary"
             onClick={setRules}
             loading={rulesStatus === "LOADING"}
           >
-            Set Firestore rules
+            Set Firestore Rules
           </LoadingButton>
 
           {rulesStatus !== "LOADING" && typeof rulesStatus === "string" && (
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index 4b11ae672..044fe1052 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -265,6 +265,7 @@ export default function SetupPage() {
               2
             )} - env(safe-area-inset-top) - env(safe-area-inset-bottom))`,
           height: 840 * 0.75,
+          resize: "both",
 
           p: 0,
           "& > *, & > .MuiDialogContent-root": { px: { xs: 2, sm: 4 } },

From b0a47d5c607dedc8a574576c607266b857099a10 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 18:07:22 +1000
Subject: [PATCH 14/15] bump version number for release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bb465e58b..f26ce84e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Rowy",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0",
   "homepage": "https://rowy.io",
   "repository": {
     "type": "git",

From 137c0a517d7bb474faf92de343e33fe983c9795c Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 22:37:33 +1000
Subject: [PATCH 15/15] bump notistack dependency to stable version

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 24ea3ccf0..ecd82024e 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "notistack": "^1.0.6-next.3",
+    "notistack": "^2.0.2",
     "query-string": "^6.8.3",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",
diff --git a/yarn.lock b/yarn.lock
index 84cc3a626..979a06944 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11528,10 +11528,10 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
   integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
-notistack@^1.0.6-next.3:
-  version "1.0.6-next.3"
-  resolved "https://registry.yarnpkg.com/notistack/-/notistack-1.0.6-next.3.tgz#120c1a71c3b591fe13419e84f9c2b28383c22c63"
-  integrity sha512-vtRMCAOyfFzfRIaJgpftwPG/gojL0JqPvEFnpoYSWWZmW80C32dXU+Pq7BrWhW6Y4yO7wv/d2toNM7QJJxdW9Q==
+notistack@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.2.tgz#18361a0ce39d2c2d8c3ef58ae43cf4b30d78b800"
+  integrity sha512-Z2kD6QK9n/9V9zXQfN3ZgH22TefBWE3OZ/q74gMVslGPA9j9WGjoi+YxsgkTAOY8NqTYdUe8aijd2kXsGNYp6g==
   dependencies:
     clsx "^1.1.0"
     hoist-non-react-statics "^3.3.0"