From cd7dd576c1f945bb731a4415a04bc1b702b6f4e4 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sun, 8 Jun 2025 00:22:08 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Unify=20Styles=20across?= =?UTF-8?q?=20Themes=20and=20Improve=20Accessibility=20(#7783)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: update button styles for improved hover effects and accessibility * style: enhance CustomMenuItem styling for improved visual feedback * style: improved accessibility and visual consistency * chore: add missing localization in ActionsPanel --------- Co-authored-by: Danny Avila --- .../Chat/Menus/Endpoints/CustomMenu.tsx | 2 +- .../Chat/Messages/Content/DialogImage.tsx | 18 ++++++------ .../Parts/OpenAIImageGen/OpenAIImageGen.tsx | 11 -------- .../src/components/Chat/Messages/Feedback.tsx | 18 ++++-------- client/src/components/Chat/Messages/Fork.tsx | 8 ++---- .../components/Chat/Messages/HoverButtons.tsx | 14 ++-------- .../SidePanel/Agents/ActionsPanel.tsx | 2 +- client/src/locales/en/translation.json | 3 +- client/src/style.css | 28 +++++++++---------- 9 files changed, 38 insertions(+), 66 deletions(-) diff --git a/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx b/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx index d466698938..3563ae0a7b 100644 --- a/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx +++ b/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx @@ -159,7 +159,7 @@ export const CustomMenuItem = React.forwardRef
downloadImage()} variant="ghost" className="h-10 w-10 p-0"> @@ -108,7 +108,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm alt="Image" className="max-h-full max-w-full object-contain" style={{ - maxHeight: 'calc(100vh - 6rem)', // Account for header and padding + maxHeight: 'calc(100vh - 6rem)', maxWidth: '100%', }} /> @@ -117,7 +117,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm {/* Side Panel */}
@@ -132,7 +132,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
{/* Prompt Section */}
-

+

{localize('com_ui_prompt')}

@@ -144,20 +144,18 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm {/* Generation Settings */}
-

+

{localize('com_ui_generation_settings')}

- {localize('com_ui_size')}: + {localize('com_ui_size')}: {args?.size || 'Unknown'}
- - {localize('com_ui_quality')}: - + {localize('com_ui_quality')}:
- + {localize('com_ui_file_size')}: diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx index e13e68312d..ef24c3553e 100644 --- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx +++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx @@ -178,17 +178,6 @@ export default function OpenAIImageGen({
- - {/* {showInfo && hasInfo && ( - 0 && !cancelled && initialProgress < 1} - /> - )} */} -
{dimensions.width !== 'auto' && progress < 1 && ( diff --git a/client/src/components/Chat/Messages/Feedback.tsx b/client/src/components/Chat/Messages/Feedback.tsx index cf7ccadbab..4879808d90 100644 --- a/client/src/components/Chat/Messages/Feedback.tsx +++ b/client/src/components/Chat/Messages/Feedback.tsx @@ -216,18 +216,12 @@ function FeedbackButtons({ function buttonClasses(isActive: boolean, isLast: boolean) { return cn( - 'hover-button rounded-lg p-1.5', - 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white', - 'hover:bg-gray-100 hover:text-gray-500', - 'data-[state=open]:active data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500', - isActive ? 'text-gray-500 dark:text-gray-200 font-bold' : 'dark:text-gray-400/70', - 'dark:hover:bg-gray-700 dark:hover:text-gray-200', - 'data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200', - 'disabled:dark:hover:text-gray-400', - isLast - ? '' - : 'data-[state=open]:opacity-100 md:opacity-0 md:group-focus-within:opacity-100 md:group-hover:opacity-100', - 'md:group-focus-within:visible md:group-hover:visible md:group-[.final-completion]:visible', + 'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200', + 'hover:text-text-primary hover:bg-surface-hover', + 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', + !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', + 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', + isActive && 'active text-text-primary bg-surface-hover', ); } diff --git a/client/src/components/Chat/Messages/Fork.tsx b/client/src/components/Chat/Messages/Fork.tsx index 5bc0bd8839..1cc319c3dd 100644 --- a/client/src/components/Chat/Messages/Fork.tsx +++ b/client/src/components/Chat/Messages/Fork.tsx @@ -211,14 +211,12 @@ export default function Fork({ }); const buttonStyle = cn( - 'hover-button rounded-lg p-1.5', - 'hover:bg-gray-100 hover:text-gray-500', - 'dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200', - 'disabled:dark:hover:text-gray-400', + 'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200', + 'hover:text-text-primary hover:bg-surface-hover', 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', - isActive && 'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700', + isActive && 'active text-text-primary bg-surface-hover', ); const forkConvo = useForkConvoMutation({ diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx index 5783540bb8..644852c0b4 100644 --- a/client/src/components/Chat/Messages/HoverButtons.tsx +++ b/client/src/components/Chat/Messages/HoverButtons.tsx @@ -77,21 +77,13 @@ const HoverButton = memo( className = '', }: HoverButtonProps) => { const buttonStyle = cn( - 'hover-button rounded-lg p-1.5', - - 'hover:bg-gray-100 hover:text-gray-500', - - 'dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200', - 'disabled:dark:hover:text-gray-400', - + 'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200', + 'hover:text-text-primary hover:bg-surface-hover', 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', !isVisible && 'opacity-0', - 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', - - isActive && isVisible && 'active text-gray-700 dark:text-gray-200 bg-gray-100 bg-gray-700', - + isActive && isVisible && 'active text-text-primary bg-surface-hover', className, ); diff --git a/client/src/components/SidePanel/Agents/ActionsPanel.tsx b/client/src/components/SidePanel/Agents/ActionsPanel.tsx index 514e1b61eb..0ae564b05a 100644 --- a/client/src/components/SidePanel/Agents/ActionsPanel.tsx +++ b/client/src/components/SidePanel/Agents/ActionsPanel.tsx @@ -128,7 +128,7 @@ export default function ActionsPanel({ selectHandler: () => { if (!agent_id) { return showToast({ - message: 'No agent_id found, is the agent created?', + message: localize('com_agents_no_agent_id_error'), status: 'error', }); } diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json index 52c190f1f8..284117ffe4 100644 --- a/client/src/locales/en/translation.json +++ b/client/src/locales/en/translation.json @@ -20,6 +20,7 @@ "com_agents_missing_provider_model": "Please select a provider and model before creating an agent.", "com_agents_name_placeholder": "Optional: The name of the agent", "com_agents_no_access": "You don't have access to edit this agent.", + "com_agents_no_agent_id_error": "No agent ID found. Please ensure the agent is created first.", "com_agents_not_available": "Agent Not Available", "com_agents_search_info": "When enabled, allows your agent to search the web for up-to-date information. Requires a valid API key.", "com_agents_search_name": "Search agents by name", @@ -970,4 +971,4 @@ "com_ui_zoom": "Zoom", "com_user_message": "You", "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint." -} \ No newline at end of file +} diff --git a/client/src/style.css b/client/src/style.css index a91b1b49d2..438f197a55 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -2720,6 +2720,20 @@ html { .shimmer { display: inline-block; position: relative; + background: linear-gradient( + 90deg, + rgb(33, 33, 33) 25%, + rgba(129, 130, 134, 0.18) 50%, + rgb(33, 33, 33) 75% + ); + background-size: 200% 100%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: shimmer 4s linear infinite; +} + +.dark .shimmer { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.8) 25%, @@ -2733,20 +2747,6 @@ html { animation: shimmer 4s linear infinite; } -:global(.dark) .shimmer { - background: linear-gradient( - 90deg, - rgba(255, 255, 255) 25%, - rgba(129, 130, 134, 0.18) 50%, - rgb(255, 255, 255) 75% - ); - background-size: 200% 100%; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: shimmer 4s linear infinite; -} - .custom-style-2 { padding: 12px; }