Skip to content

Commit 3e5ae61

Browse files
sanjaikumar-brunonaman-brunobijin-bruno
authored
feat: Increase visibility of text in Request tabs (#6243)
* refactor(RequestTabs): update tab width calculation and improve styling * refactor: replace close icon implementation with GradientCloseButton and adjust styles * changes: design * fix: failing tests * fixes * fixes: coderabbit * fixes * fixes * gradient color fix --------- Co-authored-by: naman-bruno <[email protected]> Co-authored-by: Bijin A B <[email protected]>
1 parent 42bef4a commit 3e5ae61

File tree

11 files changed

+507
-189
lines changed

11 files changed

+507
-189
lines changed

‎packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import ExampleIcon from 'components/Icons/ExampleIcon';
88
import ConfirmRequestClose from '../RequestTab/ConfirmRequestClose';
99
import RequestTabNotFound from '../RequestTab/RequestTabNotFound';
1010
import StyledWrapper from '../RequestTab/StyledWrapper';
11-
import CloseTabIcon from '../RequestTab/CloseTabIcon';
12-
import DraftTabIcon from '../RequestTab/DraftTabIcon';
11+
import GradientCloseButton from '../RequestTab/GradientCloseButton';
1312

1413
const ExampleTab = ({ tab, collection }) => {
1514
const dispatch = useDispatch();
@@ -59,7 +58,7 @@ const ExampleTab = ({ tab, collection }) => {
5958
if (!item || !example) {
6059
return (
6160
<StyledWrapper
62-
className="flex items-center justify-between tab-container px-1"
61+
className="flex items-center justify-between tab-container px-3"
6362
onMouseUp={(e) => {
6463
if (e.button === 1) {
6564
e.preventDefault();
@@ -75,7 +74,7 @@ const ExampleTab = ({ tab, collection }) => {
7574
}
7675

7776
return (
78-
<StyledWrapper className="flex items-center justify-between tab-container px-1">
77+
<StyledWrapper className="flex items-center justify-between tab-container px-3">
7978
{showConfirmClose && (
8079
<ConfirmRequestClose
8180
item={item}
@@ -116,13 +115,13 @@ const ExampleTab = ({ tab, collection }) => {
116115
}
117116
}}
118117
>
119-
<ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-500 flex-shrink-0" />
118+
<ExampleIcon size={14} color="currentColor" className="mr-1.5 text-gray-500 flex-shrink-0" />
120119
<span className="tab-name" title={example.name}>
121120
{example.name}
122121
</span>
123122
</div>
124-
<div
125-
className="flex px-2 close-icon-container"
123+
<GradientCloseButton
124+
hasChanges={hasChanges}
126125
onClick={(e) => {
127126
if (!hasChanges) {
128127
return handleCloseClick(e);
@@ -132,13 +131,7 @@ const ExampleTab = ({ tab, collection }) => {
132131
e.preventDefault();
133132
setShowConfirmClose(true);
134133
}}
135-
>
136-
{!hasChanges ? (
137-
<CloseTabIcon />
138-
) : (
139-
<DraftTabIcon />
140-
)}
141-
</div>
134+
/>
142135
</StyledWrapper>
143136
);
144137
};

‎packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import styled from 'styled-components';
2+
3+
const StyledWrapper = styled.div.attrs((props) => ({
4+
style: {
5+
'--gradient-color': props.theme.requestTabs.bg,
6+
'--gradient-color-active': props.theme.bg
7+
}
8+
}))`
9+
display: flex;
10+
align-items: center;
11+
justify-content: flex-end;
12+
position: absolute;
13+
width: 44px;
14+
height: 100%;
15+
right: 0;
16+
top: 0;
17+
padding-right: 4px;
18+
z-index: 3;
19+
20+
background-image: linear-gradient(
21+
90deg,
22+
transparent 0%,
23+
var(--gradient-color) 40%
24+
);
25+
26+
opacity: 0;
27+
pointer-events: none;
28+
transition: opacity 0.15s ease;
29+
30+
li.active & {
31+
background-image: linear-gradient(
32+
90deg,
33+
transparent 0%,
34+
var(--gradient-color-active) 40%
35+
);
36+
}
37+
38+
li:hover &,
39+
&.has-changes {
40+
opacity: 1;
41+
pointer-events: auto;
42+
}
43+
44+
.close-icon-container {
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
width: 22px;
49+
height: 22px;
50+
border-radius: 4px;
51+
cursor: pointer;
52+
transition: background-color 0.12s ease;
53+
54+
&:hover {
55+
background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
56+
57+
.close-icon {
58+
color: ${(props) => props.theme.requestTabs.icon.hoverColor};
59+
}
60+
}
61+
}
62+
63+
.close-icon {
64+
color: ${(props) => props.theme.requestTabs.icon.color};
65+
width: 12px;
66+
height: 12px;
67+
transition: color 0.12s ease;
68+
}
69+
70+
.has-changes-icon {
71+
width: 10px;
72+
height: 10px;
73+
}
74+
75+
.draft-icon-wrapper {
76+
display: none;
77+
}
78+
79+
.close-icon-wrapper {
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
}
84+
85+
&.has-changes:not(li:hover &) {
86+
.draft-icon-wrapper {
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
}
91+
.close-icon-wrapper {
92+
display: none;
93+
}
94+
}
95+
96+
li:hover &.has-changes {
97+
.draft-icon-wrapper {
98+
display: none;
99+
}
100+
.close-icon-wrapper {
101+
display: flex;
102+
}
103+
}
104+
`;
105+
106+
export default StyledWrapper;

‎packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import CloseTabIcon from '../CloseTabIcon';
3+
import DraftTabIcon from '../DraftTabIcon';
4+
import StyledWrapper from './StyledWrapper';
5+
6+
const GradientCloseButton = ({ onClick, hasChanges = false }) => {
7+
return (
8+
<StyledWrapper className={`close-gradient ${hasChanges ? 'has-changes' : ''}`}>
9+
<div className="close-icon-container" onClick={onClick} data-testid="request-tab-close-icon">
10+
<span className="draft-icon-wrapper">
11+
<DraftTabIcon />
12+
</span>
13+
<span className="close-icon-wrapper">
14+
<CloseTabIcon />
15+
</span>
16+
</div>
17+
</StyledWrapper>
18+
);
19+
};
20+
21+
export default GradientCloseButton;

‎packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,55 @@
11
import React from 'react';
2-
import CloseTabIcon from './CloseTabIcon';
3-
import DraftTabIcon from './DraftTabIcon';
2+
import GradientCloseButton from './GradientCloseButton';
43
import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';
54

65
const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDraft }) => {
76
const getTabInfo = (type, tabName) => {
87
switch (type) {
98
case 'collection-settings': {
109
return (
11-
<div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
12-
<IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
13-
<span className="ml-1 leading-6">Collection</span>
14-
</div>
10+
<>
11+
<IconSettings size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
12+
<span className="ml-1 tab-name">Collection</span>
13+
</>
1514
);
1615
}
1716
case 'collection-overview': {
1817
return (
1918
<>
20-
<IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
21-
<span className="ml-1 leading-6">Collection</span>
19+
<IconSettings size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
20+
<span className="ml-1 tab-name">Overview</span>
2221
</>
2322
);
2423
}
2524
case 'security-settings': {
2625
return (
2726
<>
28-
<IconShieldLock size={18} strokeWidth={1.5} className="text-yellow-600" />
29-
<span className="ml-1">Security</span>
27+
<IconShieldLock size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
28+
<span className="ml-1 tab-name">Security</span>
3029
</>
3130
);
3231
}
3332
case 'folder-settings': {
3433
return (
35-
<div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
36-
<IconFolder size={18} strokeWidth={1.5} className="text-yellow-600 min-w-[18px]" />
37-
<span className="ml-1 leading-6 truncate">{tabName || 'Folder'}</span>
38-
</div>
34+
<>
35+
<IconFolder size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
36+
<span className="ml-1 tab-name">{tabName || 'Folder'}</span>
37+
</>
3938
);
4039
}
4140
case 'variables': {
4241
return (
4342
<>
44-
<IconVariable size={18} strokeWidth={1.5} className="text-yellow-600" />
45-
<span className="ml-1 leading-6">Variables</span>
43+
<IconVariable size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
44+
<span className="ml-1 tab-name">Variables</span>
4645
</>
4746
);
4847
}
4948
case 'collection-runner': {
5049
return (
5150
<>
52-
<IconRun size={18} strokeWidth={1.5} className="text-yellow-600" />
53-
<span className="ml-1 leading-6">Runner</span>
51+
<IconRun size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
52+
<span className="ml-1 tab-name">Runner</span>
5453
</>
5554
);
5655
}
@@ -59,10 +58,13 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra
5958

6059
return (
6160
<>
62-
<div className="flex items-center tab-label pl-2">{getTabInfo(type, tabName)}</div>
63-
<div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
64-
{hasDraft ? <DraftTabIcon /> : <CloseTabIcon />}
61+
<div
62+
className="flex items-baseline tab-label"
63+
onDoubleClick={handleDoubleClick}
64+
>
65+
{getTabInfo(type, tabName)}
6566
</div>
67+
<GradientCloseButton hasChanges={hasDraft} onClick={(e) => handleCloseClick(e)} />
6668
</>
6769
);
6870
};

‎packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,30 @@
11
import styled from 'styled-components';
22

33
const StyledWrapper = styled.div`
4+
position: relative;
5+
width: 100%;
6+
height: 100%;
7+
48
.tab-label {
59
overflow: hidden;
10+
align-items: center;
11+
position: relative;
12+
flex: 1;
13+
min-width: 0;
14+
}
15+
16+
.tab-method {
17+
font-size: 0.6875rem;
18+
font-weight: 600;
19+
letter-spacing: 0.02em;
20+
flex-shrink: 0;
621
}
722
823
.tab-name {
24+
position: relative;
925
overflow: hidden;
10-
text-overflow: ellipsis;
1126
white-space: nowrap;
12-
}
13-
14-
.close-icon-container {
15-
min-height: 20px;
16-
min-width: 24px;
17-
margin-left: 4px;
18-
border-radius: 3px;
19-
20-
.close-icon {
21-
display: none;
22-
color: ${(props) => props.theme.requestTabs.icon.color};
23-
width: 8px;
24-
padding-bottom: 6px;
25-
padding-top: 6px;
26-
}
27-
28-
&:hover,
29-
&:hover .close-icon {
30-
color: ${(props) => props.theme.requestTabs.icon.hoverColor};
31-
background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
32-
}
33-
34-
.has-changes-icon {
35-
height: 24px;
36-
}
37-
38-
.tab-method {
39-
font-size: ${(props) => props.theme.font.size.sm};
40-
}
27+
font-size: 0.8125rem;
4128
}
4229
`;
4330

0 commit comments

Comments
 (0)