Hugging Face's logo

Spaces:
BrainForge
/
LaunchPadAI
Sleeping

App Files Community
Kennedy Johnson Cursor commited on
Commit
387b7b2
·
1 Parent(s): 2d9affa

Apply approachable LaunchPad teal theme across UI surfaces.

Browse files

Replace indigo/purple accents with brand greens for readable hierarchy on home, login, chat, canvas, guest banner, and path gate.

Co-authored-by: Cursor <cursoragent@cursor.com>

Files changed (11) hide show
  1. phd-advisor-frontend/src/components/SearchPathGate.css +5 -5
  2. phd-advisor-frontend/src/contexts/AppConfigContext.js +32 -9
  3. phd-advisor-frontend/src/pages/CanvasPage.js +4 -4
  4. phd-advisor-frontend/src/styles/CanvasPage.css +79 -80
  5. phd-advisor-frontend/src/styles/ChatPage.css +12 -6
  6. phd-advisor-frontend/src/styles/ConfirmDialog.css +3 -3
  7. phd-advisor-frontend/src/styles/EnhancedChatInput.css +1 -1
  8. phd-advisor-frontend/src/styles/FileUpload.css +8 -8
  9. phd-advisor-frontend/src/styles/Login.css +4 -4
  10. phd-advisor-frontend/src/styles/Sidebar.css +3 -3
  11. phd-advisor-frontend/src/styles/components.css +72 -57
phd-advisor-frontend/src/components/SearchPathGate.css CHANGED
@@ -60,17 +60,17 @@
60
  }
61
 
62
  .search-path-option:hover {
63
- border-color: #0f766e;
64
  transform: translateY(-1px);
65
  }
66
 
67
  .search-path-option.active {
68
- border-color: #0f766e;
69
- background: #ccfbf1;
70
  }
71
 
72
  .search-path-option-icon {
73
- color: #0f766e;
74
  }
75
 
76
  .search-path-option-title {
@@ -100,7 +100,7 @@
100
  border: none;
101
  border-radius: 12px;
102
  padding: 12px 16px;
103
- background: #0f766e;
104
  color: #fff;
105
  font-weight: 600;
106
  cursor: pointer;
 
60
  }
61
 
