styling for unrecommend

public/i18n/en.json

@@ -548,7 +548,7 @@
       "federation_added_success": "Federation added successfully",
       "federation_remove_confirm": "Are you sure you want to remove this federation? Make sure any funds you have are transferred to your lightning balance or another wallet first.",
       "add": "Add",
-      "remove": "Remove",
+      "remove": "Leave federation",
       "expires": "Expires",
       "federation_id": "Federation ID",
       "description": "Federations are bitcoin-based networks that make it cheaper, quicker, and easier to use bitcoin.",
@@ -559,7 +559,9 @@
       "recommended_by": "Recommended By",
       "already_in_fed": "You're already in a federation!",
       "descriptionpart2": "Each one is ran by a group of different inviduals or companies. Discover one that you or your friends might trust below.",
-      "join_me": "Join me"
+      "join_me": "Join me",
+      "recommend": "Recommend federation",
+      "recommended_by_you": "Recommended by you"
     },
     "gift": {
       "give_sats_link": "Give sats as a gift",

src/components/layout/LoadingSpinner.tsx

@@ -2,13 +2,15 @@ export const LoadingSpinner = (props: {
     big?: boolean;
     wide?: boolean;
     small?: boolean;
+    smallest?: boolean;
 }) => {
     return (
         <div
             role="status"
             classList={{
-                "w-24": !props.small,
+                "w-24": !props.small && !props.smallest,
                 "w-16": props.small,
+                "w-8 h-8": props.smallest,
                 "flex justify-center": props.wide,
                 "h-full grid": props.big
             }}

src/components/layout/SubtleButton.tsx

@@ -0,0 +1,35 @@
+import { JSX, Show } from "solid-js";
+
+import { LoadingSpinner } from "./LoadingSpinner";
+
+export function SubtleButton(props: {
+    children: JSX.Element | string;
+    onClick?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    intent?: "red" | "green" | "blue";
+    type?: "button" | "submit";
+}) {
+    return (
+        <button
+            type={props.type || "button"}
+            onClick={() => props.onClick && props.onClick()}
+            disabled={props.loading || props.disabled}
+            class="flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-neutral-900 p-2  no-underline active:-mb-[1px] active:mt-[1px] active:opacity-70"
+            classList={{
+                "text-m-grey-350": !props.intent,
+                "text-m-red": props.intent === "red",
+                "text-m-green": props.intent === "green",
+                "text-m-blue": props.intent === "blue"
+            }}
+        >
+            <Show when={props.loading}>
+                {/* Loading spinner has a weird padding on it */}
+                <div class="-my-1 -mr-2">
+                    <LoadingSpinner smallest wide />
+                </div>
+            </Show>
+            <Show when={!props.loading}>{props.children}</Show>
+        </button>
+    );
+}

src/components/layout/index.ts

@@ -6,3 +6,4 @@ export * from "./Radio";
 export * from "./TextField";
 export * from "./ExternalLink";
 export * from "./LoadingSpinner";
+export * from "./SubtleButton";

src/routes/settings/ManageFederations.tsx

@@ -7,7 +7,7 @@ import {
 } from "@modular-forms/solid";
 import { FederationBalance, TagItem } from "@mutinywallet/mutiny-wasm";
 import { A, useNavigate, useSearchParams } from "@solidjs/router";
-import { BadgeCheck, Scan } from "lucide-solid";
+import { BadgeCheck, LogOut, Scan, Trash } from "lucide-solid";
 import {
     createResource,
     createSignal,
@@ -39,6 +39,7 @@ import {
     NavBar,
     NiceP,
     showToast,
+    SubtleButton,
     TextField,
     VStack
 } from "~/components";
@@ -345,6 +346,7 @@ export function AddFederationForm(props: {
 
 function RecommendButton(props: { fed: MutinyFederationIdentity }) {
     const [state] = useMegaStore();
+    const i18n = useI18n();
     const [recommendLoading, setRecommendLoading] = createSignal(false);
     // This is just some local state that makes it feel like they've recommended it
     // even if they aren't a "real person"
@@ -395,26 +397,29 @@ function RecommendButton(props: { fed: MutinyFederationIdentity }) {
     return (
         <Switch>
             <Match when={recommendedByMe() || recommended()}>
-                <p class="flex items-center gap-2">
-                    <BadgeCheck />
-                    Recommended by you
-                </p>
-                <Button
-                    intent="red"
-                    onClick={deleteRecommendation}
-                    loading={recommendLoading()}
-                >
-                    Unrecommend
-                </Button>
+                <div class="flex items-center justify-between gap-2">
+                    <div class="flex items-center gap-2">
+                        <BadgeCheck class="h-4 w-4" />
+                        {i18n.t(
+                            "settings.manage_federations.recommended_by_you"
+                        )}
+                    </div>
+                    <SubtleButton
+                        onClick={deleteRecommendation}
+                        loading={recommendLoading()}
+                    >
+                        <Trash class="h-4 w-4" />
+                    </SubtleButton>
+                </div>
             </Match>
             <Match when={true}>
-                <Button
-                    intent="blue"
+                <SubtleButton
                     onClick={recommendFederation}
                     loading={recommendLoading()}
                 >
-                    Recommend
-                </Button>
+                    <BadgeCheck class="h-4 w-4" />
+                    {i18n.t("settings.manage_federations.recommend")}
+                </SubtleButton>
             </Match>
         </Switch>
     );
@@ -495,9 +500,10 @@ function FederationListItem(props: {
                     <Suspense>
                         <RecommendButton fed={props.fed} />
                     </Suspense>
-                    <Button intent="red" onClick={confirmRemove}>
+                    <SubtleButton intent="red" onClick={confirmRemove}>
+                        <LogOut class="h-4 w-4" />
                         {i18n.t("settings.manage_federations.remove")}
-                    </Button>
+                    </SubtleButton>
                 </VStack>
             </FancyCard>
             <ConfirmDialog