💄 Align Save/Close Button for TickerModalForm

systemli · Jan 24, 2023 · 052a336 · 052a336
1 parent 5045a97
commit 052a336
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/src/components/ticker/TickerForm.tsx b/src/components/ticker/TickerForm.tsx
@@ -8,7 +8,6 @@ import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Alert,
-  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -18,7 +17,6 @@ import {
   Stack,
   TextField,
   Typography,
-  useTheme,
 } from '@mui/material'
 import {
   faComputerMouse,
@@ -80,7 +78,6 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
   const { token } = useAuth()
   const { postTicker, putTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
-  const theme = useTheme()
 
   const onLocationChange = useCallback(
     (result: Result) => {
@@ -310,22 +307,6 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
           </Grid>
         ) : null}
       </Grid>
-      <Grid item textAlign="right" xs={12}>
-        <Box sx={{ pt: theme.spacing(2) }}>
-          <Button
-            color="primary"
-            form="tickerForm"
-            sx={{ mr: theme.spacing(1) }}
-            type="submit"
-            variant="contained"
-          >
-            Save
-          </Button>
-          <Button color="secondary" onClick={() => callback()}>
-            Close
-          </Button>
-        </Box>
-      </Grid>
     </form>
   )
 }

diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
@@ -1,6 +1,8 @@
 import { Close } from '@mui/icons-material'
 import {
+  Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -59,6 +61,21 @@ const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
           </TabPanel>
         ) : null}
       </DialogContent>
+      <DialogActions>
+        {tabValue === 0 ? (
+          <Button
+            color="primary"
+            form="tickerForm"
+            type="submit"
+            variant="contained"
+          >
+            Save
+          </Button>
+        ) : null}
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
     </Dialog>
   )
 }