Merge pull request #18 from wri/feature/button-styles

Feature/button styles
wri · Jan 16, 2025 · f951dbe · f951dbe
2 parents 8c3a417 + ec01a84
commit f951dbe
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 54 deletions.
diff --git a/src/components/MessageOut/HumanInput.jsx b/src/components/MessageOut/HumanInput.jsx
@@ -1,9 +1,10 @@
 
 import T from "prop-types";
-import { Button, List } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
 import { addPrompt, confirmedLocationAtom, highlightedLayerAtom } from "../../atoms";
 import MessageOutWrapper from "./wrapper";
+import QueryButton from "./QueryButton";
 
 /**
  *
@@ -26,14 +27,9 @@ function HumanInput({ message, options, artifact }) {
           const feature = artifact.features.find((f) => f.id === `${option}`);
 
           return (
-            <List.Item key={option}>
-              <Button
-                size="xs"
-                mb="2"
-                type="button"
-                colorPalette="blue"
-                borderRadius="full"
-                onClick={() => {
+            <List.Item key={option} m="0">
+              <QueryButton
+                clickHandler={() => {
                   submit({ query: `${index}`, queryType: "human_input" });
                   confirmLocation(feature);
                 }}
@@ -42,7 +38,7 @@ function HumanInput({ message, options, artifact }) {
                 _hover={{ bg: "pink.500" }}
               >
                 {feature.properties.name}
-              </Button>
+              </QueryButton>
             </List.Item>
           );
         })}

diff --git a/src/components/MessageOut/MessageAssistant.jsx b/src/components/MessageOut/MessageAssistant.jsx
@@ -1,10 +1,10 @@
 import T from "prop-types";
-import { Button } from "@chakra-ui/react";
 import Markdown from "react-markdown";
 
 import { useSetAtom } from "jotai";
 import { addPrompt } from "../../atoms";
 import MessageOutWrapper from "./wrapper";
+import QueryButton from "./QueryButton";
 
 function MessageAssistant({ message }) {
   const submit = useSetAtom(addPrompt);
@@ -25,17 +25,12 @@ function MessageAssistant({ message }) {
           } else {
             const { query } = JSON.parse(messagePart.partial_json);
             return (
-              <Button
-                size="xs"
-                mt="4"
+              <QueryButton
                 key={index}
-                onClick={() => submit(query)}
-                borderRadius="full"
-                colorPalette="blue"
-                type="button"
+                clickHandler={() => submit(query)}
               >
                 {messagePart.name}
-              </Button>);
+              </QueryButton>);
           }
         })}
       </MessageOutWrapper>

diff --git a/src/components/MessageOut/MessageTool.jsx b/src/components/MessageOut/MessageTool.jsx
@@ -1,20 +1,23 @@
 import T from "prop-types";
-import { Button }  from "@chakra-ui/react";
 import MessageOutWrapper from "./wrapper";
 
 import { useSetAtom } from "jotai";
 import { mapLayersAtom, chartDataAtom } from "../../atoms";
+import QueryButton from "./QueryButton";
 
-function ContextLayer({message}) {
-  return (<p>Using context layer <b>{message}</b></p>);
+function ContextLayer({ message }) {
+  return (
+    <p>
+      Using context layer <b>{message}</b>
+    </p>
+  );
 }
 
-
 ContextLayer.propTypes = {
-  message: T.string.isRequired
+  message: T.string.isRequired,
 };
 
-function LocationTool({artifact}) {
+function LocationTool({ artifact }) {
   /**
    * LocationTool component
    * message is found location
@@ -37,24 +40,18 @@ function LocationTool({artifact}) {
           <li key={f.id}>{f.properties.name}</li>
         ))}
       </ul>
-      <Button
-        type="button"
-        size="xs"
-        borderRadius="full"
-        colorPalette="blue"
-        onClick={() => setMapLayers(() => [artifact])}
-      >
+      <QueryButton clickHandler={() => setMapLayers(() => [artifact])}>
         Show on map
-      </Button>
+      </QueryButton>
     </>
   );
 }
 
 LocationTool.propTypes = {
-  artifact: T.object
+  artifact: T.object,
 };
 
-function DistAlertsTool({message, artifact}) {
+function DistAlertsTool({ message, artifact }) {
   // message is of the form { "location": { "category": "value"}, { "category": "value"} }
   // artifact is geojson object to render to a map
 
@@ -69,36 +66,35 @@ function DistAlertsTool({message, artifact}) {
 
   const json = JSON.parse(message);
   const keys = Object.keys(json);
-  const data = Object.entries(json[keys[0]]).map(([category, value]) => ({ category, value }));
+  const data = Object.entries(json[keys[0]]).map(([category, value]) => ({
+    category,
+    value,
+  }));
 
   return (
     <>
       <p>Found {numDisturbances} disturbances in the region.</p>
-      <Button
-        size="xs"
-        mt="4"
-        borderRadius="full"
-        colorPalette="blue"
-        onClick={() => {
+      <QueryButton
+        clickHandler={() => {
           setMapLayers(() => [artifact]);
           setChartData(data);
         }}
       >
         Show on map
-      </Button>
+      </QueryButton>
     </>
   );
 }
 
 DistAlertsTool.propTypes = {
   message: T.string.isRequired,
-  artifact: T.object
+  artifact: T.object,
 };
 
-function MessageTool({message, toolName, artifact}) {
+function MessageTool({ message, toolName, artifact }) {
   let render;
 
-  switch(toolName) {
+  switch (toolName) {
     case "context-layer-tool":
       render = <ContextLayer message={message} />;
       break;
@@ -113,18 +109,18 @@ function MessageTool({message, toolName, artifact}) {
       break;
   }
 
-  return (
-    <MessageOutWrapper>
-      {render}
-    </MessageOutWrapper>
-  );
+  return <MessageOutWrapper>{render}</MessageOutWrapper>;
 }
 
 MessageTool.propTypes = {
   message: T.string.isRequired,
-  toolName: T.oneOf(["context-layer-tool", "location-tool", "dist-alerts-tool", "retrieve_blog_posts"]),
-  artifact: T.object
+  toolName: T.oneOf([
+    "context-layer-tool",
+    "location-tool",
+    "dist-alerts-tool",
+    "retrieve_blog_posts",
+  ]),
+  artifact: T.object,
 };
 
-
 export default MessageTool;
diff --git a/src/components/MessageOut/QueryButton.jsx b/src/components/MessageOut/QueryButton.jsx
@@ -0,0 +1,34 @@
+import T from "prop-types";
+import { Button } from "@chakra-ui/react";
+
+const QueryButton = ({ children, clickHandler, ...delegated }) => {
+  return (
+    <Button
+      onClick={clickHandler}
+      props={delegated}
+      size="xs"
+      mt="2"
+      px={4}
+      borderRadius="full"
+      type="button"
+      borderWidth="1px"
+      color="gray.700"
+      background="linear-gradient({colors.white} 0 0) padding-box, radial-gradient(at 0% 0%, {colors.gray.700}, {colors.gray.200} ) border-box"
+      transition="all 0.24s ease-out"
+      boxShadow="xs"
+      _hover={{
+        background:
+          "linear-gradient({colors.white} 0 0) padding-box, radial-gradient(at 0% 0%, {colors.blue.700}, {colors.lime.400} ) border-box",
+      }}
+    >
+      {children}
+    </Button>
+  );
+};
+
+QueryButton.propTypes = {
+  clickHandler: T.func,
+  children: T.object,
+};
+
+export default QueryButton;