Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🎨 style: Focus Outlines (#2913)

Browse source 
* style: add back focus ring removal as the outer/inner containers maintain focus stylings

* style: add focus outline to default buttonVariants class
This commit is contained in:
Danny Avila 2024-05-29 23:07:52 -04:00 • committed by GitHub
parent a618266905
commit e0402b71f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 25 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -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,
)}
/>
)}

8
client/src/components/Endpoints/Settings/AgentSettings.tsx
View file

@ -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"
/>
</div>

4
client/src/components/Endpoints/Settings/Anthropic.tsx
View file

@ -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"
/>
</div>

6
client/src/components/Endpoints/Settings/Assistants.tsx
View file

@ -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"
/>
</div>
@ -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"
/>
</div>

4
client/src/components/Endpoints/Settings/BingAI.tsx
View file

@ -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"
/>
</div>

4
client/src/components/Endpoints/Settings/Google.tsx
View file

@ -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"
/>
</div>

4
client/src/components/Endpoints/Settings/OpenAI.tsx
View file

@ -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"
/>
</div>

9
client/src/components/Endpoints/Settings/Plugins.tsx
View file

@ -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"
/>
</div>

2
client/src/components/ui/Button.tsx
View file

@ -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: {

2
client/src/utils/index.ts
View file

@ -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';