fix(help): Habbo-green buttons + restyle sanctions box

Move the .nitro-help blue-header / grey-body override to global CSS so it also
covers the separate SanctionStatusView card (was an inline <style> in HelpView,
so the sanctions body stayed teal). Replace the flat 'success' buttons with the
beveled Habbo-green button (.habbo-btn-green) matching the reference. Restructure
the sanctions box to a single column: text on top, safety link (left) + green
'Ho capito' (right) pinned to the bottom.
This commit is contained in:
simoleo89
2026-06-15 22:23:16 +02:00
parent 20ad8b705a
commit 4fa93cfaf3
5 changed files with 122 additions and 46 deletions
+9 -9
View File
@@ -2,7 +2,7 @@ import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { FaArrowCircleRight } from 'react-icons/fa';
import { CreateLinkEvent, DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
import { Button, Text } from '../../../common';
import { Text } from '../../../common';
import { GuideToolEvent } from '../../../events';
import { useHelp } from '../../../hooks';
import helpDuck from '../../../assets/images/help/help-duck.png';
@@ -30,20 +30,20 @@ export const HelpIndexView: FC<{}> = props =>
<img src={ helpDuck } alt="" className="h-[105px] w-auto [image-rendering:pixelated]" />
</div>
<div className="flex flex-col gap-1.5">
<Button variant="success" onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
<Button variant="success" disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
<button type="button" className="habbo-btn-green" onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</button>
<button type="button" className="habbo-btn-green" disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</button>
</div>
<div className="flex flex-col gap-1 pt-1">
<button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => CreateLinkEvent('habbopages/help') }>
<FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
<button type="button" className="help-link" onClick={ () => CreateLinkEvent('habbopages/help') }>
<FaArrowCircleRight className="help-link__icon" />
{ LocalizeText('help.main.faq.link.text') }
</button>
<button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>
<FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
<button type="button" className="help-link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>
<FaArrowCircleRight className="help-link__icon" />
{ LocalizeText('help.main.my.sanction.status') }
</button>
<button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(true)) }>
<FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
<button type="button" className="help-link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(true)) }>
<FaArrowCircleRight className="help-link__icon" />
{ LocalizeText('help.main.my.reports.status') }
</button>
</div>