feat: delete space and edit space slug (#307)

* feat: make space slug editable * feat: delete space * client
2025-11-13 00:02:30 +10:00 · 2024-09-16 17:43:40 +01:00
parent dea9f4c063
commit fb27282886
18 changed files with 435 additions and 111 deletions
--- a/apps/client/src/components/common/recent-changes.tsx
+++ b/apps/client/src/components/common/recent-changes.tsx
@ -5,14 +5,15 @@ import {
  Badge,
  Table,
  ScrollArea,
-} from "@mantine/core";
-import { Link } from "react-router-dom";
-import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { formattedDate } from "@/lib/time.ts";
-import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription } from "@tabler/icons-react";
-import { getSpaceUrl } from "@/lib/config.ts";
+  ActionIcon,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
+import { buildPageUrl } from '@/features/page/page.utils.ts';
+import { formattedDate } from '@/lib/time.ts';
+import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
+import { IconFileDescription } from '@tabler/icons-react';
+import { getSpaceUrl } from '@/lib/config.ts';

 interface Props {
  spaceId?: string;
@ -40,10 +41,14 @@ export default function RecentChanges({ spaceId }: Props) {
                  to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                >
                  <Group wrap="nowrap">
-                    {page.icon || <IconFileDescription size={18} />}
+                    {page.icon || (
+                      <ActionIcon variant='transparent' color='gray' size={18}>
+                        <IconFileDescription size={18} />
+                      </ActionIcon>
+                    )}

                    <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || "Untitled"}
+                      {page.title || 'Untitled'}
                    </Text>
                  </Group>
                </UnstyledButton>
@ -55,7 +60,7 @@ export default function RecentChanges({ spaceId }: Props) {
                    variant="light"
                    component={Link}
                    to={getSpaceUrl(page?.space.slug)}
-                    style={{ cursor: "pointer" }}
+                    style={{ cursor: 'pointer' }}
                  >
                    {page?.space.name}
                  </Badge>
--- a/apps/client/src/features/group/queries/group-query.ts
+++ b/apps/client/src/features/group/queries/group-query.ts
@ -3,8 +3,8 @@ import {
  useQuery,
  useQueryClient,
  UseQueryResult,
-} from "@tanstack/react-query";
-import { IGroup } from "@/features/group/types/group.types";
+} from '@tanstack/react-query';
+import { IGroup } from '@/features/group/types/group.types';
 import {
  addGroupMember,
  createGroup,
@ -14,22 +14,22 @@ import {
  getGroups,
  removeGroupMember,
  updateGroup,
-} from "@/features/group/services/group-service";
-import { notifications } from "@mantine/notifications";
-import { QueryParams } from "@/lib/types.ts";
+} from '@/features/group/services/group-service';
+import { notifications } from '@mantine/notifications';
+import { QueryParams } from '@/lib/types.ts';

 export function useGetGroupsQuery(
-  params?: QueryParams,
+  params?: QueryParams
 ): UseQueryResult<any, Error> {
  return useQuery({
-    queryKey: ["groups", params],
+    queryKey: ['groups', params],
    queryFn: () => getGroups(params),
  });
 }

 export function useGroupQuery(groupId: string): UseQueryResult<IGroup, Error> {
  return useQuery({
-    queryKey: ["groups", groupId],
+    queryKey: ['groups', groupId],
    queryFn: () => getGroupById(groupId),
    enabled: !!groupId,
  });
@ -37,7 +37,7 @@ export function useGroupQuery(groupId: string): UseQueryResult<IGroup, Error> {

 export function useGroupMembersQuery(groupId: string) {
  return useQuery({
-    queryKey: ["groupMembers", groupId],
+    queryKey: ['groupMembers', groupId],
    queryFn: () => getGroupMembers(groupId),
    enabled: !!groupId,
  });
@ -47,10 +47,10 @@ export function useCreateGroupMutation() {
  return useMutation<IGroup, Error, Partial<IGroup>>({
    mutationFn: (data) => createGroup(data),
    onSuccess: () => {
-      notifications.show({ message: "Group created successfully" });
+      notifications.show({ message: 'Group created successfully' });
    },
    onError: () => {
-      notifications.show({ message: "Failed to create group", color: "red" });
+      notifications.show({ message: 'Failed to create group', color: 'red' });
    },
  });
 }
@ -61,14 +61,14 @@ export function useUpdateGroupMutation() {
  return useMutation<IGroup, Error, Partial<IGroup>>({
    mutationFn: (data) => updateGroup(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Group updated successfully" });
+      notifications.show({ message: 'Group updated successfully' });
      queryClient.invalidateQueries({
-        queryKey: ["group", variables.groupId],
+        queryKey: ['group', variables.groupId],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
@ -79,17 +79,19 @@ export function useDeleteGroupMutation() {
  return useMutation({
    mutationFn: (groupId: string) => deleteGroup({ groupId }),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Group deleted successfully" });
+      notifications.show({ message: 'Group deleted successfully' });

-      const groups = queryClient.getQueryData(["groups"]) as any;
+      const groups = queryClient.getQueryData(['groups']) as any;
      if (groups) {
-        groups.items?.filter((group: IGroup) => group.id !== variables);
-        queryClient.setQueryData(["groups"], groups);
+        groups.items = groups.items?.filter(
+          (group: IGroup) => group.id !== variables
+        );
+        queryClient.setQueryData(['groups'], groups);
      }
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
@ -100,15 +102,15 @@ export function useAddGroupMemberMutation() {
  return useMutation<void, Error, { groupId: string; userIds: string[] }>({
    mutationFn: (data) => addGroupMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Added successfully" });
+      notifications.show({ message: 'Added successfully' });
      queryClient.invalidateQueries({
-        queryKey: ["groupMembers", variables.groupId],
+        queryKey: ['groupMembers', variables.groupId],
      });
    },
    onError: () => {
      notifications.show({
-        message: "Failed to add group members",
-        color: "red",
+        message: 'Failed to add group members',
+        color: 'red',
      });
    },
  });
@ -127,14 +129,14 @@ export function useRemoveGroupMemberMutation() {
  >({
    mutationFn: (data) => removeGroupMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Removed successfully" });
+      notifications.show({ message: 'Removed successfully' });
      queryClient.invalidateQueries({
-        queryKey: ["groupMembers", variables.groupId],
+        queryKey: ['groupMembers', variables.groupId],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
--- a/apps/client/src/features/space/components/delete-space-modal.tsx
+++ b/apps/client/src/features/space/components/delete-space-modal.tsx
@ -0,0 +1,86 @@
+import { Button, Divider, Group, Modal, Text, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useDeleteSpaceMutation } from '../queries/space-query';
+import { useField } from '@mantine/form';
+import { ISpace } from '../types/space.types';
+import { useNavigate } from 'react-router-dom';
+import APP_ROUTE from '@/lib/app-route';
+
+interface DeleteSpaceModalProps {
+  space: ISpace;
+}
+
+export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const deleteSpaceMutation = useDeleteSpaceMutation();
+  const navigate = useNavigate();
+
+  const confirmNameField = useField({
+    initialValue: '',
+    validateOnChange: true,
+    validate: (value) =>
+      value.trim().toLowerCase() === space.name.trim().toLocaleLowerCase()
+        ? null
+        : 'Names do not match',
+  });
+
+  const handleDelete = async () => {
+    if (
+      confirmNameField.getValue().trim().toLowerCase() !==
+      space.name.trim().toLowerCase()
+    ) {
+      confirmNameField.validate();
+      return;
+    }
+
+    try {
+      // pass slug too so we can clear the local cache
+      await deleteSpaceMutation.mutateAsync({ id: space.id, slug: space.slug });
+      navigate(APP_ROUTE.HOME);
+    } catch (error) {
+      console.error('Failed to delete space', error);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={open} variant="light" color="red">
+        Delete
+      </Button>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Are you sure you want to delete this space?"
+      >
+        <Divider size="xs" mb="xs" />
+        <Text>
+          All pages, comments, attachments and permissions in this space will be
+          deleted irreversibly.
+        </Text>
+        <Text mt="sm">
+          Type the space name{' '}
+          <Text span fw={500}>
+            '{space.name}'
+          </Text>{' '}
+          to confirm your action.
+        </Text>
+        <TextInput
+          {...confirmNameField.getInputProps()}
+          variant="filled"
+          placeholder="Confirm space name"
+          py="sm"
+          data-autofocus
+        />
+        <Group justify="flex-end" mt="md">
+          <Button onClick={close} variant="default">
+            Cancel
+          </Button>
+          <Button onClick={handleDelete} color="red">
+            Confirm
+          </Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}
--- a/apps/client/src/features/space/components/edit-space-form.tsx
+++ b/apps/client/src/features/space/components/edit-space-form.tsx
@ -8,6 +8,14 @@ import { ISpace } from "@/features/space/types/space.types.ts";
 const formSchema = z.object({
  name: z.string().min(2).max(50),
  description: z.string().max(250),
+  slug: z
+    .string()
+    .min(2)
+    .max(50)
+    .regex(
+      /^[a-zA-Z0-9]+$/,
+      "Space slug must be alphanumeric. No special characters",
+    ),
 });

 type FormValues = z.infer<typeof formSchema>;
@ -23,12 +31,14 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
    initialValues: {
      name: space?.name,
      description: space?.description || "",
+      slug: space.slug,
    },
  });

  const handleSubmit = async (values: {
    name?: string;
    description?: string;
+    slug?: string;
  }) => {
    const spaceData: Partial<ISpace> = {
      spaceId: space.id,
@ -40,6 +50,10 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
      spaceData.description = values.description;
    }

+    if (form.isDirty("slug")) {
+      spaceData.slug = values.slug;
+    }
+
    await updateSpaceMutation.mutateAsync(spaceData);
    form.resetDirty();
  };
@ -62,8 +76,8 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
              id="slug"
              label="Slug"
              variant="filled"
-              readOnly
-              value={space.slug}
+              readOnly={readOnly}
+              {...form.getInputProps("slug")}
            />

            <Textarea
--- a/apps/client/src/features/space/components/space-details.tsx
+++ b/apps/client/src/features/space/components/space-details.tsx
@ -1,7 +1,8 @@
-import React from "react";
-import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
-import { EditSpaceForm } from "@/features/space/components/edit-space-form.tsx";
-import { Text } from "@mantine/core";
+import React from 'react';
+import { useSpaceQuery } from '@/features/space/queries/space-query.ts';
+import { EditSpaceForm } from '@/features/space/components/edit-space-form.tsx';
+import { Divider, Group, Text } from '@mantine/core';
+import DeleteSpaceModal from './delete-space-modal';

 interface SpaceDetailsProps {
  spaceId: string;
@ -18,6 +19,23 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
            Details
          </Text>
          <EditSpaceForm space={space} readOnly={readOnly} />
+
+          {!readOnly && (
+            <>
+              <Divider my="lg" />
+
+              <Group justify="space-between" wrap="nowrap" gap="xl">
+                <div>
+                  <Text size="md">Delete space</Text>
+                  <Text size="sm" c="dimmed">
+                    Delete this space with all its pages and data.
+                  </Text>
+                </div>
+
+                <DeleteSpaceModal space={space} />
+              </Group>
+            </>
+          )}
        </div>
      )}
    </>
--- a/apps/client/src/features/space/queries/space-query.ts
+++ b/apps/client/src/features/space/queries/space-query.ts
@ -3,14 +3,14 @@ import {
  useQuery,
  useQueryClient,
  UseQueryResult,
-} from "@tanstack/react-query";
+} from '@tanstack/react-query';
 import {
  IAddSpaceMember,
  IChangeSpaceMemberRole,
  IRemoveSpaceMember,
  ISpace,
  ISpaceMember,
-} from "@/features/space/types/space.types";
+} from '@/features/space/types/space.types';
 import {
  addSpaceMember,
  changeMemberRole,
@ -20,23 +20,24 @@ import {
  removeSpaceMember,
  createSpace,
  updateSpace,
-} from "@/features/space/services/space-service.ts";
-import { notifications } from "@mantine/notifications";
-import { IPagination } from "@/lib/types.ts";
+  deleteSpace,
+} from '@/features/space/services/space-service.ts';
+import { notifications } from '@mantine/notifications';
+import { IPagination } from '@/lib/types.ts';

 export function useGetSpacesQuery(): UseQueryResult<
  IPagination<ISpace>,
  Error
 > {
  return useQuery({
-    queryKey: ["spaces"],
+    queryKey: ['spaces'],
    queryFn: () => getSpaces(),
  });
 }

 export function useSpaceQuery(spaceId: string): UseQueryResult<ISpace, Error> {
  return useQuery({
-    queryKey: ["spaces", spaceId],
+    queryKey: ['spaces', spaceId],
    queryFn: () => getSpaceById(spaceId),
    enabled: !!spaceId,
    staleTime: 5 * 60 * 1000,
@ -50,22 +51,22 @@ export function useCreateSpaceMutation() {
    mutationFn: (data) => createSpace(data),
    onSuccess: () => {
      queryClient.invalidateQueries({
-        queryKey: ["spaces"],
+        queryKey: ['spaces'],
      });
-      notifications.show({ message: "Space created successfully" });
+      notifications.show({ message: 'Space created successfully' });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }

 export function useGetSpaceBySlugQuery(
-  spaceId: string,
+  spaceId: string
 ): UseQueryResult<ISpace, Error> {
  return useQuery({
-    queryKey: ["spaces", spaceId],
+    queryKey: ['spaces', spaceId],
    queryFn: () => getSpaceById(spaceId),
    enabled: !!spaceId,
    staleTime: 5 * 60 * 1000,
@ -78,34 +79,64 @@ export function useUpdateSpaceMutation() {
  return useMutation<ISpace, Error, Partial<ISpace>>({
    mutationFn: (data) => updateSpace(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Space updated successfully" });
+      notifications.show({ message: 'Space updated successfully' });

      const space = queryClient.getQueryData([
-        "space",
+        'space',
        variables.spaceId,
      ]) as ISpace;
      if (space) {
        const updatedSpace = { ...space, ...data };
-        queryClient.setQueryData(["space", variables.spaceId], updatedSpace);
-        queryClient.setQueryData(["space", data.slug], updatedSpace);
+        queryClient.setQueryData(['space', variables.spaceId], updatedSpace);
+        queryClient.setQueryData(['space', data.slug], updatedSpace);
      }

      queryClient.invalidateQueries({
-        queryKey: ["spaces"],
+        queryKey: ['spaces'],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
+    },
+  });
+}
+
+export function useDeleteSpaceMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: Partial<ISpace>) => deleteSpace(data.id),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: 'Space deleted successfully' });
+
+      if (variables.slug) {
+        queryClient.removeQueries({
+          queryKey: ['spaces', variables.slug],
+          exact: true,
+        });
+      }
+
+      const spaces = queryClient.getQueryData(['spaces']) as any;
+      if (spaces) {
+        spaces.items = spaces.items?.filter(
+          (space: ISpace) => space.id !== variables.id
+        );
+        queryClient.setQueryData(['spaces'], spaces);
+      }
+    },
+    onError: (error) => {
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }

 export function useSpaceMembersQuery(
-  spaceId: string,
+  spaceId: string
 ): UseQueryResult<IPagination<ISpaceMember>, Error> {
  return useQuery({
-    queryKey: ["spaceMembers", spaceId],
+    queryKey: ['spaceMembers', spaceId],
    queryFn: () => getSpaceMembers(spaceId),
    enabled: !!spaceId,
  });
@ -117,14 +148,14 @@ export function useAddSpaceMemberMutation() {
  return useMutation<void, Error, IAddSpaceMember>({
    mutationFn: (data) => addSpaceMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Members added successfully" });
+      notifications.show({ message: 'Members added successfully' });
      queryClient.invalidateQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
@ -135,14 +166,14 @@ export function useRemoveSpaceMemberMutation() {
  return useMutation<void, Error, IRemoveSpaceMember>({
    mutationFn: (data) => removeSpaceMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Removed successfully" });
+      notifications.show({ message: 'Removed successfully' });
      queryClient.refetchQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
@ -153,15 +184,15 @@ export function useChangeSpaceMemberRoleMutation() {
  return useMutation<void, Error, IChangeSpaceMemberRole>({
    mutationFn: (data) => changeMemberRole(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Member role updated successfully" });
+      notifications.show({ message: 'Member role updated successfully' });
      // due to pagination levels, change in cache instead
      queryClient.refetchQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
      });
    },
    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
    },
  });
 }
--- a/apps/client/src/features/space/services/space-service.ts
+++ b/apps/client/src/features/space/services/space-service.ts
@ -1,52 +1,56 @@
-import api from "@/lib/api-client";
+import api from '@/lib/api-client';
 import {
  IAddSpaceMember,
  IChangeSpaceMemberRole,
  IRemoveSpaceMember,
  ISpace,
-} from "@/features/space/types/space.types";
-import { IPagination } from "@/lib/types.ts";
-import { IUser } from "@/features/user/types/user.types.ts";
+} from '@/features/space/types/space.types';
+import { IPagination } from '@/lib/types.ts';
+import { IUser } from '@/features/user/types/user.types.ts';

 export async function getSpaces(): Promise<IPagination<ISpace>> {
-  const req = await api.post("/spaces");
+  const req = await api.post('/spaces');
  return req.data;
 }

 export async function getSpaceById(spaceId: string): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/info", { spaceId });
+  const req = await api.post<ISpace>('/spaces/info', { spaceId });
  return req.data;
 }

 export async function createSpace(data: Partial<ISpace>): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/create", data);
+  const req = await api.post<ISpace>('/spaces/create', data);
  return req.data;
 }

 export async function updateSpace(data: Partial<ISpace>): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/update", data);
+  const req = await api.post<ISpace>('/spaces/update', data);
  return req.data;
 }

+export async function deleteSpace(spaceId: string): Promise<void> {
+  await api.post<void>('/spaces/delete', { spaceId });
+}
+
 export async function getSpaceMembers(
-  spaceId: string,
+  spaceId: string
 ): Promise<IPagination<IUser>> {
-  const req = await api.post<any>("/spaces/members", { spaceId });
+  const req = await api.post<any>('/spaces/members', { spaceId });
  return req.data;
 }

 export async function addSpaceMember(data: IAddSpaceMember): Promise<void> {
-  await api.post("/spaces/members/add", data);
+  await api.post('/spaces/members/add', data);
 }

 export async function removeSpaceMember(
-  data: IRemoveSpaceMember,
+  data: IRemoveSpaceMember
 ): Promise<void> {
-  await api.post("/spaces/members/remove", data);
+  await api.post('/spaces/members/remove', data);
 }

 export async function changeMemberRole(
-  data: IChangeSpaceMemberRole,
+  data: IChangeSpaceMemberRole
 ): Promise<void> {
-  await api.post("/spaces/members/change-role", data);
+  await api.post('/spaces/members/change-role', data);
 }
--- a/apps/client/src/theme.ts
+++ b/apps/client/src/theme.ts
@ -1,20 +1,34 @@
-import { createTheme, MantineColorsTuple } from "@mantine/core";
+import { createTheme, MantineColorsTuple } from '@mantine/core';

 const blue: MantineColorsTuple = [
-  "#e7f3ff",
-  "#d0e4ff",
-  "#a1c6fa",
-  "#6ea6f6",
-  "#458bf2",
-  "#2b7af1",
-  "#0b60d8", //
-  "#1b72f2",
-  "#0056c1",
-  "#004aac",
+  '#e7f3ff',
+  '#d0e4ff',
+  '#a1c6fa',
+  '#6ea6f6',
+  '#458bf2',
+  '#2b7af1',
+  '#0b60d8',
+  '#1b72f2',
+  '#0056c1',
+  '#004aac',
+];
+
+const red: MantineColorsTuple = [
+  '#ffebeb',
+  '#fad7d7',
+  '#eeadad',
+  '#e3807f',
+  '#da5a59',
+  '#d54241',
+  '#d43535',
+  '#bc2727',
+  '#a82022',
+  '#93151b',
 ];

 export const theme = createTheme({
  colors: {
    blue,
+    red,
  },
 });