Tidy up the styling.

nulib · Dec 17, 2024 · e4f8c6e · e4f8c6e
1 parent ed68049
commit e4f8c6e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/components/Chat/Response/Interstitial.styled.tsx b/components/Chat/Response/Interstitial.styled.tsx
@@ -7,36 +7,35 @@ const gradientAnimation = keyframes({
   },
 });
 
+const StyledInterstitialIcon = styled("div", {
+  display: "flex",
+  width: "1.5rem",
+  height: "1.5rem",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  background:
+    "linear-gradient(73deg, $purple120 0%, $purple 38.2%, $brightBlueB 61.8%)",
+  backgroundSize: "250%",
+  backgroundPosition: "61.8%",
+  animation: `${gradientAnimation} 3s infinite alternate`,
+  content: "",
+
+  svg: {
+    fill: "$white",
+    width: "0.85rem",
+    height: "0.85rem",
+  },
+});
+
 const StyledInterstitial = styled("div", {
   color: "$black",
   margin: "$gr2 0",
-  borderRadius: "2rem",
   fontFamily: "$northwesternSansBold",
   fontSize: "$gr3",
   display: "flex",
   alignItems: "center",
   gap: "$gr2",
-
-  div: {
-    display: "flex",
-    width: "1.5rem",
-    height: "1.5rem",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "50%",
-    background:
-      "linear-gradient(73deg, $purple120 0%, $purple 38.2%, $brightBlueB 61.8%)",
-    backgroundSize: "250%",
-    backgroundPosition: "61.8%",
-    animation: `${gradientAnimation} 3s infinite alternate`,
-    content: "",
-
-    svg: {
-      fill: "$white",
-      width: "0.75rem",
-      height: "0.75rem",
-    },
-  },
 });
 
-export { StyledInterstitial };
+export { StyledInterstitial, StyledInterstitialIcon };
diff --git a/components/Chat/Response/Interstitial.tsx b/components/Chat/Response/Interstitial.tsx
@@ -1,5 +1,9 @@
+import {
+  StyledInterstitial,
+  StyledInterstitialIcon,
+} from "./Interstitial.styled";
+
 import { IconSearch } from "@/components/Shared/SVG/Icons";
-import { StyledInterstitial } from "./Interstitial.styled";
 import { ToolStartMessage } from "@/types/components/chat";
 
 interface ResponseInterstitialProps {
@@ -11,26 +15,27 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
 }) => {
   const { tool, input } = message;
   let text = "";
+
   switch (tool) {
+    case "aggregate":
+      console.log(`aggregate input`, input);
+      text = `Aggregating ${input.agg_field} by ${input.term_field} ${input.term}`;
+      break;
     case "discover_fields":
       text = "Discovering fields";
       break;
     case "search":
       text = `Searching for: ${input.query}`;
       break;
-    case "aggregate":
-      console.log(`aggregate input`, input);
-      text = `Aggregating ${input.agg_field} by ${input.term_field} ${input.term}`;
-      break;
     default:
       console.warn("Unknown tool_start message", message);
   }
 
   return (
-    <StyledInterstitial>
-      <div>
+    <StyledInterstitial data-testid="response-interstitial" data-tool={tool}>
+      <StyledInterstitialIcon>
         <IconSearch />
-      </div>
+      </StyledInterstitialIcon>
       <label>{text}</label>
     </StyledInterstitial>
   );