Skip to main content

Page: Profile

Page Spec: Profile (Settings)

Route

/profile

Architecture Status

Core

Figma Reference

profile.png

Visual Description from Figma

The profile/settings page is the user account management screen:

  • Top bar: Left side has a back arrow (ArrowLeft, NOT chevron) in muted gray. "Profil" heading in bold sans-serif font (NOT serif). Right side is empty. Background is light gray (#EEEEEE).
  • User card: White rounded card at top with:
    • Circular avatar with light green background (#0B6E35/10 = 10% opacity green)
    • Initials "AH" in dark green (#0B6E35) centered in the avatar circle
    • User name "Amir Hadžić" in bold black LEFT-ALIGNED (NOT centered) next to avatar
    • Email "[email protected]" in muted gray below name, LEFT-ALIGNED (NOT centered)
    • LAYOUT: Avatar and text are in horizontal flexbox (NOT centered vertical stack)
  • Menu card: White rounded card containing 5 menu items:
    1. "Mine kontoer" — building/bank icon (outlined, dark gray) on left, chevron right on right side
    2. "Varsler" — bell icon (outlined, dark gray) on left, chevron right on right side
    3. "Innstillinger" — gear/cog icon (outlined, dark gray) on left, chevron right on right side
    4. "Sikkerhet" — shield icon (outlined, dark gray) on left, chevron right on right side
    5. "Hjelp og støtte" — question mark in circle icon (outlined, dark gray) on left, chevron right on right side
    • Each menu item has padding, separated by subtle divider lines
    • Icons are consistent size (approximately 20-24px)
    • Text is medium weight, dark black
    • Chevron right icons are muted gray
  • Logout button: Separate white rounded button with:
    • "Logg ut" text in red (#EF4444)
    • Logout/exit icon (LogOut component) inline with text (NOT on left with text to right)
    • 2px solid red border (border-2 border-[#EF4444])
    • White background, hover changes to light red (#FEF2F2)
  • Footer text: NOT IMPLEMENTED (claimed in spec but missing from code)
  • Bottom navigation: 5 tabs — Hjem (house outline), Send (paper plane outline), Skann (QR outline), Kort (card outline), Profil (active, green, filled person icon). All inactive tabs are gray.

Background is light gray (#EEEEEE). Spacing between cards is consistent.

Page Layout

App page WITH bottom nav
├── Top Bar
│   ├── Left: Back arrow
│   ├── Center: "Profil" heading
│   └── Right: Empty
├── User Card (white rounded, centered content)
│   ├── Avatar circle (initials, green on light green bg)
│   ├── User full name (bold)
│   └── Email address (muted)
├── Menu Card (white rounded)
│   ├── "Mine kontoer" (bank icon + chevron)
│   ├── "Varsler" (bell icon + chevron)
│   ├── "Innstillinger" (gear icon + chevron)
│   ├── "Sikkerhet" (shield icon + chevron)
│   └── "Hjelp og støtte" (question icon + chevron)
├── Logout Button Card (white rounded, red text)
│   └── "Logg ut" (logout icon)
├── Footer Text
│   └── "Drop v0.1.0 · ALAI Holding AS"
└── Bottom Nav (Profil active)

Components

Top Bar

<div className="flex items-center gap-3 px-6 pt-6">
  <Link href="/dashboard">
    <button className="rounded-lg p-2 hover:bg-white/80">
      <ArrowLeft className="h-5 w-5 text-[#6B7280]" />
    </button>
  </Link>
  <h1 className="text-xl font-bold text-[#1A1A1A]">Profil</h1>
</div>

User Card

<div className="rounded-2xl bg-white p-6 shadow-sm">
  <div className="flex items-center gap-4">
    <div className="h-14 w-14 rounded-full bg-[#0B6E35]/10 flex items-center justify-center text-xl font-bold text-[#0B6E35]">
      {user.firstName.charAt(0)}{user.lastName.charAt(0)}
    </div>
    <div>
      <p className="font-semibold text-lg text-[#1A1A1A]">{user.firstName} {user.lastName}</p>
      <p className="text-sm text-[#6B7280]">{user.email}</p>
    </div>
  </div>
</div>

Menu Card

<div className="rounded-2xl bg-white shadow-sm overflow-hidden">
  <MenuItem
    icon={<Building2 className="h-5 w-5" />}
    label="Mine kontoer"
    href="/accounts"
  />
  <Divider />
  <MenuItem
    icon={<Bell className="h-5 w-5" />}
    label="Varsler"
    href="/notifications"
  />
  <Divider />
  <MenuItem
    icon={<Settings className="h-5 w-5" />}
    label="Innstillinger"
    href="/settings"
  />
  <Divider />
  <MenuItem
    icon={<Shield className="h-5 w-5" />}
    label="Sikkerhet"
    href="/security"
  />
  <Divider />
  <MenuItem
    icon={<HelpCircle className="h-5 w-5" />}
    label="Hjelp og støtte"
    href="/support"
  />
</div>

Menu Item Component

Divider

<div className="h-px bg-[#E5E7EB] mx-5" />

Logout Button

<button
  onClick={handleLogout}
  className="w-full rounded-2xl bg-white border border-[#E5E7EB] p-4 shadow-sm hover:bg-[#FEF2F2] transition-colors"
>
  <div className="flex items-center justify-center gap-2">
    <LogOut className="h-5 w-5 text-[#EF4444]" />
    <span className="text-[15px] font-semibold text-[#EF4444]">Logg ut</span>
  </div>
</button>

Footer Text

<p className="text-center text-xs text-[#9CA3AF]">
  Drop v0.1.0 · ALAI Holding AS
</p>

Data Displayed

Data Source API
User full name JWT / user profile GET /api/account
User email User profile GET /api/account
User initials Derived from full name Client-side
App version Build metadata Static
Company name Static Static

User Interactions

Element Action Result
Back arrow Click Navigate back to previous page
Avatar Click Optional: navigate to profile edit page
"Mine kontoer" Click Navigate to /accounts
"Varsler" Click Navigate to /notifications
"Innstillinger" Click Navigate to /settings (app preferences)
"Sikkerhet" Click Navigate to /security (PIN, biometrics, 2FA)
"Hjelp og støtte" Click Navigate to /support (FAQs, contact)
"Logg ut" button Click Clear JWT cookie, redirect to /login
Bottom nav tabs Click Navigate to respective page

Norwegian Labels

Element Norwegian Text
Page title Profil
Bank accounts menu Mine kontoer
Notifications menu Varsler
Settings menu Innstillinger
Security menu Sikkerhet
Help menu Hjelp og støtte
Logout button Logg ut
Footer Drop v0.1.0 · ALAI Holding AS

Design Tokens

Token Value
Page bg #EEEEEE
Card bg #FFFFFF
Avatar bg #D1E9DC (light green/mint)
Avatar text #0B6E35
Primary #0B6E35
Text primary #1A1A1A
Text muted #6B7280
Text light #9CA3AF
Border #E5E7EB
Danger #EF4444
Danger hover bg #FEF2F2
Hover bg #F9FAFB
Brand font font-[family-name:var(--font-fraunces)]
Card radius rounded-2xl
Avatar radius rounded-full
Avatar size h-20 w-20
Menu item padding px-5 py-4
Icon size h-5 w-5

Bottom Navigation

Yes — "Profil" tab active (green, filled person icon). All other tabs inactive (gray, outline icons).

No comments to display

Back to top