Skip to content

feat: implement modernistic theme#415

Draft
subhod-i wants to merge 2 commits intodevelopfrom
feat/flag-ux-theme
Draft

feat: implement modernistic theme#415
subhod-i wants to merge 2 commits intodevelopfrom
feat/flag-ux-theme

Conversation

@subhod-i
Copy link
Contributor

@subhod-i subhod-i commented Jan 9, 2026

Note

Modernizes the app with a new design system and layout, plus onboarding and social UX enhancements.

  • Introduces ThemeContext and section-aware theming via AppLayout (with LeftSidebar, TopBar, Breadcrumbs) and Swiss Minimal styles; adds ThemeSwitcher and AeButton --swiss variant
  • Replaces old header/content wrappers in App.tsx with new layout; adds CreateHashtagFab; removes AppHeader and FeedbackButton
  • Adds onboarding flow (OnboardingProvider, OnboardingTour) and floating SocialFeedPanel
  • Reworks ConnectWalletButton to minimalist button; updates DEX UI (SwapForm, TokenSelector, RecentActivity, PoolHeader) to light/gray styles and section gradients
  • Adds landing components: HeroSection, FeaturedTopics/HotHashtagsPodium, EnhancedTokenList, AiAssistantBar, AnimatedCounter, LiveActivityTicker
  • Tweaks trending components (TrendminerBanner, GlobalStatsAnalytics, TokenLineChart color props) and social SortControls; refines RightRail styling
  • Adds public/sitemap.xml for basic SEO coverage

Written by Cursor Bugbot for commit 4255d4a. This will update automatically on new commits. Configure here.

@netlify
Copy link

netlify bot commented Jan 9, 2026

Deploy Preview for fancy-gelato-7cdad5 ready!

Name Link
🔨 Latest commit 4255d4a
🔍 Latest deploy log https://app.netlify.com/projects/fancy-gelato-7cdad5/deploys/696147d50b7c810008097fcd
😎 Deploy Preview https://deploy-preview-415--fancy-gelato-7cdad5.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

return () => clearInterval(interval);
}, delay);

return () => clearTimeout(timer);
Copy link

Choose a reason for hiding this comment

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

Interval cleanup inside setTimeout causes memory leak

Medium Severity

The OdometerDigit component has a cleanup logic issue. The return () => clearInterval(interval) on line 191 is placed inside the setTimeout callback, so it becomes the return value of that arrow function rather than the useEffect cleanup function. If the component unmounts while the interval is running, the interval will continue executing, causing a memory leak and React "setState on unmounted component" errors. The cleanup should be restructured to properly track and clear the interval in the useEffect cleanup.

Fix in Cursor Fix in Web

const x = (index / (data.length - 1)) * width;
const y = height - ((value - min) / range) * height;
return `${x},${y}`;
}).join(' ');
Copy link

Choose a reason for hiding this comment

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

Sparkline division by zero with single data point

Low Severity

The Sparkline component computes x coordinates using (index / (data.length - 1)) * width. When data has exactly one element, data.length - 1 equals zero, causing division by zero and producing NaN values for SVG coordinates. The check if (!data.length) return null only handles empty arrays, not single-element arrays.

Fix in Cursor Fix in Web

{item.value}
{item.fiat && (
<div className="text-xs font-normal opacity-70 mt-1">
<div className="text-xs font-normal text-gray-500 mt-1">
Copy link

Choose a reason for hiding this comment

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

GlobalStatsAnalytics ignores theme, unreadable in dark mode

Medium Severity

The GlobalStatsAnalytics component uses hardcoded light-mode Tailwind classes (text-gray-900, text-gray-500) without checking the theme context via useTheme(). When rendered in dark mode (inside TrendminerBanner which uses a dark gradient background), the dark gray text will have very poor contrast and be difficult to read. Other new components in this PR properly use isDark from the theme context to conditionally apply colors.

Fix in Cursor Fix in Web

title: "💬 Social",
description: "Connect with the community! Post updates, share insights, and tip creators directly on-chain. All your social interactions are permanently stored on the æternity blockchain.",
position: "right",
},
Copy link

Choose a reason for hiding this comment

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

Onboarding tour references non-existent navigation element

Medium Severity

The onboarding tour defines a step with targetId: "nav-social" but no corresponding navigation item exists in LeftSidebar. The navItems array only contains "home", "hashtags", and "defi" - there's no "social" entry that would create an element with id="nav-social". When users reach this step, the tour will fail to highlight any element and the tooltip will remain at its previous position, creating a confusing and broken onboarding experience.

Additional Locations (1)

Fix in Cursor Fix in Web

@subhod-i subhod-i force-pushed the feat/flag-ux-theme branch from df2952b to 64dc305 Compare January 9, 2026 17:10
color: textPrimary,
letterSpacing: '-0.02em',
}}
/>
Copy link

