Update button colours

Update images for readme

frontend/components/dataTable.tsx

@@ -1,4 +1,5 @@
 import {
+  ButtonProps,
   chakra,
   Flex,
   IconButton,
@@ -100,6 +101,11 @@ export const DataTable = (props: DataTableProps) => {
     debugTable: false,
   });
 
+  const paginateButtonsProps: ButtonProps = {
+    colorScheme: "blue",
+    variant: "outline",
+  };
+
   return (
     <>
       <Table {...tableProps}>
@@ -183,6 +189,7 @@ export const DataTable = (props: DataTableProps) => {
                   isDisabled={!table.getCanPreviousPage()}
                   icon={<ArrowLeftIcon h={3} w={3} />}
                   mr={2}
+                  {...paginateButtonsProps}
                 />
               </Tooltip>
               <Tooltip label="Previous Page">
@@ -192,6 +199,7 @@ export const DataTable = (props: DataTableProps) => {
                   onClick={() => table.previousPage()}
                   isDisabled={!table.getCanPreviousPage()}
                   icon={<ChevronLeftIcon h={6} w={6} />}
+                  {...paginateButtonsProps}
                 />
               </Tooltip>
             </Flex>
@@ -251,6 +259,7 @@ export const DataTable = (props: DataTableProps) => {
                   onClick={() => table.nextPage()}
                   disabled={!table.getCanNextPage()}
                   icon={<ChevronRightIcon h={6} w={6} />}
+                  {...paginateButtonsProps}
                 />
               </Tooltip>
               <Tooltip label="Last Page">
@@ -261,6 +270,7 @@ export const DataTable = (props: DataTableProps) => {
                   disabled={!table.getCanNextPage()}
                   icon={<ArrowRightIcon h={3} w={3} />}
                   ml={2}
+                  {...paginateButtonsProps}
                 />
               </Tooltip>
             </Flex>

frontend/components/download/download.tsx

@@ -5,8 +5,10 @@ import {
   HStack,
   Menu,
   MenuButton,
+  MenuGroup,
   MenuItem,
   MenuList,
+  MenuOptionGroup,
   Portal,
 } from "@chakra-ui/react";
 import { ChevronDownIcon } from "@chakra-ui/icons";
@@ -67,24 +69,31 @@ export const Download: FunctionComponent<DownloadOptionsProps> = ({
   return (
     <HStack>
       <Menu>
-        <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+        <MenuButton
+          variant={"outline"}
+          colorScheme={"blue"}
+          as={Button}
+          rightIcon={<ChevronDownIcon />}
+        >
           Download
         </MenuButton>
         <Portal>
           <MenuList>
-            <MenuItem
-              icon={<MdMovie />}
-              onClick={() =>
-                downloadFile({
-                  objectKey: mediaKey(transcription),
-                  filename: transcription.metadata.filename,
-                })
-              }
-            >
-              Media
-            </MenuItem>
+            <MenuGroup>
+              <MenuItem
+                icon={<MdMovie />}
+                onClick={() =>
+                  downloadFile({
+                    objectKey: mediaKey(transcription),
+                    filename: transcription.metadata.filename,
+                  })
+                }
+              >
+                Media file
+              </MenuItem>
+            </MenuGroup>
             {transcription.downloadKey && (
-              <>
+              <MenuGroup title={"Transcription formats"}>
                 <MenuItem
                   icon={<VscJson />}
                   onClick={() =>
@@ -126,7 +135,7 @@ export const Download: FunctionComponent<DownloadOptionsProps> = ({
                 >
                   DOCX
                 </MenuItem>
-              </>
+              </MenuGroup>
             )}
           </MenuList>
         </Portal>
@@ -136,6 +145,7 @@ export const Download: FunctionComponent<DownloadOptionsProps> = ({
           onClick={() => loadPlayer()}
           variant={"solid"}
           leftIcon={<AiOutlinePlaySquare />}
+          colorScheme={"blue"}
         >
           Play
         </Button>