From e0ae1f91c14de23ba50b8b9f19358c538921fa54 Mon Sep 17 00:00:00 2001 From: Chait Haha Date: Fri, 14 Aug 2026 08:44:30 -0400 Subject: [PATCH] bauhaus update --- frontend/index.html | 2 +- frontend/src/App.jsx | 15 ++ .../components/chat-history/ChatHistory.css | 46 +++-- .../src/components/chat-input/ChatInput.css | 108 +++++++---- .../src/components/chat-input/ChatInput.jsx | 8 +- frontend/src/components/message/Message.css | 174 ++++++++++++++---- frontend/src/components/message/Message.jsx | 20 +- frontend/src/components/sidebar/Sidebar.css | 123 ++++++++----- frontend/src/components/top-nav/TopNav.css | 47 +++-- frontend/src/styles/App.css | 59 +++++- frontend/src/styles/global.css | 75 +++++--- 11 files changed, 478 insertions(+), 199 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index e99a7dd..27725d8 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,7 +7,7 @@ diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index cff1597..1115dae 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -14,6 +14,7 @@ function App() { const [activeSubject, setActiveSubject] = useState("science"); const [activeChat, setActiveChat] = useState(null); const [activeTab, setActiveTab] = useState("chat"); + const [greetingDismissed, setGreetingDismissed] = useState(false); const handleSend = (text) => { if (!text.trim()) return; @@ -55,6 +56,20 @@ function App() { {/* Chat Area */}
+ {!greetingDismissed && messages.length === 0 && ( +
+

Welcome to padhLe 📚

+

Let's make today a great day for learning.

+ +
+ )} { {/* AI Disclaimer */} -

- padhLe AI can make mistakes. Consider verifying important information. -

+
+

+ padhLe AI can make mistakes. Consider verifying important information. +

+
); diff --git a/frontend/src/components/message/Message.css b/frontend/src/components/message/Message.css index 323cf90..b6b8c8a 100644 --- a/frontend/src/components/message/Message.css +++ b/frontend/src/components/message/Message.css @@ -1,5 +1,5 @@ /* ======================================== - Message Component — padhLe + Message Component — padhLe (Bauhaus) ======================================== */ /* Base Message */ @@ -29,74 +29,170 @@ align-items: flex-start; } -/* Bubble */ -.message__bubble { - max-width: 80%; - padding: var(--spacing-lg); - border-radius: var(--border-radius); - line-height: 1.6; -} - -.message--assistant .message__bubble { - background-color: var(--color-bg); - border: var(--border-thin); -} - +/* --- USER MESSAGE --- */ .message--user .message__bubble { - background-color: var(--color-accent); - color: var(--color-bg); - border: var(--border-thin); + background-color: var(--color-primary); + color: var(--color-on-primary); + border: var(--border-thick); + border-radius: var(--border-radius); + padding: var(--spacing-md) var(--spacing-lg); + max-width: 80%; + position: relative; + box-shadow: var(--shadow-brutal-sm); + font-family: var(--font-body); + font-size: 0.9rem; + font-weight: 700; + line-height: 1.5; + 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 { + color: var(--color-on-primary); +} + +/* --- ASSISTANT AVATAR --- */ +.message__avatar { + display: flex; + align-items: flex-start; + margin-right: var(--spacing-sm); + flex-shrink: 0; + margin-top: 4px; +} + +.message__avatar-icon { + width: 40px; + height: 40px; + border: var(--border-medium); + border-radius: var(--border-radius); + background-color: var(--color-primary); + color: var(--color-on-primary); + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-brutal-sm); +} + +/* --- ASSISTANT MESSAGE --- */ +.message--assistant .message__bubble { + background-color: var(--color-surface); + 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; + } } -/* Text */ .message__text { - font-size: 1rem; + font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; + font-weight: 600; } .message--assistant .message__text { color: var(--color-text); + text-transform: uppercase; + letter-spacing: 0.02em; } -.message--user .message__text { - color: var(--color-bg); -} - -/* Action Buttons */ +/* --- ACTION BUTTONS --- */ .message__actions { display: flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-sm); - padding-left: var(--spacing-xs); + flex-wrap: wrap; } .message__action { display: flex; align-items: center; - gap: 4px; - padding: 4px var(--spacing-sm); - border: none; - background: transparent; + gap: 6px; + padding: 6px var(--spacing-md); + border: var(--border-medium); border-radius: var(--border-radius); + background-color: var(--color-surface); cursor: pointer; - font-family: var(--font-body); - font-size: 0.75rem; - font-weight: 400; - color: var(--color-text-muted); + font-family: var(--font-heading); + font-size: 0.7rem; + 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 { - background-color: var(--color-hover); + background-color: var(--color-surface-variant); color: var(--color-text); + transform: translateY(-2px); + box-shadow: var(--shadow-brutal); +} + +.message__action:active { + transform: translateY(2px); + box-shadow: none; +} + +.message__action--primary { + background-color: var(--color-secondary); + color: var(--color-on-secondary); + border-color: var(--color-outline); + margin-left: auto; +} + +.message__action--primary:hover { + background-color: var(--color-primary); + color: var(--color-on-primary); } .message__action svg { - opacity: 0.6; -} - -.message__action:hover svg { - opacity: 1; + flex-shrink: 0; } diff --git a/frontend/src/components/message/Message.jsx b/frontend/src/components/message/Message.jsx index 6bbc27a..bd214be 100644 --- a/frontend/src/components/message/Message.jsx +++ b/frontend/src/components/message/Message.jsx @@ -1,5 +1,5 @@ /* ======================================== - Message Component — padhLe + Message Component — padhLe (Bauhaus) ======================================== */ import "./Message.css"; @@ -10,6 +10,16 @@ const Message = ({ message }) => { return (
+ {!isUser && ( +
+
+ + + + +
+
+ )}
{text}
@@ -18,19 +28,19 @@ const Message = ({ message }) => { {!isUser && (
-