Merge pull request #9 from wri/update-styling

Update styling
wri · Dec 19, 2024 · ccdeecb · ccdeecb
2 parents 340a525 + da95bcd
commit ccdeecb
Show file tree

Hide file tree

Showing 17 changed files with 268 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@chakra-ui/react": "^3.2.1",
     "@emotion/react": "^11.13.5",
+    "@fontsource/ibm-plex-sans": "^5.1.0",
     "@turf/bbox": "^7.1.0",
     "d3": "^7.9.0",
     "jotai": "^2.10.3",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,32 +1,42 @@
-import { Box, Grid } from "@chakra-ui/react";
+import { Box, Grid, Text } from "@chakra-ui/react";
 import Providers from "./Providers";
 import { ChatInput, ChatOutput, Map } from "./components";
 
 function App() {
   return (
     <Providers>
-      <Box position="absolute" top="0" left="0" bottom="0" right="0">
-        <Map />
-      </Box>
       <Grid
-        position="absolute"
-        top="4"
-        left="4"
-        bottom="4"
-        width="80"
-        borderRadius="4px"
-        py="4"
-        bgColor="rgba(255,255,255,.5)"
-        gap="4"
-        templateRows="1fr max-content"
-        backdropFilter="blur(8px)"
+        maxH="vh"
+        h="vh"
+        templateRows="min-content minmax(0, 1fr)"
+        bg="blue.900/15"
+        bgImage="linear-gradient({colors.lime.50}, transparent)"
       >
-        <Box overflowY="auto" px="4">
-          <ChatOutput />
-        </Box>
-        <Box px="4">
-          <ChatInput />
+        <Box bgColor="blue.50" shadow="sm" px="8" py="4">
+          <Text as="h1" color="blue.900" fontWeight="700">Land Carbon Lab - Zeno</Text>
         </Box>
+        <Grid templateColumns="350px 1fr" p="8" gap="2">
+          <Grid
+            gap="4"
+            templateRows="1fr max-content"
+            borderRadius="lg"
+            shadow="md"
+            p="4"
+            height="0"
+            minH="100%"
+            bgColor="white"
+          >
+            <Box overflowY="auto" height="100%" mx="-4" px="4">
+              <ChatOutput />
+            </Box>
+            <Box>
+              <ChatInput />
+            </Box>
+          </Grid>
+          <Box borderRadius="lg" shadow="md" overflow="hidden">
+            <Map />
+          </Box>
+        </Grid>
       </Grid>
     </Providers>
   );

diff --git a/src/components/ChatInput.jsx b/src/components/ChatInput.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Input } from "@chakra-ui/react";
+import { Box, Button, Input } from "@chakra-ui/react";
+import { MdChevronRight } from "react-icons/md";
 import { useSetAtom } from "jotai";
 import { addPrompt } from "../atoms";
 
@@ -17,14 +18,33 @@ function ChatInput() {
   };
 
   return (
-    <Input
-      aria-label="Ask a question"
-      placeholder="Ask a question"
-      bgColor="white"
-      value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
-      onKeyUp={handleKeyUp}
-    />
+    <Box position="relative">
+      <Input
+        aria-label="Ask a question"
+        placeholder="Ask a question"
+        fontSize="sm"
+        pr="12"
+        shadow="md"
+        border="0"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyUp={handleKeyUp}
+      />
+      <Button
+        position="absolute"
+        right="2"
+        top="50%"
+        transform="translateY(-50%)"
+        padding="0"
+        borderRadius="full"
+        colorPalette="blue"
+        type="button"
+        size="xs"
+        onClick={() => submit(inputValue)}
+      >
+        <MdChevronRight />
+      </Button>
+    </Box>
   );
 }
 

diff --git a/src/components/ChatOutput.jsx b/src/components/ChatOutput.jsx
@@ -31,7 +31,7 @@ function ChatOutput() {
   }, []);
 
   return (
-    <Box ref={containerRef}>
+    <Box ref={containerRef} fontSize="sm">
       {chatHistory.map((msg) => {
         switch (msg.type) {
           case "in":

diff --git a/src/components/LclLogo.jsx b/src/components/LclLogo.jsx
@@ -0,0 +1,15 @@
+function LclLogo() {
+  return (
+    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <rect x="0.5" width="13" height="16" fill="url(#pattern0_270_1205)" />
+      <defs>
+        <pattern id="pattern0_270_1205" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use xlinkHref="#image0_270_1205" transform="scale(0.0163934 0.0135135)" />
+        </pattern>
+        <image id="image0_270_1205" width="167" height="74" xlinkHref="data:image/png;base64,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" />
+      </defs>
+    </svg>
+  );
+}
+
+export default LclLogo;
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -1,5 +1,9 @@
 import "maplibre-gl/dist/maplibre-gl.css";
-import MapGl, { Layer, Source, AttributionControl } from "react-map-gl/maplibre";
+import MapGl, {
+  Layer,
+  Source,
+  AttributionControl,
+} from "react-map-gl/maplibre";
 import { useEffect } from "react";
 import bbox from "@turf/bbox";
 import { mapLayersAtom } from "../atoms";
@@ -19,19 +23,28 @@ function Map() {
   // each layer is a feature collection, so we need to calculate the bounds of all features
   useEffect(() => {
     if (mapLayers.length > 0) {
-      const bounds = mapLayers.reduce((acc, layer) => {
-        const layerBounds = bbox(layer);
-        return [
-          Math.min(acc[0], layerBounds[0]),
-          Math.min(acc[1], layerBounds[1]),
-          Math.max(acc[2], layerBounds[2]),
-          Math.max(acc[3], layerBounds[3])
-        ];
-      }, [Infinity, Infinity, -Infinity, -Infinity]);
+      const bounds = mapLayers.reduce(
+        (acc, layer) => {
+          const layerBounds = bbox(layer);
+          return [
+            Math.min(acc[0], layerBounds[0]),
+            Math.min(acc[1], layerBounds[1]),
+            Math.max(acc[2], layerBounds[2]),
+            Math.max(acc[3], layerBounds[3]),
+          ];
+        },
+        [Infinity, Infinity, -Infinity, -Infinity]
+      );
 
-      mapRef.current.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
-        padding: {top: 100, bottom: 100, left: 450, right: 100}
-      });
+      mapRef.current.fitBounds(
+        [
+          [bounds[0], bounds[1]],
+          [bounds[2], bounds[3]],
+        ],
+        {
+          padding: 100,
+        }
+      );
     }
   }, [mapLayers]);
 
@@ -48,19 +61,28 @@ function Map() {
       <Source
         id="background"
         type="raster"
-        tiles={["https://tile.openstreetmap.org/{z}/{x}/{y}.png"]}
+        tiles={["https://api.mapbox.com/styles/v1/devseed/cm4sj2dh6005b01s80c8t623r/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJnUi1mbkVvIn0.018aLhX0Mb0tdtaT2QNe2Q"]}
         tileSize={256}
       >
         <Layer id="background-tiles" type="raster" />
       </Source>
-        {mapLayers.map((layer, idx) => {
-          const layerId = layer?.features[0]?.id || idx;
-          return (
-            <Source id={layerId} type="geojson" data={layer} key={layerId}>
-              <Layer id={layerId} type="line" paint={{ "line-color": "#ff0000", "line-width": 2 }} />
-            </Source>
-          );
-        })}
+      {mapLayers.map((layer, idx) => {
+        const layerId = layer?.features[0]?.id || idx;
+        return (
+          <Source id={layerId} type="geojson" data={layer} key={layerId}>
+            <Layer
+              id={`fill-layer-${layerId}`}
+              type="fill"
+              paint={{ "fill-color": "#1857e0", "fill-opacity": 0.25 }}
+            />
+            <Layer
+              id={`line-layer-${layerId}`}
+              type="line"
+              paint={{ "line-color": "#1857e0", "line-width": 2 }}
+            />
+          </Source>
+        );
+      })}
       <AttributionControl customAttribution="Background tiles: © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>" />
     </MapGl>
   );

diff --git a/src/components/MessageIn.jsx b/src/components/MessageIn.jsx
@@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
 
 function MessageIn({ message }) {
   return (
-    <Box mb="4" p="2" bgColor="blue.700" color="white" borderRadius="4px">
+    <Box mb="4" p="2" borderRadius="md" border="1px solid" borderColor="blackAlpha.200">
       {message}
     </Box>
   );

diff --git a/src/components/MessageAssistant.jsx → ...omponents/MessageOut/MessageAssistant.jsx b/src/components/MessageAssistant.jsx → ...omponents/MessageOut/MessageAssistant.jsx
@@ -1,32 +1,44 @@
 import T from "prop-types";
-import { Box, Button } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import Markdown from "react-markdown";
 
 import { useSetAtom } from "jotai";
-import { addPrompt } from "../atoms";
+import { addPrompt } from "../../atoms";
+import MessageOutWrapper from "./wrapper";
 
 function MessageAssistant({ message }) {
   const submit = useSetAtom(addPrompt);
 
   if (typeof message === "string" || message instanceof String) {
     return (
-      <Box mb="4" p="2" bgColor="gray.50" borderRadius="4px">
+      <MessageOutWrapper>
         <Markdown>{message}</Markdown>
-      </Box>
+      </MessageOutWrapper>
     );
   } else {
     return (
-      <Box mb="4" p="2" bgColor="gray.50" borderRadius="4px">
+      <MessageOutWrapper>
         {message.map((messagePart) => {
           const { index, type } = messagePart;
           if (type === "text") {
             return <Markdown key={index}>{messagePart.text}</Markdown>;
           } else {
             const { query } = JSON.parse(messagePart.partial_json);
-            return <Button size="xs" mt="4" key={index} onClick={() => submit(query)}>{messagePart.name}</Button>;
+            return (
+              <Button
+                size="xs"
+                mt="4"
+                key={index}
+                onClick={() => submit(query)}
+                borderRadius="full"
+                colorPalette="blue"
+                type="button"
+              >
+                {messagePart.name}
+              </Button>);
           }
         })}
-      </Box>
+      </MessageOutWrapper>
     );
   }
 }

diff --git a/src/components/MessageDefault.jsx → src/components/MessageOut/MessageDefault.jsx b/src/components/MessageDefault.jsx → src/components/MessageOut/MessageDefault.jsx
@@ -1,13 +1,13 @@
 import T from "prop-types";
-import { Box } from "@chakra-ui/react";
-import { Alert } from "./ui/alert";
+import { Alert } from "../ui/alert";
+import MessageOutWrapper from "./wrapper";
 
 function MessageDefault({message, type}) {
   return (
-    <Box mb="4" p="2" bgColor="gray.50" borderRadius="4px">
+    <MessageOutWrapper>
       <Alert status="warning" title={`Unsupported message type "${type}"`} />
       {message}
-    </Box>
+    </MessageOutWrapper>
   );
 }
 

diff --git a/src/components/MessageTool.jsx → src/components/MessageOut/MessageTool.jsx b/src/components/MessageTool.jsx → src/components/MessageOut/MessageTool.jsx
@@ -1,10 +1,11 @@
 import T from "prop-types";
 import { Box, Button }  from "@chakra-ui/react";
-import MiniMap from "./MiniMap";
-import BarChart from "./BarChart";
+import MessageOutWrapper from "./wrapper";
+import MiniMap from "../MiniMap";
+import BarChart from "../BarChart";
 
 import { useSetAtom } from "jotai";
-import { mapLayersAtom } from "../atoms";
+import { mapLayersAtom } from "../../atoms";
 
 function ContextLayer({message}) {
   return (
@@ -93,9 +94,9 @@ function MessageTool({message, toolName, artifact}) {
   }
 
   return (
-    <Box mb="4" p="2" bgColor="gray.50" borderRadius="4px">
+    <MessageOutWrapper>
       {render}
-    </Box>
+    </MessageOutWrapper>
   );
 }