rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-16 04:11:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update checkbox styles and colors in RunConfigurationPanel for improved visibility (#6570)

Browse Source 
* style: update checkbox styles and colors in RunConfigurationPanel for improved visibility

* style: update RunnerResults component styles for configuration options and panels

* style: refine checkbox styles in StyledWrapper for consistency and clarity
This commit is contained in:
Abhishek S Lal
2025-12-30 23:07:28 +05:30
committed by GitHub
parent 27dff7567c
commit b75c9fdd6d
4 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
View File

@@ -70,7 +70,16 @@ const StyledWrapper = styled.div`
transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
&.is-selected {
background-color: ${(props) => props.theme.background.surface2};
background-color: ${(props) => props.theme.background.surface0};
.checkbox {
background-color: ${(props) => props.theme.primary.solid};
border-color: ${(props) => props.theme.primary.solid};
}
.checkbox-icon {
color: ${(props) => props.theme.bg};
}
}
&.is-dragging {
@@ -144,7 +153,7 @@ const StyledWrapper = styled.div`
.checkbox {
width: 1rem;
height: 1rem;
border: 1px solid ${(props) => props.theme.sidebar.dragbar};
border: 1px solid ${(props) => props.theme.border.border2};
border-radius: 3px;
display: flex;
align-items: center;
@@ -152,7 +161,7 @@ const StyledWrapper = styled.div`
transition: all 0.1s ease;
&:hover {
border-color: ${(props) => props.theme.textLink};
border-color: ${(props) => props.theme.primary.solid};
}
}
}

2
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
View File

@@ -107,7 +107,7 @@ const RequestItem = ({ item, index, moveItem, isSelected, onSelect, onDrop }) =>
<div className="checkbox-container" onClick={() => onSelect(item)}>
<div className="checkbox">
{isSelected && <IconCheck size={12} />}
{isSelected && <IconCheck className="checkbox-icon" size={12} strokeWidth={3} />}
</div>
</div>

4
packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
View File

@@ -52,6 +52,10 @@ const Wrapper = styled.div`
.button-sm {
font-size: ${(props) => props.theme.font.size.sm};
}
.run-config-panel, .run-config-option {
border-color: ${(props) => props.theme.background.surface1};
}
`;
export default Wrapper;

4
packages/bruno-app/src/components/RunnerResults/index.jsx
View File

@@ -303,7 +303,7 @@ export default function RunnerResults({ collection }) {
<RunnerTags collectionUid={collection.uid} className="mb-6" />
{/* Configure requests option */}
<div className="flex flex-col border-b pb-6 mb-6 border-gray-200 dark:border-gray-700">
<div className="run-config-option flex flex-col border-b pb-6 mb-6">
<div className="flex gap-2">
<input
className="cursor-pointer"
@@ -335,7 +335,7 @@ export default function RunnerResults({ collection }) {
</div>
{configureMode && (
<div className="w-1/2 border-l border-gray-200 dark:border-gray-700">
<div className="run-config-panel w-1/2 border-l">
<RunConfigurationPanel
collection={collection}
selectedItems={selectedRequestItems}