اضافه کردن transition-colors به همهٔ حالتهای hover
چندین سطح تعاملی (منوی سازمان، منوی کاربر، لینکهای بردکرامب، آیتمهای پالت فرمان، دکمهٔ ساخت سازمان، لینک ردیابی) رنگ را در hover یکباره تغییر میدادند و بقیهٔ رابط نرم بود. اکنون همه یکسان transition میگیرند.
This commit is contained in:
@@ -55,7 +55,7 @@ export default function DashboardPage() {
|
|||||||
action={
|
action={
|
||||||
<a
|
<a
|
||||||
href="/onboarding"
|
href="/onboarding"
|
||||||
className="rounded-lg bg-accent px-4 py-2 text-sm text-white hover:bg-accent-strong"
|
className="transition-colors rounded-lg bg-accent px-4 py-2 text-sm text-white hover:bg-accent-strong"
|
||||||
>
|
>
|
||||||
ساخت سازمان
|
ساخت سازمان
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ export default function ProjectDetailPage({
|
|||||||
return (
|
return (
|
||||||
<div className="anim-stagger flex flex-col gap-5">
|
<div className="anim-stagger flex flex-col gap-5">
|
||||||
<nav className="text-xs text-slate-500">
|
<nav className="text-xs text-slate-500">
|
||||||
<Link href="/projects" className="hover:text-slate-300">
|
<Link href="/projects" className="transition-colors hover:text-slate-300">
|
||||||
پروژهها
|
پروژهها
|
||||||
</Link>
|
</Link>
|
||||||
<span className="mx-1.5">/</span>
|
<span className="mx-1.5">/</span>
|
||||||
|
|||||||
@@ -183,7 +183,7 @@ export default function TaskDetailPage({
|
|||||||
return (
|
return (
|
||||||
<div className="anim-stagger flex flex-col gap-5">
|
<div className="anim-stagger flex flex-col gap-5">
|
||||||
<nav className="text-xs text-slate-500">
|
<nav className="text-xs text-slate-500">
|
||||||
<Link href="/tasks" className="hover:text-slate-300">
|
<Link href="/tasks" className="transition-colors hover:text-slate-300">
|
||||||
کارها
|
کارها
|
||||||
</Link>
|
</Link>
|
||||||
<span className="mx-1.5">/</span>
|
<span className="mx-1.5">/</span>
|
||||||
|
|||||||
@@ -223,7 +223,7 @@ export default function TracesPage() {
|
|||||||
<Link
|
<Link
|
||||||
href={`/tasks/${taskId}`}
|
href={`/tasks/${taskId}`}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
className="truncate text-xs text-slate-200 hover:text-accent"
|
className="transition-colors truncate text-xs text-slate-200 hover:text-accent"
|
||||||
>
|
>
|
||||||
{taskTitle}
|
{taskTitle}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ export default function EmployeeDetailPage({
|
|||||||
return (
|
return (
|
||||||
<div className="anim-stagger flex flex-col gap-5">
|
<div className="anim-stagger flex flex-col gap-5">
|
||||||
<nav className="text-xs text-slate-500">
|
<nav className="text-xs text-slate-500">
|
||||||
<Link href="/workforce" className="hover:text-slate-300">
|
<Link href="/workforce" className="transition-colors hover:text-slate-300">
|
||||||
کارمندهای هوش مصنوعی
|
کارمندهای هوش مصنوعی
|
||||||
</Link>
|
</Link>
|
||||||
<span className="mx-1.5">/</span>
|
<span className="mx-1.5">/</span>
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export default function OnboardingPage() {
|
|||||||
key={org.id}
|
key={org.id}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => router.replace("/dashboard")}
|
onClick={() => router.replace("/dashboard")}
|
||||||
className="rounded-lg border border-surface-border px-3 py-2 text-right text-xs text-slate-200 hover:bg-surface-overlay"
|
className="transition-colors rounded-lg border border-surface-border px-3 py-2 text-right text-xs text-slate-200 hover:bg-surface-overlay"
|
||||||
>
|
>
|
||||||
{org.name}
|
{org.name}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
setMenuOpen(false);
|
setMenuOpen(false);
|
||||||
}}
|
}}
|
||||||
className={cx(
|
className={cx(
|
||||||
"flex w-full items-center justify-between rounded-md px-2 py-2 text-right text-xs",
|
"flex w-full items-center justify-between rounded-md px-2 py-2 text-right text-xs transition-colors",
|
||||||
org.id === activeOrganization?.id
|
org.id === activeOrganization?.id
|
||||||
? "bg-accent-soft text-slate-100"
|
? "bg-accent-soft text-slate-100"
|
||||||
: "text-slate-300 hover:bg-surface-raised",
|
: "text-slate-300 hover:bg-surface-raised",
|
||||||
@@ -152,7 +152,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
<div className="my-1 border-t border-surface-border" />
|
<div className="my-1 border-t border-surface-border" />
|
||||||
<Link
|
<Link
|
||||||
href="/onboarding"
|
href="/onboarding"
|
||||||
className="block rounded-md px-2 py-2 text-xs text-slate-300 hover:bg-surface-raised"
|
className="transition-colors block rounded-md px-2 py-2 text-xs text-slate-300 hover:bg-surface-raised"
|
||||||
onClick={() => setMenuOpen(false)}
|
onClick={() => setMenuOpen(false)}
|
||||||
>
|
>
|
||||||
ساخت سازمان جدید
|
ساخت سازمان جدید
|
||||||
@@ -171,7 +171,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => setUserMenuOpen((open) => !open)}
|
onClick={() => setUserMenuOpen((open) => !open)}
|
||||||
aria-expanded={userMenuOpen}
|
aria-expanded={userMenuOpen}
|
||||||
className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-surface-overlay"
|
className="transition-colors flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-surface-overlay"
|
||||||
>
|
>
|
||||||
<span className="hidden text-xs text-slate-300 sm:block">
|
<span className="hidden text-xs text-slate-300 sm:block">
|
||||||
{user?.name || user?.email}
|
{user?.name || user?.email}
|
||||||
@@ -190,7 +190,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
<Link
|
<Link
|
||||||
href="/settings"
|
href="/settings"
|
||||||
onClick={() => setUserMenuOpen(false)}
|
onClick={() => setUserMenuOpen(false)}
|
||||||
className="block rounded-md px-2 py-1.5 text-xs text-slate-300 hover:bg-surface-raised"
|
className="transition-colors block rounded-md px-2 py-1.5 text-xs text-slate-300 hover:bg-surface-raised"
|
||||||
>
|
>
|
||||||
تنظیمات سازمان
|
تنظیمات سازمان
|
||||||
</Link>
|
</Link>
|
||||||
@@ -198,7 +198,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
<Link
|
<Link
|
||||||
href="/admin"
|
href="/admin"
|
||||||
onClick={() => setUserMenuOpen(false)}
|
onClick={() => setUserMenuOpen(false)}
|
||||||
className="block rounded-md px-2 py-1.5 text-xs text-slate-300 hover:bg-surface-raised"
|
className="transition-colors block rounded-md px-2 py-1.5 text-xs text-slate-300 hover:bg-surface-raised"
|
||||||
>
|
>
|
||||||
کنسول مالک سامانه
|
کنسول مالک سامانه
|
||||||
</Link>
|
</Link>
|
||||||
@@ -206,7 +206,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
className="mt-1 block w-full rounded-md px-2 py-1.5 text-start text-xs text-danger hover:bg-surface-raised"
|
className="transition-colors mt-1 block w-full rounded-md px-2 py-1.5 text-start text-xs text-danger hover:bg-surface-raised"
|
||||||
>
|
>
|
||||||
خروج
|
خروج
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -185,7 +185,7 @@ export function CommandPalette({ isPlatformOwner = false }: { isPlatformOwner?:
|
|||||||
onMouseEnter={() => setActive(index)}
|
onMouseEnter={() => setActive(index)}
|
||||||
onClick={() => go(item.href)}
|
onClick={() => go(item.href)}
|
||||||
className={cx(
|
className={cx(
|
||||||
"flex items-center justify-between gap-2 rounded-md px-2 py-2 text-start",
|
"flex items-center justify-between gap-2 rounded-md px-2 py-2 text-start transition-colors",
|
||||||
isActive
|
isActive
|
||||||
? "bg-accent-soft text-slate-100"
|
? "bg-accent-soft text-slate-100"
|
||||||
: "text-slate-300 hover:bg-surface-raised",
|
: "text-slate-300 hover:bg-surface-raised",
|
||||||
|
|||||||
Reference in New Issue
Block a user