Choose a reason for hiding this comment

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

AnimatedCounter ignores style prop passed from parent

High Severity

The AnimatedCounter component is called with a style prop containing critical styling like color: textPrimary, fontFamily, and fontWeight, but the AnimatedCounterProps interface only accepts value, prefix, suffix, duration, decimals, and className. The component ignores the style prop entirely (using its own hardcoded style), so theme-aware text colors won't be applied, causing the counter text to not match the rest of the UI in both light and dark modes.

Additional Locations (1)

Fix in Cursor Fix in Web

background: isDark
? `linear-gradient(90deg, ${colors.primary}15, ${colors.primaryDark}15)`
: `linear-gradient(90deg, ${colors.primary}15, ${colors.primaryDark}15)`
}}
Copy link

Choose a reason for hiding this comment

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

Ternary has identical branches making condition useless

Low Severity

The ternary expression isDark ? ... : ... has identical gradient values for both the true and false branches, making the conditional check pointless. Both branches produce the same background gradient. This appears to be an incomplete implementation where different colors should have been specified for light vs dark mode.

Fix in Cursor Fix in Web

if (item.id === "home") return location.pathname === "/";
if (item.id === "hashtags") return location.pathname.startsWith("/trends") || location.pathname === "/";
return location.pathname.startsWith(item.path);
};
Copy link

Choose a reason for hiding this comment

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

Both home and hashtags marked active on home page

Medium Severity

The isParentActive function returns true for "hashtags" when location.pathname === "/" (home page). Since line 118 also returns true for "home" on the same path, both navigation items will be visually highlighted as active simultaneously when the user is on the home page. This creates a confusing UI where two sidebar items appear selected at once.

Fix in Cursor Fix in Web

@subhod-i subhod-i force-pushed the feat/flag-ux-theme branch from 64dc305 to b4c3325 Compare January 9, 2026 18:09
duration?: number;
decimals?: number;
className?: string;
}
Copy link

Choose a reason for hiding this comment

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

AnimatedCounter ignores style prop passed from HeroSection

Medium Severity

The AnimatedCounterProps interface doesn't include a style prop, but HeroSection passes style objects to AnimatedCounter at multiple locations (for Active, Volume, Total Value, and Traders stats). The component destructures only the defined props and applies a hardcoded style={{ fontVariantNumeric: 'tabular-nums' }} to the rendered element. This means the intended styling for fontFamily, fontWeight, color, and letterSpacing in the Swiss minimal design will not be applied to the stat counters.

Additional Locations (1)

Fix in Cursor Fix in Web

@subhod-i subhod-i force-pushed the feat/flag-ux-theme branch from b4c3325 to 4255d4a Compare January 9, 2026 18:24
onClick={handleTokenSwap}
disabled={swapLoading || !tokenIn || !tokenOut}
className="w-12 h-12 rounded-full border border-white/10 bg-white/[0.08] backdrop-blur-[10px] text-white cursor-pointer flex items-center justify-center text-xl font-semibold transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] shadow-[0_4px_12px_rgba(0,0,0,0.25)] z-[2] relative hover:bg-white/[0.12] hover:-translate-y-0.5 hover:rotate-180 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:rotate-0"
className="w-12 h-12 rounded-full border border-gray-200 bg-white text-gray-700 cursor-pointer flex items-center justify-center text-xl font-semibold transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] shadow-md z-[2] relative hover:bg-gray-50 hover:-translate-y-0.5 hover:rotate-180 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:rotate-0"
Copy link

Choose a reason for hiding this comment

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

DeFi SwapForm uses hardcoded light-only colors

Medium Severity

The SwapForm component changed from dark-mode-compatible colors (like bg-white/[0.02], border-white/10) to hardcoded light mode colors (bg-white, border-gray-200, text-gray-700). The DeFi section has dark mode defined in AppLayout, but these components will have white backgrounds and gray text that become nearly invisible or look broken in dark mode. The same issue affects RecentActivity with hardcoded bg-white, text-gray-900, and bg-gray-50 classes.

Additional Locations (1)

Fix in Cursor Fix in Web

@subhod-i subhod-i marked this pull request as draft January 12, 2026 10:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant