🎨 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

@ -30,10 +30,10 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<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">
<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" }}
strokeWidth={1.5}
/>

View file

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

View file

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