BoostIcon: fix color

src/timelines/toot-components/BoostIcon.css

@@ -1,11 +1,13 @@
-.icon__boost {
-  padding: 0;
-  display: inline-block;
+.BoostIcon {
+  display: inline-flex;
   border-radius: 2px;
+  background-color: green;
+  padding: 0.125em;
+  align-items: center;
 
-  > :global(svg) {
-    color: green;
-    font-size: 1rem;
+  > svg {
+    color: white;
+    font-size: 1em;
     vertical-align: middle;
   }
 }

src/timelines/toot-components/BoostIcon.tsx

@@ -13,7 +13,7 @@ import "./BoostIcon.css";
 const BoostIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
   const [managed, rest] = splitProps(props, ["class"]);
   return (
-    <i class={["icon__boost", managed.class].join(" ")} {...rest}>
+    <i class={["BoostIcon", managed.class].join(" ")} {...rest}>
       <Repeat />
     </i>
   );

src/timelines/toot.module.css

@@ -222,6 +222,7 @@
   grid-template-columns: auto 1fr auto;
   gap: 8px;
   margin-bottom: 8px;
+  align-items: center;
 }
 
 .tootAttachmentGrp {