Tidy up the styling.

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

Hide file tree

Showing 2 changed files with 30 additions and 27 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 {
@@ -27,10 +31,10 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
   }
 
   return (
-    <StyledInterstitial>
-      <div>
+    <StyledInterstitial data-testid="response-interstitial" data-tool={tool}>
+      <StyledInterstitialIcon>
         <IconSearch />
-      </div>
+      </StyledInterstitialIcon>
       <label>{text}</label>
     </StyledInterstitial>
   );