feat: enhance HttpMethodSelector to include caret indicator when creating new request (#6620)

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

@@ -47,6 +47,11 @@ const Wrapper = styled.div`
     font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
   }
+
+  .caret {
+    color: ${(props) => props.theme.colors.text.muted};
+    fill: ${(props) => props.theme.colors.text.muted};
+  }
 `;
 
 export default Wrapper;

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

@@ -10,7 +10,7 @@ const KEY = Object.freeze({ ENTER: 'Enter', ESCAPE: 'Escape' });
 
 const DEFAULT_METHOD = 'GET';
 
-const TriggerButton = ({ method, ...props }) => {
+const TriggerButton = ({ method, showCaret, ...props }) => {
   const { theme } = useTheme();
   const methodColor = useMemo(() => {
     const colorMap = {
@@ -34,11 +34,12 @@ const TriggerButton = ({ method, ...props }) => {
       >
         {method}
       </span>
+      {showCaret && <IconCaretDown className="caret" size={14} strokeWidth={2} />}
     </button>
   );
 };
 
-const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect }) => {
+const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect, showCaret = false }) => {
   const [isCustomMode, setIsCustomMode] = useState(false);
   const inputRef = useRef();
   const selectedMethodRef = useRef(method);
@@ -159,7 +160,7 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect }) => {
           placement="bottom-start"
           selectedItemId={selectedItemId}
         >
-          <TriggerButton method={method} />
+          <TriggerButton method={method} showCaret={showCaret} />
         </MenuDropdown>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -507,6 +507,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
                         <HttpMethodSelector
                           method={formik.values.requestMethod}
                           onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+                          showCaret
                         />
                       </div>
                     ) : null}