fix: unify connection page design with global styles and add platform SVG icons

- Add svgIconKey to RemnawavePlatform and RemnawavePlatformData types
- Render platform OS icons from svgLibrary in AdminApps tabs and Connection page
- Replace platform dropdown with icon pill buttons on connection page
- Use .card class with colored left border for block cards
- Unify all back buttons with AdminBackButton pattern (border + bg)
- Fix app chips and platform tabs to not blend with background (btn-secondary style)
- Use accent outlined style for block action buttons matching original RemnaWave UI
- Use btn-secondary for tutorial button
This commit is contained in:
c0mrade
2026-02-05 13:21:32 +03:00
parent 91afbbf3c6
commit 4866003c23
4 changed files with 88 additions and 59 deletions

View File

@@ -440,19 +440,23 @@ export default function AdminApps() {
{/* Platform Tabs */}
<div className="flex flex-wrap gap-2">
{PLATFORMS.map((platform) => (
<button
key={platform}
onClick={() => setSelectedPlatform(platform)}
className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
selectedPlatform === platform
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700'
}`}
>
{PLATFORM_LABELS[platform]}
</button>
))}
{PLATFORMS.map((platform) => {
const platformSvgKey = remnaWaveConfig?.platforms?.[platform]?.svgIconKey;
return (
<button
key={platform}
onClick={() => setSelectedPlatform(platform)}
className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
selectedPlatform === platform
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700'
}`}
>
{renderSvgIcon(svgLibrary, platformSvgKey)}
{PLATFORM_LABELS[platform]}
</button>
);
})}
</div>
{/* Apps List */}