62
  .search-path-option:hover {
63
+ border-color: var(--accent-primary, #0f766e);
64
  transform: translateY(-1px);
65
  }
66
 
67
  .search-path-option.active {
68
+ border-color: var(--accent-primary, #0f766e);
69
+ background: var(--accent-soft, #ccfbf1);
70
  }
71
 
72
  .search-path-option-icon {
73
+ color: var(--accent-primary, #0f766e);
74
  }
75
 
76
  .search-path-option-title {
 
100
  border: none;
101
  border-radius: 12px;
102
  padding: 12px 16px;
103
+ background: var(--accent-primary, #0f766e);
104
  color: #fff;
105
  font-weight: 600;
106
  cursor: pointer;
phd-advisor-frontend/src/contexts/AppConfigContext.js CHANGED
@@ -125,19 +125,42 @@ export const AppConfigProvider = ({ children }) => {
125
  localStorage.setItem('myCustomAvatars', JSON.stringify(next));
126
  };
127
 
128
- // Inject the primary colour as a CSS custom property on <html> so it is
129
- // available everywhere without prop-drilling.
130
  useEffect(() => {
131
- if (config?.app?.primary_color) {
132
- document.documentElement.style.setProperty(
133
- '--accent-primary',
134
- config.app.primary_color
135
- );
136
- }
137
- // Also update the <title> tag dynamically
138
  if (config?.app?.title) {
139
  document.title = config.app.title;
140
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  }, [config]);
142
 
143
  const getAdvisorColors = buildGetAdvisorColors(advisors);
 
125
  localStorage.setItem('myCustomAvatars', JSON.stringify(next));
126
  };
127
 
128
+ // Sync brand primary from config. Light theme uses the config color;
129
+ // dark theme keeps CSS-defined lighter teals for contrast on green-tinted surfaces.
130
  useEffect(() => {
 
 
 
 
 
 
 
131
  if (config?.app?.title) {
132
  document.title = config.app.title;
133
  }
134
+
135
+ const applyBrand = () => {
136
+ if (!config?.app?.primary_color) return;
137
+ const primary = config.app.primary_color;
138
+ const root = document.documentElement.style;
139
+ const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
140
+ if (isDark) {
141
+ root.removeProperty('--accent-primary');
142
+ root.removeProperty('--accent-secondary');
143
+ root.removeProperty('--accent-gradient');
144
+ root.removeProperty('--feature-icon-color');
145
+ root.removeProperty('--input-focus');
146
+ root.removeProperty('--input-focus-shadow');
147
+ return;
148
+ }
149
+ root.setProperty('--accent-primary', primary);
150
+ root.setProperty('--feature-icon-color', primary);
151
+ root.setProperty('--input-focus', primary);
152
+ root.setProperty('--accent-secondary', '#047857');
153
+ root.setProperty('--accent-gradient', `linear-gradient(135deg, ${primary}, #059669)`);
154
+ root.setProperty('--input-focus-shadow', '0 0 0 3px rgba(15, 118, 110, 0.15)');
155
+ };
156
+
157
+ applyBrand();
158
+ const observer = new MutationObserver(applyBrand);
159
+ observer.observe(document.documentElement, {
160
+ attributes: true,
161
+ attributeFilter: ['data-theme'],
162
+ });
163
+ return () => observer.disconnect();
164
  }, [config]);
165
 
166
  const getAdvisorColors = buildGetAdvisorColors(advisors);
phd-advisor-frontend/src/pages/CanvasPage.js CHANGED
@@ -124,16 +124,16 @@ const INSIGHT_CATEGORIES = [
124
  ];
125
  const CATEGORY_TINT = {
126
  progress: 'rgba(16, 185, 129, 0.12)',
127
- theory: 'rgba(99, 102, 241, 0.12)',
128
  literature: 'rgba(245, 158, 11, 0.12)',
129
- action: 'rgba(59, 130, 246, 0.12)',
130
  risk: 'rgba(220, 38, 38, 0.12)',
131
  };
132
  const CATEGORY_FG = {
133
  progress: '#10B981',
134
- theory: '#818CF8',
135
  literature: '#F59E0B',
136
- action: '#3B82F6',
137
  risk: '#DC2626',
138
  };
139
  const confidenceTier = (c) => c >= 75 ? 'high' : c >= 60 ? 'med' : 'low';
 
124
  ];
125
  const CATEGORY_TINT = {
126
  progress: 'rgba(16, 185, 129, 0.12)',
127
+ theory: 'rgba(15, 118, 110, 0.12)',
128
  literature: 'rgba(245, 158, 11, 0.12)',
129
+ action: 'rgba(13, 148, 136, 0.12)',
130
  risk: 'rgba(220, 38, 38, 0.12)',
131
  };
132
  const CATEGORY_FG = {
133
  progress: '#10B981',
134
+ theory: '#0F766E',
135
  literature: '#F59E0B',
136
+ action: '#0D9488',
137
  risk: '#DC2626',
138
  };
139
  const confidenceTier = (c) => c >= 75 ? 'high' : c >= 60 ? 'med' : 'low';
phd-advisor-frontend/src/styles/CanvasPage.css CHANGED
@@ -28,26 +28,25 @@
28
  .canvas-main-area, .canvas-main-area.sidebar-collapsed { margin-left: 0; }
29
  }
30
 
31
- /* PhD Canvas — color palette matched to the rest of the app
32
- (Tailwind gray + indigo accent + violet "wedge" accent) */
33
  .canvas-page-with-sidebar {
34
- --canvas-bg: #111827;
35
- --canvas-bg-2: #0f172a;
36
- --canvas-surface: #1F2937;
37
- --canvas-surface-2: #374151;
38
- --canvas-surface-3: #4B5563;
39
- --canvas-border: #374151;
40
- --canvas-border-2: #4B5563;
41
- --canvas-text: #F9FAFB;
42
- --canvas-text-2: #D1D5DB;
43
- --canvas-text-3: #9CA3AF;
44
- --canvas-text-4: #6B7280;
45
- --canvas-accent: #818CF8;
46
- --canvas-accent-dim: #4F46E5;
47
- --canvas-accent-glow: rgba(129, 140, 248, 0.20);
48
- --canvas-critic: #A78BFA;
49
- --canvas-critic-dim: #7C3AED;
50
- --canvas-critic-glow: rgba(167, 139, 250, 0.20);
51
  --canvas-warn: #F59E0B;
52
  --canvas-danger: #DC2626;
53
  --canvas-ok: #10B981;
@@ -64,26 +63,26 @@
64
  -webkit-font-smoothing: antialiased;
65
  }
66
 
67
- /* Light theme — matches the app's white + Tailwind-gray palette */
68
  .canvas-page-with-sidebar[data-canvas-theme="light"] {
69
- --canvas-bg: #F9FAFB; /* gray-50 */
70
  --canvas-bg-2: #FFFFFF;
71
  --canvas-surface: #FFFFFF;
72
- --canvas-surface-2: #F3F4F6; /* gray-100 */
73
- --canvas-surface-3: #E5E7EB; /* gray-200 */
74
- --canvas-border: #E5E7EB; /* gray-200 */
75
- --canvas-border-2: #D1D5DB; /* gray-300 */
76
- --canvas-text: #111827; /* gray-900 */
77
- --canvas-text-2: #374151; /* gray-700 */
78
- --canvas-text-3: #6B7280; /* gray-500 */
79
- --canvas-text-4: #9CA3AF; /* gray-400 */
80
- --canvas-accent: #6366F1; /* indigo-500 (matches accent-primary) */
81
- --canvas-accent-dim: #C7D2FE;
82
- --canvas-accent-glow: rgba(99, 102, 241, 0.15);
83
- --canvas-critic: #8B5CF6; /* violet-500 (matches accent-secondary) */
84
- --canvas-critic-glow: rgba(139, 92, 246, 0.12);
85
- --canvas-shadow: 0 4px 14px rgba(20, 30, 50, 0.08);
86
- --canvas-shadow-lg: 0 18px 48px rgba(20, 30, 50, 0.16);
87
  }
88
 
89
  .canvas-page-with-sidebar *, .canvas-modal-backdrop *, .toast-stack * { box-sizing: border-box; }
@@ -461,7 +460,7 @@
461
  padding: 10px 14px;
462
  margin-bottom: 14px;
463
  background: var(--canvas-accent-glow);
464
- border: 1px solid rgba(99, 102, 241, 0.18);
465
  border-radius: 8px;
466
  flex-wrap: wrap;
467
  }
@@ -859,7 +858,7 @@
859
  animation: canvas-view-in 180ms var(--canvas-ease);
860
  }
861
  .canvas-page-with-sidebar[data-canvas-theme="light"] .insight-detail {
862
- background: rgba(99, 102, 241, 0.04);
863
  }
864
  .canvas-page-with-sidebar .insight-detail-head {
865
  font-size: 10.5px;
@@ -1007,7 +1006,7 @@
1007
  border-color: rgba(15, 15, 15, 0.08);
1008
  }
1009
  .canvas-page-with-sidebar .widget.critic { border-color: rgba(167, 139, 250, 0.18); }
1010
- .canvas-page-with-sidebar[data-canvas-theme="light"] .widget.critic { border-color: rgba(139, 92, 246, 0.18); }
1011
  .canvas-page-with-sidebar .widget.critic:hover { border-color: var(--canvas-critic); }
1012
 
1013
  /* Preserve 3-S / 2-M / 1-L per row at every desktop width.
@@ -1223,22 +1222,22 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .select {
1223
  animation: canvas-fade-in .15s ease;
1224
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
1225
 
1226
- --canvas-bg: #111827;
1227
- --canvas-bg-2: #0f172a;
1228
- --canvas-surface: #1F2937;
1229
- --canvas-surface-2: #374151;
1230
- --canvas-surface-3: #4B5563;
1231
- --canvas-border: #374151;
1232
- --canvas-border-2: #4B5563;
1233
- --canvas-text: #F9FAFB;
1234
- --canvas-text-2: #D1D5DB;
1235
- --canvas-text-3: #9CA3AF;
1236
- --canvas-text-4: #6B7280;
1237
- --canvas-accent: #818CF8;
1238
- --canvas-accent-dim: #4F46E5;
1239
- --canvas-accent-glow: rgba(129, 140, 248, 0.20);
1240
- --canvas-critic: #A78BFA;
1241
- --canvas-critic-glow: rgba(167, 139, 250, 0.20);
1242
  --canvas-warn: #F59E0B;
1243
  --canvas-danger: #DC2626;
1244
  --canvas-ok: #10B981;
@@ -1247,24 +1246,24 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .select {
1247
  color: var(--canvas-text);
1248
  }
1249
  body[data-canvas-theme="light"] .canvas-modal-backdrop {
1250
- background: rgba(17, 24, 39, 0.35);
1251
- --canvas-bg: #F9FAFB;
1252
  --canvas-bg-2: #FFFFFF;
1253
  --canvas-surface: #FFFFFF;
1254
- --canvas-surface-2: #F3F4F6;
1255
- --canvas-surface-3: #E5E7EB;
1256
- --canvas-border: #E5E7EB;
1257
- --canvas-border-2: #D1D5DB;
1258
- --canvas-text: #111827;
1259
- --canvas-text-2: #374151;
1260
- --canvas-text-3: #6B7280;
1261
- --canvas-text-4: #9CA3AF;
1262
- --canvas-accent: #6366F1;
1263
- --canvas-accent-dim: #C7D2FE;
1264
- --canvas-accent-glow: rgba(99, 102, 241, 0.15);
1265
- --canvas-critic: #8B5CF6;
1266
- --canvas-critic-glow: rgba(139, 92, 246, 0.12);
1267
- --canvas-shadow-lg: 0 18px 48px rgba(20, 30, 50, 0.16);
1268
  }
1269
  @keyframes canvas-fade-in { from { opacity: 0 } to { opacity: 1 } }
1270
 
@@ -2145,8 +2144,8 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2145
  border-radius: 6px;
2146
  margin-bottom: 4px;
2147
  }
2148
- .canvas-sidebar-menu .csm-project.active { background: rgba(99, 102, 241, 0.06); }
2149
- .dark .canvas-sidebar-menu .csm-project.active { background: rgba(129, 140, 248, 0.10); }
2150
  .canvas-sidebar-menu .csm-project-head {
2151
  display: flex;
2152
  align-items: center;
@@ -2165,7 +2164,7 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2165
  .canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary, #f3f4f6); }
2166
  .dark .canvas-sidebar-menu .csm-project-head { color: var(--text-primary-dark, #f9fafb); }
2167
  .dark .canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary-dark, #374151); }
2168
- .canvas-sidebar-menu .csm-project.active .csm-project-name { color: var(--accent-primary, #6366F1); font-weight: 600; }
2169
  .canvas-sidebar-menu .csm-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2170
  .canvas-sidebar-menu .csm-versions {
2171
  display: inline-flex;
@@ -2207,8 +2206,8 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2207
  }
2208
  .dark .canvas-sidebar-menu .csm-row { color: var(--text-secondary-dark, #9ca3af); }
2209
  .dark .canvas-sidebar-menu .csm-row:hover { background: var(--bg-secondary-dark, #374151); color: var(--text-primary-dark, #f9fafb); }
2210
- .canvas-sidebar-menu .csm-row.critic { color: #8B5CF6; }
2211
- .dark .canvas-sidebar-menu .csm-row.critic { color: #A78BFA; }
2212
  .canvas-sidebar-menu .csm-row-bullet {
2213
  width: 4px;
2214
  height: 4px;
@@ -2596,7 +2595,7 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2596
  padding: 4px 14px;
2597
  color: var(--canvas-text-2);
2598
  margin-left: 0;
2599
- background: rgba(99, 102, 241, 0.04);
2600
  border-radius: 0 4px 4px 0;
2601
  }
2602
  .canvas-page-with-sidebar .rich-rendered code {
@@ -2983,7 +2982,7 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2983
  /* Notion-style callout box for AI suggestions */
2984
  .canvas-page-with-sidebar .notion-callout {
2985
  margin-top: 12px;
2986
- background: rgba(99, 102, 241, 0.06);
2987
  border-radius: 4px;
2988
  padding: 14px 16px;
2989
  display: flex;
@@ -2993,7 +2992,7 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
2993
  color: var(--canvas-text);
2994
  }
2995
  .canvas-page-with-sidebar[data-canvas-theme="light"] .notion-callout {
2996
- background: rgba(99, 102, 241, 0.07);
2997
  }
2998
  .canvas-page-with-sidebar .notion-callout > svg {
2999
  color: var(--canvas-accent);
@@ -3438,7 +3437,7 @@ body[data-canvas-theme="light"] .toast-stack .toast {
3438
  box-shadow: 0 18px 48px rgba(20, 30, 50, 0.16);
3439
  }
3440
  .toast-stack .toast.success { border-left: 3px solid #10B981; }
3441
- .toast-stack .toast.critic { border-left: 3px solid #A78BFA; }
3442
  .toast-stack .toast.danger { border-left: 3px solid #DC2626; }
3443
  @keyframes canvas-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
3444
 
 
28
  .canvas-main-area, .canvas-main-area.sidebar-collapsed { margin-left: 0; }
29
  }
30
 
31
+ /* LaunchPad Canvas — teal/emerald palette matched to app theme */
 
32
  .canvas-page-with-sidebar {
33
+ --canvas-bg: #0F1C1A;
34
+ --canvas-bg-2: #0B1614;
35
+ --canvas-surface: #152422;
36
+ --canvas-surface-2: #1E3330;
37
+ --canvas-surface-3: #2A4540;
38
+ --canvas-border: #2A4540;
39
+ --canvas-border-2: #3A5C55;
40
+ --canvas-text: #F0FDFA;
41
+ --canvas-text-2: #B6D9D2;
42
+ --canvas-text-3: #7BA89F;
43
+ --canvas-text-4: #5A857C;
44
+ --canvas-accent: #2DD4BF;
45
+ --canvas-accent-dim: #0F766E;
46
+ --canvas-accent-glow: rgba(45, 212, 191, 0.22);
47
+ --canvas-critic: #34D399;
48
+ --canvas-critic-dim: #059669;
49
+ --canvas-critic-glow: rgba(52, 211, 153, 0.20);
50
  --canvas-warn: #F59E0B;
51
  --canvas-danger: #DC2626;
52
  --canvas-ok: #10B981;
 
63
  -webkit-font-smoothing: antialiased;
64
  }
65
 
66
+ /* Light theme — soft mint surfaces + brand teal accents */
67
  .canvas-page-with-sidebar[data-canvas-theme="light"] {
68
+ --canvas-bg: #F0FDFA;
69
  --canvas-bg-2: #FFFFFF;
70
  --canvas-surface: #FFFFFF;
71
+ --canvas-surface-2: #E6F7F3;
72
+ --canvas-surface-3: #D1E7E3;
73
+ --canvas-border: #D1E7E3;
74
+ --canvas-border-2: #A7D4CC;
75
+ --canvas-text: #0F172A;
76
+ --canvas-text-2: #134E4A;
77
+ --canvas-text-3: #475569;
78
+ --canvas-text-4: #64748B;
79
+ --canvas-accent: #0F766E;
80
+ --canvas-accent-dim: #CCFBF1;
81
+ --canvas-accent-glow: rgba(15, 118, 110, 0.14);
82
+ --canvas-critic: #047857;
83
+ --canvas-critic-glow: rgba(4, 120, 87, 0.12);
84
+ --canvas-shadow: 0 4px 14px rgba(15, 118, 110, 0.08);
85
+ --canvas-shadow-lg: 0 18px 48px rgba(15, 118, 110, 0.14);
86
  }
87
 
88
  .canvas-page-with-sidebar *, .canvas-modal-backdrop *, .toast-stack * { box-sizing: border-box; }
 
460
  padding: 10px 14px;
461
  margin-bottom: 14px;
462
  background: var(--canvas-accent-glow);
463
+ border: 1px solid rgba(15, 118, 110, 0.18);
464
  border-radius: 8px;
465
  flex-wrap: wrap;
466
  }
 
858
  animation: canvas-view-in 180ms var(--canvas-ease);
859
  }
860
  .canvas-page-with-sidebar[data-canvas-theme="light"] .insight-detail {
861
+ background: rgba(15, 118, 110, 0.04);
862
  }
863
  .canvas-page-with-sidebar .insight-detail-head {
864
  font-size: 10.5px;
 
1006
  border-color: rgba(15, 15, 15, 0.08);
1007
  }
1008
  .canvas-page-with-sidebar .widget.critic { border-color: rgba(167, 139, 250, 0.18); }
1009
+ .canvas-page-with-sidebar[data-canvas-theme="light"] .widget.critic { border-color: rgba(4, 120, 87, 0.18); }
1010
  .canvas-page-with-sidebar .widget.critic:hover { border-color: var(--canvas-critic); }
1011
 
1012
  /* Preserve 3-S / 2-M / 1-L per row at every desktop width.
 
1222
  animation: canvas-fade-in .15s ease;
1223
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
1224
 
1225
+ --canvas-bg: #0F1C1A;
1226
+ --canvas-bg-2: #0B1614;
1227
+ --canvas-surface: #152422;
1228
+ --canvas-surface-2: #1E3330;
1229
+ --canvas-surface-3: #2A4540;
1230
+ --canvas-border: #2A4540;
1231
+ --canvas-border-2: #3A5C55;
1232
+ --canvas-text: #F0FDFA;
1233
+ --canvas-text-2: #B6D9D2;
1234
+ --canvas-text-3: #7BA89F;
1235
+ --canvas-text-4: #5A857C;
1236
+ --canvas-accent: #2DD4BF;
1237
+ --canvas-accent-dim: #0F766E;
1238
+ --canvas-accent-glow: rgba(45, 212, 191, 0.22);
1239
+ --canvas-critic: #34D399;
1240
+ --canvas-critic-glow: rgba(52, 211, 153, 0.20);
1241
  --canvas-warn: #F59E0B;
1242
  --canvas-danger: #DC2626;
1243
  --canvas-ok: #10B981;
 
1246
  color: var(--canvas-text);
1247
  }
1248
  body[data-canvas-theme="light"] .canvas-modal-backdrop {
1249
+ background: rgba(15, 28, 26, 0.35);
1250
+ --canvas-bg: #F0FDFA;
1251
  --canvas-bg-2: #FFFFFF;
1252
  --canvas-surface: #FFFFFF;
1253
+ --canvas-surface-2: #E6F7F3;
1254
+ --canvas-surface-3: #D1E7E3;
1255
+ --canvas-border: #D1E7E3;
1256
+ --canvas-border-2: #A7D4CC;
1257
+ --canvas-text: #0F172A;
1258
+ --canvas-text-2: #134E4A;
1259
+ --canvas-text-3: #475569;
1260
+ --canvas-text-4: #64748B;
1261
+ --canvas-accent: #0F766E;
1262
+ --canvas-accent-dim: #CCFBF1;
1263
+ --canvas-accent-glow: rgba(15, 118, 110, 0.14);
1264
+ --canvas-critic: #047857;
1265
+ --canvas-critic-glow: rgba(4, 120, 87, 0.12);
1266
+ --canvas-shadow-lg: 0 18px 48px rgba(15, 118, 110, 0.14);
1267
  }
1268
  @keyframes canvas-fade-in { from { opacity: 0 } to { opacity: 1 } }
1269
 
 
2144
  border-radius: 6px;
2145
  margin-bottom: 4px;
2146
  }
2147
+ .canvas-sidebar-menu .csm-project.active { background: rgba(15, 118, 110, 0.08); }
2148
+ .dark .canvas-sidebar-menu .csm-project.active { background: rgba(45, 212, 191, 0.12); }
2149
  .canvas-sidebar-menu .csm-project-head {
2150
  display: flex;
2151
  align-items: center;
 
2164
  .canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary, #f3f4f6); }
2165
  .dark .canvas-sidebar-menu .csm-project-head { color: var(--text-primary-dark, #f9fafb); }
2166
  .dark .canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary-dark, #374151); }
2167
+ .canvas-sidebar-menu .csm-project.active .csm-project-name { color: var(--accent-primary, #0F766E); font-weight: 600; }
2168
  .canvas-sidebar-menu .csm-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2169
  .canvas-sidebar-menu .csm-versions {
2170
  display: inline-flex;
 
2206
  }
2207
  .dark .canvas-sidebar-menu .csm-row { color: var(--text-secondary-dark, #9ca3af); }
2208
  .dark .canvas-sidebar-menu .csm-row:hover { background: var(--bg-secondary-dark, #374151); color: var(--text-primary-dark, #f9fafb); }
2209
+ .canvas-sidebar-menu .csm-row.critic { color: #047857; }
2210
+ .dark .canvas-sidebar-menu .csm-row.critic { color: #34D399; }
2211
  .canvas-sidebar-menu .csm-row-bullet {
2212
  width: 4px;
2213
  height: 4px;
 
2595
  padding: 4px 14px;
2596
  color: var(--canvas-text-2);
2597
  margin-left: 0;
2598
+ background: rgba(15, 118, 110, 0.04);
2599
  border-radius: 0 4px 4px 0;
2600
  }
2601
  .canvas-page-with-sidebar .rich-rendered code {
 
2982
  /* Notion-style callout box for AI suggestions */
2983
  .canvas-page-with-sidebar .notion-callout {
2984
  margin-top: 12px;
2985
+ background: rgba(15, 118, 110, 0.06);
2986
  border-radius: 4px;
2987
  padding: 14px 16px;
2988
  display: flex;
 
2992
  color: var(--canvas-text);
2993
  }
2994
  .canvas-page-with-sidebar[data-canvas-theme="light"] .notion-callout {
2995
+ background: rgba(15, 118, 110, 0.07);
2996
  }
2997
  .canvas-page-with-sidebar .notion-callout > svg {
2998
  color: var(--canvas-accent);
 
3437
  box-shadow: 0 18px 48px rgba(20, 30, 50, 0.16);
3438
  }
3439
  .toast-stack .toast.success { border-left: 3px solid #10B981; }
3440
+ .toast-stack .toast.critic { border-left: 3px solid #34D399; }
3441
  .toast-stack .toast.danger { border-left: 3px solid #DC2626; }
3442
  @keyframes canvas-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
3443
 
phd-advisor-frontend/src/styles/ChatPage.css CHANGED
@@ -16,23 +16,29 @@
16
  .guest-mode-banner {
17
  flex-shrink: 0;
18
  padding: 8px 16px;
19
- background: #ccfbf1;
20
- color: #115e59;
21
  font-size: 0.875rem;
22
  text-align: center;
23
- border-bottom: 1px solid #99f6e4;
24
  }
25
 
26
  .guest-mode-banner button {
27
  background: none;
28
  border: none;
29
- color: #0f766e;
30
  font-weight: 700;
31
  text-decoration: underline;
32
  cursor: pointer;
33
  padding: 0;
34
  }
35
 
 
 
 
 
 
 
36
  /* Floating Header */
37
  .floating-header {
38
  position: sticky;
@@ -76,7 +82,7 @@
76
  background: var(--accent-primary);
77
  color: white;
78
  transform: translateY(-2px);
79
- box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
80
  }
81
 
82
  .header-brand {
@@ -489,7 +495,7 @@
489
  border-radius: 20px;
490
  font-size: 14px;
491
  font-weight: 500;
492
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
493
  text-align: center;
494
  max-width: 400px;
495
  }
 
16
  .guest-mode-banner {
17
  flex-shrink: 0;
18
  padding: 8px 16px;
19
+ background: var(--accent-soft, #ccfbf1);
20
+ color: var(--text-accent, #115e59);
21
  font-size: 0.875rem;
22
  text-align: center;
23
+ border-bottom: 1px solid var(--accent-muted, #99f6e4);
24
  }
25
 
26
  .guest-mode-banner button {
27
  background: none;
28
  border: none;
29
+ color: var(--accent-primary, #0f766e);
30
  font-weight: 700;
31
  text-decoration: underline;
32
  cursor: pointer;
33
  padding: 0;
34
  }
35
 
36
+ [data-theme="dark"] .guest-mode-banner {
37
+ background: var(--accent-soft);
38
+ color: var(--text-accent);
39
+ border-bottom-color: var(--border-primary);
40
+ }
41
+
42
  /* Floating Header */
43
  .floating-header {
44
  position: sticky;
 
82
  background: var(--accent-primary);
83
  color: white;
84
  transform: translateY(-2px);
85
+ box-shadow: 0 8px 20px rgba(15, 118, 110, 0.3);
86
  }
87
 
88
  .header-brand {
 
495
  border-radius: 20px;
496
  font-size: 14px;
497
  font-weight: 500;
498
+ box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
499
  text-align: center;
500
  max-width: 400px;
501
  }
phd-advisor-frontend/src/styles/ConfirmDialog.css CHANGED
@@ -107,13 +107,13 @@
107
  }
108
 
109
  .confirm-btn-primary {
110
- background: var(--accent-primary, #2663eb);
111
  color: #ffffff;
112
  }
113
 
114
  .confirm-btn-primary:hover {
115
- background: var(--accent-secondary, #1d4fc4);
116
- box-shadow: 0 4px 12px -2px rgba(38, 99, 235, 0.45);
117
  }
118
 
119
  .confirm-btn-danger {
 
107
  }
108
 
109
  .confirm-btn-primary {
110
+ background: var(--accent-primary, #0F766E);
111
  color: #ffffff;
112
  }
113
 
114
  .confirm-btn-primary:hover {
115
+ background: var(--accent-secondary, #047857);
116
+ box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.35);
117
  }
118
 
119
  .confirm-btn-danger {
phd-advisor-frontend/src/styles/EnhancedChatInput.css CHANGED
@@ -462,7 +462,7 @@
462
  }
463
 
464
  /* [data-theme="dark"] .upload-notification-content {
465
- box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
466
  } */
467
 
468
  .notification-close-btn {
 
462
  }
463
 
464
  /* [data-theme="dark"] .upload-notification-content {
465
+ box-shadow: 0 4px 16px rgba(15, 118, 110, 0.25);
466
  } */
467
 
468
  .notification-close-btn {
phd-advisor-frontend/src/styles/FileUpload.css CHANGED
@@ -87,25 +87,25 @@
87
  }
88
 
89
  .file-upload-area:hover:not(.uploading) {
90
- border-color: #3B82F6;
91
- background-color: #EFF6FF;
92
  transform: translateY(-1px);
93
  }
94
 
95
  [data-theme="dark"] .file-upload-area:hover:not(.uploading) {
96
- border-color: #60A5FA;
97
- background-color: #1E3A8A;
98
  }
99
 
100
  .file-upload-area.drag-active {
101
- border-color: #3B82F6;
102
- background-color: #EFF6FF;
103
  transform: scale(1.02);
104
  }
105
 
106
  [data-theme="dark"] .file-upload-area.drag-active {
107
- border-color: #60A5FA;
108
- background-color: #1E3A8A;
109
  }
110
 
111
  .file-upload-area.uploading {
 
87
  }
88
 
89
  .file-upload-area:hover:not(.uploading) {
90
+ border-color: var(--accent-primary, #0F766E);
91
+ background-color: var(--accent-soft, #F0FDFA);
92
  transform: translateY(-1px);
93
  }
94
 
95
  [data-theme="dark"] .file-upload-area:hover:not(.uploading) {
96
+ border-color: var(--accent-primary, #2DD4BF);
97
+ background-color: var(--feature-bg, #1E3330);
98
  }
99
 
100
  .file-upload-area.drag-active {
101
+ border-color: var(--accent-primary, #0F766E);
102
+ background-color: var(--accent-soft, #F0FDFA);
103
  transform: scale(1.02);
104
  }
105
 
106
  [data-theme="dark"] .file-upload-area.drag-active {
107
+ border-color: var(--accent-primary, #2DD4BF);
108
+ background-color: var(--feature-bg, #1E3330);
109
  }
110
 
111
  .file-upload-area.uploading {
phd-advisor-frontend/src/styles/Login.css CHANGED
@@ -99,18 +99,18 @@
99
  align-items: center;
100
  justify-content: center;
101
  gap: 8px;
102
- border: 2px solid #0f766e;
103
  border-radius: 12px;
104
  padding: 12px 16px;
105
- background: #ccfbf1;
106
- color: #0f766e;
107
  font-weight: 700;
108
  cursor: pointer;
109
  margin-bottom: 8px;
110
  }
111
 
112
  .guest-continue-btn:hover:not(:disabled) {
113
- background: #99f6e4;
114
  }
115
 
116
  .guest-continue-btn:disabled {
 
99
  align-items: center;
100
  justify-content: center;
101
  gap: 8px;
102
+ border: 2px solid var(--accent-primary, #0f766e);
103
  border-radius: 12px;
104
  padding: 12px 16px;
105
+ background: var(--accent-soft, #ccfbf1);
106
+ color: var(--accent-primary, #0f766e);
107
  font-weight: 700;
108
  cursor: pointer;
109
  margin-bottom: 8px;
110
  }
111
 
112
  .guest-continue-btn:hover:not(:disabled) {
113
+ background: var(--accent-muted, #99f6e4);
114
  }
115
 
116
  .guest-continue-btn:disabled {
phd-advisor-frontend/src/styles/Sidebar.css CHANGED
@@ -361,14 +361,14 @@
361
  flex-shrink: 0;
362
  border: none;
363
  border-radius: 8px;
364
- background: #2663EB;
365
  color: #fff;
366
  cursor: pointer;
367
  transition: background 0.15s ease, transform 0.15s ease;
368
  }
369
 
370
  .new-chat-icon-btn:hover {
371
- background: #1d4fc4;
372
  transform: translateY(-1px);
373
  }
374
 
@@ -806,7 +806,7 @@
806
  margin-top: 14px;
807
  margin-bottom: 8px;
808
  box-shadow:
809
- 0 0 32px -10px rgba(99, 102, 241, 0.45),
810
  0 4px 14px -4px rgba(89, 87, 232, 0.45),
811
  inset 0 1px 0 rgba(255, 255, 255, 0.18);
812
  transition:
 
361
  flex-shrink: 0;
362
  border: none;
363
  border-radius: 8px;
364
+ background: var(--accent-primary, #0F766E);
365
  color: #fff;
366
  cursor: pointer;
367
  transition: background 0.15s ease, transform 0.15s ease;
368
  }
369
 
370
  .new-chat-icon-btn:hover {
371
+ background: var(--accent-secondary, #047857);
372
  transform: translateY(-1px);
373
  }
374
 
 
806
  margin-top: 14px;
807
  margin-bottom: 8px;
808
  box-shadow:
809
+ 0 0 32px -10px rgba(15, 118, 110, 0.45),
810
  0 4px 14px -4px rgba(89, 87, 232, 0.45),
811
  inset 0 1px 0 rgba(255, 255, 255, 0.18);
812
  transition:
phd-advisor-frontend/src/styles/components.css CHANGED
@@ -1,36 +1,44 @@
1
- /* CSS Custom Properties for Theming */
 
2
  :root[data-theme="light"] {
3
  /* Background Colors */
4
  --bg-primary: #FFFFFF;
5
- --bg-secondary: #F9FAFB;
6
- --bg-tertiary: #F3F4F6;
7
- --bg-gradient: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F3E8FF 100%);
8
 
9
  /* Text Colors */
10
- --text-primary: #111827;
11
- --text-secondary: #6B7280;
12
- --text-tertiary: #9CA3AF;
13
- --text-accent: #374151;
14
 
15
  /* Border Colors */
16
- --border-primary: #E5E7EB;
17
- --border-secondary: #D1D5DB;
18
- --border-tertiary: #F3F4F6;
19
 
20
- /* Accent Colors */
21
- --accent-primary: #6366F1;
22
- --accent-secondary: #8B5CF6;
23
- --accent-gradient: linear-gradient(135deg, #6366F1, #8B5CF6);
 
 
24
 
25
  /* Shadow Colors */
26
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
27
- --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
28
- --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
29
- --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
30
 
31
  /* Feature Colors */
32
- --feature-bg: #EFF6FF;
33
- --feature-icon-color: #6366F1;
 
 
 
 
 
34
 
35
  /* Error Colors */
36
  --error-bg: #FEF2F2;
@@ -39,48 +47,55 @@
39
 
40
  /* Input Colors */
41
  --input-bg: #FFFFFF;
42
- --input-border: #D1D5DB;
43
- --input-focus: #6366F1;
44
- --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
45
 
46
  /* App header (floating bar) */
47
- --header-bg: #EBF5FF;
48
- --header-border: rgba(59, 130, 246, 0.2);
49
- --header-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
50
  }
51
 
52
  :root[data-theme="dark"] {
53
- /* Background Colors */
54
- --bg-primary: #1F2937;
55
- --bg-secondary: #111827;
56
- --bg-tertiary: #374151;
57
- --bg-gradient: linear-gradient(135deg, #1F2937 0%, #111827 50%, #374151 100%);
58
 
59
  /* Text Colors */
60
- --text-primary: #F9FAFB;
61
- --text-secondary: #D1D5DB;
62
- --text-tertiary: #9CA3AF;
63
- --text-accent: #E5E7EB;
64
 
65
  /* Border Colors */
66
- --border-primary: #374151;
67
- --border-secondary: #4B5563;
68
- --border-tertiary: #6B7280;
69
 
70
- /* Accent Colors */
71
- --accent-primary: #818CF8;
72
- --accent-secondary: #A78BFA;
73
- --accent-gradient: linear-gradient(135deg, #818CF8, #A78BFA);
 
 
74
 
75
  /* Shadow Colors */
76
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
77
- --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
78
- --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
79
- --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
80
 
81
  /* Feature Colors */
82
- --feature-bg: #374151;
83
- --feature-icon-color: #818CF8;
 
 
 
 
 
84
 
85
  /* Error Colors */
86
  --error-bg: #7F1D1D;
@@ -88,14 +103,14 @@
88
  --error-text: #FCA5A5;
89
 
90
  /* Input Colors */
91
- --input-bg: #374151;
92
- --input-border: #4B5563;
93
- --input-focus: #818CF8;
94
- --input-focus-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
95
 
96
  /* App header (floating bar) */
97
- --header-bg: rgba(23, 37, 64, 0.97);
98
- --header-border: rgba(96, 165, 250, 0.18);
99
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
100
  }
101
 
@@ -308,12 +323,12 @@
308
  .cta-button-secondary {
309
  background: transparent;
310
  color: var(--text-primary, #0f172a);
311
- border: 2px solid #0f766e;
312
  box-shadow: none;
313
  }
314
 
315
  .cta-button-secondary:hover {
316
- background: #ccfbf1;
317
  }
318
 
319
  .cta-button:hover {
 
1
+ /* CSS Custom Properties for Theming
2
+ LaunchPad green: calm teal brand (#0F766E) with soft mint surfaces */
3
  :root[data-theme="light"] {
4
  /* Background Colors */
5
  --bg-primary: #FFFFFF;
6
+ --bg-secondary: #F0FDFA;
7
+ --bg-tertiary: #E6F7F3;
8
+ --bg-gradient: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 48%, #F0FDFA 100%);
9
 
10
  /* Text Colors */
11
+ --text-primary: #0F172A;
12
+ --text-secondary: #475569;
13
+ --text-tertiary: #64748B;
14
+ --text-accent: #134E4A;
15
 
16
  /* Border Colors */
17
+ --border-primary: #D1E7E3;
18
+ --border-secondary: #A7D4CC;
19
+ --border-tertiary: #E6F7F3;
20
 
21
+ /* Accent Colors — brand teal + deeper emerald companion */
22
+ --accent-primary: #0F766E;
23
+ --accent-secondary: #047857;
24
+ --accent-gradient: linear-gradient(135deg, #0F766E, #059669);
25
+ --accent-soft: #CCFBF1;
26
+ --accent-muted: #99F6E4;
27
 
28
  /* Shadow Colors */
29
+ --shadow-sm: 0 1px 3px rgba(15, 118, 110, 0.08);
30
+ --shadow-md: 0 10px 15px -3px rgba(15, 118, 110, 0.10);
31
+ --shadow-lg: 0 20px 25px -5px rgba(15, 118, 110, 0.12);
32
+ --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.22);
33
 
34
  /* Feature Colors */
35
+ --feature-bg: #F0FDFA;
36
+ --feature-icon-color: #0F766E;
37
+
38
+ /* Success / status */
39
+ --success: #059669;
40
+ --success-bg: #ECFDF5;
41
+ --success-border: #A7F3D0;
42
 
43
  /* Error Colors */
44
  --error-bg: #FEF2F2;
 
47
 
48
  /* Input Colors */
49
  --input-bg: #FFFFFF;
50
+ --input-border: #B6D9D2;
51
+ --input-focus: #0F766E;
52
+ --input-focus-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
53
 
54
  /* App header (floating bar) */
55
+ --header-bg: #F0FDFA;
56
+ --header-border: rgba(15, 118, 110, 0.18);
57
+ --header-shadow: 0 4px 20px rgba(15, 118, 110, 0.10);
58
  }
59
 
60
  :root[data-theme="dark"] {
61
+ /* Background Colors — soft green-tinted dark, not harsh black */
62
+ --bg-primary: #152422;
63
+ --bg-secondary: #0F1C1A;
64
+ --bg-tertiary: #1E3330;
65
+ --bg-gradient: linear-gradient(135deg, #0F1C1A 0%, #152422 50%, #1A2E2B 100%);
66
 
67
  /* Text Colors */
68
+ --text-primary: #F0FDFA;
69
+ --text-secondary: #B6D9D2;
70
+ --text-tertiary: #7BA89F;
71
+ --text-accent: #CCFBF1;
72
 
73
  /* Border Colors */
74
+ --border-primary: #2A4540;
75
+ --border-secondary: #3A5C55;
76
+ --border-tertiary: #4A6E66;
77
 
78
+ /* Accent Colors — lighter teal for contrast on dark */
79
+ --accent-primary: #2DD4BF;
80
+ --accent-secondary: #34D399;
81
+ --accent-gradient: linear-gradient(135deg, #14B8A6, #10B981);
82
+ --accent-soft: rgba(45, 212, 191, 0.14);
83
+ --accent-muted: rgba(45, 212, 191, 0.28);
84
 
85
  /* Shadow Colors */
86
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
87
+ --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
88
+ --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
89
+ --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
90
 
91
  /* Feature Colors */
92
+ --feature-bg: #1E3330;
93
+ --feature-icon-color: #5EEAD4;
94
+
95
+ /* Success / status */
96
+ --success: #34D399;
97
+ --success-bg: rgba(16, 185, 129, 0.15);
98
+ --success-border: rgba(52, 211, 153, 0.35);
99
 
100
  /* Error Colors */
101
  --error-bg: #7F1D1D;
 
103
  --error-text: #FCA5A5;
104
 
105
  /* Input Colors */
106
+ --input-bg: #1E3330;
107
+ --input-border: #3A5C55;
108
+ --input-focus: #2DD4BF;
109
+ --input-focus-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
110
 
111
  /* App header (floating bar) */
112
+ --header-bg: rgba(15, 28, 26, 0.97);
113
+ --header-border: rgba(45, 212, 191, 0.18);
114
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
115
  }
116
 
 
323
  .cta-button-secondary {
324
  background: transparent;
325
  color: var(--text-primary, #0f172a);
326
+ border: 2px solid var(--accent-primary, #0f766e);
327
  box-shadow: none;
328
  }
329
 
330
  .cta-button-secondary:hover {
331
+ background: var(--accent-soft, #ccfbf1);
332
  }
333
 
334
  .cta-button:hover {