Skip to content

Commit 6d77cac

Browse files
helloanoophelloanoop
authored
feat: dark mode input revamp (usebruno#6546)
1 parent 0d536fb commit 6d77cac

File tree

64 files changed

+324
-239
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+324
-239
lines changed

‎packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import styled from 'styled-components';
22

33
const Wrapper = styled.div`
44
label {
5-
font-size: ${(props) => props.theme.font.size.base};
5+
font-size: ${(props) => props.theme.font.size.sm};
6+
color: ${(props) => props.theme.colors.text.subtext1};
67
}
78
89
.single-line-editor-wrapper {

‎packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,29 +57,31 @@ const ApiKeyAuth = ({ collection }) => {
5757

5858
return (
5959
<StyledWrapper className="mt-2 w-full">
60-
<label className="block font-medium mb-2">Key</label>
61-
<div className="single-line-editor-wrapper mb-2">
60+
<label className="block mb-1">Key</label>
61+
<div className="single-line-editor-wrapper mb-3">
6262
<SingleLineEditor
6363
value={apikeyAuth.key || ''}
6464
theme={storedTheme}
6565
onSave={handleSave}
6666
onChange={(val) => handleAuthChange('key', val)}
6767
collection={collection}
68+
isCompact
6869
/>
6970
</div>
7071

71-
<label className="block font-medium mb-2">Value</label>
72-
<div className="single-line-editor-wrapper mb-2">
72+
<label className="block mb-1">Value</label>
73+
<div className="single-line-editor-wrapper mb-3">
7374
<SingleLineEditor
7475
value={apikeyAuth.value || ''}
7576
theme={storedTheme}
7677
onSave={handleSave}
7778
onChange={(val) => handleAuthChange('value', val)}
7879
collection={collection}
80+
isCompact
7981
/>
8082
</div>
8183

82-
<label className="block font-medium mb-2">Add To</label>
84+
<label className="block mb-1">Add To</label>
8385
<div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
8486
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
8587
<div

‎packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import styled from 'styled-components';
22

33
const Wrapper = styled.div`
44
label {
5-
font-size: ${(props) => props.theme.font.size.base};
5+
font-size: ${(props) => props.theme.font.size.sm};
6+
color: ${(props) => props.theme.colors.text.subtext1};
67
}
78
89
.single-line-editor-wrapper {

‎packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -123,71 +123,77 @@ const AwsV4Auth = ({ collection }) => {
123123

124124
return (
125125
<StyledWrapper className="mt-2 w-full">
126-
<label className="block font-medium mb-2">Access Key ID</label>
127-
<div className="single-line-editor-wrapper mb-2">
126+
<label className="block mb-1">Access Key ID</label>
127+
<div className="single-line-editor-wrapper mb-3">
128128
<SingleLineEditor
129129
value={awsv4Auth.accessKeyId || ''}
130130
theme={storedTheme}
131131
onSave={handleSave}
132132
onChange={(val) => handleAccessKeyIdChange(val)}
133133
collection={collection}
134+
isCompact
134135
/>
135136
</div>
136137

137-
<label className="block font-medium mb-2">Secret Access Key</label>
138-
<div className="single-line-editor-wrapper mb-2 flex items-center">
138+
<label className="block mb-1">Secret Access Key</label>
139+
<div className="single-line-editor-wrapper mb-3 flex items-center">
139140
<SingleLineEditor
140141
value={awsv4Auth.secretAccessKey || ''}
141142
theme={storedTheme}
142143
onSave={handleSave}
143144
onChange={(val) => handleSecretAccessKeyChange(val)}
144145
collection={collection}
145146
isSecret={true}
147+
isCompact
146148
/>
147149
{showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
148150
</div>
149151

150-
<label className="block font-medium mb-2">Session Token</label>
151-
<div className="single-line-editor-wrapper mb-2">
152+
<label className="block mb-1">Session Token</label>
153+
<div className="single-line-editor-wrapper mb-3">
152154
<SingleLineEditor
153155
value={awsv4Auth.sessionToken || ''}
154156
theme={storedTheme}
155157
onSave={handleSave}
156158
onChange={(val) => handleSessionTokenChange(val)}
157159
collection={collection}
160+
isCompact
158161
/>
159162
</div>
160163

161-
<label className="block font-medium mb-2">Service</label>
162-
<div className="single-line-editor-wrapper mb-2">
164+
<label className="block mb-1">Service</label>
165+
<div className="single-line-editor-wrapper mb-3">
163166
<SingleLineEditor
164167
value={awsv4Auth.service || ''}
165168
theme={storedTheme}
166169
onSave={handleSave}
167170
onChange={(val) => handleServiceChange(val)}
168171
collection={collection}
172+
isCompact
169173
/>
170174
</div>
171175

172-
<label className="block font-medium mb-2">Region</label>
173-
<div className="single-line-editor-wrapper mb-2">
176+
<label className="block mb-1">Region</label>
177+
<div className="single-line-editor-wrapper mb-3">
174178
<SingleLineEditor
175179
value={awsv4Auth.region || ''}
176180
theme={storedTheme}
177181
onSave={handleSave}
178182
onChange={(val) => handleRegionChange(val)}
179183
collection={collection}
184+
isCompact
180185
/>
181186
</div>
182187

183-
<label className="block font-medium mb-2">Profile Name</label>
184-
<div className="single-line-editor-wrapper mb-2">
188+
<label className="block mb-1">Profile Name</label>
189+
<div className="single-line-editor-wrapper">
185190
<SingleLineEditor
186191
value={awsv4Auth.profileName || ''}
187192
theme={storedTheme}
188193
onSave={handleSave}
189194
onChange={(val) => handleProfileNameChange(val)}
190195
collection={collection}
196+
isCompact
191197
/>
192198
</div>
193199
</StyledWrapper>

‎packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import styled from 'styled-components';
22

33
const Wrapper = styled.div`
44
label {
5-
font-size: ${(props) => props.theme.font.size.base};
5+
font-size: ${(props) => props.theme.font.size.sm};
6+
color: ${(props) => props.theme.colors.text.subtext1};
67
}
78
89
.single-line-editor-wrapper {

‎packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,19 @@ const BasicAuth = ({ collection }) => {
4747

4848
return (
4949
<StyledWrapper className="mt-2 w-full">
50-
<label className="block font-medium mb-2">Username</label>
51-
<div className="single-line-editor-wrapper mb-2">
50+
<label className="block mb-1">Username</label>
51+
<div className="single-line-editor-wrapper mb-3">
5252
<SingleLineEditor
5353
value={basicAuth.username || ''}
5454
theme={storedTheme}
5555
onSave={handleSave}
5656
onChange={(val) => handleUsernameChange(val)}
5757
collection={collection}
58+
isCompact
5859
/>
5960
</div>
6061

61-
<label className="block font-medium mb-2">Password</label>
62+
<label className="block mb-1">Password</label>
6263
<div className="single-line-editor-wrapper flex items-center">
6364
<SingleLineEditor
6465
value={basicAuth.password || ''}
@@ -67,6 +68,7 @@ const BasicAuth = ({ collection }) => {
6768
onChange={(val) => handlePasswordChange(val)}
6869
collection={collection}
6970
isSecret={true}
71+
isCompact
7072
/>
7173
{showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
7274
</div>

‎packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import styled from 'styled-components';
22

33
const Wrapper = styled.div`
44
label {
5-
font-size: ${(props) => props.theme.font.size.base};
5+
font-size: ${(props) => props.theme.font.size.sm};
6+
color: ${(props) => props.theme.colors.text.subtext1};
67
}
78
89
.single-line-editor-wrapper {

‎packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {
3333

3434
return (
3535
<StyledWrapper className="mt-2 w-full">
36-
<label className="block font-medium mb-2">Token</label>
36+
<label className="block mb-1">Token</label>
3737
<div className="single-line-editor-wrapper flex items-center">
3838
<SingleLineEditor
3939
value={bearerToken}
@@ -42,6 +42,7 @@ const BearerAuth = ({ collection }) => {
4242
onChange={(val) => handleTokenChange(val)}
4343
collection={collection}
4444
isSecret={true}
45+
isCompact
4546
/>
4647
{showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
4748
</div>

‎packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import styled from 'styled-components';
22

33
const Wrapper = styled.div`
44
label {
5-
font-size: ${(props) => props.theme.font.size.base};
5+
font-size: ${(props) => props.theme.font.size.sm};
6+
color: ${(props) => props.theme.colors.text.subtext1};
67
}
78
89
.single-line-editor-wrapper {

‎packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,19 @@ const DigestAuth = ({ collection }) => {
4747

4848
return (
4949
<StyledWrapper className="mt-2 w-full">
50-
<label className="block font-medium mb-2">Username</label>
51-
<div className="single-line-editor-wrapper mb-2">
50+
<label className="block mb-1">Username</label>
51+
<div className="single-line-editor-wrapper mb-3">
5252
<SingleLineEditor
5353
value={digestAuth.username || ''}
5454
theme={storedTheme}
5555
onSave={handleSave}
5656
onChange={(val) => handleUsernameChange(val)}
5757
collection={collection}
58+
isCompact
5859
/>
5960
</div>
6061

61-
<label className="block font-medium mb-2">Password</label>
62+
<label className="block mb-1">Password</label>
6263
<div className="single-line-editor-wrapper flex items-center">
6364
<SingleLineEditor
6465
value={digestAuth.password || ''}
@@ -67,6 +68,7 @@ const DigestAuth = ({ collection }) => {
6768
onChange={(val) => handlePasswordChange(val)}
6869
collection={collection}
6970
isSecret={true}
71+
isCompact
7072
/>
7173
{showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
7274
</div>

0 commit comments

Comments
 (0)