Update L1 wallet config screen (#14405)

Update the page to the latest design provided. Empty state is a WIP.

<img width="1297" alt="Screenshot 2024-12-16 at 2 30 56 PM"
src="https://github.com/user-attachments/assets/db3d1ef1-1e19-4ab7-9cc8-711a470c1cd5"
/>
<img width="412" alt="Screenshot 2024-12-16 at 2 31 01 PM"
src="https://github.com/user-attachments/assets/7434823f-6f21-42de-9418-4bf65ae222fb"
/>
<img width="521" alt="Screenshot 2024-12-16 at 2 31 10 PM"
src="https://github.com/user-attachments/assets/979eed84-26e2-4be2-bc43-ab1d0874d55b"
/>
<img width="529" alt="Screenshot 2024-12-16 at 2 31 14 PM"
src="https://github.com/user-attachments/assets/57562875-1682-454f-9645-755ff43530e2"
/>
<img width="510" alt="Screenshot 2024-12-16 at 2 31 33 PM"
src="https://github.com/user-attachments/assets/5c87a4c2-40f0-4324-8d12-05fc69e34480"
/>
GitOrigin-RevId: 894968016fe280bad5579b4ba7b79fc60dfa6b5d

packages/ui/src/components/Badge.tsx

@@ -10,7 +10,7 @@ import { Icon } from "./Icon/Icon.js";
 import { type IconName } from "./Icon/types.js";
 import { type PartialSimpleTypographyProps } from "./typography/types.js";
 
-type BadgeKind = "danger" | "default";
+export type BadgeKind = "success" | "danger" | "default";
 
 export type BadgeProps = {
   content?: ToReactNodesArgs | undefined;
@@ -41,7 +41,9 @@ export function Badge({
   const defaultTypography = {
     type: typographyProp?.type || "Label Moderate",
     size: typographyProp?.size || "Small",
-    color: typographyProp?.color || (kind === "danger" ? "danger" : "text"),
+    color:
+      typographyProp?.color ||
+      (kind === "danger" ? "danger" : kind === "success" ? "white" : "text"),
   } as const;
 
   const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
@@ -57,7 +59,13 @@ export function Badge({
           name={icon.name}
           width={20}
           color={
-            icon.color ? icon.color : kind === "danger" ? "danger" : undefined
+            icon.color
+              ? icon.color
+              : kind === "danger"
+              ? "danger"
+              : kind === "success"
+              ? "success"
+              : undefined
           }
         />
       ) : null}
@@ -90,6 +98,8 @@ const StyledBadge = styled.div<StyledBadgeProps>`
   background-color: ${({ theme, kind }) => {
     if (kind === "danger") {
       return getColor(theme, "red42a10");
+    } else if (kind === "success") {
+      return getColor(theme, "success");
     } else {
       return getColor(theme, theme.badge.bg);
     }

packages/ui/src/components/PageSection/PageSection.tsx

@@ -14,7 +14,7 @@ import { Heading, headingWithDefaults } from "../../styles/type.js";
 import { type NewRoutesType } from "../../types/index.js";
 import { select } from "../../utils/emotion.js";
 import { toReactNodes } from "../../utils/toReactNodes/toReactNodes.js";
-import { Badge, badgeSmVPadding } from "../Badge.js";
+import { Badge, type BadgeKind, badgeSmVPadding } from "../Badge.js";
 import { Dropdown } from "../Dropdown.js";
 import { Icon } from "../Icon/Icon.js";
 import { type IconName } from "../Icon/types.js";
@@ -192,6 +192,7 @@ type PageSectionBoxActionRowProps = {
   action?: PageSectionBoxActionProps | undefined;
   title?: string;
   titleBadge?: string | undefined;
+  titleBadgeKind?: BadgeKind | undefined;
   description?: string;
   separator?: boolean;
   children?: React.ReactNode;
@@ -201,6 +202,7 @@ type PageSectionBoxActionRowProps = {
 export const PageSectionBoxActionRow = ({
   title,
   titleBadge,
+  titleBadgeKind = "default",
   description,
   separator,
   children,
@@ -217,7 +219,9 @@ export const PageSectionBoxActionRow = ({
           <div>
             <PageSectionBoxTitle>
               {title}
-              {titleBadge ? <Badge content={titleBadge} ml={4} /> : null}
+              {titleBadge ? (
+                <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
+              ) : null}
             </PageSectionBoxTitle>
             {description ? (
               <PageSectionBoxDescription>