Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00: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

4
client/src/components/Chat/Header.tsx
View file

@ -6,8 +6,8 @@ import HeaderOptions from './Input/HeaderOptions';
export default function Header() {
const { navVisible } = useOutletContext<ContextType>();
return (
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white">
<div className="flex items-center gap-2 overflow-x-auto">
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white ">
<div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
{!navVisible && <NewChat />}
<EndpointsMenu />
<HeaderOptions />

15
client/src/components/Chat/Input/OptionsPopover.tsx
View file

@ -28,15 +28,22 @@ export default function OptionsPopover({
popoverRef,
() => closePopover(),
['dialog-template-content', 'shadcn-button', 'advanced-settings'],
(target) => {
const tagName = (target as Element)?.tagName;
(_target) => {
const target = _target as Element;
if (
target?.id === 'presets-button' ||
(target?.parentNode instanceof Element && target.parentNode.id === 'presets-button')
) {
return false;
}
const tagName = target?.tagName;
return tagName === 'path' || tagName === 'svg' || tagName === 'circle';
},
);
const localize = useLocalize();
const cardStyle =
'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white ';
if (!visible) {
return null;
@ -45,7 +52,7 @@ export default function OptionsPopover({
return (
<Portal>
<Content sideOffset={8} align="start" ref={popoverRef} asChild>
<div className="z-0 flex w-full flex-col items-center md:px-4">
<div className="z-[70] flex w-screen flex-col items-center md:w-full md:px-4">
<div
className={cn(
cardStyle,

9
client/src/components/Chat/Input/Textarea.tsx
View file

@ -1,6 +1,7 @@
import TextareaAutosize from 'react-textarea-autosize';
import { supportsFiles } from '~/common';
import { useTextarea } from '~/hooks';
import { cn, removeFocusOutlines } from '~/utils';
export default function Textarea({ value, onChange, setText, submitMessage, endpoint }) {
const {
@ -14,8 +15,10 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
} = useTextarea({ setText, submitMessage });
const className = supportsFiles[endpoint]
? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
: 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
? // ? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
// : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
: 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4';
return (
<TextareaAutosize
@ -36,7 +39,7 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
placeholder={placeholder}
// className="m-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-12 gizmo:pl-10 md:pl-[46px] gizmo:md:pl-[55px]"
// className="gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 gizmo:pl-10 gizmo:md:pl-[55px] m-0 h-auto max-h-52 w-full resize-none overflow-y-hidden border-0 bg-transparent py-[10px] pl-12 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pl-[46px] md:pr-12"
className={className}
className={cn(className, removeFocusOutlines, 'max-h-52')}
/>
);
}

7
client/src/components/Chat/Menus/NewChat.tsx
View file

@ -1,11 +1,16 @@
import { useChatContext } from '~/Providers';
import { useMediaQuery } from '~/hooks';
export default function Header() {
const { newConversation } = useChatContext();
const isSmallScreen = useMediaQuery('(max-width: 768px)');
if (isSmallScreen) {
return null;
}
return (
<button
type="button"
className=" btn btn-neutral btn-small border-token-border-medium relative ml-2 flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0"
className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
onClick={() => newConversation()}
>
<div className="flex w-full items-center justify-center gap-2">

20
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -59,7 +59,20 @@ const PresetItems: FC<{
</Dialog>
</div>
</div>
{presets && presets.length === 0 && (
<div
role="menuitem"
className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]"
tabIndex={-1}
>
<div className="flex h-full grow items-center justify-end gap-2">
{/* TODO: Create Preset from here */}
{localize('com_endpoint_no_presets')}
</div>
</div>
)}
{presets &&
presets.length > 0 &&
presets.map((preset, i) => {
if (!preset) {
return null;
@ -70,8 +83,7 @@ const PresetItems: FC<{
<div key={`preset-${preset.presetId}`}>
<MenuItem
key={`preset-item-${preset.presetId}`}
className="w-[380px] md:min-w-[240px]"
textClassName="text-xs max-w-[180px] md:max-w-[250px]"
textClassName="text-xs max-w-[200px] truncate md:max-w-full "
title={getPresetTitle(preset)}
disableHover={true}
onClick={() => onSelectPreset(preset)}
@ -83,7 +95,7 @@ const PresetItems: FC<{
>
<div className="flex h-full items-center justify-end gap-1">
<button
className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -93,7 +105,7 @@ const PresetItems: FC<{
<TrashIcon />
</button>
<button
className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
onChangePreset(preset);

35
client/src/components/Chat/Menus/PresetsMenu.tsx
View file

@ -1,18 +1,18 @@
import type { FC } from 'react';
import { useState } from 'react';
import { useRecoilState } from 'recoil';
import { BookCopy } from 'lucide-react';
import {
modularEndpoints,
useDeletePresetMutation,
useCreatePresetMutation,
} from 'librechat-data-provider';
import type { TPreset } from 'librechat-data-provider';
import { Content, Portal, Root } from '@radix-ui/react-popover';
import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
import { useLocalize, useDefaultConvo, useNavigateToConvo } from '~/hooks';
import { EditPresetDialog, PresetItems } from './Presets';
import { cleanupPreset, cn } from '~/utils';
import { useChatContext } from '~/Providers';
import TitleButton from './UI/TitleButton';
import { cleanupPreset } from '~/utils';
import store from '~/store';
const PresetsMenu: FC = () => {
@ -86,7 +86,20 @@ const PresetsMenu: FC = () => {
return (
<Root>
<TitleButton primaryText={'Presets'} />
<Trigger asChild>
<button
className={cn(
'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white 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',
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
)}
id="presets-button"
data-testid="presets-button"
title={localize('com_ui_presets')}
>
<BookCopy className="icon-sm" id="presets-button" />
</button>
</Trigger>
<Portal>
<div
style={{
@ -100,10 +113,9 @@ const PresetsMenu: FC = () => {
>
<Content
side="bottom"
align="start"
className="mt-2 max-h-[495px] max-w-[370px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]"
align="center"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]"
>
{presets.length ? (
<PresetItems
presets={presets}
onSelectPreset={onSelectPreset}
@ -112,17 +124,10 @@ const PresetsMenu: FC = () => {
clearAllPresets={clearAllPresets}
onFileSelected={onFileSelected}
/>
) : (
<div className="dark:text-gray-300">{localize('com_endpoint_no_presets')}</div>
)}
</Content>
</div>
</Portal>
<EditPresetDialog
open={presetModalVisible}
onOpenChange={setPresetModalVisible}
// preset={preset as TPreset}
/>
<EditPresetDialog open={presetModalVisible} onOpenChange={setPresetModalVisible} />
</Root>
);
};

2
client/src/components/Chat/Menus/UI/MenuItem.tsx
View file

@ -81,7 +81,7 @@ const MenuItem: FC<MenuItemProps> = ({
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="icon-md block hidden gap-x-1 group-hover:flex "
className="icon-md invisible block gap-x-1 group-hover:visible group-hover:flex"
>
<path
fillRule="evenodd"

3
client/src/components/Conversations/Conversations.tsx
View file

@ -6,9 +6,11 @@ import { TConversation } from 'librechat-data-provider';
export default function Conversations({
conversations,
moveToTop,
toggleNav,
}: {
conversations: TConversation[];
moveToTop: () => void;
toggleNav: () => void;
}) {
const location = useLocation();
const { pathname } = location;
@ -24,6 +26,7 @@ export default function Conversations({
key={convo.conversationId}
conversation={convo}
retainView={moveToTop}
toggleNav={toggleNav}
i={i}
/>
);

4
client/src/components/Conversations/Convo.tsx
View file

@ -13,7 +13,7 @@ import store from '~/store';
type KeyEvent = KeyboardEvent<HTMLInputElement>;
export default function Conversation({ conversation, retainView, i }) {
export default function Conversation({ conversation, retainView, toggleNav, i }) {
const { conversationId: currentConvoId } = useParams();
const activeConvos = useRecoilValue(store.allConversationsSelector);
const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
@ -31,6 +31,8 @@ export default function Conversation({ conversation, retainView, i }) {
return;
}
toggleNav();
// set document title
document.title = title;

6
client/src/components/Endpoints/EndpointSettings.tsx
View file

@ -23,7 +23,9 @@ export default function Settings({
if (OptionComponent) {
return (
<div className={cn('h-[480px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
<div
className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}
>
<OptionComponent
conversation={conversation}
setOption={setOption}
@ -41,7 +43,7 @@ export default function Settings({
}
return (
<div className={cn('h-[480px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
<div className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
<MultiViewComponent conversation={conversation} models={models} isPreset={isPreset} />
</div>
);

6
client/src/components/Input/ModelSelect/PluginsByIndex.tsx
View file

@ -102,13 +102,14 @@ export default function PluginsByIndex({
)}
/>
</Button>
{visible && (
<>
<Menu
value={conversation.model ?? ''}
setValue={setOption('model')}
availableValues={models}
showAbove={showAbove}
showLabel={false}
className={cn(cardStyle, 'min-w-60 z-40 flex w-64 sm:w-48 ', visible ? '' : 'hidden')}
/>
<PluginsMenu
value={conversation.tools || []}
@ -118,8 +119,9 @@ export default function PluginsByIndex({
optionValueKey="pluginKey"
showAbove={false}
showLabel={false}
className={cn(cardStyle, 'min-w-60 z-50 w-64 sm:w-48 ', visible ? '' : 'hidden')}
/>
</>
)}
</>
);
}

16
client/src/components/Nav/Nav.tsx
View file

@ -144,6 +144,12 @@ export default function Nav({ navVisible, setNavVisible }) {
setNavVisible((prev: boolean) => !prev);
};
const itemToggleNav = () => {
if (isSmallScreen) {
toggleNavVisible();
}
};
const containerClasses =
getConversationsQuery.isLoading && pageNumber === 1
? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
@ -167,12 +173,12 @@ export default function Nav({ navVisible, setNavVisible }) {
<div
className={cn(
'scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20 transition-opacity',
isToggleHovering ? 'opacity-50' : 'opacity-100',
isToggleHovering && !isSmallScreen ? 'opacity-50' : 'opacity-100',
)}
>
<nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
<div className="mb-1 flex h-11 flex-row">
<NewChat />
<NewChat toggleNav={itemToggleNav} />
</div>
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
<div
@ -187,7 +193,11 @@ export default function Nav({ navVisible, setNavVisible }) {
{(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
<Spinner />
) : (
<Conversations conversations={conversations} moveToTop={moveToTop} />
<Conversations
conversations={conversations}
moveToTop={moveToTop}
toggleNav={itemToggleNav}
/>
)}
<Pages
pageNumber={pageNumber}

3
client/src/components/Nav/NewChat.tsx
View file

@ -1,6 +1,6 @@
import { useLocalize, useConversation, useNewConvo, useOriginNavigate } from '~/hooks';
export default function NewChat() {
export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
const { newConversation } = useConversation();
const { newConversation: newConvo } = useNewConvo();
const navigate = useOriginNavigate();
@ -10,6 +10,7 @@ export default function NewChat() {
newConvo();
newConversation();
navigate('new');
toggleNav();
};
return (

18
client/src/components/ui/MultiSelectPop.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Wrench, ArrowRight } from 'lucide-react';
import { Wrench } from 'lucide-react';
import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
import type { TPlugin } from 'librechat-data-provider';
import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
@ -19,18 +19,15 @@ type SelectDropDownProps = {
optionValueKey?: string;
};
function SelectDropDownPop({
function MultiSelectPop({
title: _title = 'Plugins',
value,
// TODO: do we need disabled here?
disabled,
setSelected,
availableValues,
showAbove = false,
showLabel = true,
containerClassName,
isSelected,
className,
optionValueKey = 'value',
}: SelectDropDownProps) {
// const localize = useLocalize();
@ -46,8 +43,9 @@ function SelectDropDownPop({
<button
data-testid="select-dropdown-button"
className={cn(
'relative flex 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 dark:bg-gray-800 sm:text-sm',
className ?? '',
'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 dark:bg-gray-800 sm:text-sm',
'pointer-cursor font-normal',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
)}
>
{' '}
@ -85,7 +83,7 @@ function SelectDropDownPop({
</span>
</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"
@ -107,7 +105,7 @@ function SelectDropDownPop({
<Portal>
<Content
side="bottom"
align="start"
align="center"
className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
>
{availableValues.map((option) => {
@ -144,4 +142,4 @@ function SelectDropDownPop({
);
}
export default SelectDropDownPop;
export default MultiSelectPop;

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"

2
client/src/localization/languages/Eng.tsx
View file

@ -192,7 +192,7 @@ export default {
com_endpoint_presets_clear_warning:
'Are you sure you want to clear all presets? This is irreversible.',
com_endpoint_not_implemented: 'Not implemented',
com_endpoint_no_presets: 'No preset yet',
com_endpoint_no_presets: 'No presets yet, use the settings button to create one',
com_endpoint_not_available: 'No endpoint available',
com_endpoint_view_options: 'View Options',
com_endpoint_save_convo_as_preset: 'Save Conversation as Preset',

10
client/src/mobile.css
View file

@ -111,3 +111,13 @@
visibility: hidden;
}
}
.hide-scrollbar {
/* Hide scrollbar for Chrome, Safari, and Opera */
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* For WebKit browsers */
}

30
client/src/style.css
View file

@ -1709,3 +1709,33 @@ html {
height:234px;
width:234px
}
.border-token-border-heavy {
border-color: #c5c5d2;
border-color: var(--border-heavy)
}
.border-token-border-light {
border-color: #ececf1;
border-color: var(--border-light)
}
.border-token-border-medium {
border-color: #d9d9e3;
border-color: var(--border-medium)
}
.border-token-surface-primary {
border-color: #fff;
border-color: var(--surface-primary)
}
.border-token-surface-secondary {
border-color: #f7f7f8;
border-color: var(--surface-secondary)
}
.border-token-surface-tertiary {
border-color: #ececf1;
border-color: var(--surface-tertiary)
}