From 20ad8b705adacd21336f870cd97fb93b9f836121 Mon Sep 17 00:00:00 2001 From: simoleo89 <11816867+simoleo89@users.noreply.github.com> Date: Mon, 15 Jun 2026 22:16:39 +0200 Subject: [PATCH] feat(help): restyle Aiuto window to match Habbo reference Centered single-column index (blue header + light grey body), the real help_duck asset, two green buttons (report + player support), and three green-arrow links: read more about safety, my sanctions, my reports. The report-flow steps keep the original 2-column grid. --- src/assets/images/help/help-duck.png | Bin 0 -> 4808 bytes src/components/help/HelpView.tsx | 37 +++++++++++++++----- src/components/help/views/HelpIndexView.tsx | 32 ++++++++++++----- 3 files changed, 52 insertions(+), 17 deletions(-) create mode 100644 src/assets/images/help/help-duck.png diff --git a/src/assets/images/help/help-duck.png b/src/assets/images/help/help-duck.png new file mode 100644 index 0000000000000000000000000000000000000000..855a48e413dd031fc362b712c099784285022825 GIT binary patch literal 4808 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 = props => { const [ isVisible, setIsVisible ] = useState(false); @@ -96,17 +112,20 @@ export const HelpView: FC<{}> = props => return ( <> { isVisible && - + - - -
- - - - - + + { activeReport + ? + +
+ + + + + + : } } diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx index ceaa1ad..36bfe85 100644 --- a/src/components/help/views/HelpIndexView.tsx +++ b/src/components/help/views/HelpIndexView.tsx @@ -1,9 +1,11 @@ import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer'; import { FC } from 'react'; -import { DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api'; +import { FaArrowCircleRight } from 'react-icons/fa'; +import { CreateLinkEvent, DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api'; import { Button, Text } from '../../../common'; import { GuideToolEvent } from '../../../events'; import { useHelp } from '../../../hooks'; +import helpDuck from '../../../assets/images/help/help-duck.png'; export const HelpIndexView: FC<{}> = props => { @@ -21,16 +23,30 @@ export const HelpIndexView: FC<{}> = props => }; return ( - <> -
- { LocalizeText('help.main.frame.title') } - { LocalizeText('help.main.self.description') } +
+ { LocalizeText('help.main.frame.title') } + { LocalizeText('help.main.frame.description') } +
+
-
+
- - +
+ + + +
+
); };