Clean up login card layout and connect button styling

Remove inner card backgrounds from feature items, replace emojis with
subtle diamond markers, tighten spacing and padding, narrow card width,
and switch connect wallet button to outline variant so it blends with
the card instead of clashing with a dark primary background.

Author: ponderingdemocritus

apps/account-portal/src/components/layout/login-card.tsx

@@ -10,45 +10,35 @@ import { StarknetWalletButton } from "./starknet-wallet-button";
 
 export function LoginCard() {
   return (
-    <Card className="mx-auto mt-12 w-full max-w-lg">
-      <CardHeader>
-        <p className="realm-eyebrow text-center">Enter The Realm</p>
-        <CardTitle className="text-center text-2xl">
-          Welcome to Realms Portal
-        </CardTitle>
-        <CardDescription className="text-center">
+    <Card className="mx-auto mt-12 w-full max-w-md">
+      <CardHeader className="pb-2 text-center">
+        <p className="realm-eyebrow">Enter The Realm</p>
+        <CardTitle className="text-2xl">Welcome to Realms Portal</CardTitle>
+        <CardDescription>
           Connect your wallet to access the Realms ecosystem
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Feature list */}
-        <div className="space-y-4">
+      <CardContent className="space-y-5">
+        <div className="space-y-3">
           <FeatureItem
             title="Bridge Assets"
-            description="Transfer your assets seamlessly between Ethereum and StarkNet"
-            icon="🌉"
+            description="Transfer assets between Ethereum and StarkNet"
           />
           <FeatureItem
             title="LORDS Claiming"
             description="Claim and manage your LORDS tokens"
-            icon="👑"
           />
           <FeatureItem
             title="veLORDS Staking"
-            description="Stake your LORDS to earn rewards and voting power"
-            icon="⚡"
+            description="Stake LORDS to earn rewards and voting power"
           />
           <FeatureItem
             title="Governance"
             description="Participate in shaping the future of Realms"
-            icon="🏛️"
           />
         </div>
 
-        {/* Connect wallet button */}
-        <div className="w-full pt-4">
-          <StarknetWalletButton className="w-full" variant="reference" />
-        </div>
+        <StarknetWalletButton className="w-full" variant="reference" />
       </CardContent>
     </Card>
   );
@@ -57,20 +47,18 @@ export function LoginCard() {
 function FeatureItem({
   title,
   description,
-  icon,
 }: {
   title: string;
   description: string;
-  icon: string;
 }) {
   return (
-    <div className="realm-subtle-panel flex items-start gap-3 rounded-2xl p-4">
-      <div className="text-2xl">{icon}</div>
+    <div className="flex items-baseline gap-2 px-1">
+      <span className="text-primary text-xs">&#x25C6;</span>
       <div>
         <h3 className="font-display text-sm font-semibold tracking-[var(--tracking-card)] uppercase">
           {title}
         </h3>
-        <p className="text-muted-foreground text-sm">{description}</p>
+        <p className="text-muted-foreground text-xs">{description}</p>
       </div>
     </div>
   );

apps/account-portal/src/components/layout/starknet-wallet-button.tsx

@@ -40,7 +40,7 @@ export const StarknetWalletButton = ({
   const isReferenceVariant = variant === "reference";
   const resolvedPickerMode = pickerMode ?? (variant === "reference" ? "sheet" : "dropdown");
   const pickerTriggerClassName = isReferenceVariant
-    ? "inline-flex h-9 w-9 items-center justify-center rounded-lg bg-background/40 text-foreground transition hover:bg-accent"
+    ? "inline-flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-accent hover:text-foreground"
     : "inline-flex h-7 w-7 items-center justify-center rounded-md text-primary-foreground/80 transition hover:bg-primary-foreground/10";
 
   const connectPrimary = () => {
@@ -108,7 +108,8 @@ export const StarknetWalletButton = ({
       <div className={cn("relative w-full", className)}>
         <Button
           onClick={connectPrimary}
-          className="h-14 w-full justify-start rounded-2xl border px-3 pr-16 shadow-sm"
+          variant="outline"
+          className="h-14 w-full justify-start rounded-2xl px-3 pr-16 shadow-sm"
         >
           <span className="mr-3 inline-flex h-6 w-6 items-center justify-center rounded-md bg-muted">
             {lastConnector ? (
@@ -118,10 +119,10 @@ export const StarknetWalletButton = ({
             )}
           </span>
           <span className="flex flex-col items-start leading-tight">
-            <span className="text-base font-semibold">
+            <span className="text-foreground text-base font-semibold">
               {label ?? "Connect wallet"}
             </span>
-            <span className="text-xs text-muted-foreground">
+            <span className="text-muted-foreground text-xs">
               {lastConnector
                 ? `Previously used ${lastConnector.name}`
                 : "Choose a Starknet wallet"}