rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-09 06:55:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use theme colors for Console method badges (#6603)

Browse Source 
* feat: use theme colors for Console method badges

* chore(theme): bruno devtools UX updates

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
gopu-bruno
2026-01-02 04:06:55 +05:30
committed by GitHub
parent f611c05fe8
commit 5fda0866f8
11 changed files with 56 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
View File

@@ -15,7 +15,7 @@ const StyledWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
padding: 2px 8px;
background: ${(props) => props.theme.console.headerBg};
border-bottom: 1px solid ${(props) => props.theme.console.border};
flex-shrink: 0;
@@ -27,7 +27,6 @@ const StyledWrapper = styled.div`
gap: 8px;
color: ${(props) => props.theme.console.titleColor};
font-size: ${(props) => props.theme.font.size.base};
font-weight: 500;
.request-time {
color: ${(props) => props.theme.console.countColor};
@@ -66,7 +65,7 @@ const StyledWrapper = styled.div`
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
padding: 4px 8px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
@@ -92,7 +91,7 @@ const StyledWrapper = styled.div`
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
padding: 8px;
min-height: 0;
height: 0;
}
@@ -170,8 +169,7 @@ const StyledWrapper = styled.div`
z-index: 10;
td {
padding: 8px 12px;
font-weight: 500;
padding: 4px 8px;
color: ${(props) => props.theme.console.titleColor};
text-transform: uppercase;
font-size: ${(props) => props.theme.font.size.xs};
@@ -198,7 +196,7 @@ const StyledWrapper = styled.div`
}
td {
padding: 8px 12px;
padding: 2px 8px;
vertical-align: top;
word-break: break-word;
}
@@ -256,11 +254,15 @@ const StyledWrapper = styled.div`
}
.response-body-container {
border-radius: 4px;
border-radius: ${(props) => props.theme.border.radius.sm};
overflow: hidden;
height: 400px;
display: flex;
flex-direction: column;
pre {
padding: 8px !important;
}
.w-full.h-full.relative.flex {
height: 100% !important;
@@ -270,7 +272,7 @@ const StyledWrapper = styled.div`
}
div[role="tablist"] {
padding: 8px 12px;
padding: 4px 8px;
border-bottom: 1px solid ${(props) => props.theme.console.border};
display: flex !important;
gap: 8px !important;