# Design System - Profile Modal

## Overview
A modal dialog that appears when clicking the profile icon in navigation. Contains a sidebar navigation and content area for managing user settings. Sections include Profile, Account, My Strategies, and Notifications.

---

## Modal Specs

### Dimensions

| Property | Value |
|----------|-------|
| Width | 1296px |
| Height | 760px |
| Border Radius | 17px |
| Shadow | 0 4px 4px rgba(0, 0, 0, 0.15) |
| Background | #FAFAFA |

---

## Sidebar Navigation

### Layout

| Property | Value |
|----------|-------|
| Width | ~280px |
| Padding Left | 62px |
| Item Spacing | 56px vertical |

### Navigation Items

| Item | Icon | State |
|------|------|-------|
| Profile | User icon | Active (dark) |
| Account | Settings icon | Inactive (gray) |
| My Strategies | Grid icon | Inactive (gray) |
| Notifications | Bell icon | Inactive (gray) |

### Typography

| State | Color | Weight |
|-------|-------|--------|
| Active | #383737 | 700 |
| Inactive | #848383 | 700 |

Font: Space Grotesk, 20px

---

## Content Area

### Header

| Property | Value |
|----------|-------|
| Font Size | 20px |
| Font Weight | 700 |
| Color | #383737 |
| Position | Left padding 370px from modal edge |

---

## Avatar Section

### Avatar Placeholder

| Property | Value |
|----------|-------|
| Size | 116 x 116px |
| Background | White circle |
| Icon | User silhouette |
| Icon Stroke | #575461, 3px |

### Upload Button

| Property | Value |
|----------|-------|
| Width | 109px |
| Height | 24px |
| Background | #FFFFFF |
| Border Radius | 5px |
| Shadow | 0 1px 2px rgba(0, 0, 0, 0.1) |
| Font Size | 12px |
| Font Weight | 500 |
| Color | #383737 |

---

## Form Fields

### Input Specs

| Property | Value |
|----------|-------|
| Width | 638px |
| Height | 41px |
| Background | #FFFFFF |
| Border | None (bottom only) |
| Border Bottom | 1px solid #808080 |
| Border Radius | 5px |
| Field Spacing | 114px vertical (label to label) |

### Labels

| Property | Value |
|----------|-------|
| Font Size | 14px |
| Font Weight | 500 |
| Color | #848383 |
| Margin Bottom | 8px |

### Input Text

| Property | Value |
|----------|-------|
| Font Size | 14px |
| Font Weight | 400 |
| Color | #383737 |
| Placeholder Color | #A3A3A3 |

### Fields

1. First Name
2. Last Name
3. Email

---

## Close Button

| Property | Value |
|----------|-------|
| Size | 24 x 24px (hit area) |
| Icon Size | 12 x 12px |
| Stroke | #383737 |
| Stroke Width | 2px |
| Position | Top right, 32px from edges |

---

## Code Reference

### HTML Structure

```html
<div class="modal-overlay">
  <div class="profile-modal">
    <button class="modal-close">
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M1 1L11 11M11 1L1 11" stroke="#383737" stroke-width="2" stroke-linecap="round"/>
      </svg>
    </button>

    <aside class="modal-sidebar">
      <nav class="sidebar-nav">
        <a href="#" class="nav-item active">
          <svg class="nav-icon"><!-- user icon --></svg>
          <span>Profile</span>
        </a>
        <a href="#" class="nav-item">
          <svg class="nav-icon"><!-- settings icon --></svg>
          <span>Account</span>
        </a>
        <a href="#" class="nav-item">
          <svg class="nav-icon"><!-- grid icon --></svg>
          <span>My Strategies</span>
        </a>
        <a href="#" class="nav-item">
          <svg class="nav-icon"><!-- bell icon --></svg>
          <span>Notifications</span>
        </a>
      </nav>
    </aside>

    <main class="modal-content">
      <h2 class="content-title">Profile Settings</h2>

      <div class="avatar-section">
        <div class="avatar-placeholder">
          <svg><!-- user silhouette --></svg>
        </div>
        <button class="upload-btn">Upload Photo</button>
      </div>

      <form class="profile-form">
        <div class="form-field">
          <label>First Name</label>
          <input type="text" placeholder="Type Name">
        </div>
        <div class="form-field">
          <label>Last Name</label>
          <input type="text" placeholder="Type Name">
        </div>
        <div class="form-field">
          <label>Email</label>
          <input type="email" placeholder="Type Name">
        </div>
      </form>
    </main>
  </div>
</div>
```

