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>

tests/collection/create/create-collection.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../../../playwright';
-import { closeAllCollections, createRequest } from '../../utils/page';
+import { closeAllCollections, createCollection, createRequest } from '../../utils/page';
 
 test.describe('Create collection', () => {
   test.afterEach(async ({ page }) => {
@@ -11,17 +11,7 @@ test.describe('Create collection', () => {
     const collectionName = 'test-collection';
     const requestName = 'ping';
 
-    await page.getByTestId('collections-header-add-menu').click();
-    await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
-    await page.getByLabel('Name').click();
-    await page.getByLabel('Name').fill(collectionName);
-    await page.getByLabel('Name').press('Tab');
-    const locationInput = page.locator('.bruno-modal').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 page.locator('#sidebar-collection-name').filter({ hasText: collectionName }).click();
+    await createCollection(page, collectionName, await createTmpDir(collectionName));
 
     // Create a new request using the dialog/modal flow
     await createRequest(page, requestName, collectionName);

tests/collection/moving-requests/tag-persistence.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../../../playwright';
-import { closeAllCollections, createRequest, selectRequestPaneTab } from '../../utils/page';
+import { closeAllCollections, createCollection, createRequest, selectRequestPaneTab } from '../../utils/page';
 import { buildCommonLocators } from '../../utils/page/locators';
 
 test.describe('Tag persistence', () => {
@@ -14,17 +14,8 @@ test.describe('Tag persistence', () => {
     const requestUrl = 'https://httpfaker.org/api/echo';
     const tagName = 'smoke';
 
-    // Create first collection - click plus icon button to open dropdown
-    await locators.plusMenu.button().click();
-    await locators.plusMenu.createCollection().click();
-    await page.getByLabel('Name').fill(collectionName);
-    const locationInput = locators.modal.byTitle('Create Collection').getByLabel('Location');
-    if (await locationInput.isVisible()) {
-      await locationInput.fill(await createTmpDir(collectionName));
-    }
-    await locators.modal.button('Create').click();
-    await locators.sidebar.collection(collectionName).click();
-    await page.waitForTimeout(1000);
+    // Create first collection
+    await createCollection(page, collectionName, await createTmpDir(collectionName));
     // Create three requests via the dialog/modal flow, then add a tag to each
     const requestNames = ['request-1', 'request-2', 'request-3'];
     for (const requestName of requestNames) {
@@ -69,16 +60,8 @@ test.describe('Tag persistence', () => {
 
   test('verify tag persistence while moving requests between folders', async ({ page, createTmpDir }) => {
     const locators = buildCommonLocators(page);
-    // Create first collection - click plus icon button to open dropdown
-    await locators.plusMenu.button().click();
-    await locators.plusMenu.createCollection().click();
-    await page.getByLabel('Name').fill('test-collection');
-    const locationInput = locators.modal.byTitle('Create Collection').getByLabel('Location');
-    if (await locationInput.isVisible()) {
-      await locationInput.fill(await createTmpDir('test-collection'));
-    }
-    await locators.modal.button('Create').click();
-    await locators.sidebar.collection('test-collection').click();
+    // Create first collection
+    await createCollection(page, 'test-collection', await createTmpDir('test-collection'));
 
     // Create a new folder
     await locators.sidebar.collectionRow('test-collection').hover();

tests/collection/moving-tabs/move-tabs.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../../../playwright';
-import { closeAllCollections, openCollection } from '../../utils/page';
+import { closeAllCollections, createCollection } from '../../utils/page';
 
 test.describe('Move tabs', () => {
   test.afterEach(async ({ page }) => {
@@ -9,19 +9,7 @@ test.describe('Move tabs', () => {
 
   test('Verify tab move by drag and drop', async ({ page, createTmpDir }) => {
     // Create a collection
-    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('source-collection-drag-drop');
-    const locationInput = page.locator('.bruno-modal').getByLabel('Location');
-    if (await locationInput.isVisible()) {
-      await locationInput.fill(await createTmpDir('source-collection-drag-drop'));
-    }
-    await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for collection to appear and click on it
-    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection-drag-drop' })).toBeVisible();
-    await page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection-drag-drop' }).click();
-    await openCollection(page, 'source-collection-drag-drop');
+    await createCollection(page, 'source-collection-drag-drop', await createTmpDir('source-collection-drag-drop'));
 
     // Create a folder in the collection
     const sourceCollection = page.locator('.collection-name').filter({ hasText: 'source-collection-drag-drop' });
@@ -99,18 +87,7 @@ test.describe('Move tabs', () => {
 
   test('Verify tab move by keyboard shortcut', async ({ page, createTmpDir }) => {
     // Create a collection
-    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('source-collection-keyboard-shortcut');
-    const locationInput2 = page.locator('.bruno-modal').getByLabel('Location');
-    if (await locationInput2.isVisible()) {
-      await locationInput2.fill(await createTmpDir('source-collection-keyboard-shortcut'));
-    }
-    await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for collection to appear and click on it
-    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection-keyboard-shortcut' })).toBeVisible();
-    await page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection-keyboard-shortcut' }).click();
+    await createCollection(page, 'source-collection-keyboard-shortcut', await createTmpDir('source-collection-keyboard-shortcut'));
 
     // Create a folder in the collection
     const sourceCollection = page.locator('.collection-name').filter({ hasText: 'source-collection-keyboard-shortcut' });