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

fix: match filesystem name input style to NewFolder modal in SaveTransientRequest (#7109)

Browse Source 
- Update label to match NewFolder format with '(on filesystem)' suffix
- Add folder icon before the input field
- Apply PathDisplay-like styling with yellow text color and monospace font
- Use matching background, border, and padding from PathDisplay component
This commit is contained in:
Chirag Chandrashekhar
2026-02-11 18:07:46 +05:30
committed by Bijin A B
parent cb3f6629bb
commit db137da8ed
3 changed files with 155 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js
View File

@@ -242,6 +242,35 @@ const StyledWrapper = styled.div`
color: ${(props) => props.theme.text};
}
.filesystem-input-container {
display: flex;
align-items: center;
background: ${(props) => props.theme.requestTabPanel.url.bg};
border-radius: 4px;
padding: 8px 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 8px;
}
.filesystem-input-icon {
flex-shrink: 0;
margin-right: 8px;
color: ${(props) => props.theme.colors.text.yellow};
}
.filesystem-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: ${(props) => props.theme.colors.text.yellow};
font-size: ${(props) => props.theme.font.size.base};
&::placeholder {
color: ${(props) => props.theme.colors.text.muted};
}
}
.new-folder-toggle-filesystem-btn {
display: flex;
align-items: center;

39
packages/bruno-app/src/components/SaveTransientRequest/index.js
View File

@@ -382,23 +382,28 @@ const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOp
{showFilesystemName && (
<div className="new-folder-filesystem-wrapper">
<label className="new-folder-filesystem-label">Name on filesystem</label>
<input
type="text"
className="new-folder-input"
value={newFolderDirectoryName}
onChange={(e) => handleDirectoryNameChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.stopPropagation();
handleCreateNewFolder();
} else if (e.key === 'Escape') {
e.stopPropagation();
handleCancelNewFolder();
}
}}
/>
<label className="new-folder-filesystem-label flex items-center font-medium">
Folder Name <small className="font-normal text-muted ml-1">(on filesystem)</small>
</label>
<div className="filesystem-input-container">
<IconFolder size={16} className="filesystem-input-icon" />
<input
type="text"
className="filesystem-input font-mono"
value={newFolderDirectoryName}
onChange={(e) => handleDirectoryNameChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.stopPropagation();
handleCreateNewFolder();
} else if (e.key === 'Escape') {
e.stopPropagation();
handleCancelNewFolder();
}
}}
/>
</div>
</div>
)}