From 4fa93cfaf368646db046f78f3ec6a392435af33b Mon Sep 17 00:00:00 2001
From: simoleo89 <11816867+simoleo89@users.noreply.github.com>
Date: Mon, 15 Jun 2026 22:23:16 +0200
Subject: [PATCH] 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              | 17 ----
 src/components/help/views/HelpIndexView.tsx   | 18 ++--
 .../help/views/SanctionStatusView.tsx         | 48 ++++++-----
 src/css/help/HelpView.css                     | 83 +++++++++++++++++++
 src/index.tsx                                 |  2 +
 5 files changed, 122 insertions(+), 46 deletions(-)
 create mode 100644 src/css/help/HelpView.css

diff --git a/src/components/help/HelpView.tsx b/src/components/help/HelpView.tsx
index 01701be..0cfc7a7 100644
--- a/src/components/help/HelpView.tsx
+++ b/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 }>
diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index 36bfe85..eea952b 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/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>
diff --git a/src/components/help/views/SanctionStatusView.tsx b/src/components/help/views/SanctionStatusView.tsx
index 88beb43..a0106a5 100644
--- a/src/components/help/views/SanctionStatusView.tsx
+++ b/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>
     );
diff --git a/src/css/help/HelpView.css b/src/css/help/HelpView.css
new file mode 100644
index 0000000..e05897e
--- /dev/null
+++ b/src/css/help/HelpView.css
@@ -0,0 +1,83 @@
+/* Aiuto (Help) + Sanctions windows — custom hotel restyle.
+   Global (not an inline <style>) so it applies to BOTH the HelpView card and
+   the separate SanctionStatusView card, regardless of which is mounted. */
+
+/* Classic blue header + light-grey body (the shared 'primary-slim' theme is
+   teal + cream). Higher specificity than the theme so it wins. The body element
+   renders `.nitro-card-content-shell`, NOT `.content-area`. */
+.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;
+}
+
+/* Beveled Habbo green button (matches the reference screenshots — the flat
+   Bootstrap 'success' variant did not). Reused by the Help action buttons and
+   the Sanctions "Ho capito" button. */
+.habbo-btn-green {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 34px;
+    padding: 6px 14px;
+    border: 1px solid #4f7a22;
+    border-radius: 6px;
+    background: linear-gradient(180deg, #72b03a 0%, #5a8c2a 100%);
+    color: #ffffff;
+    font-size: 0.82rem;
+    font-weight: 700;
+    line-height: 1.1;
+    text-align: center;
+    cursor: pointer;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.3),
+        inset 0 -2px 0 rgba(0, 0, 0, 0.16);
+    transition: filter 0.15s ease;
+}
+
+.habbo-btn-green:hover { filter: brightness(1.06); }
+.habbo-btn-green:active { filter: brightness(0.95); }
+
+.habbo-btn-green:disabled {
+    background: linear-gradient(180deg, #cfcfcf 0%, #b6b6b6 100%);
+    border-color: #9a9a9a;
+    color: #f0f0f0;
+    cursor: default;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+/* Auto-width variant for footer buttons (e.g. "Ho capito"). */
+.habbo-btn-green--auto {
+    width: auto;
+    min-width: 96px;
+}
+
+/* Green-arrow safety/status links at the bottom of the help windows. */
+.help-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    border: 0;
+    background: transparent;
+    color: #2f2f2f;
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-decoration: underline;
+    text-align: left;
+    cursor: pointer;
+}
+
+.help-link:hover { filter: brightness(1.15); }
+
+.help-link__icon {
+    flex: 0 0 auto;
+    color: #46a01e;
+    font-size: 0.95rem;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 3b7af7d..a9cc7e3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -37,6 +37,8 @@ import './css/friends/FriendsView.css';
 
 import './css/habbo/HabboSwfSkin.css';
 
+import './css/help/HelpView.css';
+
 import './css/hotelview/HotelView.css';
 
 import './css/login/LoginView.css';