### CSS

```css
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal Container */
.profile-modal {
  position: relative;
  width: 1296px;
  height: 760px;
  background: #FAFAFA;
  border-radius: 17px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  overflow: hidden;
}

/* Close Button */
.modal-close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Sidebar */
.modal-sidebar {
  width: 280px;
  padding: 80px 0 0 62px;
  border-right: 1px solid #E5E5E5;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #848383;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
  color: #383737;
}

.nav-icon {
  width: 20px;
  height: 20px;
}

/* Content Area */
.modal-content {
  flex: 1;
  padding: 80px 80px 80px 90px;
}

.content-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #383737;
  margin: 0 0 40px 0;
}

/* Avatar Section */
.avatar-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.avatar-placeholder {
  width: 116px;
  height: 116px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.upload-btn {
  padding: 6px 16px;
  background: #FFFFFF;
  border: none;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #383737;
  cursor: pointer;
}

/* Form */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #848383;
}

.form-field input {
  width: 638px;
  height: 41px;
  padding: 0 12px;
  background: #FFFFFF;
  border: none;
  border-bottom: 1px solid #808080;
  border-radius: 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #383737;
}

.form-field input::placeholder {
  color: #A3A3A3;
}

.form-field input:focus {
  outline: none;
  border-bottom-color: #FB923C;
}
```

---

## Design Tokens

### Modal

| Token | Value |
|-------|-------|
| `--modal-width` | 1296px |
| `--modal-height` | 760px |
| `--modal-radius` | 17px |
| `--modal-bg` | #FAFAFA |
| `--modal-shadow` | 0 4px 4px rgba(0, 0, 0, 0.15) |

### Sidebar

| Token | Value |
|-------|-------|
| `--sidebar-width` | 280px |
| `--sidebar-padding` | 62px |
| `--nav-item-gap` | 36px |
| `--nav-active-color` | #383737 |
| `--nav-inactive-color` | #848383 |

### Form

| Token | Value |
|-------|-------|
| `--input-width` | 638px |
| `--input-height` | 41px |
| `--input-border` | #808080 |
| `--input-focus` | #FB923C |
| `--label-color` | #848383 |

---

## Ripple Effect

All interactive elements in the modal feature the signature Orange→Pink→Blue ripple animation on hover for consistency with the design system.

### Elements with Ripple

| Element | Border Radius |
|---------|---------------|
| Sidebar Nav Items | 8px |
| Upload Photo Button | 5px |
| Close Button | 6px |

### CSS

```css
.ripple-cell {
  background-color: rgba(0, 0, 0, 0.01);
  border: 0.5px solid rgba(0, 0, 0, 0.01);
  opacity: 0.5;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ripple-cell.ripple-active {
  animation: cellRipple var(--duration, 150ms) ease-out var(--delay, 0ms);
}

@keyframes cellRipple {
  0% {
    background-color: rgba(251, 146, 60, 0.85);
    opacity: 1;
  }
  40% {
    background-color: rgba(244, 114, 182, 0.75);
    opacity: 1;
  }
  70% {
    background-color: rgba(147, 197, 253, 0.6);
    opacity: 0.9;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.01);
    opacity: 0.5;
  }
}
```

---

## Prototype
`profile-modal-prototype/index.html`