Skip to content

refactor: ♻️ FE Tweaks #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timbrinded merged 1 commit into from
Feb 18, 2026
Merged

refactor: ♻️ FE Tweaks #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion fe/app/components/ui/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ export type RootProps = ComponentProps<typeof Root>;
export const Root = withProvider(ark.div, "root");
export const Header = withContext(ark.div, "header");
export const Body = withContext(ark.div, "body");
export const Footer = withContext(ark.h3, "footer");
export const Footer = withContext(ark.div, "footer");
export const Title = withContext(ark.h3, "title");
export const Description = withContext(ark.div, "description");
40 changes: 33 additions & 7 deletions fe/app/routes/examples/compliant-token.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export default function CompliantToken() {
display: "flex",
flexDirection: { base: "column", md: "row" },
justifyContent: "space-between",
alignItems: { base: "flex-start", md: "flex-end" },
alignItems: { base: "flex-start", md: "flex-start" },
gap: "4",
})}
>
Expand Down Expand Up @@ -312,7 +312,7 @@ export default function CompliantToken() {
<Card.Body
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", lg: "1fr 1fr 1fr" },
gridTemplateColumns: { base: "1fr", md: "1fr 1fr", lg: "1fr 1fr 1fr" },
gap: "4",
alignItems: "stretch",
})}
Expand Down Expand Up @@ -623,9 +623,35 @@ export default function CompliantToken() {

{!isConnected && (
<Card.Root variant="outline">
<Card.Body className={css({ py: "8", textAlign: "center" })}>
<Text className={css({ color: "fg.muted" })}>
Connect your wallet to continue
<Card.Body
className={css({
py: "12",
textAlign: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "3",
})}
>
<ShieldCheck
className={css({
width: "8",
height: "8",
color: "teal.8",
})}
/>
<Text
className={css({
color: "fg.muted",
fontWeight: "medium",
fontSize: "lg",
})}
>
Connect your wallet to get started
</Text>
<Text className={css({ color: "fg.subtle", fontSize: "sm" })}>
Connect a wallet on Sepolia testnet to mint compliant tokens and
view the allowlist
</Text>
</Card.Body>
</Card.Root>
Expand Down Expand Up @@ -1230,7 +1256,7 @@ function StepCard({
section({ hoverable: true }),
css({
alignItems: "center",
textAlign: "center",
textAlign: "left",
overflow: "hidden",
height: "100%",
}),
Expand Down Expand Up @@ -1264,7 +1290,7 @@ function StepCard({
>
{title}
</Text>
<Text className={css({ fontSize: "xs", color: "fg.subtle" })}>
<Text className={css({ fontSize: "sm", color: "fg.muted" })}>
{description}
</Text>
</div>
Expand Down
35 changes: 28 additions & 7 deletions fe/app/routes/examples/cross-chain-relayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ export default function CrossChainRelayer() {
display: "flex",
flexDirection: { base: "column", md: "row" },
justifyContent: "space-between",
alignItems: { base: "flex-start", md: "flex-end" },
alignItems: { base: "flex-start", md: "flex-start" },
gap: "4",
})}
>
Expand Down Expand Up @@ -451,7 +451,7 @@ export default function CrossChainRelayer() {
<Card.Body
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", lg: "1fr 1fr 1fr" },
gridTemplateColumns: { base: "1fr", md: "1fr 1fr", lg: "1fr 1fr 1fr" },
gap: "4",
})}
>
Expand Down Expand Up @@ -1109,17 +1109,38 @@ export default function CrossChainRelayer() {
{!isConnected && (
<div
className={css({
textAlign: "center",
p: "8",
textAlign: "left",
py: "12",
px: "8",
bg: "gray.subtle.bg",
borderRadius: "lg",
border: "1px dashed",
borderColor: "border",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "3",
})}
>
<Text className={css({ color: "fg.muted" })}>
<ArrowLeftRight
className={css({
width: "8",
height: "8",
color: "fg.subtle",
})}
/>
<Text
className={css({
color: "fg.muted",
fontWeight: "medium",
fontSize: "lg",
})}
>
Connect your wallet to start transferring USDC cross-chain
</Text>
<Text className={css({ color: "fg.subtle", fontSize: "sm" })}>
Use the Connect Wallet button above to get started
</Text>
</div>
)}
</div>
Expand All @@ -1143,7 +1164,7 @@ function StepCard({
section({ hoverable: true }),
css({
alignItems: "center",
textAlign: "center",
textAlign: "left",
overflow: "hidden",
}),
)}
Expand Down Expand Up @@ -1176,7 +1197,7 @@ function StepCard({
>
{title}
</Text>
<Text className={css({ fontSize: "xs", color: "fg.subtle" })}>
<Text className={css({ fontSize: "sm", color: "fg.muted" })}>
{description}
</Text>
</div>
Expand Down
38 changes: 7 additions & 31 deletions fe/app/routes/examples/risk-portfolio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export default function RiskPortfolio() {
display: "flex",
flexDirection: { base: "column", md: "row" },
justifyContent: "space-between",
alignItems: { base: "flex-start", md: "flex-end" },
alignItems: { base: "flex-start", md: "flex-start" },
gap: "4",
})}
>
Expand Down Expand Up @@ -227,7 +227,7 @@ export default function RiskPortfolio() {
<Card.Body
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", lg: "1fr 1fr 1fr" },
gridTemplateColumns: { base: "1fr", md: "1fr 1fr", lg: "1fr 1fr 1fr" },
gap: "4",
})}
>
Expand Down Expand Up @@ -353,7 +353,7 @@ export default function RiskPortfolio() {
<div
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", md: "repeat(4, 1fr)" },
gridTemplateColumns: { base: "1fr 1fr", lg: "repeat(4, 1fr)" },
gap: "4",
})}
>
Expand Down Expand Up @@ -541,38 +541,14 @@ export default function RiskPortfolio() {
gap: "6",
})}
>
<div
className={css({
p: "4",
borderRadius: "lg",
bg: "gray.subtle.bg",
border: "1px solid",
borderColor: "border",
})}
>
<div className={section()}>
<VolatilityBarChart volBps={normalized.volBps} />
</div>
<div
className={css({
p: "4",
borderRadius: "lg",
bg: "gray.subtle.bg",
border: "1px solid",
borderColor: "border",
})}
>
<div className={section()}>
<RiskContributionChart cov={cov} portfolios={portfolios} />
</div>
</div>
<div
className={css({
p: "4",
borderRadius: "lg",
bg: "gray.subtle.bg",
border: "1px solid",
borderColor: "border",
})}
>
<div className={section()}>
Copy link

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line has incorrect indentation. It should be indented with one more tab to align with the sibling <div> elements on lines 544 and 547.

