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

style: Minor Beta UI fixes (#1197)

Browse source 
* style(Header): hide scrollbar but still allow side scroll/swipe/drag/touch

* feat: make menu buttons flexiblewith min-width, delete passed in classes, add pointer-cursor

* refactor: use conditional for visibility of plugins settings

* fix: make advanced settings popover appear over nav

* refactor(textarea): minor padding restyling, add max height

* style: make menuItem checkmark invisible instead of hidden so it takes up width space

* style: make presetsMenu trigger an icon button, remove max-width of presets except in mobile view

* style: improve advanced settings mobile styling

* feat: newchat and convo items toggle nav on small screens

* style: improve no presets view

* style: make sure toggle hover effect does not apply on smaller screens
This commit is contained in:
Danny Avila 2023-11-17 08:00:42 -05:00 • committed by GitHub
parent c64970525b
commit 1ba8d4ffa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 171 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

25
client/src/components/ui/SelectDropDownPop.tsx
View file

@ -17,12 +17,6 @@ type SelectDropDownProps = {
showLabel?: boolean;
iconSide?: 'left' | 'right';
renderOption?: () => React.ReactNode;
containerClassName?: string;
currentValueClass?: string;
optionsListClass?: string;
optionsClass?: string;
subContainerClassName?: string;
className?: string;
};
function SelectDropDownPop({
@ -33,10 +27,6 @@ function SelectDropDownPop({
showAbove = false,
showLabel = true,
emptyTitle = false,
containerClassName,
currentValueClass,
subContainerClassName,
className,
}: SelectDropDownProps) {
const localize = useLocalize();
const transitionProps = { className: 'top-full mt-3' };
@ -54,14 +44,13 @@ function SelectDropDownPop({
return (
<Root>
<div className={cn('flex items-center justify-center gap-2 ', containerClassName ?? '')}>
<div className={cn('relative w-full', subContainerClassName ?? '')}>
<div className={'flex items-center justify-center gap-2 '}>
<div className={'relative w-full'}>
<Trigger asChild>
<button
data-testid="select-dropdown-button"
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
className ?? '',
'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
)}
>
@ -69,12 +58,12 @@ function SelectDropDownPop({
{showLabel && (
<label className="block text-xs text-gray-700 dark:text-gray-500 ">{title}</label>
)}
<span className="inline-flex w-full truncate">
<span className="inline-flex w-full ">
<span
className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
'flex h-6 items-center gap-1 text-sm text-gray-900 dark:text-white',
!showLabel ? 'text-xs' : '',
currentValueClass ?? '',
'min-w-[75px] font-normal',
)}
>
{/* {!showLabel && !emptyTitle && (
@ -83,7 +72,7 @@ function SelectDropDownPop({
{typeof value !== 'string' && value ? value?.label ?? '' : value ?? ''}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
<svg
stroke="currentColor"
fill="none"