chore: polish navbar icons and form styling

PROGRESS.md

@@ -40,6 +40,7 @@
 - Home page shows a rolling feed of latest listings; navbar + CTA link to browse.
 - Listing creation form captures address details, coordinates, amenities (incl. EV/AC), and cover image choice.
 - Documentation moved to `docs/`; PlantUML diagrams rendered to SVG and embedded in docs pages (draw.io sources kept for architecture/infra).
+- UI polish: navbar buttons gained icons, consistent button sizing, and form fields restyled for alignment.
 - HTTPS redirect middleware applied to staging/prod ingress.
 - FI/EN localization with navbar language toggle; UI strings translated; Approvals link shows pending count badge.
 - Soft rejection/removal states for users/listings with timestamps; owner listing removal; login redirects home; listing visibility hides removed/not-published.

app/components/NavBar.tsx

@@ -6,6 +6,78 @@ import { useI18n } from './I18nProvider';
 
 type SessionUser = { id: string; email: string; role: string; status: string };
 
+function Icon({ name }: { name: string }) {
+  const common = { width: 16, height: 16, stroke: 'currentColor', fill: 'none', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
+  switch (name) {
+    case 'profile':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <circle cx="12" cy="8" r="4" />
+          <path d="M5 20c0-3.3 3.1-6 7-6s7 2.7 7 6" />
+        </svg>
+      );
+    case 'list':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M9 6h11" />
+          <path d="M9 12h11" />
+          <path d="M9 18h11" />
+          <path d="M4 6h0.01" />
+          <path d="M4 12h0.01" />
+          <path d="M4 18h0.01" />
+        </svg>
+      );
+    case 'plus':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M12 5v14" />
+          <path d="M5 12h14" />
+        </svg>
+      );
+    case 'logout':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3" />
+          <path d="M16 17l5-5-5-5" />
+          <path d="M21 12H9" />
+        </svg>
+      );
+    case 'login':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" />
+          <path d="M10 17l5-5-5-5" />
+          <path d="M15 12H3" />
+        </svg>
+      );
+    case 'users':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      );
+    case 'check':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M20 6L9 17l-5-5" />
+        </svg>
+      );
+    case 'globe':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <circle cx="12" cy="12" r="9" />
+          <path d="M3 12h18" />
+          <path d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
 export default function NavBar() {
   const { t, locale, setLocale } = useI18n();
   const [user, setUser] = useState<SessionUser | null>(null);
@@ -62,7 +134,7 @@ export default function NavBar() {
           {t('brand')}
         </Link>
         <Link href="/listings" className="button secondary">
-          {t('navBrowse')}
+          <Icon name="list" /> {t('navBrowse')}
         </Link>
       </div>
       <nav style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@@ -72,18 +144,18 @@ export default function NavBar() {
               {user.email} · {user.role}
             </span>
             <Link href="/me" className="button secondary">
-              {t('navProfile')}
+              <Icon name="profile" /> {t('navProfile')}
             </Link>
             <Link href="/listings/mine" className="button secondary">
-              {t('navMyListings')}
+              <Icon name="list" /> {t('navMyListings')}
             </Link>
             <Link href="/listings/new" className="button secondary">
-              {t('navNewListing')}
+              <Icon name="plus" /> {t('navNewListing')}
             </Link>
             {showApprovals ? (
               <>
                 <Link href="/admin/pending" className="button secondary">
-                  {t('navApprovals')}
+                  <Icon name="check" /> {t('navApprovals')}
                   {pendingCount > 0 ? (
                     <span style={{ marginLeft: 6, background: '#ff7043', color: '#fff', borderRadius: 10, padding: '2px 6px', fontSize: 12 }}>
                       {t('approvalsBadge', { count: pendingCount })}
@@ -92,27 +164,29 @@ export default function NavBar() {
                 </Link>
                 {isAdmin ? (
                   <Link href="/admin/users" className="button secondary">
-                    {t('navUsers')}
+                    <Icon name="users" /> {t('navUsers')}
                   </Link>
                 ) : null}
               </>
             ) : null}
             <button className="button secondary" onClick={logout}>
-              {t('navLogout')}
+              <Icon name="logout" /> {t('navLogout')}
             </button>
           </>
         ) : (
           <>
             <Link href="/auth/login" className="button secondary">
-              {t('navLogin')}
+              <Icon name="login" /> {t('navLogin')}
             </Link>
             <Link href="/auth/register" className="button">
-              {t('navSignup')}
+              <Icon name="plus" /> {t('navSignup')}
             </Link>
           </>
         )}
         <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}>
-          <span style={{ fontSize: 12, color: '#555' }}>{t('navLanguage')}:</span>
+          <span style={{ fontSize: 12, color: '#555', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <Icon name="globe" /> {t('navLanguage')}:
+          </span>
           <button className="button secondary" onClick={() => setLocale('fi')} style={{ padding: '4px 8px', opacity: locale === 'fi' ? 1 : 0.7 }}>
             FI
           </button>

app/globals.css

@@ -75,15 +75,20 @@ p {
 }
 
 .button {
-  background: var(--accent);
+  display: inline-flex;
-  color: #0b1224;
+  align-items: center;
-  padding: 12px 16px;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 10px 16px;
   border-radius: 12px;
   border: none;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
-  transition: transform 120ms ease, box-shadow 180ms ease;
+  background: var(--accent);
+  color: #0b1224;
+  transition: transform 120ms ease, box-shadow 180ms ease, background 120ms ease;
   box-shadow: 0 15px 40px rgba(34, 211, 238, 0.16);
 }
 
@@ -311,18 +316,31 @@ code {
 
 label {
   color: var(--muted);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-weight: 600;
 }
 
 input,
 select,
 textarea {
   width: 100%;
-  padding: 10px 12px;
+  padding: 12px 14px;
   border-radius: 10px;
   border: 1px solid rgba(148, 163, 184, 0.35);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
   font-size: 15px;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
 }
 
 @media (max-width: 640px) {