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 text color classes and button hover effects in RunnerResults (#6637)

Browse Source 
* style: update text color classes and button hover effects in RunnerResults and StyledWrapper components

* Update StyledWrapper.jsx

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
Chirag Chandrashekhar
2026-01-02 21:21:10 +05:30
committed by GitHub
parent d758645144
commit 2a5ec854cc
3 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -87,7 +87,7 @@ const StyledWrapper = styled.div`
background-color: ${(props) => props.theme.sidebar.bg};
border: 1px dashed ${(props) => props.theme.sidebar.dragbar};
transform: scale(0.98);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
box-shadow: ${(props) => props.theme.shadow.md};
z-index: 5;
}

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

@@ -2,7 +2,6 @@ import styled from 'styled-components';
const Wrapper = styled.div`
.textbox {
border: 1px solid #ccc;
padding: 0.2rem 0.5rem;
box-shadow: none;
border-radius: 0px;
@@ -49,6 +48,28 @@ const Wrapper = styled.div`
color: ${(props) => props.theme.colors.text.muted};
}
.text-muted {
color: ${(props) => props.theme.colors.text.muted};
}
.text-green {
color: ${(props) => props.theme.colors.text.green};
}
.text-subtext0 {
color: ${(props) => props.theme.colors.text.subtext0};
}
.text-subtext1 {
color: ${(props) => props.theme.colors.text.subtext1};
}
.hover-bg-surface {
&:hover {
background-color: ${(props) => props.theme.background.surface1};
}
}
.button-sm {
font-size: ${(props) => props.theme.font.size.sm};
}
@@ -60,7 +81,7 @@ const Wrapper = styled.div`
.filter-bar {
display: flex;
align-items: stretch;
border-radius: ${(props) => props.theme.border.radius.lg};
border-radius: ${(props) => props.theme.border.radius.base};
border: 1px solid ${(props) => props.theme.border.border0};
max-height: 35px;
flex-shrink: 0;
@@ -70,15 +91,15 @@ const Wrapper = styled.div`
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
border-top-left-radius: ${(props) => props.theme.border.radius.lg};
border-bottom-left-radius: ${(props) => props.theme.border.radius.lg};
background-color: ${(props) => props.theme.background.surface0};
border-top-left-radius: ${(props) => props.theme.border.radius.base};
border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
background-color: ${(props) => props.theme.background.mantle};
span {
font-family: Inter, sans-serif;
font-weight: 400;
font-size: ${(props) => props.theme.font.size.sm};
color: ${(props) => props.theme.colors.text.subtext1};
color: ${(props) => props.theme.colors.text.text};
}
}
@@ -87,8 +108,8 @@ const Wrapper = styled.div`
align-items: center;
gap: 1.25rem;
padding: 0.5rem 0.75rem 0 0.75rem;
border-top-right-radius: ${(props) => props.theme.border.radius.lg};
border-bottom-right-radius: ${(props) => props.theme.border.radius.lg};
border-top-right-radius: ${(props) => props.theme.border.radius.base};
border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
background: transparent;
}
}

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

@@ -269,7 +269,7 @@ export default function RunnerResults({ collection }) {
<div className="mt-6">
You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
{isCollectionLoading && (
<span className="ml-2 text-gray-500">
<span className="ml-2 text-muted">
(Loading...)
</span>
)}
@@ -403,10 +403,10 @@ export default function RunnerResults({ collection }) {
<div className="pb-2 text-xs flex flex-row gap-1">
Tags:
<div className="flex flex-row items-center gap-x-2">
<div className="text-green-500">
<div className="text-green">
{tags.include.join(', ')}
</div>
<div className="text-gray-500">
<div className="text-muted">
{tags.exclude.join(', ')}
</div>
</div>
@@ -458,7 +458,7 @@ export default function RunnerResults({ collection }) {
)}
</div>
{tagsEnabled && areTagsAdded && item?.tags?.length > 0 && (
<div className="pl-7 text-xs text-gray-500">
<div className="pl-7 text-xs text-muted">
Tags: {item.tags.filter((t) => tags.include.includes(t)).join(', ')}
</div>
)}
@@ -571,7 +571,7 @@ export default function RunnerResults({ collection }) {
</div>
<button
onClick={() => setSelectedItem(null)}
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer flex items-center justify-center"
className="p-1 rounded hover-bg-surface transition-colors cursor-pointer flex items-center justify-center"
title="Close"
aria-label="Close response view"
>
@@ -584,10 +584,10 @@ export default function RunnerResults({ collection }) {
) : (
<div className="flex flex-1 w-[50%] overflow-y-auto">
<div className="flex flex-col w-full h-full items-center justify-center text-center">
<div className="mb-4 text-gray-400 dark:text-gray-500">
<div className="mb-4 text-subtext0">
<IconExternalLink size={64} strokeWidth={1.5} />
</div>
<p className="text-gray-600 dark:text-gray-400">
<p className="text-subtext1">
Click on the status code to view the response
</p>
</div>