Suggested change
<div className={section()}>
<div className={section()}>

Copilot uses AI. Check for mistakes.
<CorrelationHeatmap corrBps={normalized.corrBps} />
</div>
</div>
Expand Down Expand Up @@ -659,7 +635,7 @@ function MathBox({
})}
dangerouslySetInnerHTML={{ __html: html }}
/>
<Text className={css({ fontSize: "xs", color: "fg.subtle" })}>
<Text className={css({ fontSize: "xs", color: "fg.muted" })}>
{description}
</Text>
</div>
Expand Down
37 changes: 31 additions & 6 deletions fe/app/routes/examples/token-airdrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ export default function TokenAirdrop() {
display: "flex",
flexDirection: { base: "column", md: "row" },
justifyContent: "space-between",
alignItems: { base: "flex-start", md: "flex-end" },
alignItems: { base: "flex-start", md: "flex-start" },
gap: "4",
})}
>
Expand Down Expand Up @@ -412,7 +412,7 @@ export default function TokenAirdrop() {
<Card.Body
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", lg: "1fr 1fr 1fr" },
gridTemplateColumns: { base: "1fr", md: "1fr 1fr", lg: "1fr 1fr 1fr" },
gap: "4",
alignItems: "stretch",
})}
Expand Down Expand Up @@ -682,10 +682,35 @@ export default function TokenAirdrop() {

{!isConnected && (
<Card.Root variant="outline">
<Card.Body className={css({ py: "8", textAlign: "center" })}>
<Text className={css({ color: "fg.muted" })}>
<Card.Body
className={css({
py: "12",
textAlign: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "3",
})}
>
<Gift
className={css({
width: "8",
height: "8",
color: "teal.8",
})}
/>
<Text
className={css({
color: "fg.muted",
fontWeight: "medium",
fontSize: "lg",
})}
>
Connect your wallet to check your airdrop status
</Text>
<Text className={css({ color: "fg.subtle", fontSize: "sm" })}>
Use the Connect Wallet button above to get started
</Text>
</Card.Body>
</Card.Root>
)}
Expand Down Expand Up @@ -1246,7 +1271,7 @@ function StepCard({
section({ hoverable: true }),
css({
alignItems: "center",
textAlign: "center",
textAlign: "left",
overflow: "hidden",
height: "100%",
}),
Expand Down Expand Up @@ -1280,7 +1305,7 @@ function StepCard({
>
{title}
</Text>
<Text className={css({ fontSize: "xs", color: "fg.subtle" })}>
<Text className={css({ fontSize: "sm", color: "fg.muted" })}>
{description}
</Text>
</div>
Expand Down
Loading