app visual cleanup

app/src/Loader.tsx

@@ -50,7 +50,7 @@ const StyledLink = styled(
     justifyContent: "center",
     alignItems: "center",
   },
-  { "&:hover": { backgroundColor: "transparent", cursor: "pointer" } }
+  { "&:hover": { backgroundColor: "$hover", color:"$white", cursor: "pointer" } }
 );
 
 const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
@@ -63,10 +63,18 @@ const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
   boxShadow: 0,
   backgroundColor: "white",
   marginLeft: 2,
+  cursor: "pointer",
   "&:first-child": { marginLeft: 0 },
-  "&[data-state=on]": { backgroundColor: "$primary", color: "white" },
+  "&[data-state=on]": { backgroundColor: "$primary", color: "$primaryText" },
 });
 
+const MetadataButton = styled(DialogPrimitive.Trigger, {
+  backgroundColor:"$primary",
+  color:"$primaryText",
+  padding:"$1",
+  cursor: "pointer"
+})
+
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
   backgroundColor: "black",
   position: "fixed",
@@ -76,18 +84,36 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
 });
 
 const StyledContent = styled(DialogPrimitive.Content, {
-  backgroundColor: "$black",
+  backgroundColor: "#222",
+  padding:"$1",
   borderRadius: 6,
   position: "fixed",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
   width: "90vw",
-  maxWidth: "80vh",
   zIndex: 4,
   "&:focus": { outline: "none" },
 });
 
+const MetadataTable = styled("table", {
+  tableLayout:"fixed",
+  width:"100%"
+});
+
+const MetadataKey = styled("td", {
+  padding: "0 $1"
+});
+
+const MetadataValue = styled("td", {
+  fontFamily:"monospace",
+});
+
+const JsonValue = styled(MetadataValue, {
+  overflowX:"scroll"
+})
+
+
 export const introspectTileType = async (file: PMTiles): Promise<TileType> => {
   let magic = await file.source.getBytes(512000, 4);
   let b0 = magic.getUint8(0);
@@ -139,12 +165,13 @@ function Loader(props: { file: PMTiles }) {
     fetchData();
   }, [props.file]);
 
-  const metadataRows = metadata.map((d, i) => (
-    <tr key={i}>
-      <td>{d[0]}</td>
-      <td>{d[1]}</td>
+  const metadataRows = metadata.map((d, i) => {
+    let Cls = (d[0] === 'json') ? JsonValue : MetadataValue
+    return <tr key={i}>
+      <MetadataKey>{d[0]}</MetadataKey>
+      <Cls>{d[1]}</Cls>
     </tr>
-  ));
+  });
 
   const closeModal = () => {
     setModalOpen(false);
@@ -174,9 +201,9 @@ function Loader(props: { file: PMTiles }) {
           {props.file.source.getKey()}
         </ToolbarLink>
         <DialogPrimitive.Root open={modalOpen}>
-          <DialogPrimitive.Trigger onClick={() => setModalOpen(true)}>
+          <MetadataButton onClick={() => setModalOpen(true)}>
             Metadata
-          </DialogPrimitive.Trigger>
+          </MetadataButton>
           <DialogPrimitive.Portal>
             <StyledOverlay />
             <StyledContent
@@ -185,7 +212,7 @@ function Loader(props: { file: PMTiles }) {
             >
               <DialogPrimitive.Title />
               <DialogPrimitive.Description />
-              <table>
+              <MetadataTable>
                 <thead>
                   <tr>
                     <th>key</th>
@@ -193,7 +220,7 @@ function Loader(props: { file: PMTiles }) {
                   </tr>
                 </thead>
                 <tbody>{metadataRows}</tbody>
-              </table>
+              </MetadataTable>
               <DialogPrimitive.Close />
             </StyledContent>
           </DialogPrimitive.Portal>