Merge branch 'rc' of https://github.com/rowyio/rowy into rc

2025-12-28 16:06:41 +01:00 · 2021-09-29 17:45:51 +10:00
parent 61dda690a6 26df992b2a
commit d7dbb07421
118 changed files with 331 additions and 302 deletions
--- a/package.json
+++ b/package.json
@@ -12,14 +12,15 @@
    "@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",
    "@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/form-builder": "^0.2.0",
+    "@rowy/multiselect": "^0.2.0",
    "@tinymce/tinymce-react": "^3.12.6",
    "algoliasearch": "^4.8.6",
    "ansi-to-react": "^6.1.5",
@@ -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",
--- 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"
--- 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>
  );
--- 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>
--- 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,
--- 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>
              )}
            </>
--- 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>
        </>
      }
--- 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,
--- 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>
--- 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>
--- 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,
--- 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)}
--- 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}
--- 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)}
--- 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,
                },
              },
@@ -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}
            >
--- 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>
--- 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)}
--- a/src/components/Setup/Step2ServiceAccount.tsx
+++ b/src/components/Setup/Step2ServiceAccount.tsx
@@ -104,7 +104,7 @@ export default function Step2ServiceAccount({
                rel="noopener noreferrer"
                endIcon={<OpenInNewIcon />}
              >
-                Set Up Service Account
+                Set up service account
              </LoadingButton>
              <LoadingButton
                variant="contained"
@@ -126,7 +126,7 @@ export default function Step2ServiceAccount({
                  rel="noopener noreferrer"
                  color="text.primary"
                >
-                  Setup Guide
+                  Setup guide
                  <InlineOpenInNewIcon />
                </Link>
              </Typography>
--- 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" && (
--- 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" && (
--- 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) =>
--- 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 +
--- 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>
          );
@@ -113,7 +112,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>
--- 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,
                    });
                  }}
--- 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} />}
--- 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}
--- 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
--- 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",
--- 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),
--- 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) => {
--- 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)}
--- 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: {
--- 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 />
--- 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}>
--- 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>
  );
--- 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}
--- 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}
--- 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}
--- 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>
--- 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>

--- 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,
--- 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");
--- 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>
--- 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}
          />
--- 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.
--- 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",
--- 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: () => {
--- 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);
--- 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: {
--- 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
--- 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"
                  }
--- 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}
--- 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
--- 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": {
--- 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,
--- 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: (
        <>
--- 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>
--- 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",
                    }}
                  />
                )}
--- 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>
--- 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 }}
--- 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 />

--- 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>
--- 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>
--- 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}
--- 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}
--- 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 (
--- 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")}
--- 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);
        };
--- 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}
--- 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 (
          <>
--- 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>
--- 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
--- 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(
--- 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")}
--- 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}
--- 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) => {
--- 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) => {
--- 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>
    </>
  );
--- 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 ||
--- 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"
--- 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" : ""}
@@ -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}
--- 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",
                          })
--- 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}
--- 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
--- 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"
--- 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);
--- 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 (
--- 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 (
--- 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"
--- 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}
--- 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}
--- 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
--- 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"
--- 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);
--- 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)}
--- 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"
      />

--- 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();
--- 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}
--- 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>
--- 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")}
--- a/Show More
+++ b/Show More