mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-28 15:14:06 +00:00
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:
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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') ? (
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user