Update plugin control button

src/icons/ChatBubble.tsx

@@ -0,0 +1,18 @@
+export const ChatBubble: React.FC<React.SVGProps<SVGSVGElement>> = () => {
+  return (
+    <svg
+      fill="none"
+      height="100%"
+      viewBox="0 0 15 15"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M12.5 3L2.5 3.00002C1.67157 3.00002 1 3.6716 1 4.50002V9.50003C1 10.3285 1.67157 11 2.5 11H7.50003C7.63264 11 7.75982 11.0527 7.85358 11.1465L10 13.2929V11.5C10 11.2239 10.2239 11 10.5 11H12.5C13.3284 11 14 10.3285 14 9.50003V4.5C14 3.67157 13.3284 3 12.5 3ZM2.49999 2.00002L12.5 2C13.8807 2 15 3.11929 15 4.5V9.50003C15 10.8807 13.8807 12 12.5 12H11V14.5C11 14.7022 10.8782 14.8845 10.6913 14.9619C10.5045 15.0393 10.2894 14.9965 10.1464 14.8536L7.29292 12H2.5C1.11929 12 0 10.8807 0 9.50003V4.50002C0 3.11931 1.11928 2.00003 2.49999 2.00002Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      ></path>
+    </svg>
+  );
+};

src/icons/index.ts

@@ -1,6 +1,7 @@
 export { Add } from "./Add";
 export { ArrowUp } from "./ArrowUp";
 export { BulletList } from "./BulletList";
+export { ChatBubble } from "./ChatBubble";
 export { Clear } from "./Clear";
 export { Close } from "./Close";
 export { Export } from "./Export";

src/plugin/Control/index.tsx

@@ -1,3 +1,4 @@
+import { ChatBubble } from "@icons";
 import type { Plugin as CloverPlugin } from "@samvera/clover-iiif";
 import styles from "./style.module.css";
 
@@ -21,8 +22,8 @@ export function PluginControl(props: CloverPlugin) {
   }
 
   return (
-    <button className={styles.pluginButton} onClick={clickHandler}>
-      Ai
+    <button className={styles.pluginButton} title="AI Chat" onClick={clickHandler}>
+      <ChatBubble />
     </button>
   );
 }

src/plugin/Control/style.module.css

@@ -1,14 +1,55 @@
 .pluginButton {
+  position: relative;
+  height: 2rem;
   width: 2rem;
-  margin: 0px 0px 0px 0.618rem;
+  margin: 0 0 0 0.618rem;
   cursor: pointer;
   border: 0;
-  border-radius: 100%;
+  border-radius: 2rem;
   color: var(--colors-secondary, #000);
   background-color: var(--colors-primary, #fff);
 
+  --transition-time: 200ms;
+  --transition-function: ease-in-out;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 40%;
+    right: 28%;
+    height: 1px;
+    border-radius: 1px;
+    /* background-color: hotpink; */
+    background-color: var(--colors-secondary, #000);
+    width: 0;
+    transition: width var(--transition-time) var(--transition-function);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 48%;
+    right: 28%;
+    height: 1px;
+    border-radius: 1px;
+    background-color: var(--colors-secondary, #000);
+    width: 0;
+    transition: width calc(var(--transition-time) + 50ms) var(--transition-function);
+  }
+
   &:hover {
     border-color: var(--colors-accent);
     background-color: var(--colors-accent);
+
+    &::before {
+      width: 0.85rem;
+    }
+    &::after {
+      width: 0.6rem;
+    }
+  }
+
+  @media (max-width: 575px) {
+    margin: 0 0 0.618rem 0;
   }
 }