Feat/v3 UI updates (#6618)

* style: enhance button layout and input styles across multiple components for improved UI consistency

* style: update RequestsNotLoaded component with new warning styles and enhance theme color definitions for status indicators

* refactor: update theme usage across components for consistency

- Changed color references from theme.brand to theme.primary.text in various StyledWrapper components.
- Added hover effects to enhance UI interactivity in CollectionSettings and FolderSettings.
- Removed unnecessary margin and padding adjustments in several components for cleaner layout.
- Improved accessibility by ensuring aria attributes are correctly set in MenuDropdown.
- Standardized styling for method indicators in RequestPane components.

These changes aim to create a more cohesive look and feel across the application while adhering to the updated theme guidelines.

* refactor: clean up method selector styling in NewRequest component

* chore: temp playwright test fixes

* refactor: update modal sizes across various components for consistency

- Changed modal size from "sm" to "md" in RenameWorkspace, CreateApiSpec, CloneCollection, DeleteCollectionItem, and RenameCollection components.
- Improved styling in HttpMethodSelector by adding padding for better layout.
- Updated theme color references in multiple theme files to use a new palette structure for consistency and maintainability.

* refactor: enhance styling and theme integration in TimelineItem components

- Updated HttpMethodSelector to clarify padding calculation in comments.
- Integrated theme colors for OAuth2 indicator and timestamp in TimelineItem for better visual consistency.
- Adjusted Method component to use uppercase styling for method display.
- Modified RelativeTime component to apply muted text color for improved readability.
- Updated INFO color in dark and light themes for better contrast and accessibility.

* refactor: remove duplicate import statements in theme files

- Cleaned up import statements in vscode.js and light-pastel.js by removing redundant lines for improved code clarity and maintainability.

* refactor: improve styling and theme integration in various components

- Added accent color and cursor style for checkbox inputs in Modal's StyledWrapper.
- Updated border-radius values in HttpMethodSelector and NewRequest StyledWrapper components to use theme variables for consistency.
- Introduced a new textbox class in NewRequest StyledWrapper for better styling control.
- Changed modal size from "sm" to "md" in CreateEnvironment for improved layout.

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
Abhishek S Lal
2026-01-02 16:48:47 +05:30
committed by GitHub
parent 058d2e0e61
commit 849465d62a
94 changed files with 756 additions and 297 deletions

View File

@@ -1,5 +1,5 @@
import { test, expect } from '../../../playwright';
import { closeAllCollections, createRequest } from '../../utils/page';
import { closeAllCollections, createCollection, createRequest } from '../../utils/page';
test.describe('Code Generation URL Encoding', () => {
test.afterEach(async ({ page }) => {
@@ -21,20 +21,8 @@ test.describe('Code Generation URL Encoding', () => {
const collectionName = 'unencoded-test-collection';
const requestName = 'curl-encoding-unencoded';
// Use plus icon button in new workspace UI
await page.getByTestId('collections-header-add-menu').click();
await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
await page.getByLabel('Name').fill(collectionName);
const locationInput = page.getByLabel('Location');
if (await locationInput.isVisible()) {
await locationInput.fill(await createTmpDir(collectionName));
}
await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
await expect(page.locator('#sidebar-collection-name').filter({ hasText: collectionName })).toBeVisible();
await page.locator('#sidebar-collection-name').filter({ hasText: collectionName }).click();
// Create a new request using the dialog/modal flow
// Create collection and request
await createCollection(page, collectionName, await createTmpDir(collectionName));
await createRequest(page, requestName, collectionName, { url: 'http://base.source?name=John Doe' });
// Click the request in the sidebar
@@ -64,20 +52,8 @@ test.describe('Code Generation URL Encoding', () => {
const collectionName = 'encoded-test-collection';
const requestName = 'curl-encoding-encoded';
// Use plus icon button in new workspace UI
await page.getByTestId('collections-header-add-menu').click();
await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
await page.getByLabel('Name').fill(collectionName);
const locationInput = page.getByLabel('Location');
if (await locationInput.isVisible()) {
await locationInput.fill(await createTmpDir(collectionName));
}
await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
await expect(page.locator('#sidebar-collection-name').filter({ hasText: collectionName })).toBeVisible();
await page.locator('#sidebar-collection-name').filter({ hasText: collectionName }).click();
// Create a new request using the dialog/modal flow
// Create collection and request
await createCollection(page, collectionName, await createTmpDir(collectionName));
await createRequest(page, requestName, collectionName, { url: 'http://base.source?name=John%20Doe' });
// Click the request in the sidebar