Merge branch 'feature/account-page-goto-home-button' into develop

app/[locale]/home/account/LogoutButton.tsx

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

app/[locale]/home/account/page.tsx

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

app/ui/InfoBox.tsx

@@ -10,13 +10,13 @@ export const InfoBox: FC<{
     const t = useTranslations("info-box");
 
   return (
-    <details className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
+    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-[17rem] sm:w-[28rem]">
       <summary className="flex cursor-pointer items-center justify-between">
         <span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
         <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
         <span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
       </summary>
-      <div className="mt-2 italic text-sm text-gray-400">{children}</div>
+      <div className="mt-2 italic text-sm text-gray-400 group-open:animate-[animateDown_0.2s_linear_forwards]">{children}</div>
     </details>
   )
 }

app/ui/PageHeader.tsx

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

app/ui/UserSettingsForm.tsx

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

messages/en.json

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

messages/hr.json

@@ -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!",

tailwind.config.ts

@@ -25,6 +25,18 @@ const config: Config = {
           transform: 'translateX(100%)',
         },
       },
+      animateDown: {
+        '0%': {
+          opacity: '0',
+          transform: 'translateY(-15px)',
+          maxHeight: '0px',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'translateY(0)',
+          maxHeight: '200px',
+        },
+      },
     },
   },
   plugins: [