Add home navigation button and improve account page UI
Enhances the account page navigation by adding a "Back to home" button and improving the overall user experience with better visual hierarchy and navigation flow. Changes: - Add home navigation button to account page with green icon - Update logout button styling with red icon for visual emphasis - Improve settings button label clarity - Fix settings cancel button to navigate back to account page - Increase account icon size in page header - Update translation keys for consistency across EN/HR 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -15,6 +15,6 @@ export const LogoutButton: FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Button className='btn' onClick={handleLogout}><LogoutIcon /> {t('logout-button')}</Button>
|
||||
<button className='btn btn-neutral' onClick={handleLogout}><LogoutIcon className='text-red-400' /> {t('logout-button-label')}</button>
|
||||
)
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { FC } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import Link from 'next/link';
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import AccountCircle from "@mui/icons-material/AccountCircle";
|
||||
import { getTranslations, getLocale } from 'next-intl/server';
|
||||
import { LogoutButton } from './LogoutButton';
|
||||
@@ -16,7 +17,8 @@ const Page: FC = async () => {
|
||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title"><AccountCircle /> {t('title')}</h2>
|
||||
<Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
|
||||
<Link href={`/${locale}/home`} className='btn btn-neutral'><HomeIcon className='text-green-300' /> {t('goto-home-button-label')}</Link>
|
||||
<Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon className='text-blue-400' /> {t('goto-settings-button-label')}</Link>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@ export const PageHeader = () => {
|
||||
<SelectLanguage />
|
||||
{isRestrictedPage && (
|
||||
<Link href={`/${locale}/home/account/`} className="btn btn-ghost btn-circle">
|
||||
<AccountCircle />
|
||||
<AccountCircle fontSize="large" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -356,7 +356,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
|
||||
t("save-button")
|
||||
)}
|
||||
</button>
|
||||
<Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}/home`}>
|
||||
<Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}/home/account`}>
|
||||
{t("cancel-button")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
},
|
||||
"account-page": {
|
||||
"title": "User account",
|
||||
"settings-button": "User Settings",
|
||||
"logout-button": "Logout"
|
||||
"goto-home-button-label": "Back to home",
|
||||
"goto-settings-button-label": "User Settings",
|
||||
"logout-button-label": "Logout"
|
||||
},
|
||||
"PageFooter": {
|
||||
"app-description": "Helping you to stay on top of your utility bills",
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
},
|
||||
"account-page": {
|
||||
"title": "Korisnički račun",
|
||||
"settings-button": "Korisničke postavke",
|
||||
"logout-button": "Odjava"
|
||||
"goto-home-button-label": "Povratak na početnu",
|
||||
"goto-settings-button-label": "Korisničke postavke",
|
||||
"logout-button-label": "Odjava"
|
||||
},
|
||||
"PageFooter": {
|
||||
"app-description": "Preuzmite kontrolu nad svojim režijama!",
|
||||
|
||||
Reference in New Issue
Block a user