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/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";
@@ -13,10 +13,7 @@ const Message = ({ message }) => {
{!isUser && (
<div className="message__avatar">
<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">
<path d="M12 2a10 10 0 1 0 10 10H12V2z" />
<path d="M12 2a10 10 0 0 1 10 10" />
</svg>
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
</div>
</div>
)}
@@ -24,27 +21,17 @@ const Message = ({ message }) => {
<div className="message__text">{text}</div>
</div>
{/* Action buttons only for assistant messages */}
{/* Action buttons for assistant messages */}
{!isUser && (
<div className="message__actions">
<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">
<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>
<span className="material-symbols-outlined">thumb_up</span>
</button>
<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">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
<span>Note</span>
<span className="material-symbols-outlined">bookmark_border</span>
</button>
<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">
<path d="M12 2a10 10 0 1 0 10 10H12V2z" />
<path d="M12 2a10 10 0 0 1 10 10" />
</svg>
<span>Deeper</span>
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
</button>
</div>
)}