Use icon button for add provider button

packages/components/icons/index.ts

@@ -1,6 +1,7 @@
 export * from "./src/done-icon";
 export * from "./src/next-icon";
 export * from "./src/play-icon";
+export * from "./src/plus-icon";
 export * from "./src/prev-icon";
 export * from "./src/pause-icon";
 export * from "./src/providers";

packages/components/icons/src/plus-icon.ts

@@ -0,0 +1,31 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * Icon that shows a plus icon.
+ */
+@customElement("plus-icon")
+export class PlusIcon extends LitElement {
+  @property({ type: Number }) size = 24;
+  @property({ type: String }) color = "currentColor";
+
+  render() {
+    return html`
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 ${this.size} ${this.size}"
+        height="${this.size}"
+        width="${this.size}"
+      >
+        <path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4z" fill="currentColor" />
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "plus-icon": PlusIcon;
+  }
+}

packages/components/provider-status/src/provider-status.ts

@@ -8,10 +8,10 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, query } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 import { Match } from "effect";
+import { ButtonType, type EchoDialog } from "@echo/components-ui-atoms";
 import "@echo/components-icons";
 import "@echo/components-add-provider";
 import "@echo/components-ui-atoms";
-import type { EchoDialog } from "@echo/components-ui-atoms";
 
 /**
  * Component that displays the status of all active providers.
@@ -78,7 +78,12 @@ export class AllProvidersStatusBar extends LitElement {
               </div>
             `,
           )}
-          <button @click=${this._onAddProviderClick}>+</button>
+          <echo-button
+            .type=${ButtonType.Icon}
+            @click=${this._onAddProviderClick}
+          >
+            <plus-icon title="Add provider"></plus-icon>
+          </echo-button>
         </div>
         ${this._renderAddProviderModal()}
       `,

packages/components/ui-atoms/src/button.ts

@@ -22,6 +22,10 @@ export class EchoButton extends LitElement {
 
   static styles = css`
     button {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
       background-color: var(--button-background-color);
       color: var(--button-text-color);
       font-family: var(--font-family);