From e0402b71f01971c835d933b79a4fa53d9c48a322 Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Wed, 29 May 2024 23:07:52 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Focus=20Outlines=20(#29?= =?UTF-8?q?13)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: add back focus ring removal as the outer/inner containers maintain focus stylings * style: add focus outline to default buttonVariants class --- client/src/components/Chat/Input/ChatForm.tsx | 4 ++-- .../src/components/Endpoints/Settings/AgentSettings.tsx | 8 ++++---- client/src/components/Endpoints/Settings/Anthropic.tsx | 4 ++-- client/src/components/Endpoints/Settings/Assistants.tsx | 6 +++--- client/src/components/Endpoints/Settings/BingAI.tsx | 4 ++-- client/src/components/Endpoints/Settings/Google.tsx | 4 ++-- client/src/components/Endpoints/Settings/OpenAI.tsx | 4 ++-- client/src/components/Endpoints/Settings/Plugins.tsx | 9 +++++---- client/src/components/ui/Button.tsx | 2 +- client/src/utils/index.ts | 2 ++ 10 files changed, 25 insertions(+), 22 deletions(-) diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx index f5cb4232ca..842957fcb1 100644 --- a/client/src/components/Chat/Input/ChatForm.tsx +++ b/client/src/components/Chat/Input/ChatForm.tsx @@ -11,7 +11,7 @@ import { useChatContext, useAssistantsMapContext } from '~/Providers'; import { useRequiresKey, useTextarea } from '~/hooks'; import { TextareaAutosize } from '~/components/ui'; import { useGetFileConfig } from '~/data-provider'; -import { cn, removeFocusOutlines } from '~/utils'; +import { cn, removeFocusRings } from '~/utils'; import AttachFile from './Files/AttachFile'; import AudioRecorder from './AudioRecorder'; import { mainTextareaId } from '~/common'; @@ -142,8 +142,8 @@ const ChatForm = ({ index = 0 }) => { : 'pl-3 md:pl-4', 'm-0 w-full resize-none border-0 bg-transparent py-[10px] placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 ', SpeechToText ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12', - removeFocusOutlines, 'max-h-[65vh] md:max-h-[75vh]', + removeFocusRings, )} /> )} diff --git a/client/src/components/Endpoints/Settings/AgentSettings.tsx b/client/src/components/Endpoints/Settings/AgentSettings.tsx index f4ad127e82..60d19c718f 100644 --- a/client/src/components/Endpoints/Settings/AgentSettings.tsx +++ b/client/src/components/Endpoints/Settings/AgentSettings.tsx @@ -2,15 +2,15 @@ import type { TModelSelectProps } from '~/common'; import { ESide } from '~/common'; import { Switch, - SelectDropDown, Label, Slider, - InputNumber, HoverCard, + InputNumber, + SelectDropDown, HoverCardTrigger, } from '~/components'; import OptionHover from './OptionHover'; -import { cn, optionText, defaultTextProps, removeFocusOutlines } from '~/utils/'; +import { cn, optionText, defaultTextProps, removeFocusRings } from '~/utils'; import { useLocalize } from '~/hooks'; export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) { @@ -42,7 +42,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setModel} availableValues={models} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/Anthropic.tsx b/client/src/components/Endpoints/Settings/Anthropic.tsx index 5f7a8ef3ef..4980d2dedd 100644 --- a/client/src/components/Endpoints/Settings/Anthropic.tsx +++ b/client/src/components/Endpoints/Settings/Anthropic.tsx @@ -11,7 +11,7 @@ import { SelectDropDown, HoverCardTrigger, } from '~/components/ui'; -import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils'; +import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils'; import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover'; import { useLocalize, useDebouncedInput } from '~/hooks'; import OptionHover from './OptionHover'; @@ -59,7 +59,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setModel} availableValues={models} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/Assistants.tsx b/client/src/components/Endpoints/Settings/Assistants.tsx index 135a2a93ea..b4617a81b4 100644 --- a/client/src/components/Endpoints/Settings/Assistants.tsx +++ b/client/src/components/Endpoints/Settings/Assistants.tsx @@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize'; import type { Assistant, TPreset } from 'librechat-data-provider'; import type { TModelSelectProps, Option } from '~/common'; import { Label, HoverCard, SelectDropDown, HoverCardTrigger } from '~/components/ui'; -import { cn, defaultTextProps, removeFocusOutlines, mapAssistants } from '~/utils'; +import { cn, defaultTextProps, removeFocusRings, mapAssistants } from '~/utils'; import { useLocalize, useDebouncedInput, useAssistantListMap } from '~/hooks'; import OptionHover from './OptionHover'; import { ESide } from '~/common'; @@ -116,7 +116,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setModel} availableValues={modelOptions} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> @@ -131,7 +131,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setAssistant} availableValues={assistants as Option[]} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/BingAI.tsx b/client/src/components/Endpoints/Settings/BingAI.tsx index 44f68a6b95..bfd5164730 100644 --- a/client/src/components/Endpoints/Settings/BingAI.tsx +++ b/client/src/components/Endpoints/Settings/BingAI.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import { useUpdateTokenCountMutation } from 'librechat-data-provider/react-query'; import type { TUpdateTokenCountResponse } from 'librechat-data-provider'; -import { cn, defaultTextProps, removeFocusOutlines } from '~/utils/'; import { Label, Checkbox, SelectDropDown } from '~/components/ui'; +import { cn, defaultTextProps, removeFocusRings } from '~/utils'; import { useLocalize, useDebounce } from '~/hooks'; import type { TSettingsProps } from '~/common'; @@ -60,7 +60,7 @@ export default function Settings({ conversation, setOption, readonly }: TSetting setValue={setToneStyle} availableValues={['Creative', 'Fast', 'Balanced', 'Precise']} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/Google.tsx b/client/src/components/Endpoints/Settings/Google.tsx index f1f62066aa..ab44b116c6 100644 --- a/client/src/components/Endpoints/Settings/Google.tsx +++ b/client/src/components/Endpoints/Settings/Google.tsx @@ -10,7 +10,7 @@ import { SelectDropDown, HoverCardTrigger, } from '~/components/ui'; -import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils'; +import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils'; import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover'; import { useLocalize, useDebouncedInput } from '~/hooks'; import OptionHover from './OptionHover'; @@ -59,7 +59,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setModel} availableValues={models} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/OpenAI.tsx b/client/src/components/Endpoints/Settings/OpenAI.tsx index 3ca19fc11f..8c075ae20f 100644 --- a/client/src/components/Endpoints/Settings/OpenAI.tsx +++ b/client/src/components/Endpoints/Settings/OpenAI.tsx @@ -17,7 +17,7 @@ import { SelectDropDown, HoverCardTrigger, } from '~/components/ui'; -import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils'; +import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils'; import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover'; import { DynamicTags } from '~/components/SidePanel/Parameters'; import { useLocalize, useDebouncedInput } from '~/hooks'; @@ -109,7 +109,7 @@ export default function Settings({ conversation, setOption, models, readonly }: setValue={setModel} availableValues={models} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/Endpoints/Settings/Plugins.tsx b/client/src/components/Endpoints/Settings/Plugins.tsx index 5ad11bfd14..f3ac50c4d7 100644 --- a/client/src/components/Endpoints/Settings/Plugins.tsx +++ b/client/src/components/Endpoints/Settings/Plugins.tsx @@ -15,12 +15,13 @@ import { MultiSelectDropDown, } from '~/components/ui'; import { - cn, - defaultTextProps, - optionText, removeFocusOutlines, + defaultTextProps, + removeFocusRings, processPlugins, selectPlugins, + optionText, + cn, } from '~/utils'; import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover'; import { useLocalize, useDebouncedInput } from '~/hooks'; @@ -126,7 +127,7 @@ export default function Settings({ setValue={setModel} availableValues={models} disabled={readonly} - className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)} + className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)} containerClassName="flex w-full resize-none" /> diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx index 4a126fc13e..1e9bd58789 100644 --- a/client/src/components/ui/Button.tsx +++ b/client/src/components/ui/Button.tsx @@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority'; import { cn } from '../../utils'; const buttonVariants = cva( - 'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700', + 'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700', { variants: { variant: { diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index f565401a7c..27adb709d7 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -48,6 +48,8 @@ export const languages = [ ]; export const removeFocusOutlines = ''; +export const removeFocusRings = + 'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'; export const cardStyle = 'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-50 dark:data-[state=open]:bg-gray-700';