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.

src/components/help/HelpView.tsx

@@ -12,22 +12,6 @@ import { SelectReportedUserView } from './views/SelectReportedUserView';
 import { SelectTopicView } from './views/SelectTopicView';
 import { NameChangeView } from './views/name-change/NameChangeView';
 
-// Scoped colour override for the Aiuto window: classic blue header + light grey
-// body (the shared 'primary-slim' theme is teal + cream). Higher specificity
-// (.nitro-card.nitro-help ...) than the theme so it wins. The body element
-// renders `.nitro-card-content-shell`, NOT `.content-area`.
-const HELP_STYLES = `
-  .nitro-card.nitro-help .nitro-card-header {
-    background: linear-gradient(180deg, #5a80b8 0%, #3f63a0 100%);
-    border-color: #34548a;
-  }
-  .nitro-card.nitro-help,
-  .nitro-card.nitro-help .content-area,
-  .nitro-card.nitro-help .nitro-card-content-shell {
-    background: #ebebe3 !important;
-  }
-`;
-
 export const HelpView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
@@ -115,7 +99,6 @@ export const HelpView: FC<{}> = props =>
                 <NitroCardView className={ `nitro-help${ activeReport ? '' : ' w-[420px]' }` } theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
                     <NitroCardContentView className="text-black">
-                        <style>{ HELP_STYLES }</style>
                         { activeReport
                             ? <Grid>
                                 <Column center overflow="hidden" size={ 5 }>

src/components/help/views/HelpIndexView.tsx

@@ -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>

src/components/help/views/SanctionStatusView.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../api';
-import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
+import { FaArrowCircleRight } from 'react-icons/fa';
+import { CreateLinkEvent, LocalizeText } from '../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { useHelp } from '../../../hooks';
 
 export const SanctionSatusView: FC<{}> = props =>
@@ -37,38 +38,45 @@ export const SanctionSatusView: FC<{}> = props =>
     if(!sanctionInfo) return null;
 
     return (
-        <NitroCardView className="nitro-help" theme="primary-slim">
+        <NitroCardView className="nitro-help w-[420px]" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('help.sanction.info.title') } onCloseClick={ () => setSanctionInfo(null) } />
             <NitroCardContentView className="text-black">
-                <Grid>
-                    <Column center overflow="hidden" size={ 5 }>
-                        <div className="index-image" />
-                    </Column>
-                    <Column justifyContent="between" overflow="hidden" size={ 7 }>
+                <div className="flex min-h-[170px] flex-col">
+                    <div className="flex flex-col gap-1">
                         { (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY')
-                            ? <div className="col-span-12 font-bold	">{ LocalizeText('help.sanction.current.none') }</div>
+                            ? <div className="font-bold">{ LocalizeText('help.sanction.current.none') }</div>
                             : <>
                                 { ((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
-                                    <div className="col-span-12 font-bold	">{ LocalizeText('help.sanction.probation.reminder') }</div>
+                                    <div className="font-bold">{ LocalizeText('help.sanction.probation.reminder') }</div>
                                 }
-                                <div className={ `col-span-12 font-bold	 ${ sanctionInfo.isSanctionNew ? 'text-danger' : '' }` }>
+                                <div className={ `font-bold ${ sanctionInfo.isSanctionNew ? 'text-danger' : '' }` }>
                                     { LocalizeText('help.sanction.last.sanction') } { sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours) }
                                 </div>
-                                <div className="col-span-12">{ LocalizeText('generic.start.time') } { sanctionInfo.sanctionCreationTime }</div>
-                                <div className="col-span-12">{ LocalizeText('generic.reason') } { sanctionInfo.sanctionReason }</div>
-                                <div className="col-span-12">{ LocalizeText('help.sanction.probation.days.left') } { Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1 }</div>
+                                <div>{ LocalizeText('generic.start.time') } { sanctionInfo.sanctionCreationTime }</div>
+                                <div>{ LocalizeText('generic.reason') } { sanctionInfo.sanctionReason }</div>
+                                <div>{ LocalizeText('help.sanction.probation.days.left') } { Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1 }</div>
                             </>
                         }
                         { ((sanctionInfo.hasCustomMute) && (!(sanctionInfo.isSanctionActive))) &&
-                            <div className="col-span-12 font-bold	">{ LocalizeText('help.sanction.custom.mute') }</div>
+                            <div className="font-bold">{ LocalizeText('help.sanction.custom.mute') }</div>
                         }
                         { (sanctionInfo.tradeLockExpiryTime && sanctionInfo.tradeLockExpiryTime.length > 0) &&
-                            <div className="col-span-12 font-bold	">{ LocalizeText('trade.locked.until') } { sanctionInfo.tradeLockExpiryTime }</div>
+                            <div className="font-bold">{ LocalizeText('trade.locked.until') } { sanctionInfo.tradeLockExpiryTime }</div>
                         }
-                        <div className="col-span-12">{ sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours) }</div>
-                        <Button variant="success" onClick={ event => setSanctionInfo(null) }>{ LocalizeText('habbo.way.ok.button') }</Button>
-                    </Column>
-                </Grid>
+                        { (sanctionInfo.sanctionReason !== 'cfh.reason.EMPTY') &&
+                            <div>{ sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours) }</div>
+                        }
+                    </div>
+                    <div className="mt-auto flex items-end justify-between gap-3 pt-3">
+                        <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="habbo-btn-green habbo-btn-green--auto" onClick={ () => setSanctionInfo(null) }>
+                            { LocalizeText('habbo.way.ok.button') }
+                        </button>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );