mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-26 14:15:52 +00:00
578fa72dc8
* refactor: enhance GrpcRequestPane and GrpcResponsePane with ResponsiveTabs component - Replaced custom tab implementation with ResponsiveTabs for better structure and usability. - Utilized useMemo and useCallback for performance optimizations in GrpcRequestPane. - Removed unused imports and simplified tab management logic. - Updated StyledWrapper to remove legacy tab styles, improving maintainability. * fix: handle optional chaining for auth mode in GrpcRequestPane * feat: enhance GrpcRequestPane and GrpcResponsePane with tab initialization and response count indicators * refactor: simplify GrpcResponsePane tab management and enhance ResponsiveTabs key handling - Removed unnecessary useMemo for tab initialization in GrpcResponsePane. - Updated tab comparison logic in ResponsiveTabs to use key arrays for improved performance. - Adjusted test locator for response tab count to use role-based selection for better accessibility. * feat: add support for 'none' auth mode in GrpcAuth and integrate GrpcAuthMode in GrpcRequestPane - Updated StyledWrapper in ApiKeyAuth, BasicAuth, BearerAuth, OAuth2, WsseAuth, and GrpcAuth components to remove unnecessary margin-top, ensuring a uniform appearance across authentication interfaces. - Adjusted margin in GrantTypeSelector and WSAuth components for better layout consistency. * refactor: update import statement and enhance error handling in GrpcRequestPane - Changed the import of 'find' from lodash to a direct import for better clarity. - Improved error handling by returning null during initialization when requestPaneTab is not set, ensuring smoother user experience. * refactor: integrate StyledWrapper in SearchInput for improved styling * refactor: update StyledWrapper color and adjust margin in GrpcTimelineItem for improved layout consistency
69 lines
1.5 KiB
JavaScript
69 lines
1.5 KiB
JavaScript
import styled from 'styled-components';
|
|
|
|
const StyledWrapper = styled.div`
|
|
.proto-file-dropdown-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.proto-file-dropdown-icon {
|
|
margin-right: 0.25rem;
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
}
|
|
|
|
.proto-file-dropdown-text {
|
|
font-size: ${(props) => props.theme.font.size.xs};
|
|
white-space: nowrap;
|
|
color: ${(props) => props.theme.dropdown.color};
|
|
}
|
|
|
|
.proto-file-dropdown-caret {
|
|
margin-left: 0.25rem;
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
fill: ${(props) => props.theme.colors.text.muted};
|
|
}
|
|
|
|
.proto-file-dropdown-content {
|
|
max-height: fit-content;
|
|
overflow-y: auto;
|
|
width: 30rem;
|
|
}
|
|
|
|
.proto-file-dropdown-mode-section {
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid ${(props) => props.theme.border.border1};
|
|
}
|
|
|
|
.proto-file-dropdown-mode-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.proto-file-dropdown-mode-options {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.proto-file-dropdown-mode-option {
|
|
font-size: ${(props) => props.theme.font.size.xs};
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
|
|
&--active {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.proto-file-dropdown-reflection-message {
|
|
padding: 0.5rem 0.75rem;
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
`;
|
|
|
|
export default StyledWrapper;
|