style(colors): changed colors
using slate and grey colors for the most part with violot bc why not
This commit is contained in:
parent
71c87e8468
commit
5e0de6e894
8 changed files with 18 additions and 83 deletions
|
|
@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
|
|||
|
||||
function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
|
||||
<div className="dark min-h-screen bg-gray-950 text-white flex items-center justify-center p-6">
|
||||
<ChatLayout />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function ChatLayout() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[80vh] max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg">
|
||||
<div className="flex flex-col">
|
||||
<ChatHeader />
|
||||
<ChatWindow messages={messages} />
|
||||
<MessageInput onSend={handleSend} />
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 2px solid var(--btn-color);
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
color: var(--btn-color);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover,
|
||||
.action-btn:focus {
|
||||
background-color: var(--btn-color);
|
||||
color: white;
|
||||
border-color: var(--btn-color);
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
fill: currentColor;
|
||||
transition: fill 0.25s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
|
@ -6,43 +6,6 @@ export default function ActionButton({
|
|||
type = "add", // 'add' or 'delete'
|
||||
...props
|
||||
}) {
|
||||
// Define color and icon based on type
|
||||
const config = {
|
||||
add: {
|
||||
color: "#0F2862",
|
||||
svg: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
delete: {
|
||||
color: "#9E363A",
|
||||
svg: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
const { color, svg } = config[type] || config.add;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@ import React from "react";
|
|||
|
||||
export default function ChatHeader({ title = "Title of Chat" }) {
|
||||
return (
|
||||
<header className="flex justify-center bg-blue-600">
|
||||
<h1 className="text-lg font-semibold">{title}</h1>
|
||||
<header className="flex justify-center text-slate-100">
|
||||
<h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
|
||||
{title}
|
||||
</h1>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ function MessageBubble({ message }) {
|
|||
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
|
||||
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
|
||||
>
|
||||
<div className="text-sm">{message.content}</div>
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@ function MessageBubble({ message }) {
|
|||
export default function ChatWindow({ messages }) {
|
||||
return (
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
<div className="space-y-2">
|
||||
<div className="">
|
||||
{messages.map((m, i) => (
|
||||
<MessageBubble key={i} message={m} />
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ export default function MessageInput({ onSend }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-black">
|
||||
<div className="flex shadow-lg">
|
||||
<form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
|
||||
<div className="flex p-4 shadow-xl">
|
||||
<input
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="Type a message..."
|
||||
className="flex-1 rounded-md shadow-2sx"
|
||||
className="flex-1 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
|
||||
/>
|
||||
<button type="submit" className="">
|
||||
Send
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--color-primary: 15 40 98;
|
||||
--color-secondary: 79 95 118;
|
||||
--color-accent: 158 54 58;
|
||||
--color-paragraph: 255 255 255;
|
||||
--color-background: 9 31 54;
|
||||
.dark {
|
||||
--paragraph: 235, 236, 239;
|
||||
--background: 15, 16, 26;
|
||||
--primary: 158, 166, 214;
|
||||
--secondary: 35, 50, 133;
|
||||
--accent: 52, 75, 223;
|
||||
background: rgba(var(--background));
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: rgb(var(--color-background));
|
||||
color: rgb(var(--color-paragraph));
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue