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>

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js

@@ -2,13 +2,29 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   font-size: ${(props) => props.theme.font.size.base};
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
 
   .dropdown {
     width: 100%;
+    display: flex;
+    align-items: stretch;
   }
 
   .method-selector {
-    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    margin: 2px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+
+    &:not(.custom-input-mode):hover,
+    &:has(button[aria-expanded="true"]) {
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+    }
+
 
     .tippy-box {
       max-width: 150px !important;
@@ -37,20 +53,19 @@ const Wrapper = styled.div`
   }
 
   .method-span {
-    width: fit-content;
-    max-width: 10ch;
+    display: block;
+    max-width: 15ch;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    display: inline-block;
-    text-align: center;
     font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
+    line-height: 1.5;
   }
 
   .caret {
-    color: ${(props) => props.theme.colors.text.muted};
-    fill: ${(props) => props.theme.colors.text.muted};
+    color: currentColor;
+    fill: currentColor;
   }
 `;
 

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

@@ -10,27 +10,18 @@ const KEY = Object.freeze({ ENTER: 'Enter', ESCAPE: 'Escape' });
 
 const DEFAULT_METHOD = 'GET';
 
-const TriggerButton = ({ method, showCaret, ...props }) => {
-  const { theme } = useTheme();
-  const methodColor = useMemo(() => {
-    const colorMap = {
-      ...theme.request.methods,
-      ...theme.request
-    };
-    return colorMap[method.toLocaleLowerCase()];
-  }, [method, theme]);
-
+const TriggerButton = ({ method, methodSpanRef, showCaret, ...props }) => {
   return (
     <button
       type="button"
-      className="cursor-pointer flex items-center text-left w-full select-none"
+      className="cursor-pointer flex items-center gap-2 text-left w-full select-none px-2"
       {...props}
     >
       <span
-        className="px-3 truncate method-span"
+        ref={methodSpanRef}
+        className="truncate method-span"
         id="create-new-request-method"
         title={method}
-        style={{ color: methodColor }}
       >
         {method}
       </span>
@@ -43,6 +34,17 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect, showCaret
   const [isCustomMode, setIsCustomMode] = useState(false);
   const inputRef = useRef();
   const selectedMethodRef = useRef(method);
+  const methodSpanRef = useRef();
+  const [previousMethodWidth, setPreviousMethodWidth] = useState(null);
+
+  const { theme } = useTheme();
+  const methodColor = useMemo(() => {
+    const colorMap = {
+      ...theme.request.methods,
+      ...theme.request
+    };
+    return colorMap[method.toLocaleLowerCase()];
+  }, [method, theme]);
 
   const blurInput = () => inputRef.current?.blur();
 
@@ -72,6 +74,10 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect, showCaret
   };
 
   const handleAddCustomMethod = useCallback(() => {
+    // Capture the width of the current method span before switching to custom mode
+    if (methodSpanRef.current) {
+      setPreviousMethodWidth(methodSpanRef.current.offsetWidth);
+    }
     setIsCustomMode(true);
     onMethodSelect('');
 
@@ -131,14 +137,28 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect, showCaret
 
   // If in custom mode, render input field instead of dropdown
   if (isCustomMode) {
+    // Calculate width based on content length (in ch units), clamped to max 16ch
+    // Add 1ch for cursor space
+    const contentWidth = Math.min(method.length + 1, 16);
+    // Use previous method width as minimum, content-based width as current
+    const minWidthPx = previousMethodWidth ? `${previousMethodWidth}px` : '5ch';
+    // Use calc to add padding space (px-2 = 0.5rem per side = 1rem total) to the ch width
+    const currentWidth = `calc(${Math.max(contentWidth, 1)}ch + 1rem)`;
+
     return (
       <StyledWrapper>
-        <div className="flex method-selector">
+        <div className="flex method-selector custom-input-mode" style={{ color: methodColor }}>
           <div className="flex flex-col w-full">
             <input
               ref={inputRef}
               type="text"
-              className="px-3 w-fit max-w-[10ch] focus:bg-transparent"
+              className="px-2 focus:bg-transparent"
+              style={{
+                minWidth: minWidthPx,
+                width: currentWidth,
+                maxWidth: 'calc(16ch + 1rem)',
+                fontSize: '12px'
+              }}
               value={method}
               onChange={handleInputChange}
               onBlur={handleBlur}
@@ -154,13 +174,13 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect, showCaret
 
   return (
     <StyledWrapper>
-      <div className="flex method-selector">
+      <div className="flex method-selector" style={{ color: methodColor }}>
         <MenuDropdown
           items={menuItems}
           placement="bottom-start"
           selectedItemId={selectedItemId}
         >
-          <TriggerButton method={method} showCaret={showCaret} />
+          <TriggerButton method={method} showCaret={showCaret} methodSpanRef={methodSpanRef} />
         </MenuDropdown>
       </div>
     </StyledWrapper>