rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-08 14:35:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign dropdowns (#6235)

Browse Source 
* redesign dropdowns

* fix: colors

---------

Co-authored-by: Anoop M D <anoop@usebruno.com>
This commit is contained in:
naman-bruno
2025-11-27 22:20:51 +05:30
committed by GitHub
parent 59514127d5
commit 7ee366eb81
5 changed files with 289 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
View File

@@ -1,6 +1,15 @@
import React, { useRef, forwardRef } from 'react';
import get from 'lodash/get';
import { IconCaretDown } from '@tabler/icons';
import {
IconCaretDown,
IconForms,
IconBraces,
IconCode,
IconFileText,
IconDatabase,
IconFile,
IconX
} from '@tabler/icons';
import Dropdown from 'components/Dropdown';
import { useDispatch } from 'react-redux';
import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
@@ -70,7 +79,7 @@ const RequestBodyMode = ({ item, collection }) => {
<StyledWrapper>
<div className="inline-flex items-center cursor-pointer body-mode-selector">
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
<div className="label-item font-medium">Form</div>
<div className="label-item">Form</div>
<div
className="dropdown-item"
onClick={() => {
@@ -78,6 +87,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('multipartForm');
}}
>
<span className="dropdown-icon">
<IconForms size={16} strokeWidth={2} />
</span>
Multipart Form
</div>
<div
@@ -87,9 +99,12 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('formUrlEncoded');
}}
>
<span className="dropdown-icon">
<IconForms size={16} strokeWidth={2} />
</span>
Form URL Encoded
</div>
<div className="label-item font-medium">Raw</div>
<div className="label-item">Raw</div>
<div
className="dropdown-item"
onClick={() => {
@@ -97,6 +112,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('json');
}}
>
<span className="dropdown-icon">
<IconBraces size={16} strokeWidth={2} />
</span>
JSON
</div>
<div
@@ -106,6 +124,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('xml');
}}
>
<span className="dropdown-icon">
<IconCode size={16} strokeWidth={2} />
</span>
XML
</div>
<div
@@ -115,6 +136,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('text');
}}
>
<span className="dropdown-icon">
<IconFileText size={16} strokeWidth={2} />
</span>
TEXT
</div>
<div
@@ -124,9 +148,12 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('sparql');
}}
>
<span className="dropdown-icon">
<IconDatabase size={16} strokeWidth={2} />
</span>
SPARQL
</div>
<div className="label-item font-medium">Other</div>
<div className="label-item">Other</div>
<div
className="dropdown-item"
onClick={() => {
@@ -134,6 +161,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('file');
}}
>
<span className="dropdown-icon">
<IconFile size={16} strokeWidth={2} />
</span>
File / Binary
</div>
<div
@@ -143,6 +173,9 @@ const RequestBodyMode = ({ item, collection }) => {
onModeChange('none');
}}
>
<span className="dropdown-icon">
<IconX size={16} strokeWidth={2} />
</span>
No Body
</div>
</Dropdown>