Merge pull request #17 from lordlinus/theme_cust

update theme files and asset references
lordlinus · Nov 11, 2024 · 13b2cb3 · 13b2cb3
2 parents b2a251d + e3bc39d
commit 13b2cb3
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 13 deletions.
diff --git a/frontend/app/assets/bot.svg → frontend/app/assets/bot-agoda.svg b/frontend/app/assets/bot.svg → frontend/app/assets/bot-agoda.svg
diff --git a/frontend/app/assets/bot.png b/frontend/app/assets/bot.png
diff --git a/frontend/app/assets/logo-agoda.svg b/frontend/app/assets/logo-agoda.svg
diff --git a/frontend/app/assets/logo.svg b/frontend/app/assets/logo.svg
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url("theme.css");
+@import url("theme-capitaland.css");
 @import url("boxicons/css/boxicons.min.css");
 
 @layer base {

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Icon from "@/components/ui/icon";
 import LogoImg from "@/app/assets/logo.svg";
-import BotImg from "@/app/assets/bot.svg";
+import BotImg from "@/app/assets/bot.png";
 
 type Message = {
   id: number;
@@ -155,7 +155,7 @@ export default function Component() {
                 </div>
               ) : (
                 <div className="flex gap-2 justify-start">
-                  <img src={BotImg} alt="Bot" className="w-8 h-8 rounded-full" />
+                  <img src={BotImg.src} alt="Bot" className="w-8 h-8 rounded-full" />
                   <div className="max-w-[80%]">
                     <div className="rounded-lg text-sm p-4 theme-message-bg-bot">
                       {message.content.startsWith("{")
@@ -172,7 +172,7 @@ export default function Component() {
           ))}
           {isLoading && (
             <div className="flex gap-2 justify-start">
-              <img src={BotImg} alt="Bot" className="w-8 h-8 rounded-full" />
+              <img src={BotImg.src} alt="Bot" className="w-8 h-8 rounded-full" />
               <div className="max-w-[80%]">
                 <div className="flex items-center rounded-lg text-sm p-4 theme-message-bg-bot">
                   <Icon name="loader" className="bx-spin mr-2" />

diff --git a/frontend/app/theme.css → frontend/app/theme-agoda.css b/frontend/app/theme.css → frontend/app/theme-agoda.css
diff --git a/frontend/app/theme-capitaland.css b/frontend/app/theme-capitaland.css
@@ -0,0 +1,27 @@
+:root {
+    --theme-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    --theme-primary-color: hsl(211, 78%, 31%);
+    --theme-primary-light-color: hsla(211, 78%, 31%, 0.15);
+    --theme-ring-outline-color: var(--theme-primary-color);
+    --theme-message-bg-bot: hsla(0, 0%, 78%, 0.25);
+    --theme-message-bg-user: hsla(148, 92%, 36%, 0.15);
+    --theme-avatar-bg-user: hsl(143, 100%, 31%);
+    --theme-avatar-text-color-user: white;
+}
+
+body {
+    font-family: var(--theme-font-family);
+}
+
+.theme-message-bg-bot {
+    background-color: var(--theme-message-bg-bot);
+}
+
+.theme-message-bg-user {
+    background-color: var(--theme-message-bg-user);
+}
+
+.theme-avatar-user {
+    background-color: var(--theme-avatar-bg-user);
+    color: var(--theme-avatar-text-color-user);
+}