mirror of
https://github.com/usebruno/bruno.git
synced 2026-07-09 06:55:03 +00:00
5944a9cf06
* feat: implement OpenAPI Sync * feat: enhance focus styles and error handling across components - Added focus-visible styles for buttons and tags in Swagger and Modal components to improve accessibility. - Updated ConnectSpecForm to ensure source URL is set only if the file path is valid. - Enhanced clipboard copy functionality in SpecInfoCard with error handling and success notifications. - Improved ExpandableEndpointRow to handle loading state more robustly. - Refined SyncReviewPage to ensure correct filtering of updated endpoints. - Updated file handling in OpenAPI Sync IPC to support both .yml and .yaml extensions. * fix: improve filename sanitization in OpenAPI Sync IPC - Updated filename sanitization logic to ensure proper handling of both `name` and `filename` properties, enhancing compatibility with various file formats. - Adjusted the logic to derive the base name from the filename when necessary, ensuring consistent output for generated files. * feat: enhance OpenAPI Sync tab with new overview and header components - Introduced OverviewSection to display summary of collection and spec status, including total endpoints, in-sync counts, and pending updates. - Added OpenAPISyncHeader for improved navigation and actions related to the OpenAPI spec. - Updated CollectionStatusSection to better handle and display collection drift information. - Refined styling for status banners and added new visual elements for better user experience. - Enhanced tooltip functionality in Help component for improved accessibility. * refactor: remove VisualDiffViewer components and add diff package - Deleted VisualDiffViewer components including VisualDiffMeta, VisualDiffDocs, VisualDiffVars, and others to streamline the codebase. - Introduced the 'diff' package in package-lock.json to enhance diff functionality. - Updated utility functions to improve diff status handling and maintainability.
87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import styled from 'styled-components';
|
|
|
|
const StyledWrapper = styled.div`
|
|
&.tabs {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
|
|
> div:first-child {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.more-tabs {
|
|
color: ${(props) => props.theme.colors.text.subtext0} !important;
|
|
border-bottom: solid 2px transparent;
|
|
|
|
&:hover {
|
|
color: ${(props) => props.theme.tabs.active.color} !important;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 6px 0px;
|
|
border: none;
|
|
border-bottom: solid 2px transparent;
|
|
margin-right: ${(props) => props.theme.tabs.marginRight};
|
|
color: ${(props) => props.theme.colors.text.subtext0};
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
font-size: ${(props) => props.theme.font.size.sm};
|
|
|
|
&:focus,
|
|
&:active,
|
|
&:focus-within,
|
|
&:focus-visible,
|
|
&:target {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&:hover {
|
|
color: ${(props) => props.theme.tabs.active.color} !important;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
|
|
color: ${(props) => props.theme.tabs.active.color} !important;
|
|
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
|
|
}
|
|
|
|
.content-indicator {
|
|
color: ${(props) => props.theme.text};
|
|
}
|
|
|
|
.tab-count {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9px;
|
|
padding: 0 5px;
|
|
background: ${(props) => props.theme.colors.text.muted}20;
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
}
|
|
|
|
sup {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
vertical-align: baseline;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default StyledWrapper;
|