fix(striker-ui): use contained variant button in file components

striker-ui/components/Files/FileEditForm.tsx

@@ -4,14 +4,14 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { Box, Button, Checkbox, checkboxClasses } from '@mui/material';
+import { Box, Checkbox, checkboxClasses } from '@mui/material';
 
 import { GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
 
-import { BodyText } from '../Text';
 import FileInfo from './FileInfo';
 import fetchJSON from '../../lib/fetchers/fetchJSON';
 import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
+import StyledContainedButton from './StyledContainedButton';
 
 type FileEditProps = {
   filesOverview: FileOverviewMetadata[];
@@ -127,6 +127,9 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
               sx={{
                 display: 'flex',
                 flexDirection: 'row',
+                '& > :last-child': {
+                  flexGrow: 1,
+                },
               }}
             >
               <Checkbox
@@ -142,9 +145,7 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
                 }}
               />
               <FileInfo
-                fileName={fileName}
+                {...{ fileName, fileType, fileLocations }}
-                fileType={fileType}
-                fileLocations={fileLocations}
                 onChange={generateFileInfoChangeHandler(fileIndex)}
               />
             </Box>
@@ -152,12 +153,10 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
         )}
         {filesToEdit.length > 0 && (
           <Box sx={{ display: 'flex', flexDirection: 'row' }}>
-            <Button onClick={purgeFiles} sx={{ textTransform: 'none' }}>
+            <StyledContainedButton onClick={purgeFiles}>
-              <BodyText text="Purge" />
+              Purge
-            </Button>
+            </StyledContainedButton>
-            <Button sx={{ textTransform: 'none' }} type="submit">
+            <StyledContainedButton type="submit">Update</StyledContainedButton>
-              <BodyText text="Update" />
-            </Button>
           </Box>
         )}
       </Box>

striker-ui/components/Files/FileUploadForm.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Box, Button, Input, InputLabel } from '@mui/material';
+import { Box, Input, InputLabel } from '@mui/material';
 import EventEmitter from 'events';
 
 import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES';
@@ -14,6 +14,7 @@ import FileInfo from './FileInfo';
 import { ProgressBar } from '../Bars';
 import { BodyText } from '../Text';
 import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
+import StyledContainedButton from './StyledContainedButton';
 
 type FileUploadFormProps = {
   onFileUploadComplete?: () => void;
@@ -146,7 +147,13 @@ const FileUploadForm = (
 
   return (
     <form onSubmit={uploadFiles}>
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          '> :not(:first-child)': { marginTop: '1em' },
+        }}
+      >
         <InputLabel htmlFor="select-file">
           <Input
             id="select-file"
@@ -202,9 +209,7 @@ const FileUploadForm = (
           ),
         )}
         {selectedFiles.length > 0 && (
-          <Button sx={{ textTransform: 'none' }} type="submit">
+          <StyledContainedButton type="submit">Upload</StyledContainedButton>
-            <BodyText text="Upload" />
-          </Button>
         )}
       </Box>
     </form>

striker-ui/components/Files/StyledContainedButton.tsx

@@ -0,0 +1,25 @@
+import { Button, ButtonProps, styled } from '@mui/material';
+
+import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
+
+const StyledButton = styled(Button)({
+  backgroundColor: TEXT,
+  color: BLACK,
+  textTransform: 'none',
+
+  '&:hover': {
+    backgroundColor: GREY,
+  },
+});
+
+const StyledContainedButton = ({
+  children,
+  onClick,
+  type,
+}: ButtonProps): JSX.Element => (
+  <StyledButton {...{ onClick, type }} variant="contained">
+    {children}
+  </StyledButton>
+);
+
+export default StyledContainedButton;