UI/treewide: replace all {button,icon} component

pkgs/webview-ui/app/src/components/BackButton.tsx

@@ -9,7 +9,7 @@ export const BackButton = () => {
       variant="light"
       class="w-fit"
       onClick={() => navigate(-1)}
-      startIcon={<Icon icon="ArrowLeft" />}
+      startIcon={<Icon icon="CaretRight" />}
     ></Button>
   );
 };

pkgs/webview-ui/app/src/components/MachineListItem.tsx

@@ -5,6 +5,7 @@ import { activeURI } from "../App";
 import toast from "solid-toast";
 import { A, useNavigate } from "@solidjs/router";
 import { RndThumbnail } from "./noiseThumbnail";
+import Icon from "./icon";
 
 type MachineDetails = SuccessQuery<"list_inventory_machines">["data"][string];
 
@@ -138,7 +139,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
           <div>
             <Menu
               popoverid={`menu-${props.name}`}
-              label={<span class="material-icons">more_vert</span>}
+              label={<Icon icon={"Expand"} />}
             >
               <ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
                 <li>

pkgs/webview-ui/app/src/components/Menu.tsx

@@ -9,6 +9,7 @@ import {
   shift,
 } from "@floating-ui/dom";
 import cx from "classnames";
+import { Button } from "./button";
 
 interface MenuProps {
   /**
@@ -53,7 +54,8 @@ export const Menu = (props: MenuProps) => {
 
   return (
     <div>
-      <button
+      <Button
+        variant="light"
         popovertarget={props.popoverid}
         popovertargetaction="toggle"
         ref={setReference}
@@ -64,7 +66,7 @@ export const Menu = (props: MenuProps) => {
         {...props.buttonProps}
       >
         {props.label}
-      </button>
+      </Button>
       <div
         popover="auto"
         id={props.popoverid}

pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx

@@ -6,7 +6,7 @@ export const SidebarFlyout = () => {
     <div class="sidebar__flyout">
       <div class="sidebar__flyout__inner">
         <List gapSize="small">
-          <SidebarListItem href="/settings" title="Settings" />
+          <SidebarListItem href="/clans" title="Settings" />
         </List>
       </div>
     </div>

pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx

@@ -29,7 +29,7 @@ export const SidebarHeader = (props: SidebarHeader) => {
         color="primary"
         inverted={true}
       >
-        {clanName.slice(0, 1)}
+        {clanName.slice(0, 1).toUpperCase()}
       </Typography>
     </div>
   );

pkgs/webview-ui/app/src/components/button/index.tsx

@@ -61,6 +61,7 @@ export const Button = (props: ButtonProps) => {
         "inline-flex items-center flex-shrink gap-2 justify-center",
         // Styles
         "border border-solid",
+        "p-4",
         sizePaddings[local.size || "default"],
         // Colors
         variantColors[local.variant || "dark"],

pkgs/webview-ui/app/src/components/icon/index.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX } from "solid-js";
+import { Component, JSX, splitProps } from "solid-js";
 import ArrowBottom from "@/icons/arrow-bottom.svg";
 import ArrowLeft from "@/icons/arrow-left.svg";
 import ArrowRight from "@/icons/arrow-right.svg";
@@ -81,10 +81,18 @@ const Icon: Component<IconProps> = (props) => {
     Trash,
     Update,
   };
+  const [local, iconProps] = splitProps(props, ["icon"]);
 
-  const IconComponent = icons[props.icon];
+  const IconComponent = icons[local.icon];
   return IconComponent ? (
-    <IconComponent width={16} height={16} viewBox="0 0 48 48" />
+    <IconComponent
+      width={16}
+      height={16}
+      viewBox="0 0 48 48"
+      // @ts-expect-error: dont know, fix this type nit later
+      ref={iconProps.ref}
+      {...iconProps}
+    />
   ) : null;
 };