Feat: dark mode for logs and annotations (#11575)

This commit is contained in:
KVOJJJin
2024-12-12 10:09:48 +08:00
committed by GitHub
parent 0d04cdc323
commit f96fdc2970
43 changed files with 426 additions and 472 deletions

View File

@@ -11,7 +11,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
}) => {
return (
<div className={classNames(
'flex items-center px-1 h-[18px] rounded-[5px] border border-black/8 bg-white/[0.48] text-[10px] font-medium text-gray-500 cursor-default',
'flex items-center px-1 h-[18px] rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary cursor-default',
className,
)}>
{children}

View File

@@ -7,7 +7,7 @@ import { useLanguage } from '../hooks'
import type { ModelItem } from '../declarations'
import ModelBadge from '../model-badge'
import FeatureIcon from '../model-selector/feature-icon'
import classNames from '@/utils/classnames'
import cn from '@/utils/classnames'
type ModelNameProps = PropsWithChildren<{
modelItem: ModelItem
@@ -37,12 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
if (!modelItem)
return null
return (
<div
className={`
flex items-center truncate text-[13px] font-medium text-gray-800
${className}
`}
>
<div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
<div
className='truncate'
title={modelItem.label[language] || modelItem.label.en_US}
@@ -51,14 +46,14 @@ const ModelName: FC<ModelNameProps> = ({
</div>
{
showModelType && modelItem.model_type && (
<ModelBadge className={classNames('ml-1', modelTypeClassName)}>
<ModelBadge className={cn('ml-1', modelTypeClassName)}>
{modelTypeFormat(modelItem.model_type)}
</ModelBadge>
)
}
{
modelItem.model_properties.mode && showMode && (
<ModelBadge className={classNames('ml-1', modeClassName)}>
<ModelBadge className={cn('ml-1', modeClassName)}>
{(modelItem.model_properties.mode as string).toLocaleUpperCase()}
</ModelBadge>
)

View File

@@ -21,9 +21,10 @@ const ToolsNav = ({
return (
<Link href="/tools" className={classNames(
className, 'group',
activated && 'bg-white shadow-md',
activated ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200',
'group text-sm font-medium',
activated && 'font-semibold bg-components-main-nav-nav-button-bg-active hover:bg-components-main-nav-nav-button-bg-active-hover shadow-md',
activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
className,
)}>
{
activated