🎨 style(chatTrigger): update chat trigger button styles to include disabled state

🔧 chore(index.css): add CSS variable for disabled chat trigger color
🔧 chore(tailwind.config.js): add CSS variable for disabled chat trigger color
This commit is contained in:
Lucas Oliveira 2023-07-03 22:09:43 -03:00
commit dde42eec0f
4 changed files with 260 additions and 354 deletions

607
poetry.lock generated

File diff suppressed because it is too large Load diff

View file

@ -33,7 +33,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
<button onClick={handleClick} className={ "transition-all fixed bottom-4 right-4 flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border "+ (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")}> <button onClick={handleClick} className={ "transition-all fixed bottom-4 right-4 flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border "+ (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")}>
<div className="flex gap-3"> <div className="flex gap-3">
<MessagesSquare <MessagesSquare
className={"h-6 w-6 transition-all " + (isBuilt ? "fill-chat-trigger stroke-chat-trigger stroke-1" : "fill-chat-trigger/40 stroke-1 stroke-chat-trigger/40")} className={"h-6 w-6 transition-all " + (isBuilt ? "fill-chat-trigger stroke-chat-trigger stroke-1" : "fill-chat-trigger-disabled stroke-1 stroke-chat-trigger-disabled")}
style={{ color: "white" }} style={{ color: "white" }}
strokeWidth={1.5} strokeWidth={1.5}
/> />

View file

@ -47,6 +47,7 @@
--blur-shared: #151923de; --blur-shared: #151923de;
--build-trigger: #dc735b; --build-trigger: #dc735b;
--chat-trigger: #5c8be1; --chat-trigger: #5c8be1;
--chat-trigger-disabled: #9db7e8;
--status-red: #ef4444; --status-red: #ef4444;
--status-yellow: #eab308; --status-yellow: #eab308;
--status-green: #4ade80; --status-green: #4ade80;
@ -104,6 +105,7 @@
--blur-shared: #151923d2; --blur-shared: #151923d2;
--build-trigger: #dc735b; --build-trigger: #dc735b;
--chat-trigger: #5c8be1; --chat-trigger: #5c8be1;
--chat-trigger-disabled: #9db7e8;
--status-red: #ef4444; --status-red: #ef4444;
--status-yellow: #eab308; --status-yellow: #eab308;
--status-green: #4ade80; --status-green: #4ade80;

View file

@ -52,6 +52,7 @@ module.exports = {
"btn-shadow": "var(--round-btn-shadow)", "btn-shadow": "var(--round-btn-shadow)",
"build-trigger": "var(--build-trigger)", "build-trigger": "var(--build-trigger)",
"chat-trigger": "var(--chat-trigger)", "chat-trigger": "var(--chat-trigger)",
"chat-trigger-disabled": "var(--chat-trigger-disabled)",
"blur-shared": "var(--blur-shared)", "blur-shared": "var(--blur-shared)",
"dark-blue": "var(--dark-blue)", "dark-blue": "var(--dark-blue)",
"dark-gray": "var(--dark-gray)", "dark-gray": "var(--dark-gray)",