Add design overhaul plan + partial icon work

TODO: Comprehensive design plan for fitness app feel
- Dark theme color palette
- Professional typography guidelines
- SVG icons to replace ALL emojis
- UI component standards
- Inspiration from Nike/FITBOD/Strong

Partial work from Claude Code:
- Icons.jsx component (SVG icons)
- Dashboard.jsx updates (some emoji removal)

frontend/src/pages/Dashboard.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useAuth } from '../context/AuthContext'
+import { Icon, getActivityIconName } from '../components/Icons'
 
 const API_URL = '/api'
 
@@ -7,13 +8,13 @@ const API_URL = '/api'
 const getCoachGreeting = (user, todayWorkout) => {
   const hour = new Date().getHours()
   const name = user?.name?.split(' ')[0] || 'du'
-  
+
   if (todayWorkout) {
     // There's a workout today
     if (hour < 10) {
-      return `Godmorgon ${name}! Idag kör vi ${todayWorkout.name.toLowerCase()}. Redo? 💪`
+      return `Godmorgon ${name}! Idag kör vi ${todayWorkout.name.toLowerCase()}. Redo?`
     } else if (hour < 14) {
-      return `${todayWorkout.name} står på schemat idag. Dags att köra! 🏋️`
+      return `${todayWorkout.name} står på schemat idag. Dags att köra!`
     } else if (hour < 18) {
       return `Eftermiddagspass? ${todayWorkout.name} väntar på dig.`
     } else {
@@ -22,23 +23,23 @@ const getCoachGreeting = (user, todayWorkout) => {
   } else {
     // Rest day
     if (hour < 10) {
-      return `Godmorgon ${name}! Vilodag idag – perfekt för återhämtning. 🧘`
+      return `Godmorgon ${name}! Vilodag idag – perfekt för återhämtning.`
     } else if (hour < 14) {
-      return `Ingen träning schemalagd. Ta en promenad eller stretcha lite? 🚶`
+      return `Ingen träning schemalagd. Ta en promenad eller stretcha lite?`
     } else if (hour < 18) {
-      return `Vila är också träning! Lätt rörelse eller mobilitet idag? 🧘`
+      return `Vila är också träning! Lätt rörelse eller mobilitet idag?`
     } else {
-      return `Lugn kväll ${name}. Ladda batterierna till nästa pass! 😴`
+      return `Lugn kväll ${name}. Ladda batterierna till nästa pass!`
     }
   }
 }
 
 // Rest day tips
 const restDayTips = [
-  { icon: '🚶', text: '30 min promenad' },
-  { icon: '🧘', text: 'Yoga/stretching' },
-  { icon: '🏊', text: 'Simning' },
-  { icon: '🚴', text: 'Lätt cykling' },
+  { iconName: 'walking', text: 'Promenad' },
+  { iconName: 'yoga', text: 'Stretching' },
+  { iconName: 'swimming', text: 'Simning' },
+  { iconName: 'cycling', text: 'Cykling' },
 ]
 
 // Get weekday names
@@ -89,12 +90,12 @@ function Dashboard({ onStartWorkout, onNavigate }) {
     <div className="dashboard">
       <header className="dashboard-header">
         <div className="header-top">
-          <h1>🏋️ Gravl</h1>
+          <h1 className="brand-title"><Icon name="gravl" size={22} /> Gravl</h1>
           <nav className="nav-menu">
-            <button className="nav-btn active">Hem</button>
-            <button className="nav-btn" onClick={() => onNavigate('progress')}>📊</button>
-            <button className="nav-btn" onClick={() => onNavigate('profile')}>👤</button>
-            <button className="nav-btn logout" onClick={logout}>↪</button>
+            <button className="nav-btn active"><Icon name="home" size={18} /></button>
+            <button className="nav-btn" onClick={() => onNavigate('progress')}><Icon name="chart" size={18} /></button>
+            <button className="nav-btn" onClick={() => onNavigate('profile')}><Icon name="user" size={18} /></button>
+            <button className="nav-btn logout" onClick={logout}><Icon name="logout" size={18} /></button>
           </nav>
         </div>
       </header>
@@ -103,20 +104,20 @@ function Dashboard({ onStartWorkout, onNavigate }) {
         {/* Week Calendar - TOP */}
         <section className="week-calendar">
           <div className="calendar-header">
-            <button 
+            <button
               className="calendar-nav"
               onClick={() => setCurrentWeekStart(addDays(currentWeekStart, -7))}
             >
-              ←
+              <Icon name="chevronLeft" size={16} />
             </button>
             <span className="calendar-title">
               {formatWeekRange(currentWeekStart)}
             </span>
-            <button 
+            <button
               className="calendar-nav"
               onClick={() => setCurrentWeekStart(addDays(currentWeekStart, 7))}
             >
-              →
+              <Icon name="chevronRight" size={16} />
             </button>
           </div>
           <div className="calendar-days">
@@ -128,14 +129,14 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               const workout = program?.days?.find(d => d.day_number === dayNum)
               
               return (
-                <div 
+                <div
                   key={idx}
                   className={`calendar-day ${isToday ? 'today' : ''} ${hasWorkout ? 'has-workout' : ''}`}
                   onClick={() => hasWorkout && workout && onStartWorkout(workout)}
                 >
                   <span className="day-name">{name}</span>
                   <span className="day-date">{date.getDate()}</span>
-                  {hasWorkout && <span className="day-dot">●</span>}
+                  {hasWorkout && <span className="day-dot"></span>}
                 </div>
               )
             })}
@@ -145,7 +146,9 @@ function Dashboard({ onStartWorkout, onNavigate }) {
         {/* Coach Section with Today's Action */}
         <section className="coach-section">
           <div className="coach-greeting">
-            <div className="coach-avatar">🧔‍♂️</div>
+            <div className="coach-avatar">
+              <Icon name="coach" size={36} />
+            </div>
             <div className="coach-message">
               <p>{getCoachGreeting(user, todayWorkout)}</p>
             </div>
@@ -163,7 +166,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
                   </span>
                 </div>
                 <div className="workout-action">
-                  <span className="action-arrow">→</span>
+                  <Icon name="arrowRight" size={24} />
                 </div>
               </div>
             ) : (
@@ -171,14 +174,17 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               <div className="rest-day-section">
                 <div className="rest-tips">
                   {restDayTips.map((tip, i) => (
-                    <span key={i} className="tip-badge">{tip.icon} {tip.text}</span>
+                    <span key={i} className="tip-badge">
+                      <Icon name={tip.iconName} size={16} />
+                      {tip.text}
+                    </span>
                   ))}
                 </div>
-                <button 
+                <button
                   className="add-workout-btn"
                   onClick={() => onNavigate('select-workout')}
                 >
-                  <span className="add-icon">+</span>
+                  <Icon name="plus" size={20} />
                   <span>Lägg till pass</span>
                 </button>
               </div>
@@ -197,7 +203,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
             <span className="stat-label">Denna vecka</span>
           </div>
           <div className="stat-card">
-            <span className="stat-value">💪</span>
+            <span className="stat-value stat-icon"><Icon name="fire" size={28} /></span>
             <span className="stat-label">Streak: 5</span>
           </div>
         </section>