7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: ui fixed

This commit is contained in:
butterfly 2024-04-28 12:49:06 +08:00
parent 1a636b0f50
commit 9569888b0e
13 changed files with 180 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/ActionsBar/index.tsx
View File

@ -12,6 +12,7 @@ interface Action {
icons: JSX.Element | IconMap; icons: JSX.Element | IconMap;
className?: string; className?: string;
onClick?: () => void; onClick?: () => void;
activeClassName?: string;
} }
type Groups = { type Groups = {
@ -100,7 +101,7 @@ export default function ActionsBar(props: ActionsBarProps) {
key={action.id} key={action.id}
className={`cursor-pointer p-3 ${ className={`cursor-pointer p-3 ${
selected === action.id selected === action.id
? "bg-actions-bar-btn-default" ? `!bg-actions-bar-btn-default ${action.activeClassName}`
: "bg-transparent" : "bg-transparent"
} rounded-md items-center ${action.className}`} } rounded-md items-center ${action.className}`}
onClick={handlerClick(action)} onClick={handlerClick(action)}

4
app/components/Btn/index.tsx
View File

@ -36,10 +36,10 @@ export default function Btn(props: {
} text-text-btn-primary `; } text-text-btn-primary `;
break; break;
case "danger": case "danger":
btnClassName = `bg-danger-btn text-text-btn-danger`; btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-btn`;
break; break;
default: default:
btnClassName = `bg-default-btn text-text-btn-default`; btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`;
} }
return ( return (

10
app/components/MenuLayout/index.tsx
View File

@ -73,11 +73,11 @@ export default function MenuLayout<
max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1 max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6 md:rounded-md md:my-2.5 md:bg-menu md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6 md:rounded-md md:my-2.5 md:bg-menu
`} `}
onClick={(e) => { // onClick={(e) => {
if (e.target === e.currentTarget) { // if (e.target === e.currentTarget) {
navigate(Path.Home); // navigate(Path.Home);
} // }
}} // }}
> >
<ListComponent <ListComponent
{...props} {...props}

133
app/components/Popover/index.tsx
View File

@ -79,7 +79,7 @@ export default function Popover(props: PopoverProps) {
const mergedShow = show ?? internalShow; const mergedShow = show ?? internalShow;
const { arrowClassName, placementStyle } = useMemo(() => { const { arrowClassName, placementStyle, placementClassName } = useMemo(() => {
const arrowCommonClassName = `${ const arrowCommonClassName = `${
noArrow ? "hidden" : "" noArrow ? "hidden" : ""
} absolute z-10 left-[50%] translate-x-[calc(-50%)]`; } absolute z-10 left-[50%] translate-x-[calc(-50%)]`;
@ -105,28 +105,32 @@ export default function Popover(props: PopoverProps) {
bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`, bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`, left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
}, },
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`, arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName: "bottom-[calc(100%+0.5rem)] left-[calc(-2%)]",
}, },
lb: { lb: {
placementStyle: { placementStyle: {
top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`, top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`, left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
}, },
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`, arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName: "top-[calc(100%+0.5rem)] left-[calc(-2%)]",
}, },
rt: { rt: {
placementStyle: { placementStyle: {
bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`, bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`, right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
}, },
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`, arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName: "bottom-[calc(100%+0.5rem)] right-[calc(-2%)]",
}, },
rb: { rb: {
placementStyle: { placementStyle: {
top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`, top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`, right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
}, },
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`, arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName: "top-[calc(100%+0.5rem)] right-[calc(-2%)]",
}, },
t: { t: {
placementStyle: { placementStyle: {
@ -134,7 +138,9 @@ export default function Popover(props: PopoverProps) {
left: `calc(${distanceToLeftBoundary + targetW / 2}px`, left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
transform: "translateX(-50%)", transform: "translateX(-50%)",
}, },
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`, arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName:
"bottom-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
}, },
b: { b: {
placementStyle: { placementStyle: {
@ -142,7 +148,9 @@ export default function Popover(props: PopoverProps) {
left: `calc(${distanceToLeftBoundary + targetW / 2}px`, left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
transform: "translateX(-50%)", transform: "translateX(-50%)",
}, },
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`, arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName:
"top-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
}, },
}; };
@ -236,54 +244,83 @@ export default function Popover(props: PopoverProps) {
); );
} }
// return (
// <div
// className={`relative ${className}`}
// onPointerEnter={(e) => {
// e.preventDefault();
// clearTimeout(closeTimer.current);
// onShow?.(true);
// setShow(true);
// getRelativePosition(e.currentTarget, "");
// window.document.documentElement.style.overflow = "hidden";
// }}
// onPointerLeave={(e) => {
// e.preventDefault();
// if (delayClose) {
// closeTimer.current = window.setTimeout(() => {
// onShow?.(false);
// setShow(false);
// }, delayClose);
// } else {
// onShow?.(false);
// setShow(false);
// }
// window.document.documentElement.style.overflow = "auto";
// }}
// >
// {children}
// {mergedShow && (
// <>
// <div
// className={`${
// noArrow ? "opacity-0" : ""
// } bg-inherit ${arrowClassName}`}
// style={{ zIndex: baseZIndex + 1 }}
// >
// <ArrowIcon sibling={popoverRef} />
// </div>
// {createPortal(
// <div
// className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
// style={{ zIndex: baseZIndex + 1, ...placementStyle }}
// ref={popoverRef}
// >
// {content}
// </div>,
// popoverRoot,
// )}
// </>
// )}
// </div>
// );
return ( return (
<div <div
className={`relative ${className}`} className={`group relative ${className}`}
onPointerEnter={(e) => { onPointerEnter={(e) => {
e.preventDefault();
clearTimeout(closeTimer.current);
onShow?.(true);
setShow(true);
getRelativePosition(e.currentTarget, ""); getRelativePosition(e.currentTarget, "");
window.document.documentElement.style.overflow = "hidden";
}}
onPointerLeave={(e) => {
e.preventDefault();
if (delayClose) {
closeTimer.current = window.setTimeout(() => {
onShow?.(false);
setShow(false);
}, delayClose);
} else {
onShow?.(false);
setShow(false);
}
window.document.documentElement.style.overflow = "auto";
}} }}
> >
{children} {children}
{mergedShow && ( <div
<> className={`
<div hidden group-hover:block
className={`${ ${noArrow ? "opacity-0" : ""}
noArrow ? "opacity-0" : "" bg-inherit
} bg-inherit ${arrowClassName}`} ${arrowClassName}
style={{ zIndex: baseZIndex + 1 }} `}
> style={{ zIndex: baseZIndex + 1 }}
<ArrowIcon sibling={popoverRef} /> >
</div> <ArrowIcon sibling={popoverRef} />
{createPortal( </div>
<div <div
className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`} className={`hidden group-hover:block whitespace-nowrap ${popoverCommonClass} ${placementClassName} ${popoverClassName}`}
style={{ zIndex: baseZIndex + 1, ...placementStyle }} ref={popoverRef}
ref={popoverRef} style={{ zIndex: 10000 }}
> >
{content} {content}
</div>, </div>
popoverRoot,
)}
</>
)}
</div> </div>
); );
} }

2
app/components/Select/index.tsx
View File

@ -58,7 +58,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
{options?.map((o) => ( {options?.map((o) => (
<div <div
key={o.value} key={o.value}
className={`flex items-center p-3 gap-2 rounded-action-btn hover:bg-select-option-hovered`} className={`flex items-center p-3 gap-2 rounded-action-btn hover:bg-select-option-hovered cursor-pointer`}
onClick={() => { onClick={() => {
onSelect?.(o.value); onSelect?.(o.value);
}} }}

2
app/containers/Chat/components/ChatActions.tsx
View File

@ -182,7 +182,7 @@ export function ChatActions(props: {
return ( return (
<div <div
key={act.text} key={act.text}
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`} className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClick={act.onClick} onClick={act.onClick}
> >
{act.icon} {act.icon}

2
app/containers/Chat/components/ChatMessagePanel.tsx
View File

@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
)} )}
</div> </div>
<div <div
className={`group relative flex-1 flex ${ className={`group relative flex flex ${
isUser ? "flex-row-reverse" : "" isUser ? "flex-row-reverse" : ""
}`} }`}
> >

14
app/containers/Chat/components/MessageActions.tsx
View File

@ -261,17 +261,13 @@ export default function MessageActions(props: MessageActionsProps) {
showActions && ( showActions && (
<div <div
className={` className={`
absolute z-10 absolute z-10 w-[100%]
${isUser ? "right-0" : "left-0"} ${isUser ? "right-0" : "left-0"}
transition-all duration-300 transition-all duration-300
opacity-0 opacity-0
pointer-events-none pointer-events-none
group-hover:opacity-100 group-hover:opacity-100
group-hover:pointer-events-auto group-hover:pointer-events-auto
bg-chat-message-actions
rounded-md
shadow-message-actions-bar
dark:bg-none
${className} ${className}
`} `}
> >
@ -285,7 +281,13 @@ export default function MessageActions(props: MessageActionsProps) {
onUserStop, onUserStop,
})} })}
groups={groupsTypes[groupsType]} groups={groupsTypes[groupsType]}
className="flex flex-row gap-1 p-1" className={`
float-right flex flex-row gap-1 p-1
bg-chat-message-actions
rounded-md
shadow-message-actions-bar
dark:bg-none
`}
/> />
</div> </div>
) )

