duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(help): restyle Aiuto window to match Habbo reference

Browse Source 
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.
This commit is contained in:
simoleo89
2026-06-15 22:16:39 +02:00
parent d15457b43c
commit 20ad8b705a
3 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/help/help-duck.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

src/components/help/HelpView.tsx
+28 -9
View File
@@ -12,6 +12,22 @@ import { SelectReportedUserView } from './views/SelectReportedUserView';
import { SelectTopicView } from './views/SelectTopicView'; import { SelectTopicView } from './views/SelectTopicView';
import { NameChangeView } from './views/name-change/NameChangeView'; 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 => export const HelpView: FC<{}> = props =>
{ {
const [ isVisible, setIsVisible ] = useState(false); const [ isVisible, setIsVisible ] = useState(false);
@@ -96,17 +112,20 @@ export const HelpView: FC<{}> = props =>
return ( return (
<> <>
{ isVisible && { isVisible &&
<NitroCardView className="nitro-help" theme="primary-slim"> <NitroCardView className={ `nitro-help${ activeReport ? '' : ' w-[420px]' }` } theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black">
<Grid> <style>{ HELP_STYLES }</style>
<Column center overflow="hidden" size={ 5 }> { activeReport
<div className="index-image" /> ? <Grid>
</Column> <Column center overflow="hidden" size={ 5 }>
<Column justifyContent="between" overflow="hidden" size={ 7 }> <div className="index-image" />
<CurrentStepView /> </Column>
</Column> <Column justifyContent="between" overflow="hidden" size={ 7 }>
</Grid> <CurrentStepView />
</Column>
</Grid>
: <CurrentStepView /> }
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> } </NitroCardView> }
<SanctionSatusView /> <SanctionSatusView />
src/components/help/views/HelpIndexView.tsx
+24 -8
View File
@@ -1,9 +1,11 @@
import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer'; import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
import { FC } from 'react'; 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 { Button, Text } from '../../../common';
import { GuideToolEvent } from '../../../events'; import { GuideToolEvent } from '../../../events';
import { useHelp } from '../../../hooks'; import { useHelp } from '../../../hooks';
import helpDuck from '../../../assets/images/help/help-duck.png';
export const HelpIndexView: FC<{}> = props => export const HelpIndexView: FC<{}> = props =>
{ {
@@ -21,16 +23,30 @@ export const HelpIndexView: FC<{}> = props =>
}; };
return ( return (
<> <div className="flex flex-col gap-2 py-1">
<div className="flex flex-col justify-center alignp-items-enter grow! gap-1"> <Text bold fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
<Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text> <Text center className="text-[#5c5c5c]">{ LocalizeText('help.main.frame.description') }</Text>
<Text>{ LocalizeText('help.main.self.description') }</Text> <div className="flex justify-center py-1">
<img src={ helpDuck } alt="" className="h-[105px] w-auto [image-rendering:pixelated]" />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1.5">
<Button variant="success" onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button> <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 variant="success" disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
</div> </div>
<Button textColor="black" variant="link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>{ LocalizeText('help.main.my.sanction.status') }</Button> <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]" />
{ 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]" />
{ 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]" />
{ LocalizeText('help.main.my.reports.status') }
</button>
</div>
</div>
); );
}; };