App: split LoanScreen into components (#384)

LoanScreen panel components:

- PanelUpdateBorrowPosition
- PanelUpdateLeveragePosition
- PanelUpdateRate
- PanelClosePosition

App UI Components:

- InfoBox
- WarningBox
- InputTokenBadge
- ValueUpdate

frontend/app/src/comps/InfoBox/InfoBox.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import { css } from "@/styled-system/css";
+
+export function InfoBox({
+  children,
+  gap = 16,
+}: {
+  children: ReactNode;
+  gap?: number;
+}) {
+  return (
+    <div
+      className={css({
+        display: "flex",
+        flexDirection: "column",
+        padding: 16,
+        fontSize: 16,
+        background: "infoSurface",
+        border: "1px solid token(colors.infoSurfaceBorder)",
+        borderRadius: 8,
+      })}
+      style={{
+        gap,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

frontend/app/src/comps/InputTokenBadge/InputTokenBadge.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+import { css } from "@/styled-system/css";
+
+export function InputTokenBadge({
+  background = true,
+  icon,
+  label,
+}: {
+  background?: boolean;
+  icon?: ReactNode;
+  label: ReactNode;
+}) {
+  return (
+    <div
+      className={css({
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        height: 40,
+        fontSize: 24,
+        userSelect: "none",
+      })}
+      style={{
+        paddingLeft: icon ? 8 : 16,
+        background: background ? "#FFF" : "transparent",
+        borderRadius: background ? 20 : 0,
+        padding: background ? "0 16px" : 0,
+      }}
+    >
+      {icon}
+      <div>
+        {label}
+      </div>
+    </div>
+  );
+}

frontend/app/src/comps/ValueUpdate/ValueUpdate.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { css } from "@/styled-system/css";
+import { HFlex } from "@liquity2/uikit";
+
+const ARROW_RIGHT = "→";
+
+export function ValueUpdate({
+  after,
+  before,
+  fontSize = 16,
+  tabularNums = true,
+}: {
+  after: ReactNode;
+  before: ReactNode;
+  fontSize?: number;
+  tabularNums?: boolean;
+}) {
+  return (
+    <HFlex
+      gap={8}
+      style={{
+        fontSize,
+        fontVariantNumeric: tabularNums ? "tabular-nums" : "inherit",
+      }}
+    >
+      <div className={css({ color: "contentAlt" })}>{before}</div>
+      <div className={css({ color: "contentAlt" })}>{ARROW_RIGHT}</div>
+      <div>{after}</div>
+    </HFlex>
+  );
+}

frontend/app/src/comps/WarningBox/WarningBox.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+import { css } from "@/styled-system/css";
+
+export function WarningBox({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={css({
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        padding: 16,
+        fontSize: 16,
+        color: "negativeContent",
+        background: "negativeStrong",
+        borderRadius: 8,
+      })}
+    >
+      {children}
+    </div>
+  );
+}