From c3070895af0b54f6fab82bce17cb4b6ad84ac449 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 14 Jun 2022 15:08:02 +1000
Subject: [PATCH] update geopoint styles

---
 .../fields/GeoPoint/SideDrawerField.tsx           | 12 +++++++-----
 src/components/fields/GeoPoint/TableCell.tsx      | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/fields/GeoPoint/SideDrawerField.tsx b/src/components/fields/GeoPoint/SideDrawerField.tsx
index 87a0de1f..026ec9c6 100644
--- a/src/components/fields/GeoPoint/SideDrawerField.tsx
+++ b/src/components/fields/GeoPoint/SideDrawerField.tsx
@@ -1,9 +1,7 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import { Box, Stack, TextField } from "@mui/material";
-import DatePicker from "@mui/lab/DatePicker";
-import DateTimeIcon from "@mui/icons-material/AccessTime";
-import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
+import { Stack, TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 import { GeoPoint } from "firebase/firestore";
 
 export default function GeoPointField({
@@ -34,11 +32,13 @@ export default function GeoPointField({
           label="Latitude"
           type="number"
           value={latitude}
-          inputProps={{ min: -90, max: 90 }}
+          inputProps={{ min: -90.0, max: 90.0 }}
           onChange={handleChange("latitude")}
           disabled={disabled}
           onBlur={onSubmit}
           fullWidth
+          InputProps={{ style: { fontVariantNumeric: "tabular-nums" } }}
+          id={getFieldId(column.key)}
         />
         <TextField
           label="Longitude"
@@ -49,6 +49,8 @@ export default function GeoPointField({
           disabled={disabled}
           onBlur={onSubmit}
           fullWidth
+          InputProps={{ style: { fontVariantNumeric: "tabular-nums" } }}
+          id={getFieldId(column.key + "-long")}
         />
       </Stack>
     </>
diff --git a/src/components/fields/GeoPoint/TableCell.tsx b/src/components/fields/GeoPoint/TableCell.tsx
index 2f5d554d..de271abd 100644
--- a/src/components/fields/GeoPoint/TableCell.tsx
+++ b/src/components/fields/GeoPoint/TableCell.tsx
@@ -1,6 +1,7 @@
 import { IBasicCellProps } from "@src/components/fields/types";
+import { Typography } from "@mui/material";
 
-export default function Duration({ value }: IBasicCellProps) {
+export default function GeoPoint({ value }: IBasicCellProps) {
   if (value === undefined) return null;
   const { latitude, longitude } = value;
 
@@ -24,9 +25,13 @@ export default function Duration({ value }: IBasicCellProps) {
   );
 
   return (
-    <>
-      {latDegrees}°{latMinutes}'{latSeconds.toFixed(2)}"{latDirection},
-      {longDegrees}°{longMinutes}'{longSeconds.toFixed(2)}"{longDirection}
-    </>
+    <Typography variant="inherit" component="span" sx={{ fontFamily: "mono" }}>
+      {latDegrees.toString().padStart(2, "0")}°
+      {latMinutes.toString().padStart(2, "0")}′
+      {latSeconds.toFixed(1).toString().padStart(3, "0")}″{latDirection}{" "}
+      {longDegrees.toString().padStart(2, "0")}°
+      {longMinutes.toString().padStart(2, "0")}′
+      {longSeconds.toFixed(1).toString().padStart(3, "0")}″{longDirection}
+    </Typography>
   );
 }