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

bauhaus update

Browse Source
This commit is contained in:
hahachait
2026-08-14 08:44:30 -04:00
parent c9085bdefb
commit e0ae1f91c1
11 changed files with 478 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1 -1
View File
@@ -7,7 +7,7 @@
<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=Caveat:wght@400;600;700&family=Inter:wght@300;400;500&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"
/> />
</head> </head>
frontend/src/App.jsx
+15
View File
@@ -14,6 +14,7 @@ function App() {
const [activeSubject, setActiveSubject] = useState("science"); const [activeSubject, setActiveSubject] = useState("science");
const [activeChat, setActiveChat] = useState(null); const [activeChat, setActiveChat] = useState(null);
const [activeTab, setActiveTab] = useState("chat"); const [activeTab, setActiveTab] = useState("chat");
const [greetingDismissed, setGreetingDismissed] = useState(false);
const handleSend = (text) => { const handleSend = (text) => {
if (!text.trim()) return; if (!text.trim()) return;
@@ -55,6 +56,20 @@ function App() {
{/* Chat Area */} {/* 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}
onPromptClick={handlePromptClick} onPromptClick={handlePromptClick}
frontend/src/components/chat-history/ChatHistory.css
+30 -16
View File
@@ -1,10 +1,10 @@
/* ======================================== /* ========================================
ChatHistory Component — padhLe ChatHistory Component — padhLe (Bauhaus)
======================================== */ ======================================== */
.chat-history { .chat-history {
flex: 1; flex: 1;
padding: var(--spacing-xl) 0; padding: var(--spacing-lg) 0;
overflow-y: auto; overflow-y: auto;
} }
@@ -27,21 +27,24 @@
.chat-history__empty-content { .chat-history__empty-content {
max-width: 600px; max-width: 600px;
width: 100%;
} }
.chat-history__empty-title { .chat-history__empty-title {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 3rem; font-size: 3rem;
font-weight: 700; font-weight: 800;
color: var(--color-text); text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-primary);
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
.chat-history__empty-tagline { .chat-history__empty-tagline {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1.05rem; font-size: 1.1rem;
font-weight: 300; font-weight: 700;
color: var(--color-text-muted); color: var(--color-text-variant);
margin-bottom: var(--spacing-2xl); margin-bottom: var(--spacing-2xl);
} }
@@ -49,37 +52,48 @@
.chat-history__prompts { .chat-history__prompts {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm); gap: var(--spacing-md);
} }
.chat-history__prompt { .chat-history__prompt {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: var(--spacing-sm); gap: var(--spacing-sm);
padding: var(--spacing-md); padding: var(--spacing-md);
border: var(--border-thin); border: var(--border-thick);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color-bg); background-color: var(--color-surface);
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 300; font-weight: 700;
color: var(--color-text);
line-height: 1.5; line-height: 1.5;
color: var(--color-text);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.chat-history__prompt:hover { .chat-history__prompt:hover {
background-color: var(--color-hover); background-color: var(--color-surface-container);
border-color: var(--color-text-muted); transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
}
.chat-history__prompt:active {
transform: translateY(2px);
box-shadow: none;
} }
.chat-history__prompt-icon { .chat-history__prompt-icon {
font-size: 1.25rem; font-size: 1.25rem;
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px;
} }
.chat-history__prompt-text { .chat-history__prompt-text {
color: var(--color-text); color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 700;
} }
frontend/src/components/chat-input/ChatInput.css
+68 -40
View File
@@ -1,60 +1,65 @@
/* ======================================== /* ========================================
ChatInput Component — padhLe ChatInput Component — padhLe (Bauhaus)
======================================== */ ======================================== */
.chat-input { .chat-input {
padding: var(--spacing-md) 0 var(--spacing-xl) 0; padding: var(--spacing-md) 0;
border-top: var(--border-thin); border-top: var(--border-thick);
background-color: var(--color-bg); background-color: var(--color-surface);
box-shadow: 0 -4px 0 0px var(--color-outline);
} }
.chat-input__wrapper { .chat-input__wrapper {
max-width: 760px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
} }
/* Form */ /* Form Container */
.chat-input__form { .chat-input__form {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: var(--spacing-sm); gap: var(--spacing-sm);
border: var(--border-thin); border: var(--border-thick);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm);
transition: border-color var(--transition-fast); background-color: var(--color-surface);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast);
} }
.chat-input__form:focus-within { .chat-input__form:focus-within {
border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15), var(--shadow-brutal-sm);
box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08); border-color: var(--color-primary);
} }
/* Attachments */ /* Attachments */
.chat-input__attachments { .chat-input__attachments {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2px; gap: var(--spacing-xs);
padding-bottom: 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: 32px; width: 38px;
height: 32px; height: 38px;
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: pointer; cursor: pointer;
color: var(--color-text-muted); color: var(--color-text-variant);
opacity: 0.5; box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.chat-input__attach-btn:hover { .chat-input__attach-btn:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
opacity: 1; color: var(--color-text);
transform: translateY(-1px);
} }
/* Textarea Field */ /* Textarea Field */
@@ -62,56 +67,79 @@
flex: 1; flex: 1;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1rem; font-size: 1rem;
font-weight: 300; font-weight: 600;
line-height: 1.6; line-height: 1.5;
color: var(--color-text); color: var(--color-text);
background-color: transparent; background-color: transparent;
border: none; border: none;
padding: var(--spacing-xs) 0; padding: var(--spacing-sm);
resize: none; resize: none;
outline: none; outline: none;
min-height: 24px; min-height: 24px;
max-height: 200px; max-height: 200px;
text-transform: uppercase;
letter-spacing: 0.03em;
} }
.chat-input__field::placeholder { .chat-input__field::placeholder {
color: var(--color-text-muted); color: var(--color-text-variant);
opacity: 0.5; opacity: 0.6;
} }
/* Submit Button */ /* Send Button */
.chat-input__submit { .chat-input__submit {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 36px; width: 42px;
height: 36px; height: 42px;
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.3; color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
opacity: 0.4;
transition: all var(--transition-fast); transition: all var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
} }
.chat-input__submit--active { .chat-input__submit--active {
background-color: var(--color-accent); background-color: var(--color-primary);
color: var(--color-bg); 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__submit--active:hover {
background-color: var(--color-text-muted); transform: translateY(-2px);
transform: translateY(-1px); box-shadow: var(--shadow-brutal);
}
.chat-input__submit--active:active {
transform: translateY(2px);
box-shadow: none;
} }
/* Disclaimer */ /* Disclaimer */
.chat-input__disclaimer { .chat-input__disclaimer {
font-size: 0.75rem; font-family: var(--font-heading);
color: var(--color-text-muted); font-size: 0.65rem;
font-weight: 800;
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: var(--spacing-sm);
opacity: 0.7;
} }
frontend/src/components/chat-input/ChatInput.jsx
+5 -3
View File
@@ -106,9 +106,11 @@ const ChatInput = ({ onSend }) => {
</form> </form>
{/* AI Disclaimer */} {/* AI Disclaimer */}
<p className="chat-input__disclaimer"> <div className="chat-input__disclaimer-wrapper">
padhLe AI can make mistakes. Consider verifying important information. <p className="chat-input__disclaimer">
</p> padhLe AI can make mistakes. Consider verifying important information.
</p>
</div>
</div> </div>
</div> </div>
); );
frontend/src/components/message/Message.css
+135 -39
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Message Component — padhLe Message Component — padhLe (Bauhaus)
======================================== */ ======================================== */
/* Base Message */ /* Base Message */
@@ -29,74 +29,170 @@
align-items: flex-start; align-items: flex-start;
} }
/* Bubble */ /* --- USER MESSAGE --- */
.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);
}
.message--user .message__bubble { .message--user .message__bubble {
background-color: var(--color-accent); background-color: var(--color-primary);
color: var(--color-bg); color: var(--color-on-primary);
border: var(--border-thin); 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 { .message__text {
font-size: 1rem; font-size: 0.95rem;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
font-weight: 600;
} }
.message--assistant .message__text { .message--assistant .message__text {
color: var(--color-text); color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.02em;
} }
.message--user .message__text { /* --- ACTION BUTTONS --- */
color: var(--color-bg);
}
/* Action Buttons */
.message__actions { .message__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-xs);
margin-top: var(--spacing-sm); margin-top: var(--spacing-sm);
padding-left: var(--spacing-xs); flex-wrap: wrap;
} }
.message__action { .message__action {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
padding: 4px var(--spacing-sm); padding: 6px var(--spacing-md);
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color-surface);
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-heading);
font-size: 0.75rem; font-size: 0.7rem;
font-weight: 400; font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.message__action:hover { .message__action:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
color: var(--color-text); 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 { .message__action svg {
opacity: 0.6; flex-shrink: 0;
}
.message__action:hover svg {
opacity: 1;
} }
frontend/src/components/message/Message.jsx
+15 -5
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Message Component — padhLe Message Component — padhLe (Bauhaus)
======================================== */ ======================================== */
import "./Message.css"; import "./Message.css";
@@ -10,6 +10,16 @@ const Message = ({ message }) => {
return ( return (
<div className={`message ${isUser ? "message--user" : "message--assistant"}`}> <div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
{!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>
</div>
</div>
)}
<div className="message__bubble"> <div className="message__bubble">
<div className="message__text">{text}</div> <div className="message__text">{text}</div>
</div> </div>
@@ -18,19 +28,19 @@ const Message = ({ message }) => {
{!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" strokeLinecap="round" strokeLinejoin="round"> <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" /> <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> </svg>
<span>Helpful</span> <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" strokeLinecap="round" strokeLinejoin="round"> <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" /> <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg> </svg>
<span>Note</span> <span>Note</span>
</button> </button>
<button className="message__action" 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" strokeLinecap="round" strokeLinejoin="round"> <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 1 0 10 10H12V2z" />
<path d="M12 2a10 10 0 0 1 10 10" /> <path d="M12 2a10 10 0 0 1 10 10" />
</svg> </svg>
frontend/src/components/sidebar/Sidebar.css
+76 -47
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Sidebar Component — padhLe Sidebar Component — padhLe (Bauhaus)
======================================== */ ======================================== */
/* Main Sidebar */ /* Main Sidebar */
@@ -9,8 +9,8 @@
left: 0; left: 0;
width: var(--sidebar-width); width: var(--sidebar-width);
height: 100vh; height: 100vh;
background-color: var(--color-bg); background-color: var(--color-surface);
border-right: var(--border-thin); border-right: var(--border-thick);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--spacing-lg); padding: var(--spacing-lg);
@@ -18,13 +18,12 @@
z-index: 10; z-index: 10;
} }
/* Scrollbar styling */
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
width: 4px; width: 4px;
} }
.sidebar::-webkit-scrollbar-thumb { .sidebar::-webkit-scrollbar-thumb {
background-color: var(--color-line); background-color: var(--color-outline);
border-radius: 2px; border-radius: 2px;
} }
@@ -32,14 +31,16 @@
.sidebar__brand { .sidebar__brand {
padding-bottom: var(--spacing-md); padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
border-bottom: var(--border-medium);
} }
.sidebar__title { .sidebar__title {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 2.25rem; font-size: 2rem;
font-weight: 700; font-weight: 800;
letter-spacing: 0.05em; text-transform: uppercase;
color: var(--color-text); letter-spacing: 0.02em;
color: var(--color-primary);
} }
/* New Chat Button */ /* New Chat Button */
@@ -50,21 +51,29 @@
gap: var(--spacing-xs); gap: var(--spacing-xs);
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: var(--spacing-sm);
border: var(--border-thin); border: var(--border-medium);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color-bg); background-color: var(--color-surface);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-body); font-family: var(--font-heading);
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 400; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
} }
.sidebar__new-chat:hover { .sidebar__new-chat:hover {
background-color: var(--color-hover); transform: translateY(-2px);
border-color: var(--color-text-muted); box-shadow: var(--shadow-brutal);
}
.sidebar__new-chat:active {
transform: translateY(2px);
box-shadow: none;
} }
/* Section */ /* Section */
@@ -79,11 +88,12 @@
} }
.sidebar__section-title { .sidebar__section-title {
font-family: var(--font-heading);
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 500; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--color-text-muted); color: var(--color-text-variant);
margin-bottom: var(--spacing-sm); margin-bottom: var(--spacing-sm);
padding-left: var(--spacing-sm); padding-left: var(--spacing-sm);
} }
@@ -93,7 +103,7 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 4px;
} }
.sidebar__link { .sidebar__link {
@@ -102,30 +112,37 @@
gap: var(--spacing-sm); gap: var(--spacing-sm);
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: var(--spacing-sm);
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.9rem; font-size: 0.8rem;
font-weight: 300; font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-variant);
text-align: left; text-align: left;
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.sidebar__link:hover { .sidebar__link:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
color: var(--color-text); color: var(--color-text);
transform: translateY(-1px);
} }
.sidebar__link--active { .sidebar__link--active {
background-color: var(--color-accent); background-color: var(--color-primary);
color: var(--color-bg); color: var(--color-on-primary);
border-color: var(--color-outline);
} }
.sidebar__link--active:hover { .sidebar__link--active:hover {
color: var(--color-bg); color: var(--color-on-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
} }
.sidebar__icon { .sidebar__icon {
@@ -141,7 +158,7 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 4px;
} }
.sidebar__chat-link { .sidebar__chat-link {
@@ -150,26 +167,30 @@
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: var(--spacing-sm);
padding-left: var(--spacing-sm); padding-left: var(--spacing-sm);
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
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: all var(--transition-fast); transition: all var(--transition-fast);
} }
.sidebar__chat-link:hover { .sidebar__chat-link:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
transform: translateY(-1px);
} }
.sidebar__chat-link--active { .sidebar__chat-link--active {
background-color: var(--color-hover); background-color: var(--color-surface-container);
box-shadow: var(--shadow-brutal);
} }
.sidebar__chat-preview { .sidebar__chat-preview {
font-size: 0.85rem; font-family: var(--font-body);
font-weight: 400; font-size: 0.8rem;
font-weight: 700;
color: var(--color-text); color: var(--color-text);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -177,9 +198,12 @@
} }
.sidebar__chat-time { .sidebar__chat-time {
font-size: 0.7rem; font-family: var(--font-body);
color: var(--color-text-muted); font-size: 0.65rem;
margin-top: 2px; font-weight: 700;
text-transform: uppercase;
color: var(--color-text-variant);
margin-top: 4px;
} }
/* Footer */ /* Footer */
@@ -188,7 +212,7 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
padding-top: var(--spacing-sm); padding-top: var(--spacing-sm);
border-top: var(--border-thin); border-top: var(--border-medium);
margin-top: auto; margin-top: auto;
} }
@@ -198,23 +222,28 @@
gap: var(--spacing-sm); gap: var(--spacing-sm);
width: 100%; width: 100%;
padding: var(--spacing-sm); padding: var(--spacing-sm);
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.85rem; font-size: 0.75rem;
font-weight: 300; font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-variant);
text-align: left; text-align: left;
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.sidebar__footer-btn:hover { .sidebar__footer-btn:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
color: var(--color-text); color: var(--color-text);
transform: translateY(-1px);
} }
.sidebar__footer-btn svg { .sidebar__footer-btn:active {
flex-shrink: 0; transform: translateY(2px);
box-shadow: none;
} }
frontend/src/components/top-nav/TopNav.css
+28 -19
View File
@@ -1,14 +1,14 @@
/* ======================================== /* ========================================
TopNav Component — padhLe TopNav Component — padhLe (Bauhaus)
======================================== */ ======================================== */
.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-xl); padding: var(--spacing-sm) var(--spacing-lg);
border-bottom: var(--border-thin); border-bottom: var(--border-thick);
background-color: var(--color-bg); background-color: var(--color-surface);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 5; z-index: 5;
@@ -26,29 +26,36 @@
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md);
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: pointer; cursor: pointer;
font-family: var(--font-body); font-family: var(--font-heading);
font-size: 0.9rem; font-size: 0.8rem;
font-weight: 400; font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.topnav__tab:hover { .topnav__tab:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
color: var(--color-text); color: var(--color-text);
transform: translateY(-2px);
} }
.topnav__tab--active { .topnav__tab--active {
background-color: var(--color-accent); background-color: var(--color-primary);
color: var(--color-bg); color: var(--color-on-primary);
border-color: var(--color-outline);
} }
.topnav__tab--active:hover { .topnav__tab--active:hover {
color: var(--color-bg); color: var(--color-on-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-brutal);
} }
.topnav__icon { .topnav__icon {
@@ -56,7 +63,7 @@
} }
.topnav__label { .topnav__label {
font-family: var(--font-body); font-family: var(--font-heading);
} }
/* Action Buttons (Search, Notifications) */ /* Action Buttons (Search, Notifications) */
@@ -72,15 +79,17 @@
justify-content: center; justify-content: center;
width: 36px; width: 36px;
height: 36px; height: 36px;
border: none; border: var(--border-medium);
background: transparent;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: transparent;
cursor: pointer; cursor: pointer;
color: var(--color-text-muted); color: var(--color-text-variant);
box-shadow: var(--shadow-brutal-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.topnav__action:hover { .topnav__action:hover {
background-color: var(--color-hover); background-color: var(--color-surface-variant);
color: var(--color-text); color: var(--color-text);
transform: translateY(-2px);
} }
frontend/src/styles/App.css
+56 -3
View File
@@ -1,6 +1,59 @@
/* ======================================== /* ========================================
App Component — padhLe App Component — padhLe (Bauhaus)
======================================== */ ======================================== */
/* All page styles are in global.css */ /* Greeting Banner */
/* This file is intentionally kept minimal */ .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
+49 -26
View File
@@ -1,5 +1,5 @@
/* ======================================== /* ========================================
Global Styles — padhLe Global Styles — padhLe (Bauhaus Theme)
======================================== */ ======================================== */
/* Reset */ /* Reset */
@@ -11,47 +11,69 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Root Variables */ /* Root Variables — Cognitive Flow / Bauhaus */
:root { :root {
--color-bg: #ffffff; /* Colors */
--color-border: #1a1a1a; --color-primary: #4f46e5;
--color-text: #1a1a1a; --color-secondary: #a855f7;
--color-text-muted: #555555; --color-tertiary: #10b981;
--color-accent: #1a1a1a; --color-background: #f8f9ff;
--color-line: #e8e8e8; --color-surface: #ffffff;
--color-hover: #f5f5f5; --color-surface-variant: #d3e4fe;
--color-surface-lowest: #ffffff;
--color-surface-low: #eff4ff;
--color-surface-container: #e5eeff;
--color-surface-high: #dce9ff;
--color-outline: #1a1a1a;
--color-outline-variant: #c7c4d8;
--color-text: #0b1c30;
--color-text-variant: #464555;
--color-on-primary: #ffffff;
--color-on-secondary: #ffffff;
--color-on-tertiary: #ffffff;
--font-heading: "Caveat", cursive, sans-serif; /* Fonts */
--font-heading: "Montserrat", sans-serif;
--font-body: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
--border-thin: 1px solid var(--color-border); /* Border */
--border-medium: 2px solid var(--color-border); --border-thick: 3px solid var(--color-outline);
--border-radius: 4px; --border-medium: 2px solid var(--color-outline);
--border-radius: 8px;
--spacing-xs: 0.5rem; /* Spacing */
--spacing-sm: 0.75rem; --spacing-xs: 4px;
--spacing-md: 1rem; --spacing-sm: 12px;
--spacing-lg: 1.5rem; --spacing-md: 16px;
--spacing-xl: 2rem; --spacing-lg: 24px;
--spacing-2xl: 3rem; --spacing-xl: 40px;
--spacing-3xl: 4rem; --spacing-2xl: 64px;
--spacing-4xl: 6rem;
/* Transition */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 250ms ease;
--transition-slow: 350ms 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 */
--sidebar-width: 240px; --sidebar-width: 240px;
--container-max: 1200px;
} }
/* Body */ /* Body */
body { body {
font-family: var(--font-body); font-family: var(--font-body);
font-weight: 300; font-weight: 600;
background-color: var(--color-bg); background-color: var(--color-background);
color: var(--color-text); color: var(--color-text);
line-height: 1.6; line-height: 1.6;
min-height: 100vh; min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* Page Frame — sidebar + main layout */ /* Page Frame — sidebar + main layout */
@@ -70,17 +92,18 @@ body {
min-width: 0; min-width: 0;
} }
/* Main Content Wrapper (centered chat area) */ /* Main Content Wrapper (scrollable chat area) */
.main-content { .main-content {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
background-color: var(--color-background);
} }
/* Container — centered content */ /* Container — centered content */
.container { .container {
max-width: 800px; max-width: var(--container-max);
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }