yeet

raggr-frontend/src/App.css

@@ -1,7 +1,170 @@
 @import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
+
+@theme {
+  --color-cream: #FBF7F0;
+  --color-cream-dark: #F3EDE2;
+  --color-warm-white: #FFFDF9;
+  --color-amber-glow: #E8943A;
+  --color-amber-soft: #F5C882;
+  --color-amber-pale: #FFF0D6;
+  --color-forest: #2D5A3D;
+  --color-forest-light: #3D763A;
+  --color-forest-pale: #E8F5E4;
+  --color-charcoal: #2C2420;
+  --color-warm-gray: #8A7E74;
+  --color-sand: #D4C5B0;
+  --color-sand-light: #E8DED0;
+  --color-blush: #F2D1B3;
+  --color-sidebar-bg: #2C2420;
+  --color-sidebar-hover: #3D352F;
+  --color-sidebar-active: #4A3F38;
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
 
 body {
-	margin: 0;
-	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-	background-color: #F9F5EB;
+  margin: 0;
+  font-family: var(--font-body);
+  background-color: var(--color-cream);
+  color: var(--color-charcoal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-sand);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-warm-gray);
+}
+
+/* Markdown content styling in answer bubbles */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+.markdown-content h1 { font-size: 1.25rem; }
+.markdown-content h2 { font-size: 1.1rem; }
+.markdown-content h3 { font-size: 1rem; }
+
+.markdown-content p {
+  margin: 0.5em 0;
+  line-height: 1.65;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.markdown-content li {
+  margin: 0.25em 0;
+  line-height: 1.6;
+}
+
+.markdown-content code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.88em;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.markdown-content pre {
+  background: var(--color-charcoal);
+  color: #F3EDE2;
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.markdown-content pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+}
+
+.markdown-content a {
+  color: var(--color-forest);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.markdown-content blockquote {
+  border-left: 3px solid var(--color-amber-glow);
+  padding-left: 1em;
+  margin: 0.75em 0;
+  color: var(--color-warm-gray);
+  font-style: italic;
+}
+
+/* Loading skeleton animation */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-sand-light) 25%,
+    var(--color-cream) 50%,
+    var(--color-sand-light) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+/* Fade-in animation for messages */
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message-enter {
+  animation: fadeSlideUp 0.35s ease-out forwards;
+}
+
+/* Subtle pulse for loading dots */
+@keyframes catPulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+.loading-dot {
+  animation: catPulse 1.4s ease-in-out infinite;
+}
+.loading-dot:nth-child(2) { animation-delay: 0.2s; }
+.loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+/* Textarea focus glow */
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-amber-soft);
 }

raggr-frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { AuthProvider } from "./contexts/AuthContext";
 import { ChatScreen } from "./components/ChatScreen";
 import { LoginScreen } from "./components/LoginScreen";
 import { conversationService } from "./api/conversationService";
+import catIcon from "./assets/cat.png";
 
 const AppContainer = () => {
   const [isAuthenticated, setAuthenticated] = useState<boolean>(false);
@@ -44,8 +45,15 @@ const AppContainer = () => {
   // Show loading state while checking authentication
   if (isChecking) {
     return (
-      <div className="h-screen flex items-center justify-center bg-white/85">
-        <div className="text-xl">Loading...</div>
+      <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
+        <img
+          src={catIcon}
+          alt="Simba"
+          className="w-16 h-16 animate-bounce"
+        />
+        <p className="text-warm-gray font-medium text-lg tracking-wide">
+          waking up simba...
+        </p>
       </div>
     );
   }

raggr-frontend/src/components/ChatScreen.tsx

@@ -94,8 +94,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
       }));
       setConversations(parsedConversations);
       setSelectedConversation(parsedConversations[0]);
-      console.log(parsedConversations);
-      console.log("JELLYFISH@");
     } catch (error) {
       console.error("Failed to load messages:", error);
     }
