hahachait/padhle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign UI to match EduAI Refined Workspace

Browse Source 
- Replace Bauhaus aesthetic with Material Design 3-inspired layout
- Add working grade/subject/chapter dropdown selectors with placeholder options
- Fix ChatInput layout: remove position:absolute, use flex column flow
- Update sidebar with Material Icons, upgrade card, and clean hover states
- Add TopNav dropdowns with click-outside-to-close behavior
- Modernize message bubbles, action buttons, and welcome state
- Replace SVG icons with Material Symbols throughout
- Apply consistent BEM naming, CSS custom properties, no inline styles
This commit is contained in:
hahachait
2026-08-15 04:40:26 -04:00
parent e0ae1f91c1
commit ab88ae30f1
15 changed files with 1205 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+5 -1
View File
@@ -3,13 +3,17 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padhLe — Learn Smarter</title> <title>padhle — Workspace</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&family=Material+Symbols+Rounded:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/src/App.jsx
+19 -28
View File
@@ -1,9 +1,8 @@
/* ======================================== /* ========================================
App Component — padhLe App Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import { useState } from "react"; import { useState } from "react";
import "./styles/App.css";
import Sidebar from "./components/sidebar/Sidebar"; import Sidebar from "./components/sidebar/Sidebar";
import TopNav from "./components/top-nav/TopNav"; import TopNav from "./components/top-nav/TopNav";
import ChatHistory from "./components/chat-history/ChatHistory"; import ChatHistory from "./components/chat-history/ChatHistory";
@@ -11,19 +10,16 @@ import ChatInput from "./components/chat-input/ChatInput";
function App() { function App() {
const [messages, setMessages] = useState([]); const [messages, setMessages] = useState([]);
const [activeSubject, setActiveSubject] = useState("science"); const [activeSubject, setActiveSubject] = useState("Choose Subject");
const [activeChat, setActiveChat] = useState(null); const [activeChat, setActiveChat] = useState(null);
const [activeTab, setActiveTab] = useState("chat"); const [activeGrade, setActiveGrade] = useState("Choose standard");
const [greetingDismissed, setGreetingDismissed] = useState(false); const [activeChapter, setActiveChapter] = useState("Choose Chapter");
const handleSend = (text) => { const handleSend = (text) => {
if (!text.trim()) return; if (!text.trim()) return;
// Add user message
setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]); setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]);
// TODO: Send to backend and get AI response
// Simulating AI response for now
setTimeout(() => { setTimeout(() => {
setMessages((prev) => [ setMessages((prev) => [
...prev, ...prev,
@@ -42,7 +38,6 @@ function App() {
return ( return (
<div className="page"> <div className="page">
{/* Left Sidebar — brand, subjects, chat history, settings */}
<Sidebar <Sidebar
activeSubject={activeSubject} activeSubject={activeSubject}
onSubjectChange={setActiveSubject} onSubjectChange={setActiveSubject}
@@ -51,33 +46,29 @@ function App() {
/> />
<div className="page__main"> <div className="page__main">
{/* Top Navigation — tabs + actions */} <TopNav
<TopNav activeTab={activeTab} onTabChange={setActiveTab} /> activeGrade={activeGrade}
onGradeChange={setActiveGrade}
activeSubject={activeSubject}
onSubjectChange={setActiveSubject}
activeChapter={activeChapter}
onChapterChange={setActiveChapter}
/>
{/* Chat Area */}
<div className="main-content"> <div className="main-content">
{!greetingDismissed && messages.length === 0 && (
<div className="greeting-banner">
<h2 className="greeting-banner__title">Welcome to padhLe 📚</h2>
<p className="greeting-banner__tagline">Let's make today a great day for learning.</p>
<button
className="greeting-banner__dismiss"
onClick={() => setGreetingDismissed(true)}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
)}
<ChatHistory <ChatHistory
messages={messages} messages={messages}
activeSubject={activeSubject}
activeGrade={activeGrade}
activeChapter={activeChapter}
onPromptClick={handlePromptClick} onPromptClick={handlePromptClick}
/> />
</div> </div>
{/* Input Bar */} <ChatInput
<ChatInput onSend={handleSend} /> onSend={handleSend}
placeholder={`Ask anything about ${activeGrade} ${activeSubject} – ${activeChapter}...`}
/>
</div> </div>
</div> </div>
); );
frontend/src/components/chat-history/ChatHistory.css
+199 -86
View File
@@ -1,99 +1,212 @@
/* ======================================== /* ========================================
ChatHistory Component — padhLe (Bauhaus) ChatHistory Component — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Main Chat History */
.chat-history { .chat-history {
flex: 1; flex: 1;
padding: var(--spacing-lg) 0;
overflow-y: auto; overflow-y: auto;
background-color: var(--color-background);
} }
/* Focus Column — centered content area */
.chat-history__focus {
max-width: var(--container-max);
margin: 0 auto;
padding: 48px 24px 128px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
/* Welcome Header */
.chat-history__welcome {
text-align: center;
margin-bottom: 48px;
}
.chat-history__welcome-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 16px;
color: var(--color-primary);
}
.chat-history__welcome-icon .material-symbols-outlined {
font-size: 48px;
line-height: 1;
}
.chat-history__welcome-sparkle {
position: absolute;
top: -4px;
right: -16px;
font-size: 20px;
color: var(--color-primary);
font-weight: 700;
}
.chat-history__welcome-title {
font-family: var(--font-heading);
font-size: var(--font-size-display-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
letter-spacing: -0.02em;
line-height: var(--line-height-tight);
margin-bottom: 12px;
}
.chat-history__welcome-subtitle {
font-size: var(--font-size-body-md);
color: var(--color-on-surface-variant);
max-width: 440px;
margin: 0 auto;
line-height: var(--line-height-relaxed);
}
/* Bento Grid */
.chat-history__bento {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.chat-history__bento {
grid-template-columns: repeat(4, 1fr);
}
}
/* Bento Card */
.chat-history__bento-card {
position: relative;
text-align: left;
padding: 20px;
border: var(--border-thin);
border-radius: var(--radius-xl);
background-color: var(--color-surface-lowest);
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
display: flex;
flex-direction: column;
min-height: 120px;
overflow: hidden;
}
.chat-history__bento-card:hover {
border-color: var(--color-outline);
box-shadow: var(--shadow-card-hover);
}
.chat-history__bento-icon-wrap {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.chat-history__bento-icon-wrap .material-symbols-outlined {
font-size: 20px;
line-height: 1;
}
.chat-history__bento-text {
flex: 1;
font-size: 14px;
line-height: 1.625;
color: var(--color-on-surface);
margin-bottom: 16px;
}
.chat-history__bento-text-main {
color: var(--color-on-surface);
}
.chat-history__bento-text-highlight {
font-weight: 600;
}
.chat-history__bento-arrow {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 20px;
line-height: 1;
color: var(--color-on-surface-variant);
opacity: 0.5;
transition: color var(--transition-fast), opacity var(--transition-fast);
}
.chat-history__bento-card:hover .chat-history__bento-arrow {
color: var(--color-primary);
opacity: 1;
}
/* Info Panel */
.chat-history__info {
width: 100%;
border: var(--border-thin);
border-radius: var(--radius-xl);
padding: 24px;
display: flex;
align-items: flex-start;
gap: 16px;
background-color: var(--color-surface-lowest);
position: relative;
overflow: hidden;
}
.chat-history__info-icon-wrap {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-surface-low);
display: flex;
align-items: center;
justify-content: center;
border: var(--border-thin);
border-color: rgba(0, 0, 0, 0.05);
flex-shrink: 0;
}
.chat-history__info-icon-wrap .material-symbols-outlined {
font-size: 22px;
line-height: 1;
color: var(--color-on-surface);
}
.chat-history__info-content {
flex: 1;
}
.chat-history__info-title {
font-size: 15px;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: 4px;
}
.chat-history__info-text {
font-size: 14px;
line-height: 1.4;
color: var(--color-on-surface-variant);
}
/* Message List */
.chat-history__list { .chat-history__list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-xl); gap: 24px;
padding-bottom: var(--spacing-xl); padding: 24px 0;
}
/* Empty / Welcome State */
.chat-history__empty {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
text-align: center;
padding: var(--spacing-2xl);
}
.chat-history__empty-content {
max-width: 600px;
width: 100%; width: 100%;
} max-width: var(--container-max);
margin: 0 auto;
.chat-history__empty-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-primary);
margin-bottom: var(--spacing-xs);
}
.chat-history__empty-tagline {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-variant);
margin-bottom: var(--spacing-2xl);
}
/* Suggested Prompts */
.chat-history__prompts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
.chat-history__prompt {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md);
border: var(--border-thick);
border-radius: var(--border-radius);
background-color: var(--color-surface);
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 700;
line-height: 1.5;
color: var(--color-text);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast);
}
.chat-history__prompt:hover {
background-color: var(--color-surface-container);
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
}
.chat-history__prompt:active {
transform: translateY(2px);
box-shadow: none;
}
.chat-history__prompt-icon {
font-size: 1.25rem;
flex-shrink: 0;
margin-top: 2px;
}
.chat-history__prompt-text {
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 700;
} }
frontend/src/components/chat-history/ChatHistory.jsx
+106 -28
View File
@@ -1,53 +1,131 @@
/* ======================================== /* ========================================
ChatHistory Component — padhLe ChatHistory Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import Message from "../message/Message"; import Message from "../message/Message";
import "./ChatHistory.css"; import "./ChatHistory.css";
const ChatHistory = ({ messages, onPromptClick }) => { const ChatHistory = ({ messages, activeSubject, activeGrade, activeChapter, onPromptClick }) => {
const suggestedPrompts = [
{ icon: "🧪", text: "Explain how photosynthesis works in simple terms" },
{ icon: "📐", text: "Help me understand derivatives in calculus" },
{ icon: "🏛️", text: "What caused the Industrial Revolution?" },
{ icon: "📝", text: "Help me analyze themes in Romeo and Juliet" },
];
const hasMessages = messages.length > 0; const hasMessages = messages.length > 0;
const suggestions = [
{
id: 1,
icon: "eco",
iconFilled: true,
color: "--color-accent-green",
colorBg: "--color-accent-green-bg",
keywords: ["photosynthesis"],
text: "Explain how ",
textEnd: " works in simple terms",
},
{
id: 2,
icon: "calculate",
iconFilled: false,
color: "--color-accent-blue",
colorBg: "--color-accent-blue-bg",
keywords: ["derivatives"],
text: "Help me understand ",
textEnd: " in calculus",
},
{
id: 3,
icon: "account_balance",
iconFilled: false,
color: "--color-accent-orange",
colorBg: "--color-accent-orange-bg",
keywords: ["Industrial"],
text: "What caused the ",
textEnd: " Revolution?",
},
{
id: 4,
icon: "edit",
iconFilled: true,
color: "--color-accent-purple",
colorBg: "--color-accent-purple-bg",
keywords: ["Romeo and Juliet"],
text: "Help me analyze themes in ",
textEnd: "",
},
];
const fullPromptTexts = suggestions.map((s) => s.text + s.keywords.join(" ") + s.textEnd);
if (hasMessages) {
return ( return (
<div className="chat-history"> <div className="chat-history">
{hasMessages ? (
<div className="chat-history__list"> <div className="chat-history__list">
{messages.map((message) => ( {messages.map((message) => (
<Message key={message.id} message={message} /> <Message key={message.id} message={message} />
))} ))}
</div> </div>
) : ( </div>
<div className="chat-history__empty"> );
<div className="chat-history__empty-content"> }
<h2 className="chat-history__empty-title">
Welcome to padhLe
</h2>
<p className="chat-history__empty-tagline">
Your AI tutor for grades 6–12. Ask anything!
</p>
<div className="chat-history__prompts"> return (
{suggestedPrompts.map((prompt, index) => ( <div className="chat-history">
<div className="chat-history__focus">
{/* Welcome Header */}
<div className="chat-history__welcome">
<div className="chat-history__welcome-icon">
<span className="material-symbols-outlined" style={{ fontWeight: 200 }}>menu_book</span>
<span className="material-symbols-outlined chat-history__welcome-sparkle">auto_awesome</span>
</div>
<h2 className="chat-history__welcome-title">Welcome to padhle</h2>
<p className="chat-history__welcome-subtitle">Your AI tutor for grades 6–12. Ask anything!</p>
</div>
{/* Bento Grid Suggestions */}
<div className="chat-history__bento">
{suggestions.map((suggestion) => {
const colorVar = suggestion.color.replace("--", "var(");
const bgColorVar = suggestion.colorBg.replace("--", "var(");
return (
<button <button
key={index} key={suggestion.id}
className="chat-history__prompt" className="chat-history__bento-card"
onClick={() => onPromptClick(prompt.text)} onClick={() => {
const text = fullPromptTexts[suggestion.id - 1];
onPromptClick(text);
}}
> >
<span className="chat-history__prompt-icon">{prompt.icon}</span> <div className="chat-history__bento-icon-wrap" style={{ backgroundColor: `var(${bgColorVar})` }}>
<span className="chat-history__prompt-text">{prompt.text}</span> <span className="material-symbols-outlined" style={{ color: `var(${colorVar})`, fontWeight: suggestion.iconFilled ? 700 : 200 }}>
{suggestion.icon}
</span>
</div>
<div className="chat-history__bento-text">
<span className="chat-history__bento-text-main">{suggestion.text}</span>
<span className="chat-history__bento-text-highlight" style={{ color: `var(${colorVar})`, fontWeight: 600 }}>
{suggestion.keywords[0]}
</span>
{suggestion.textEnd}
</div>
<span className="material-symbols-outlined chat-history__bento-arrow">arrow_forward</span>
</button> </button>
))} );
})}
</div>
{/* Info Panel */}
<div className="chat-history__info">
<div className="chat-history__info-icon-wrap">
<span className="material-symbols-outlined">lightbulb</span>
</div>
<div className="chat-history__info-content">
<h4 className="chat-history__info-title">Focused on your learning</h4>
<p className="chat-history__info-text">
I'll answer questions related to your selected subject and chapter
<br />
using your textbook content.
</p>
</div> </div>
</div> </div>
</div> </div>
)}
</div> </div>
); );
}; };
frontend/src/components/chat-input/ChatInput.css
+126 -106
View File
@@ -1,145 +1,165 @@
/* ======================================== /* ========================================
ChatInput Component — padhLe (Bauhaus) ChatInput Component — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Main Input Bar */
.chat-input { .chat-input {
padding: var(--spacing-md) 0; flex-shrink: 0;
border-top: var(--border-thick); width: 100%;
background-color: var(--color-surface); /* Gradient fade from background */
box-shadow: 0 -4px 0 0px var(--color-outline); background: linear-gradient(to top, var(--color-background) 50%, transparent);
padding-top: 24px;
padding-bottom: 32px;
padding-left: 24px;
padding-right: 24px;
display: flex;
justify-content: center;
} }
.chat-input__wrapper { /* Container — centered content */
max-width: 900px; .chat-input__container {
margin: 0 auto; width: 100%;
padding: var(--spacing-md) var(--spacing-lg); max-width: 800px;
} }
/* Form Container */ /* Form */
.chat-input__form { .chat-input__form {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: var(--spacing-sm); gap: 8px;
border: var(--border-thick); padding: 8px;
border-radius: var(--border-radius); border: var(--border-thin);
padding: var(--spacing-sm); border-radius: 32px;
background-color: var(--color-surface); background-color: var(--color-surface-lowest);
box-shadow: var(--shadow-brutal-sm); box-shadow: var(--shadow-input);
transition: all var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
} }
.chat-input__form:focus-within { .chat-input__form:focus-within {
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15), var(--shadow-brutal-sm);
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: var(--shadow-input-focus);
} }
/* Attachments */ /* Attachment Button */
.chat-input__attachments {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding-bottom: 2px;
}
.chat-input__attach-btn { .chat-input__attach-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 38px; width: 44px;
height: 38px; height: 44px;
border: var(--border-medium); border: var(--border-thin);
border-radius: var(--border-radius); border-radius: 50%;
background: transparent; background-color: var(--color-surface-lowest);
cursor: pointer; cursor: pointer;
color: var(--color-text-variant); color: var(--color-on-surface-variant);
box-shadow: var(--shadow-brutal-sm); transition: background-color var(--transition-fast), color var(--transition-fast);
transition: all var(--transition-fast);
}
.chat-input__attach-btn:hover {
background-color: var(--color-surface-variant);
color: var(--color-text);
transform: translateY(-1px);
}
/* Textarea Field */
.chat-input__field {
flex: 1;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
color: var(--color-text);
background-color: transparent;
border: none;
padding: var(--spacing-sm);
resize: none;
outline: none;
min-height: 24px;
max-height: 200px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.chat-input__field::placeholder {
color: var(--color-text-variant);
opacity: 0.6;
}
/* Send Button */
.chat-input__submit {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: var(--border-medium);
border-radius: var(--border-radius);
background: transparent;
cursor: not-allowed;
color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
opacity: 0.4;
transition: all var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
} }
.chat-input__submit--active { .chat-input__attach-btn:hover {
background-color: var(--color-surface-low);
color: var(--color-primary);
}
.chat-input__attach-btn .material-symbols-outlined {
font-size: 20px;
line-height: 1;
}
/* Textarea */
.chat-input__field {
flex: 1;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--font-weight-regular);
line-height: 1.5;
color: var(--color-primary);
background-color: transparent;
border: none;
padding: 8px 4px;
resize: none;
outline: none;
min-height: 44px;
max-height: 128px;
}
.chat-input__field::placeholder {
color: var(--color-outline);
font-weight: var(--font-weight-regular);
}
/* Actions Container */
.chat-input__actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
/* Mic Button */
.chat-input__mic-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
color: var(--color-on-surface-variant);
transition: background-color var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}
.chat-input__mic-btn:hover {
background-color: var(--color-surface-low);
color: var(--color-primary);
}
.chat-input__mic-btn .material-symbols-outlined {
font-size: 20px;
line-height: 1;
}
/* Send Button */
.chat-input__send-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: transparent;
cursor: not-allowed;
color: var(--color-on-surface-variant);
opacity: 0.3;
transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}
.chat-input__send-btn--active {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
border-color: var(--color-outline);
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
} }
.chat-input__submit--active:hover { .chat-input__send-btn--active:hover {
transform: translateY(-2px); opacity: 0.9;
box-shadow: var(--shadow-brutal);
} }
.chat-input__submit--active:active { .chat-input__send-btn .material-symbols-outlined {
transform: translateY(2px); font-size: 20px;
box-shadow: none; line-height: 1;
} }
/* Disclaimer */ /* Disclaimer */
.chat-input__disclaimer { .chat-input__disclaimer {
font-family: var(--font-heading); font-size: var(--font-size-label-sm);
font-size: 0.65rem; font-weight: var(--font-weight-medium);
font-weight: 800; color: var(--color-on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-variant);
text-align: center;
margin-top: var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-sm);
border: var(--border-medium);
border-radius: var(--border-radius);
display: inline-block;
background-color: var(--color-surface);
box-shadow: var(--shadow-brutal-sm);
}
.chat-input__disclaimer-wrapper {
text-align: center; text-align: center;
margin-top: 12px;
} }
frontend/src/components/chat-input/ChatInput.jsx
+27 -47
View File
@@ -1,11 +1,11 @@
/* ======================================== /* ========================================
ChatInput Component — padhLe ChatInput Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import "./ChatInput.css"; import "./ChatInput.css";
const ChatInput = ({ onSend }) => { const ChatInput = ({ onSend, placeholder }) => {
const [text, setText] = useState(""); const [text, setText] = useState("");
const textareaRef = useRef(null); const textareaRef = useRef(null);
@@ -38,81 +38,61 @@ const ChatInput = ({ onSend }) => {
return ( return (
<div className="chat-input"> <div className="chat-input">
<div className="chat-input__wrapper"> <div className="chat-input__container">
<form className="chat-input__form" onSubmit={handleSubmit}> <form className="chat-input__form" onSubmit={handleSubmit}>
{/* Attachment buttons */} {/* Attachment */}
<div className="chat-input__attachments">
<button <button
type="button" type="button"
className="chat-input__attach-btn" className="chat-input__attach-btn"
aria-label="Add photo" aria-label="Attach file"
title="Add photo" title="Attach file"
> >
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined">attach_file</span>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M21 15l-5-5L5 21" />
</svg>
</button> </button>
<button
type="button"
className="chat-input__attach-btn"
aria-label="Voice input"
title="Voice input"
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
<line x1="12" y1="19" x2="12" y2="23" />
<line x1="8" y1="23" x2="16" y2="23" />
</svg>
</button>
</div>
{/* Textarea */} {/* Textarea */}
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className="chat-input__field" className="chat-input__field"
placeholder="Ask anything about your subject..." placeholder={placeholder || "Ask anything about your subject..."}
value={text} value={text}
onChange={(e) => setText(e.target.value)} onChange={(e) => setText(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
rows={1} rows={1}
/> />
{/* Submit button */} {/* Actions */}
<div className="chat-input__actions">
{/* Mic */}
<button <button
className={`chat-input__submit ${ type="button"
text.trim() ? "chat-input__submit--active" : "" className="chat-input__mic-btn"
}`} aria-label="Voice input"
title="Voice input"
>
<span className="material-symbols-outlined">mic</span>
</button>
{/* Send */}
<button
className={`chat-input__send-btn ${text.trim() ? "chat-input__send-btn--active" : ""}`}
type="submit" type="submit"
disabled={!text.trim()} disabled={!text.trim()}
aria-label="Send message" aria-label="Send message"
> >
<svg <span className="material-symbols-outlined" style={{ fontWeight: text.trim() ? 700 : 200 }}>
xmlns="http://www.w3.org/2000/svg" arrow_upward
viewBox="0 0 24 24" </span>
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
width="18"
height="18"
>
<path d="M22 2L15 22l-3-10-10 3z" />
</svg>
</button> </button>
</div>
</form> </form>
{/* AI Disclaimer */} {/* AI Disclaimer */}
<div className="chat-input__disclaimer-wrapper">
<p className="chat-input__disclaimer"> <p className="chat-input__disclaimer">
padhLe AI can make mistakes. Consider verifying important information. Padhle AI can make mistakes. Consider verifying important information.
</p> </p>
</div> </div>
</div> </div>
</div>
); );
}; };
frontend/src/components/message/Message.css
+49 -114
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Message Component — padhLe (Bauhaus) Message Component — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Base Message */ /* Base Message */
@@ -20,179 +20,114 @@
} }
} }
/* Alignment */ /* --- USER MESSAGE --- */
.message--user { .message--user {
align-items: flex-end; align-items: flex-end;
} }
.message--assistant {
align-items: flex-start;
}
/* --- USER MESSAGE --- */
.message--user .message__bubble { .message--user .message__bubble {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
border: var(--border-thick); border-radius: 18px 18px 4px 18px;
border-radius: var(--border-radius); padding: 12px 16px;
padding: var(--spacing-md) var(--spacing-lg); max-width: 75%;
max-width: 80%;
position: relative;
box-shadow: var(--shadow-brutal-sm);
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.9rem; font-size: 15px;
font-weight: 700; font-weight: var(--font-weight-regular);
line-height: 1.5; line-height: var(--line-height-relaxed);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.message--user .message__bubble::after {
content: "";
position: absolute;
right: -12px;
top: 12px;
width: 12px;
height: 12px;
background-color: var(--color-primary);
border-right: var(--border-thick);
border-top: var(--border-thick);
transform: rotate(45deg);
display: none;
}
@media (min-width: 768px) {
.message--user .message__bubble::after {
display: block;
}
} }
.message--user .message__text { .message--user .message__text {
color: var(--color-on-primary); color: var(--color-on-primary);
} }
/* --- ASSISTANT MESSAGE --- */
.message--assistant {
align-items: flex-start;
}
.message--assistant .message__bubble {
padding: 0;
max-width: 85%;
}
/* --- ASSISTANT AVATAR --- */ /* --- ASSISTANT AVATAR --- */
.message__avatar { .message__avatar {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-right: var(--spacing-sm);
flex-shrink: 0; flex-shrink: 0;
margin-right: 8px;
margin-top: 4px; margin-top: 4px;
} }
.message__avatar-icon { .message__avatar-icon {
width: 40px; width: 32px;
height: 40px; height: 32px;
border: var(--border-medium); border-radius: 50%;
border-radius: var(--border-radius);
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--shadow-brutal-sm);
} }
/* --- ASSISTANT MESSAGE --- */ .message__avatar-icon .material-symbols-outlined {
.message--assistant .message__bubble { font-size: 18px;
background-color: var(--color-surface); line-height: 1;
color: var(--color-text);
border: var(--border-thick);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
max-width: 85%;
position: relative;
box-shadow: var(--shadow-brutal-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.message--assistant .message__bubble::before {
content: "";
position: absolute;
left: -12px;
top: 16px;
width: 12px;
height: 12px;
background-color: var(--color-surface);
border-left: var(--border-thick);
border-top: var(--border-thick);
transform: rotate(45deg);
display: none;
}
@media (min-width: 768px) {
.message--assistant .message__bubble::before {
display: block;
}
} }
/* --- MESSAGE TEXT --- */
.message__text { .message__text {
font-size: 0.95rem; font-size: 15px;
line-height: 1.6; line-height: var(--line-height-relaxed);
white-space: pre-wrap; white-space: pre-wrap;
font-weight: 600; font-weight: var(--font-weight-regular);
color: var(--color-on-surface);
} }
.message--assistant .message__text { .message--assistant .message__text {
color: var(--color-text); color: var(--color-on-surface);
text-transform: uppercase;
letter-spacing: 0.02em;
} }
/* --- ACTION BUTTONS --- */ /* --- ACTION BUTTONS --- */
.message__actions { .message__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: 8px;
margin-top: var(--spacing-sm); margin-top: 8px;
flex-wrap: wrap; margin-bottom: 8px;
} }
.message__action { .message__action {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; justify-content: center;
padding: 6px var(--spacing-md); width: 32px;
border: var(--border-medium); height: 32px;
border-radius: var(--border-radius); border: none;
background-color: var(--color-surface); border-radius: 50%;
background-color: var(--color-surface-low);
cursor: pointer; cursor: pointer;
font-family: var(--font-heading); color: var(--color-on-surface-variant);
font-size: 0.7rem; transition: background-color var(--transition-fast), color var(--transition-fast);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast);
} }
.message__action:hover { .message__action:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-high);
color: var(--color-text); color: var(--color-on-surface);
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
} }
.message__action:active { .message__action .material-symbols-outlined {
transform: translateY(2px); font-size: 18px;
box-shadow: none; line-height: 1;
} }
.message__action--primary { .message__action--primary {
background-color: var(--color-secondary);
color: var(--color-on-secondary);
border-color: var(--color-outline);
margin-left: auto; margin-left: auto;
}
.message__action--primary:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
} }
.message__action svg { .message__action--primary:hover {
flex-shrink: 0; opacity: 0.9;
} }
frontend/src/components/message/Message.jsx
+6 -19
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Message Component — padhLe (Bauhaus) Message Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import "./Message.css"; import "./Message.css";
@@ -13,10 +13,7 @@ const Message = ({ message }) => {
{!isUser && ( {!isUser && (
<div className="message__avatar"> <div className="message__avatar">
<div className="message__avatar-icon"> <div className="message__avatar-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
<path d="M12 2a10 10 0 1 0 10 10H12V2z" />
<path d="M12 2a10 10 0 0 1 10 10" />
</svg>
</div> </div>
</div> </div>
)} )}
@@ -24,27 +21,17 @@ const Message = ({ message }) => {
<div className="message__text">{text}</div> <div className="message__text">{text}</div>
</div> </div>
{/* Action buttons only for assistant messages */} {/* Action buttons for assistant messages */}
{!isUser && ( {!isUser && (
<div className="message__actions"> <div className="message__actions">
<button className="message__action" aria-label="Helpful" title="Helpful"> <button className="message__action" aria-label="Helpful" title="Helpful">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined">thumb_up</span>
<path d="M7 22h4c1.1 0 2-.9 2-2v-4c0-.57-.24-1.09-.62-1.47L13 11.76c.38-.38.62-.9.62-1.47V7c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v12c0 3.31 2.69 6 6 6h8v-2h-2.11c-.18-.5-.29-1.04-.29-1.6V22z" />
</svg>
<span>Helpful</span>
</button> </button>
<button className="message__action" aria-label="Save note" title="Save Note"> <button className="message__action" aria-label="Save note" title="Save Note">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined">bookmark_border</span>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
<span>Note</span>
</button> </button>
<button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper"> <button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
<path d="M12 2a10 10 0 1 0 10 10H12V2z" />
<path d="M12 2a10 10 0 0 1 10 10" />
</svg>
<span>Deeper</span>
</button> </button>
</div> </div>
)} )}
frontend/src/components/sidebar/Sidebar.css
+152 -120
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Sidebar Component — padhLe (Bauhaus) Sidebar Component — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Main Sidebar */ /* Main Sidebar */
@@ -9,38 +9,41 @@
left: 0; left: 0;
width: var(--sidebar-width); width: var(--sidebar-width);
height: 100vh; height: 100vh;
background-color: var(--color-surface); background-color: var(--color-surface-lowest);
border-right: var(--border-thick); border-right: var(--border-thin);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--spacing-lg); padding: 24px 16px;
overflow-y: auto; overflow-y: auto;
z-index: 10; z-index: 50;
}
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: var(--color-outline);
border-radius: 2px;
} }
/* Brand */ /* Brand */
.sidebar__brand { .sidebar__brand {
padding-bottom: var(--spacing-md); padding: var(--spacing-sm) 8px;
margin-bottom: var(--spacing-md); margin-bottom: 24px;
border-bottom: var(--border-medium); display: flex;
align-items: center;
gap: 12px;
}
.sidebar__brand-inner {
display: flex;
align-items: center;
gap: 12px;
}
.sidebar__brand-icon {
font-size: 28px;
line-height: 1;
} }
.sidebar__title { .sidebar__title {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 2rem; font-size: var(--font-size-headline-md);
font-weight: 800; font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-primary); color: var(--color-primary);
letter-spacing: -0.01em;
} }
/* New Chat Button */ /* New Chat Button */
@@ -48,37 +51,28 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--spacing-xs); gap: 8px;
width: 100%; width: 100%;
padding: var(--spacing-sm); height: 48px;
border: var(--border-medium); border: none;
border-radius: var(--border-radius); border-radius: var(--radius-md);
background-color: var(--color-surface); background-color: var(--color-primary);
color: var(--color-text); color: var(--color-on-primary);
font-family: var(--font-heading); font-family: var(--font-body);
font-size: 0.85rem; font-size: var(--font-size-label-md);
font-weight: 700; font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-brutal-sm); transition: opacity var(--transition-fast);
transition: all var(--transition-fast); margin-bottom: 24px;
margin-bottom: var(--spacing-lg);
} }
.sidebar__new-chat:hover { .sidebar__new-chat:hover {
transform: translateY(-2px); opacity: 0.9;
box-shadow: var(--shadow-brutal);
}
.sidebar__new-chat:active {
transform: translateY(2px);
box-shadow: none;
} }
/* Section */ /* Section */
.sidebar__section { .sidebar__section {
margin-bottom: var(--spacing-md); margin-bottom: 20px;
} }
.sidebar__section--history { .sidebar__section--history {
@@ -88,14 +82,13 @@
} }
.sidebar__section-title { .sidebar__section-title {
font-family: var(--font-heading); font-size: 11px;
font-size: 0.7rem; font-weight: var(--font-weight-bold);
font-weight: 800; color: var(--color-on-surface-variant);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--color-text-variant); padding: 0 24px;
margin-bottom: var(--spacing-sm); margin-bottom: 8px;
padding-left: var(--spacing-sm);
} }
/* Subject List */ /* Subject List */
@@ -103,54 +96,42 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
padding: 0 8px;
} }
.sidebar__link { .sidebar__link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: 12px;
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: 8px 16px;
border: var(--border-medium); border: none;
border-radius: var(--border-radius); border-radius: var(--radius-md);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.8rem; font-size: var(--font-size-label-md);
font-weight: 700; font-weight: var(--font-weight-medium);
text-transform: uppercase; color: var(--color-on-surface-variant);
letter-spacing: 0.04em;
color: var(--color-text-variant);
text-align: left; text-align: left;
box-shadow: var(--shadow-brutal-sm); transition: background-color var(--transition-fast), color var(--transition-fast);
transition: all var(--transition-fast);
} }
.sidebar__link:hover { .sidebar__link:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-low);
color: var(--color-text);
transform: translateY(-1px);
} }
.sidebar__link--active { .sidebar__link--active {
background-color: var(--color-primary); background-color: var(--color-surface-low);
color: var(--color-on-primary); color: var(--color-primary);
border-color: var(--color-outline); font-weight: var(--font-weight-bold);
} border-left: 2px solid var(--color-primary);
.sidebar__link--active:hover {
color: var(--color-on-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
} }
.sidebar__icon { .sidebar__icon {
display: flex; font-size: 20px;
align-items: center; line-height: 1;
justify-content: center;
width: 20px;
font-size: 0.95rem;
} }
/* Chat List */ /* Chat List */
@@ -158,92 +139,143 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
padding: 0 8px;
} }
.sidebar__chat-link { .sidebar__chat-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: 8px 16px;
padding-left: var(--spacing-sm); border: none;
border: var(--border-medium); border-radius: var(--radius-md);
border-radius: var(--border-radius);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-body);
text-align: left; text-align: left;
box-shadow: var(--shadow-brutal-sm); transition: background-color var(--transition-fast);
transition: all var(--transition-fast);
} }
.sidebar__chat-link:hover { .sidebar__chat-link:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-low);
transform: translateY(-1px);
} }
.sidebar__chat-link--active { .sidebar__chat-link--active {
background-color: var(--color-surface-container); background-color: var(--color-surface-low);
box-shadow: var(--shadow-brutal);
} }
.sidebar__chat-preview { .sidebar__chat-preview {
font-family: var(--font-body); font-size: 13px;
font-size: 0.8rem; font-weight: var(--font-weight-medium);
font-weight: 700; color: var(--color-on-surface);
color: var(--color-text);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.sidebar__chat-time { .sidebar__chat-time {
font-family: var(--font-body); font-size: 11px;
font-size: 0.65rem; font-weight: var(--font-weight-medium);
font-weight: 700; color: var(--color-on-surface-variant);
text-transform: uppercase; margin-top: 2px;
color: var(--color-text-variant);
margin-top: 4px;
} }
/* Footer */ /* Footer */
.sidebar__footer { .sidebar__footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
padding-top: var(--spacing-sm); padding-top: 16px;
border-top: var(--border-medium); border-top: var(--border-thin);
margin-top: auto;
} }
.sidebar__footer-btn { .sidebar__footer-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: 12px;
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: 8px 16px;
border: var(--border-medium); border: none;
border-radius: var(--border-radius); border-radius: var(--radius-md);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.75rem; font-size: 13px;
font-weight: 700; font-weight: var(--font-weight-medium);
text-transform: uppercase; color: var(--color-on-surface-variant);
letter-spacing: 0.04em;
color: var(--color-text-variant);
text-align: left; text-align: left;
box-shadow: var(--shadow-brutal-sm); text-decoration: none;
transition: all var(--transition-fast); transition: background-color var(--transition-fast), color var(--transition-fast);
} }
.sidebar__footer-btn:hover { .sidebar__footer-btn:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-low);
color: var(--color-text); color: var(--color-on-surface);
transform: translateY(-1px);
} }
.sidebar__footer-btn:active { .sidebar__footer-icon {
transform: translateY(2px); font-size: 20px;
box-shadow: none; line-height: 1;
}
/* Upgrade to Pro Card */
.sidebar__upgrade {
margin-top: 16px;
padding: 0 8px;
}
.sidebar__upgrade-inner {
border: var(--border-thin);
border-radius: var(--radius-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.sidebar__upgrade:hover {
border-color: var(--color-outline);
}
.sidebar__upgrade-header {
display: flex;
align-items: center;
gap: 8px;
}
.sidebar__upgrade-icon {
font-size: 14px;
line-height: 1;
}
.sidebar__upgrade-title {
font-size: 13px;
font-weight: var(--font-weight-bold);
color: var(--color-on-surface);
}
.sidebar__upgrade-text {
font-size: 11px;
line-height: 1.4;
color: var(--color-on-surface-variant);
padding-right: 24px;
}
.sidebar__upgrade-arrow {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
line-height: 1;
color: var(--color-on-surface-variant);
transition: color var(--transition-fast);
}
.sidebar__upgrade:hover .sidebar__upgrade-arrow {
color: var(--color-primary);
} }
frontend/src/components/sidebar/Sidebar.jsx
+39 -35
View File
@@ -1,52 +1,53 @@
/* ======================================== /* ========================================
Sidebar Component — padhLe Sidebar Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import "./Sidebar.css"; import "./Sidebar.css";
const Sidebar = ({ activeSubject, onSubjectChange, activeChat, onChatSelect }) => { const Sidebar = ({ activeSubject, onSubjectChange, activeChat, onChatSelect }) => {
const subjects = [ const subjects = [
{ id: "math", name: "Mathematics", icon: "∑" }, { id: "math", name: "Mathematics", icon: "functions" },
{ id: "science", name: "Science", icon: "⚡" }, { id: "science", name: "Science", icon: "science" },
{ id: "history", name: "History", icon: "📜" }, { id: "history", name: "History", icon: "account_balance" },
{ id: "language", name: "Language Arts", icon: "✍" }, { id: "language", name: "Language Arts", icon: "menu_book" },
{ id: "english", name: "English", icon: "📖" }, { id: "english", name: "English", icon: "forum" },
{ id: "geography", name: "Geography", icon: "🌍" }, { id: "geography", name: "Geography", icon: "public" },
]; ];
const chats = [ const chats = [
{ id: 1, preview: "Explain photosynthesis", time: "Today, 10:42 AM" }, { id: 1, preview: "Explain photosynthesis", time: "Today, 10:42 AM" },
{ id: 2, preview: "Help with integrals", time: "Yesterday, 3:15 PM" }, { id: 2, preview: "Help with integrals", time: "Yesterday, 3:15 PM" },
{ id: 3, preview: "What is cell respiration?", time: "Yesterday, 11:08 AM" },
{ id: 4, preview: "Newton's laws of motion", time: "May 18, 6:20 PM" },
]; ];
return ( return (
<aside className="sidebar"> <aside className="sidebar">
{/* Brand */} {/* Brand */}
<div className="sidebar__brand"> <div className="sidebar__brand">
<h1 className="sidebar__title">padhLe</h1> <div className="sidebar__brand-inner">
<span className="material-symbols-outlined sidebar__brand-icon" style={{ fontWeight: 700 }}>school</span>
<h1 className="sidebar__title">padhle</h1>
</div>
</div> </div>
{/* New Chat Button */} {/* New Chat Button */}
<button className="sidebar__new-chat"> <button className="sidebar__new-chat">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined">add</span>
<path d="M12 5v14M5 12h14" />
</svg>
<span>New Chat</span> <span>New Chat</span>
</button> </button>
{/* Subjects */} {/* Subjects Section */}
<div className="sidebar__section"> <div className="sidebar__section">
<h2 className="sidebar__section-title">Subjects</h2> <h2 className="sidebar__section-title">Subjects</h2>
<ul className="sidebar__list"> <ul className="sidebar__list">
{subjects.map((subject) => ( {subjects.map((subject) => (
<li key={subject.id}> <li key={subject.id}>
<button <button
className={`sidebar__link ${ className={`sidebar__link ${activeSubject === subject.id ? "sidebar__link--active" : ""}`}
activeSubject === subject.id ? "sidebar__link--active" : ""
}`}
onClick={() => onSubjectChange(subject.id)} onClick={() => onSubjectChange(subject.id)}
> >
<span className="sidebar__icon">{subject.icon}</span> <span className={`material-symbols-outlined sidebar__icon`}>{subject.icon}</span>
<span className="sidebar__label">{subject.name}</span> <span className="sidebar__label">{subject.name}</span>
</button> </button>
</li> </li>
@@ -54,16 +55,14 @@ const Sidebar = ({ activeSubject, onSubjectChange, activeChat, onChatSelect }) =
</ul> </ul>
</div> </div>
{/* Chat History */} {/* Chat History Section */}
<div className="sidebar__section sidebar__section--history"> <div className="sidebar__section sidebar__section--history">
<h2 className="sidebar__section-title">Chat History</h2> <h2 className="sidebar__section-title">Chat History</h2>
<ul className="sidebar__chat-list"> <ul className="sidebar__chat-list">
{chats.map((chat) => ( {chats.map((chat) => (
<li key={chat.id}> <li key={chat.id}>
<button <button
className={`sidebar__chat-link ${ className={`sidebar__chat-link ${activeChat === chat.id ? "sidebar__chat-link--active" : ""}`}
activeChat === chat.id ? "sidebar__chat-link--active" : ""
}`}
onClick={() => onChatSelect(chat.id)} onClick={() => onChatSelect(chat.id)}
> >
<span className="sidebar__chat-preview">{chat.preview}</span> <span className="sidebar__chat-preview">{chat.preview}</span>
@@ -74,23 +73,28 @@ const Sidebar = ({ activeSubject, onSubjectChange, activeChat, onChatSelect }) =
</ul> </ul>
</div> </div>
{/* Footer Actions */} {/* Footer */}
<div className="sidebar__footer"> <div className="sidebar__footer">
<button className="sidebar__footer-btn" aria-label="Settings" title="Settings"> <a href="#settings" className="sidebar__footer-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined sidebar__footer-icon">settings</span>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
<span>Settings</span> <span>Settings</span>
</button> </a>
<button className="sidebar__footer-btn" aria-label="Help" title="Help"> <a href="#help" className="sidebar__footer-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <span className="material-symbols-outlined sidebar__footer-icon">help_outline</span>
<circle cx="12" cy="12" r="10" /> <span>Help &amp; Support</span>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> </a>
<path d="M12 17h.01" />
</svg> {/* Upgrade to Pro Card */}
<span>Help</span> <div className="sidebar__upgrade">
</button> <div className="sidebar__upgrade-inner">
<div className="sidebar__upgrade-header">
<span className="sidebar__upgrade-icon">👑</span>
<span className="sidebar__upgrade-title">Upgrade to Pro</span>
</div>
<p className="sidebar__upgrade-text">Unlock study guides, quizzes and more!</p>
<span className="material-symbols-outlined sidebar__upgrade-arrow">chevron_right</span>
</div>
</div>
</div> </div>
</aside> </aside>
); );
frontend/src/components/top-nav/TopNav.css
+166 -53
View File
@@ -1,95 +1,208 @@
/* ======================================== /* ========================================
TopNav Component — padhLe (Bauhaus) TopNav Component — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Main Header */
.topnav { .topnav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-lg); width: 100%;
border-bottom: var(--border-thick); height: 64px;
background-color: var(--color-surface); padding: 0 32px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 5; z-index: 40;
background-color: transparent;
} }
/* Tab List */ /* Selector Pills Container */
.topnav__tabs { .topnav__selectors {
display: flex;
gap: var(--spacing-xs);
}
/* Individual Tab */
.topnav__tab {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: 12px;
padding: var(--spacing-sm) var(--spacing-md); }
border: var(--border-medium);
border-radius: var(--border-radius); /* Selector Wrapper */
background: transparent; .topnav__selector {
flex-shrink: 0;
position: relative;
}
/* Pill Button */
.topnav__pill {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border: var(--border-thin);
border-radius: var(--radius-md);
background-color: var(--color-surface-lowest);
cursor: pointer; cursor: pointer;
font-family: var(--font-heading); font-family: var(--font-body);
font-size: 0.8rem; font-size: var(--font-size-label-md);
font-weight: 700; font-weight: var(--font-weight-medium);
text-transform: uppercase; color: var(--color-on-surface);
letter-spacing: 0.06em; transition: background-color var(--transition-fast), border-color var(--transition-fast);
color: var(--color-text-variant); white-space: nowrap;
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast);
} }
.topnav__tab:hover { .topnav__pill:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-low);
color: var(--color-text);
transform: translateY(-2px);
} }
.topnav__tab--active { .topnav__pill--dropdown:hover {
background-color: var(--color-primary);
color: var(--color-on-primary);
border-color: var(--color-outline); border-color: var(--color-outline);
} }
.topnav__tab--active:hover { /* Pill Open State */
color: var(--color-on-primary); .topnav__pill--open {
transform: translateY(-2px); background-color: var(--color-surface-low);
box-shadow: var(--shadow-brutal); border-color: var(--color-outline);
} }
.topnav__icon { .topnav__pill--open .topnav__pill-arrow {
font-size: 1rem; transform: rotate(180deg);
} }
.topnav__label { .topnav__pill-icon {
font-family: var(--font-heading); font-size: 16px;
line-height: 1;
} }
/* Action Buttons (Search, Notifications) */ .topnav__pill-label {
font-size: 13px;
font-weight: var(--font-weight-medium);
color: var(--color-on-surface);
}
.topnav__pill-arrow {
font-size: 16px;
line-height: 1;
color: var(--color-on-surface);
opacity: 0.6;
transition: transform var(--transition-fast);
}
/* Dropdown Menu */
.topnav__dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
max-height: 320px;
overflow-y: auto;
border: var(--border-thin);
border-radius: var(--radius-md);
background-color: var(--color-surface-lowest);
box-shadow: var(--shadow-card-hover);
z-index: 100;
padding: 6px 0;
list-style: none;
}
/* Dropdown Items */
.topnav__dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 16px;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-body);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-medium);
color: var(--color-on-surface);
text-align: left;
transition: background-color var(--transition-fast), color var(--transition-fast);
white-space: nowrap;
position: relative;
}
.topnav__dropdown-item:hover {
background-color: var(--color-surface-low);
}
.topnav__dropdown-item--active {
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
.topnav__dropdown-item--active::after {
content: "";
position: absolute;
right: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-primary);
}
.topnav__dropdown-icon {
font-size: 18px;
line-height: 1;
color: var(--color-on-surface-variant);
}
.topnav__dropdown-item:hover .topnav__dropdown-icon {
color: var(--color-primary);
}
/* Actions Container */
.topnav__actions { .topnav__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: 8px;
color: var(--color-on-surface-variant);
} }
/* Action Buttons */
.topnav__action { .topnav__action {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 36px; width: 40px;
height: 36px; height: 40px;
border: var(--border-medium); border: none;
border-radius: var(--border-radius); border-radius: 50%;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
color: var(--color-text-variant); color: var(--color-on-surface-variant);
box-shadow: var(--shadow-brutal-sm); transition: background-color var(--transition-fast), color var(--transition-fast);
transition: all var(--transition-fast);
} }
.topnav__action:hover { .topnav__action:hover {
background-color: var(--color-surface-variant); background-color: var(--color-surface-low);
color: var(--color-text); color: var(--color-primary);
transform: translateY(-2px); }
.topnav__action .material-symbols-outlined {
font-size: 22px;
line-height: 1;
}
/* User Avatar */
.topnav__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: var(--border-thin);
background-color: var(--color-surface-low);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.topnav__avatar:hover {
background-color: var(--color-surface-lowest);
}
.topnav__avatar-initial {
font-size: 13px;
font-weight: var(--font-weight-medium);
color: var(--color-primary);
} }
frontend/src/components/top-nav/TopNav.jsx
+182 -27
View File
@@ -1,47 +1,202 @@
/* ======================================== /* ========================================
TopNav Component — padhLe TopNav Component — padhle (Refined Workspace)
======================================== */ ======================================== */
import { useState, useRef, useEffect } from "react";
import "./TopNav.css"; import "./TopNav.css";
const TopNav = ({ activeTab, onTabChange }) => { const TopNav = ({ activeGrade, onGradeChange, activeSubject, onSubjectChange, activeChapter, onChapterChange }) => {
const tabs = [ const [openDropdown, setOpenDropdown] = useState(null);
{ id: "chat", label: "AI Chat", icon: "💬" }, const gradeRef = useRef(null);
{ id: "study", label: "Study Guides", icon: "📖" }, const subjectRef = useRef(null);
{ id: "progress", label: "Progress", icon: "📊" }, const chapterRef = useRef(null);
// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (e) => {
const refs = [gradeRef, subjectRef, chapterRef];
const isInside = refs.some((ref) => ref.current && ref.current.contains(e.target));
if (!isInside) {
setOpenDropdown(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const toggleDropdown = (name) => {
setOpenDropdown((prev) => (prev === name ? null : name));
};
const selectOption = (name, value) => {
setOpenDropdown(null);
switch (name) {
case "grade":
onGradeChange(value);
break;
case "subject":
onSubjectChange(value);
break;
case "chapter":
onChapterChange(value);
break;
}
};
const grades = [
{ id: "choose-standard", label: "Choose standard" },
{ id: "Grade 6", label: "Grade 6" },
{ id: "Grade 7", label: "Grade 7" },
{ id: "Grade 8", label: "Grade 8" },
{ id: "Grade 9", label: "Grade 9" },
{ id: "Grade 10", label: "Grade 10" },
{ id: "Grade 11", label: "Grade 11" },
{ id: "Grade 12", label: "Grade 12" },
]; ];
const subjects = [
{ id: "choose-subject", label: "Choose Subject" },
{ id: "math", label: "Mathematics" },
{ id: "science", label: "Science" },
{ id: "history", label: "History" },
{ id: "language", label: "Language Arts" },
{ id: "english", label: "English" },
{ id: "geography", label: "Geography" },
];
const chapters = [
{ id: "choose-chapter", label: "Choose Chapter" },
{ id: "chapter1", label: "Chapter 1: Rational Numbers" },
{ id: "chapter2", label: "Chapter 2: Linear Equations" },
{ id: "chapter3", label: "Chapter 3: Coordinate Geometry" },
{ id: "chapter4", label: "Chapter 4: Life Processes" },
{ id: "chapter5", label: "Chapter 5: Photosynthesis" },
{ id: "chapter6", label: "Chapter 6: Human Physiology" },
];
const subjectIcons = {
math: "calculate",
science: "science",
history: "account_balance",
language: "menu_book",
english: "edit",
geography: "public",
};
return ( return (
<nav className="topnav"> <header className="topnav">
<div className="topnav__tabs"> <div className="topnav__selectors">
{tabs.map((tab) => ( {/* Grade Selector */}
<div className="topnav__selector" ref={gradeRef}>
<button <button
key={tab.id} className={`topnav__pill topnav__pill--dropdown ${openDropdown === "grade" ? "topnav__pill--open" : ""}`}
className={`topnav__tab ${ onClick={() => toggleDropdown("grade")}
activeTab === tab.id ? "topnav__tab--active" : "" aria-label="Select Grade"
}`} aria-expanded={openDropdown === "grade"}
onClick={() => onTabChange(tab.id)}
> >
<span className="topnav__icon">{tab.icon}</span> <span className="material-symbols-outlined topnav__pill-icon">person_outline</span>
<span className="topnav__label">{tab.label}</span> <span className="topnav__pill-label">{activeGrade}</span>
<span className="material-symbols-outlined topnav__pill-arrow">expand_more</span>
</button> </button>
{openDropdown === "grade" && (
<ul className="topnav__dropdown">
{grades.map((grade) => (
<li key={grade.id}>
<button
className={`topnav__dropdown-item ${activeGrade === grade.label ? "topnav__dropdown-item--active" : ""}`}
onClick={() => selectOption("grade", grade.label)}
>
{grade.label}
</button>
</li>
))} ))}
</ul>
)}
</div> </div>
{/* Subject Selector */}
<div className="topnav__selector" ref={subjectRef}>
<button
className={`topnav__pill topnav__pill--dropdown ${openDropdown === "subject" ? "topnav__pill--open" : ""}`}
onClick={() => toggleDropdown("subject")}
aria-label="Select Subject"
aria-expanded={openDropdown === "subject"}
>
<span className={`material-symbols-outlined topnav__pill-icon`}>
{activeSubject === "choose-subject" ? "science" : subjectIcons[activeSubject] || "science"}
</span>
<span className="topnav__pill-label">
{activeSubject === "choose-subject"
? "Choose Subject"
: subjects.find((s) => s.id === activeSubject)?.label || activeSubject}
</span>
<span className="material-symbols-outlined topnav__pill-arrow">expand_more</span>
</button>
{openDropdown === "subject" && (
<ul className="topnav__dropdown">
{subjects.map((subject) => (
<li key={subject.id}>
<button
className={`topnav__dropdown-item ${activeSubject === subject.id ? "topnav__dropdown-item--active" : ""}`}
onClick={() => selectOption("subject", subject.id)}
>
<span className={`material-symbols-outlined topnav__dropdown-icon`}>
{subject.id === "choose-subject" ? "science" : subjectIcons[subject.id]}
</span>
{subject.label}
</button>
</li>
))}
</ul>
)}
</div>
{/* Chapter Selector */}
<div className="topnav__selector" ref={chapterRef}>
<button
className={`topnav__pill topnav__pill--dropdown ${openDropdown === "chapter" ? "topnav__pill--open" : ""}`}
onClick={() => toggleDropdown("chapter")}
aria-label="Select Chapter"
aria-expanded={openDropdown === "chapter"}
>
<span className="material-symbols-outlined topnav__pill-icon">menu_book</span>
<span className="topnav__pill-label">{activeChapter}</span>
<span className="material-symbols-outlined topnav__pill-arrow">expand_more</span>
</button>
{openDropdown === "chapter" && (
<ul className="topnav__dropdown">
{chapters.map((chapter) => (
<li key={chapter.id}>
<button
className={`topnav__dropdown-item ${activeChapter === chapter.label ? "topnav__dropdown-item--active" : ""}`}
onClick={() => selectOption("chapter", chapter.label)}
>
{chapter.label}
</button>
</li>
))}
</ul>
)}
</div>
</div>
<div className="topnav__actions"> <div className="topnav__actions">
<button className="topnav__action" aria-label="Search" title="Search"> {/* Search */}
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <button className="topnav__action" aria-label="Search">
<circle cx="11" cy="11" r="8" /> <span className="material-symbols-outlined">search</span>
<path d="M21 21l-4.35-4.35" />
</svg>
</button> </button>
<button className="topnav__action" aria-label="Notifications" title="Notifications">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> {/* Notifications */}
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /> <button className="topnav__action" aria-label="Notifications">
<path d="M13.73 21a2 2 0 0 1-3.46 0" /> <span className="material-symbols-outlined">notifications_none</span>
</svg>
</button> </button>
{/* User Avatar */}
<div className="topnav__avatar">
<span className="topnav__avatar-initial">S</span>
</div> </div>
</nav> </div>
</header>
); );
}; };
frontend/src/main.jsx
+1 -1
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Main Entry Point — padhLe Main Entry Point — padhle
======================================== */ ======================================== */
import React from "react"; import React from "react";
frontend/src/styles/App.css
-59
View File
@@ -1,59 +0,0 @@
/* ========================================
App Component — padhLe (Bauhaus)
======================================== */
/* Greeting Banner */
.greeting-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg);
border-bottom: var(--border-thick);
border-left: var(--border-thick);
background-color: var(--color-tertiary);
color: var(--color-on-tertiary);
}
.greeting-banner__title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.greeting-banner__tagline {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
}
.greeting-banner__dismiss {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: var(--border-medium);
border-radius: var(--border-radius);
background: transparent;
color: var(--color-on-tertiary);
cursor: pointer;
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast);
flex-shrink: 0;
margin-left: var(--spacing-md);
}
.greeting-banner__dismiss:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
}
.greeting-banner__dismiss:active {
transform: translateY(2px);
box-shadow: none;
}
frontend/src/styles/global.css
+109 -36
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Global Styles — padhLe (Bauhaus Theme) Global Styles — padhle (Refined Workspace)
======================================== */ ======================================== */
/* Reset */ /* Reset */
@@ -11,66 +11,109 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Root Variables — Cognitive Flow / Bauhaus */ /* Root Variables — Material Design 3 tokens from EduAI */
:root { :root {
/* Colors */ /* Surface Colors */
--color-primary: #4f46e5; --color-background: #fcf8fa;
--color-secondary: #a855f7;
--color-tertiary: #10b981;
--color-background: #f8f9ff;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-surface-variant: #d3e4fe;
--color-surface-lowest: #ffffff; --color-surface-lowest: #ffffff;
--color-surface-low: #eff4ff; --color-surface-low: #f9fafb;
--color-surface-container: #e5eeff; --color-surface-container: #f3f4f6;
--color-surface-high: #dce9ff; --color-surface-high: #e5e7eb;
--color-outline: #1a1a1a;
--color-outline-variant: #c7c4d8; /* Outline Colors */
--color-text: #0b1c30; --color-outline: #d1d5db;
--color-text-variant: #464555; --color-outline-variant: #e5e5e5;
/* Text Colors */
--color-on-surface: #111827;
--color-on-surface-variant: #6b7280;
--color-primary: #000000;
--color-on-primary: #ffffff; --color-on-primary: #ffffff;
--color-on-secondary: #ffffff; --color-primary-fixed: #dce2f7;
--color-on-tertiary: #ffffff; --color-primary-container: #141b2b;
/* Accent Colors for Suggestion Cards */
--color-accent-green: #2e7d32;
--color-accent-green-bg: #e8f5e9;
--color-accent-blue: #1565c0;
--color-accent-blue-bg: #e3f2fd;
--color-accent-orange: #e65100;
--color-accent-orange-bg: #fff3e0;
--color-accent-purple: #6a1b9a;
--color-accent-purple-bg: #f3e5f5;
/* Fonts */ /* Fonts */
--font-heading: "Montserrat", sans-serif; --font-heading: "Montserrat", sans-serif;
--font-body: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
/* Font Sizes */
--font-size-body-md: 16px;
--font-size-body-lg: 18px;
--font-size-headline-md: 24px;
--font-size-headline-sm: 20px;
--font-size-label-md: 14px;
--font-size-label-sm: 12px;
--font-size-label-xs: 11px;
--font-size-display-lg: 40px;
/* Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
/* Border */ /* Border */
--border-thick: 3px solid var(--color-outline); --border-thin: 1px solid var(--color-outline);
--border-medium: 2px solid var(--color-outline); --border-regular: 1.5px solid var(--color-outline);
--border-radius: 8px; --border-thick: 2px solid var(--color-outline);
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-pill: 9999px;
/* Spacing */ /* Spacing */
--spacing-xs: 4px; --spacing-xs: 4px;
--spacing-sm: 12px; --spacing-sm: 8px;
--spacing-md: 16px; --spacing-md: 16px;
--spacing-lg: 24px; --spacing-lg: 24px;
--spacing-xl: 40px; --spacing-xl: 32px;
--spacing-2xl: 64px; --spacing-2xl: 48px;
/* Transition */ /* Transition */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 200ms ease;
--transition-slow: 300ms ease;
/* Brutalist Shadow */
--shadow-brutal: 4px 4px 0px 0px var(--color-outline);
--shadow-brutal-sm: 3px 3px 0px 0px var(--color-outline);
--shadow-brutal-hover: 6px 6px 0px 0px var(--color-outline);
--shadow-brutal-lg: 8px 8px 0px 0px var(--color-outline);
/* Layout */ /* Layout */
--sidebar-width: 240px; --sidebar-width: 280px;
--container-max: 1200px; --container-max: 800px;
--content-padding: 24px;
/* Shadows */
--shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
--shadow-card-hover: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
--shadow-input: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
--shadow-input-focus: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
} }
/* Body */ /* Body */
body { body {
font-family: var(--font-body); font-family: var(--font-body);
font-weight: 600; font-weight: var(--font-weight-regular);
font-size: var(--font-size-body-md);
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-text); color: var(--color-on-surface);
line-height: 1.6; line-height: var(--line-height-normal);
min-height: 100vh; min-height: 100vh;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -83,7 +126,7 @@ body {
width: 100%; width: 100%;
} }
/* Main Content Area — offset to right of fixed sidebar */ /* Main Content Area */
.page__main { .page__main {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -107,3 +150,33 @@ body {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-outline-variant);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-outline);
}
/* Focus outline */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Selection */
::selection {
background-color: var(--color-primary-fixed);
color: var(--color-primary-container);
}