Postal/Zero
1
0
Fork 0
mirror of https://github.com/Mail-0/Zero.git synced 2026-07-01 08:16:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AIChat component styles and add tabIndex to sidebar popup for accessibility

Browse Source
This commit is contained in:
Aj Wazzan
2025-05-21 23:39:18 -07:00
parent 974d2bf428
commit 76ae73d05a
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/mail/components/create/ai-chat.tsx
View File

@@ -235,8 +235,8 @@ export function AIChat({
className={cn(
'flex w-fit flex-col gap-2 rounded-lg text-sm',
message.role === 'user'
? 'overflow-wrap-anywhere text-subtleWhite dark:text-offsetDark ml-auto break-words bg-[#313131] p-2 dark:bg-[#f0f0f0]'
: 'overflow-wrap-anywhere dark:bg-sidebar mr-auto break-words p-2',
? 'overflow-wrap-anywhere text-offsetDark dark:text-subtleWhite ml-auto break-words bg-[#f0f0f0] px-2 py-1 dark:bg-[#252525]'
: 'overflow-wrap-anywhere mr-auto break-words p-2',
)}
>
{textParts.map(
@@ -281,7 +281,7 @@ export function AIChat({
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Ask Zero to do anything..."
className="placeholder:text-muted-foreground h-8 w-full resize-none rounded-lg bg-white px-3 py-2 pr-10 text-sm focus-visible:outline-none focus-visible:ring-0 focus:ring-0 ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[#141414]"
className="placeholder:text-muted-foreground h-8 w-full resize-none rounded-lg bg-white px-3 py-2 pr-10 text-sm ring-0 focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[#141414]"
/>
{status === 'ready' ? (
<button
@@ -300,7 +300,7 @@ export function AIChat({
type="button"
className="absolute right-1 top-1/2 inline-flex h-6 -translate-y-1/2 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-lg"
>
<div className=" flex h-5 items-center justify-center gap-1 rounded-sm px-1">
<div className="flex h-5 items-center justify-center gap-1 rounded-sm px-1">
<Stop className="h-4 w-4 fill-[#DE5555]" />
</div>
</button>

2
apps/mail/components/ui/ai-sidebar.tsx
View File

@@ -538,13 +538,13 @@ function AISidebar({ className }: AISidebarProps) {
{/* Popup view - visible on small screens or when popup mode is selected */}
<div
tabIndex={0}
className={cn(
'fixed inset-0 z-50 flex items-center justify-center bg-transparent p-4 opacity-40 backdrop-blur-sm transition-opacity duration-150 hover:opacity-100 sm:inset-auto sm:bottom-4 sm:right-4 sm:flex-col sm:items-end sm:justify-end sm:p-0',
'md:hidden',
isPopup && !isFullScreen && 'md:flex',
isFullScreen && '!inset-0 !flex !p-0 !opacity-100 !backdrop-blur-none',
'rounded-2xl focus:opacity-100',
'focus:opacity-100',
)}
>
<div