fix: modal icon colors to match button colors (#6624)

* style: update warning icon color in RemoveCollection and ConfirmSwitchEnv components to use theme colors

* fix: font size in BulkEditor

* style: update error message styling to use theme colors in QueryResult component

* style: update warning icon color

* style: update warning color in ConfirmSwitchEnv

* chore: minor pr comment

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
Sanjai Kumar
2026-01-02 18:18:36 +05:30
committed by GitHub
parent 4253080f6b
commit f90f256f5f
6 changed files with 17 additions and 4 deletions

View File

@@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import get from 'lodash/get';
import CodeEditor from 'components/CodeEditor';
import { useTheme } from 'providers/Theme';
import { useSelector } from 'react-redux';
@@ -21,7 +22,8 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
<CodeEditor
mode="text/plain"
theme={displayedTheme}
font={preferences.codeFont || 'default'}
font={get(preferences, 'font.codeFont', 'default')}
fontSize={get(preferences, 'font.codeFontSize')}
value={parsedParams}
onEdit={handleEdit}
onSave={onSave}

View File

@@ -40,6 +40,10 @@ const StyledWrapper = styled.div`
color: ${(props) => props.theme.colors.text.muted};
}
.error {
color: ${(props) => props.theme.colors.text.danger};
}
.response-filter {
position: absolute;
bottom: 0;

View File

@@ -177,7 +177,7 @@ const QueryResult = ({
{error ? (
<div>
{hasScriptError ? null : (
<div className="text-red-500" style={{ whiteSpace: 'pre-line' }}>{formatErrorMessage(error)}</div>
<div className="error" style={{ whiteSpace: 'pre-line' }}>{formatErrorMessage(error)}</div>
)}
{error && typeof error === 'string' && error.toLowerCase().includes('self signed certificate') ? (

View File

@@ -21,6 +21,9 @@ const StyledWrapper = styled.div`
color: ${(props) => props.theme.colors.text.muted};
word-break: break-all;
}
.warning-icon {
color: ${(props) => props.theme.status.warning.text};
}
`;
export default StyledWrapper;

View File

@@ -45,7 +45,7 @@ const RemoveCollection = ({ onClose, collectionUid }) => {
const customHeader = (
<div className="flex items-center gap-2" data-testid="close-collection-modal-title">
<IconAlertCircle size={18} strokeWidth={1.5} className="text-red-500" />
<IconAlertCircle size={18} strokeWidth={1.5} className="warning-icon" />
<span>Remove Collection</span>
</div>
);

View File

@@ -3,8 +3,12 @@ import { IconAlertTriangle } from '@tabler/icons';
import Modal from 'components/Modal';
import { createPortal } from 'react-dom';
import Button from 'ui/Button';
import { useTheme } from 'providers/Theme';
const ConfirmSwitchEnv = ({ onCancel }) => {
const { theme } = useTheme();
const warningColor = theme.status.warning.text;
const modalContent = (
<Modal
size="md"
@@ -20,7 +24,7 @@ const ConfirmSwitchEnv = ({ onCancel }) => {
hideFooter={true}
>
<div className="flex items-center font-normal">
<IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
<IconAlertTriangle color={warningColor} size={32} strokeWidth={1.5} />
<h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
</div>
<div className="font-normal mt-4">You have unsaved changes in this environment.</div>