From f8b3fb67879ca2c971ba92f9c685c21b5d2e31d9 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 26 Jan 2022 15:35:22 -0500
Subject: [PATCH] fix(striker-ui): use contained variant button in file
 components

---
 striker-ui/components/Files/FileEditForm.tsx  | 21 ++++++++--------
 .../components/Files/FileUploadForm.tsx       | 15 +++++++----
 .../Files/StyledContainedButton.tsx           | 25 +++++++++++++++++++
 3 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 striker-ui/components/Files/StyledContainedButton.tsx

diff --git a/striker-ui/components/Files/FileEditForm.tsx b/striker-ui/components/Files/FileEditForm.tsx
index aea2a59a..74eacdaa 100644
--- a/striker-ui/components/Files/FileEditForm.tsx
+++ b/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}
-                fileType={fileType}
-                fileLocations={fileLocations}
+                {...{ fileName, fileType, 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' }}>
-              <BodyText text="Purge" />
-            </Button>
-            <Button sx={{ textTransform: 'none' }} type="submit">
-              <BodyText text="Update" />
-            </Button>
+            <StyledContainedButton onClick={purgeFiles}>
+              Purge
+            </StyledContainedButton>
+            <StyledContainedButton type="submit">Update</StyledContainedButton>
           </Box>
         )}
       </Box>
diff --git a/striker-ui/components/Files/FileUploadForm.tsx b/striker-ui/components/Files/FileUploadForm.tsx
index 8bd0fc46..fa12b843 100644
--- a/striker-ui/components/Files/FileUploadForm.tsx
+++ b/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">
-            <BodyText text="Upload" />
-          </Button>
+          <StyledContainedButton type="submit">Upload</StyledContainedButton>
         )}
       </Box>
     </form>
diff --git a/striker-ui/components/Files/StyledContainedButton.tsx b/striker-ui/components/Files/StyledContainedButton.tsx
new file mode 100644
index 00000000..d2b44e81
--- /dev/null
+++ b/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;