31
app/containers/Chat/index.tsx
View File

@ -54,12 +54,17 @@ export function SessionItem(props: {
<Draggable draggableId={`${props.id}`} index={props.index}> <Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => ( {(provided) => (
<div <div
className={`group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 ${ className={`
props.selected && group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2
(currentPath === Path.Chat || currentPath === Path.Home) border
? `bg-chat-menu-session-selected border-chat-menu-session-selected border ` bg-chat-menu-session-unselected border-chat-menu-session-unselected
: `bg-chat-menu-session-unselected hover:bg-chat-menu-session-hovered` ${
}`} props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home)
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
}
`}
onClick={props.onClick} onClick={props.onClick}
ref={(ele) => { ref={(ele) => {
draggableRef.current = ele; draggableRef.current = ele;
@ -94,7 +99,7 @@ export function SessionItem(props: {
<Popover <Popover
content={ content={
<div <div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`} className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => { onClickCapture={(e) => {
props.onDelete?.(); props.onDelete?.();
e.preventDefault(); e.preventDefault();
@ -208,12 +213,12 @@ export default MenuLayout(function SessionList(props) {
</div> </div>
<div <div
className={`flex-1 overflow-y-auto overflow-x-hidden`} className={`flex-1 overflow-y-auto`}
onClick={(e) => { // onClick={(e) => {
if (e.target === e.currentTarget) { // if (e.target === e.currentTarget) {
navigate(Path.Home); // navigate(Path.Home);
} // }
}} // }}
> >
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="chat-list"> <Droppable droppableId="chat-list">

61
app/containers/Settings/index.tsx
View File

@ -5,6 +5,7 @@ import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg"; import GotoIcon from "@/app/icons/goto.svg";
import { useAppConfig } from "@/app/store"; import { useAppConfig } from "@/app/store";
import { useState } from "react";
export default MenuLayout(function SettingList(props) { export default MenuLayout(function SettingList(props) {
const { setShowPanel } = props; const { setShowPanel } = props;
@ -12,12 +13,21 @@ export default MenuLayout(function SettingList(props) {
const { isMobileScreen } = config; const { isMobileScreen } = config;
const list = [
{
id: Locale.Settings.GeneralSettings,
title: Locale.Settings.GeneralSettings,
icon: null,
},
];
const [selected, setSelected] = useState(list[0].id);
return ( return (
<div <div
className={` className={`
px-6
max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
md:pt-7 md:px-4 md:pt-7
`} `}
> >
<div data-tauri-drag-region> <div data-tauri-drag-region>
@ -25,7 +35,7 @@ export default MenuLayout(function SettingList(props) {
className={` className={`
flex items-center justify-between flex items-center justify-between
max-md:h-menu-title-mobile max-md:h-menu-title-mobile
md:pb-5 md:pb-5 md:px-4
`} `}
data-tauri-drag-region data-tauri-drag-region
> >
@ -38,22 +48,35 @@ export default MenuLayout(function SettingList(props) {
<div <div
className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`} className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
> >
<div {list.map((i) => (
className={` <div
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title key={i.id}
border className={`
border-opacity-0 rounded-md p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected cursor-pointer
flex justify-between items-center border
max-md:bg-settings-menu-item-mobile rounded-md
`}
onClick={() => { bg-chat-menu-session-unselected border-chat-menu-session-unselected
setShowPanel?.(true); ${
}} selected === i.id && !isMobileScreen
> ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
{Locale.Settings.GeneralSettings} : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
{isMobileScreen && <GotoIcon />} }
</div>
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected
flex justify-between items-center
max-md:bg-settings-menu-item-mobile
`}
onClick={() => {
setShowPanel?.(true);
}}
>
{i.title}
{i.icon}
{isMobileScreen && <GotoIcon />}
</div>
))}
</div> </div>
</div> </div>
); );

8
app/containers/Sidebar/index.tsx
View File

@ -61,6 +61,8 @@ export function SideBar(props: { className?: string }) {
mobileInactive: <DiscoverMobileInactive />, mobileInactive: <DiscoverMobileInactive />,
}, },
title: "Discover", title: "Discover",
activeClassName: "shadow-sidebar-btn-shadow",
className: "mb-4 hover:bg-sidebar-btn-hovered",
}, },
{ {
id: Path.Home, id: Path.Home,
@ -71,11 +73,13 @@ export function SideBar(props: { className?: string }) {
mobileInactive: <AssistantMobileInactive />, mobileInactive: <AssistantMobileInactive />,
}, },
title: "Assistant", title: "Assistant",
activeClassName: "shadow-sidebar-btn-shadow",
className: "mb-4 hover:bg-sidebar-btn-hovered",
}, },
{ {
id: "github", id: "github",
icons: <GitHubIcon />, icons: <GitHubIcon />,
className: "p-2", className: "!p-2 mb-3 hover:bg-sidebar-btn-hovered",
}, },
{ {
id: Path.Settings, id: Path.Settings,
@ -85,7 +89,7 @@ export function SideBar(props: { className?: string }) {
mobileActive: <SettingMobileActive />, mobileActive: <SettingMobileActive />,
mobileInactive: <SettingMobileInactive />, mobileInactive: <SettingMobileInactive />,
}, },
className: "p-2", className: "!p-2 hover:bg-sidebar-btn-hovered",
title: "Settrings", title: "Settrings",
}, },
]} ]}

4
app/styles/globals.css
View File

@ -77,6 +77,10 @@ body {
--delete-chat-cancel-btn-bg: #fff; --delete-chat-cancel-btn-bg: #fff;
--delete-chat-cancel-btn-text: #18182a; --delete-chat-cancel-btn-text: #18182a;
--delete-chat-cancel-btn-border: #e2e2e6; --delete-chat-cancel-btn-border: #e2e2e6;
--sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--hovered-btn-bg: rgba(0, 0, 0, 0.05);
} }
.dark { .dark {

5
tailwind.config.js
View File

@ -90,6 +90,7 @@ module.exports = {
'primary-btn-disabled': 'var(--primary-btn-disabled-bg)', 'primary-btn-disabled': 'var(--primary-btn-disabled-bg)',
'danger-btn': 'var(--danger-btn-bg)', 'danger-btn': 'var(--danger-btn-bg)',
'default-btn': 'var(--default-widget-bg)', 'default-btn': 'var(--default-widget-bg)',
'hovered-btn': 'var(--hovered-btn-bg)',
'card': 'var(--similar-panel-bg)', 'card': 'var(--similar-panel-bg)',
'input': 'var(--default-widget-bg)', 'input': 'var(--default-widget-bg)',
'list-item-divider': 'var(--similar-line-bg)', 'list-item-divider': 'var(--similar-line-bg)',
@ -127,6 +128,7 @@ module.exports = {
'settings-header-mobile': 'var(--similar-highlight-hood-bg)', 'settings-header-mobile': 'var(--similar-highlight-hood-bg)',
'settings-panel': 'var(--default-container-bg)', 'settings-panel': 'var(--default-container-bg)',
'sidebar-mobile': 'var(--similar-highlight-hood-bg)', 'sidebar-mobile': 'var(--similar-highlight-hood-bg)',
'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)',
'delete-chat-popover-panel': 'var(--similar-panel-bg)', 'delete-chat-popover-panel': 'var(--similar-panel-bg)',
'confirm-mask': 'var(--confirm-mask-bg)', 'confirm-mask': 'var(--confirm-mask-bg)',
'confirm-panel': 'var(--similar-panel-bg)', 'confirm-panel': 'var(--similar-panel-bg)',
@ -154,6 +156,7 @@ module.exports = {
'message-actions-bar': '0px 4px 30px 0px var(--small-widget-border)', 'message-actions-bar': '0px 4px 30px 0px var(--small-widget-border)',
'prompt-hint-container': 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.1)', 'prompt-hint-container': 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.1)',
'delete-chat-popover-shadow': '0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 8px 20px 0px rgba(0, 0, 0, 0.08)', 'delete-chat-popover-shadow': '0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 8px 20px 0px rgba(0, 0, 0, 0.08)',
'sidebar-btn-shadow': '4px 8px 16px 0px rgba(60, 68, 255, 0.20);',
}, },
colors: { colors: {
'select-popover': 'var(--small-widget-border)', 'select-popover': 'var(--small-widget-border)',
@ -169,6 +172,8 @@ module.exports = {
'settings-header': 'var(--panel-header-border)', 'settings-header': 'var(--panel-header-border)',
'delete-chat-popover': 'var(--small-widget-border)', 'delete-chat-popover': 'var(--small-widget-border)',
'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)', 'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)',
'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)',
'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)', 'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)',
'text-sidebar-tab-mobile-inactive': 'var(--weakness-text)', 'text-sidebar-tab-mobile-inactive': 'var(--weakness-text)',
'text-btn-primary': 'var(--bg-contract-text)', 'text-btn-primary': 'var(--bg-contract-text)',