@@ -120,8 +118,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
 
   useEffect(() => {
     const loadMessages = async () => {
-      console.log(selectedConversation);
-      console.log("JELLYFISH");
       if (selectedConversation == null) return;
       try {
         const conversation = await conversationService.getConversation(
@@ -154,7 +150,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     setIsLoading(true);
 
     if (simbaMode) {
-      console.log("simba mode activated");
       const randomIndex = Math.floor(Math.random() * simbaAnswers.length);
       const randomElement = simbaAnswers[randomIndex];
       setAnswer(randomElement);
@@ -219,43 +214,62 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     }
   };
 
+  const handleLogout = () => {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    setAuthenticated(false);
+  };
+
   return (
-    <div className="h-screen flex flex-row bg-[#F9F5EB]">
-      {/* Sidebar - Expanded */}
+    <div className="h-screen flex flex-row bg-cream">
+      {/* Sidebar */}
       <aside
-        className={`hidden md:flex md:flex-col bg-[#F9F5EB] border-r border-gray-200 p-4 overflow-y-auto transition-all duration-300 ${sidebarCollapsed ? "w-20" : "w-64"}`}
+        className={`hidden md:flex md:flex-col bg-sidebar-bg transition-all duration-300 ease-in-out ${
+          sidebarCollapsed ? "w-[68px]" : "w-72"
+        }`}
       >
         {!sidebarCollapsed ? (
-          <div className="bg-[#F9F5EB]">
-            <div className="flex flex-row items-center gap-2 mb-6">
+          <div className="flex flex-col h-full">
+            {/* Sidebar header */}
+            <div className="flex items-center gap-3 px-5 py-5 border-b border-white/10">
               <img
                 src={catIcon}
                 alt="Simba"
-                className="cursor-pointer hover:opacity-80"
+                className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200 flex-shrink-0"
                 onClick={() => setSidebarCollapsed(true)}
               />
-              <h2 className="text-3xl bg-[#F9F5EB] font-semibold">asksimba!</h2>
+              <h2 className="font-[family-name:var(--font-display)] text-xl font-bold text-cream tracking-tight">
+                asksimba
+              </h2>
             </div>
-            <ConversationList
-              conversations={conversations}
-              onCreateNewConversation={handleCreateNewConversation}
-              onSelectConversation={handleSelectConversation}
-            />
-            <div className="mt-auto pt-4">
+
+            {/* Conversations */}
+            <div className="flex-1 overflow-y-auto px-3 py-3">
+              <ConversationList
+                conversations={conversations}
+                onCreateNewConversation={handleCreateNewConversation}
+                onSelectConversation={handleSelectConversation}
+                selectedId={selectedConversation?.id}
+              />
+            </div>
+
+            {/* Logout */}
+            <div className="px-3 pb-4 pt-2 border-t border-white/10">
               <button
-                className="w-full p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm"
-                onClick={() => setAuthenticated(false)}
+                className="w-full py-2.5 px-3 text-sm text-cream/60 hover:text-cream hover:bg-white/5
+                  rounded-lg transition-all duration-200 cursor-pointer"
+                onClick={handleLogout}
               >
-                logout
+                Sign out
               </button>
             </div>
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-4">
+          <div className="flex flex-col items-center py-5 h-full">
             <img
               src={catIcon}
               alt="Simba"
-              className="cursor-pointer hover:opacity-80"
+              className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200"
               onClick={() => setSidebarCollapsed(false)}
             />
           </div>
@@ -265,50 +279,74 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
       {/* Main chat area */}
       <div className="flex-1 flex flex-col h-screen overflow-hidden">
         {/* Mobile header */}
-        <header className="md:hidden flex flex-row justify-between items-center gap-3 p-4 border-b border-gray-200 bg-white">
-          <div className="flex flex-row items-center gap-2">
-            <img src={catIcon} alt="Simba" className="w-10 h-10" />
-            <h1 className="text-xl">asksimba!</h1>
+        <header className="md:hidden flex items-center justify-between px-4 py-3 bg-warm-white border-b border-sand-light">
+          <div className="flex items-center gap-2.5">
+            <img src={catIcon} alt="Simba" className="w-8 h-8" />
+            <h1 className="font-[family-name:var(--font-display)] text-lg font-bold text-charcoal">
+              asksimba
+            </h1>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex items-center gap-2">
             <button
-              className="p-2 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md text-sm"
+              className="px-3 py-1.5 text-xs font-medium rounded-lg bg-cream-dark text-charcoal
+                hover:bg-sand-light transition-colors cursor-pointer"
               onClick={() => setShowConversations(!showConversations)}
             >
-              {showConversations ? "hide" : "show"}
+              {showConversations ? "Hide" : "Threads"}
             </button>
             <button
-              className="p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm"
-              onClick={() => setAuthenticated(false)}
+              className="px-3 py-1.5 text-xs font-medium rounded-lg text-warm-gray
+                hover:bg-cream-dark transition-colors cursor-pointer"
+              onClick={handleLogout}
             >
-              logout
+              Sign out
             </button>
           </div>
         </header>
 
-        {/* Messages area */}
+        {/* Conversation title bar */}
         {selectedConversation && (
-          <div className="sticky top-0 mx-auto w-full">
-            <div className="bg-[#F9F5EB] text-black px-6 w-full py-3">
-              <h2 className="text-lg font-semibold">
-                {selectedConversation.title || "Untitled Conversation"}
-              </h2>
-            </div>
+          <div className="bg-warm-white/80 backdrop-blur-sm border-b border-sand-light/50 px-6 py-3">
+            <h2 className="text-sm font-semibold text-charcoal truncate max-w-2xl mx-auto">
+              {selectedConversation.title || "Untitled Conversation"}
+            </h2>
           </div>
         )}
-        <div className="flex-1 overflow-y-auto relative px-4 py-6">
-          {/* Floating conversation name */}
 
+        {/* Messages area */}
+        <div className="flex-1 overflow-y-auto px-4 py-6">
           <div className="max-w-2xl mx-auto flex flex-col gap-4">
+            {/* Mobile conversation list */}
             {showConversations && (
-              <div className="md:hidden">
+              <div className="md:hidden mb-2">
                 <ConversationList
                   conversations={conversations}
                   onCreateNewConversation={handleCreateNewConversation}
                   onSelectConversation={handleSelectConversation}
+                  selectedId={selectedConversation?.id}
                 />
               </div>
             )}
+
+            {/* Empty state */}
+            {messages.length === 0 && !isLoading && (
+              <div className="flex flex-col items-center justify-center py-20 gap-4">
+                <div className="relative">
+                  <div className="absolute -inset-4 bg-amber-soft/20 rounded-full blur-2xl" />
+                  <img
+                    src={catIcon}
+                    alt="Simba"
+                    className="relative w-16 h-16 opacity-60"
+                  />
+                </div>
+                <div className="text-center">
+                  <p className="text-warm-gray text-sm">
+                    Ask Simba anything
+                  </p>
+                </div>
+              </div>
+            )}
+
             {messages.map((msg, index) => {
               if (msg.speaker === "simba") {
                 return <AnswerBubble key={index} text={msg.text} />;
@@ -321,8 +359,8 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
         </div>
 
         {/* Input area */}
-        <footer className="p-4 bg-[#F9F5EB]">
-          <div className="max-w-2xl mx-auto">
+        <footer className="border-t border-sand-light/50 bg-warm-white/60 backdrop-blur-sm">
+          <div className="max-w-2xl mx-auto px-4 py-4">
             <MessageInput
               query={query}
               handleQueryChange={handleQueryChange}

raggr-frontend/src/components/LoginScreen.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { userService } from "../api/userService";
 import { oidcService } from "../api/oidcService";
+import catIcon from "../assets/cat.png";
 
 type LoginScreenProps = {
   setAuthenticated: (isAuth: boolean) => void;
@@ -76,54 +77,77 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
   // Show loading state while checking authentication or processing callback
   if (isChecking || isLoggingIn) {
     return (
-      <div className="h-screen bg-opacity-20">
-        <div className="bg-white/85 h-screen flex items-center justify-center">
-          <div className="text-center">
-            <p className="text-lg sm:text-xl">
-              {isLoggingIn ? "Logging in..." : "Checking authentication..."}
-            </p>
-          </div>
-        </div>
+      <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
+        <img
+          src={catIcon}
+          alt="Simba"
+          className="w-16 h-16 animate-bounce"
+        />
+        <p className="text-warm-gray font-medium text-lg tracking-wide">
+          {isLoggingIn ? "letting you in..." : "checking credentials..."}
+        </p>
       </div>
     );
   }
 
   return (
-    <div className="h-screen bg-opacity-20">
-      <div className="bg-white/85 h-screen">
-        <div className="flex flex-row justify-center py-4">
-          <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-grow justify-center w-full bg-amber-400 p-2">
-                <h1 className="text-base sm:text-xl font-bold text-center">
-                  I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A
-                  DESIGNER COMES.
-                </h1>
-              </div>
-              <header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white">
-                <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
-              </header>
+    <div className="h-screen bg-cream flex items-center justify-center p-4">
+      {/* Decorative background texture */}
+      <div className="fixed inset-0 opacity-[0.03] pointer-events-none"
+        style={{
+          backgroundImage: `radial-gradient(circle at 1px 1px, var(--color-charcoal) 1px, transparent 0)`,
+          backgroundSize: '24px 24px'
+        }}
+      />
 
-              {error && (
-                <div className="text-red-600 font-semibold text-sm sm:text-base bg-red-50 p-3 rounded-md">
-                  {error}
-                </div>
-              )}
-
-              <div className="text-center text-sm sm:text-base text-gray-600 py-2">
-                Click below to login with Authelia
-              </div>
-            </div>
-
-            <button
-              className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base font-semibold"
-              onClick={handleOIDCLogin}
-              disabled={isLoggingIn}
-            >
-              {isLoggingIn ? "Redirecting..." : "Login with Authelia"}
-            </button>
+      <div className="relative w-full max-w-sm">
+        {/* Cat icon & branding */}
+        <div className="flex flex-col items-center mb-8">
+          <div className="relative mb-4">
+            <div className="absolute -inset-3 bg-amber-soft/40 rounded-full blur-xl" />
+            <img
+              src={catIcon}
+              alt="Simba"
+              className="relative w-20 h-20 drop-shadow-lg"
+            />
           </div>
+          <h1 className="font-[family-name:var(--font-display)] text-4xl font-bold text-charcoal tracking-tight">
+            asksimba
+          </h1>
+          <p className="text-warm-gray text-sm mt-1.5 tracking-wide">
+            your feline knowledge companion
+          </p>
         </div>
+
+        {/* Login card */}
+        <div className="bg-warm-white rounded-2xl shadow-lg shadow-sand/40 border border-sand-light/60 p-8">
+          {error && (
+            <div className="mb-4 text-sm bg-red-50 text-red-700 p-3 rounded-xl border border-red-200">
+              {error}
+            </div>
+          )}
+
+          <p className="text-center text-warm-gray text-sm mb-6">
+            Sign in to start chatting with Simba
+          </p>
+
+          <button
+            className="w-full py-3.5 px-4 bg-forest text-white font-semibold rounded-xl
+              hover:bg-forest-light transition-all duration-200
+              active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed
+              shadow-md shadow-forest/20 hover:shadow-lg hover:shadow-forest/30
+              cursor-pointer text-sm tracking-wide"
+            onClick={handleOIDCLogin}
+            disabled={isLoggingIn}
+          >
+            {isLoggingIn ? "Redirecting..." : "Sign in with Authelia"}
+          </button>
+        </div>
+
+        {/* Footer paw prints */}
+        <p className="text-center text-sand mt-6 text-xs tracking-widest select-none">
+          ~ meow ~
+        </p>
       </div>
     </div>
   );