Skip to content

Commit 9b068f6

Browse files
gatzjamesgatzjames
authored
fix(ui): Misalignments in the UI (#7400)
* code editor pane height * sync dropdown height * request pane height * debug design height * unit test pane height * use line height instead * fix annoying auto-format * git sync alignment * unit test ui
1 parent b3db2ae commit 9b068f6

12 files changed

Lines changed: 383 additions & 403 deletions

File tree

‎packages/insomnia/src/ui/components/codemirror/code-editor.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
589589
</div>
590590
{
591591
showFilter || showPrettify ? (
592-
<div key={uniquenessKey} className="editor__toolbar">
592+
<div key={uniquenessKey} className="flex flex-row items-center border-solid border-t border-[--hl-md] h-[--line-height-sm] text-[--font-size-sm]">
593593
{showFilter ?
594594
(<input
595595
ref={inputRef}
@@ -694,22 +694,22 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
694694
</MenuTrigger>
695695
)}
696696
{showFilter ?
697-
(<button key="help" className="btn btn--compact" onClick={() => showModal(FilterHelpModal, { isJSON: Boolean(mode?.includes('json')) })}>
697+
(<Button key="help" className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all" onPress={() => showModal(FilterHelpModal, { isJSON: Boolean(mode?.includes('json')) })}>
698698
<i className="fa fa-question-circle" />
699-
</button>) : null}
699+
</Button>) : null}
700700
{showPrettify ?
701-
(<button
701+
(<Button
702702
key="prettify"
703-
className="btn btn--compact"
704-
title="Auto-format request body whitespace"
705-
onClick={() => {
703+
className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
704+
aria-label="Auto-format request body whitespace"
705+
onPress={() => {
706706
if (mode?.includes('json') || mode?.includes('xml')) {
707707
maybePrettifyAndSetValue(codeMirror.current?.getValue(), true);
708708
}
709709
}}
710710
>
711711
Beautify {mode?.includes('json') ? 'JSON' : mode?.includes('xml') ? 'XML' : ''}
712-
</button>) : null}
712+
</Button>) : null}
713713
</div>
714714
) : null
715715
}

‎packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,10 @@ import { Tooltip } from '../tooltip';
3434

3535
interface Props {
3636
gitRepository: GitRepository | null;
37-
className?: string;
3837
isInsomniaSyncEnabled: boolean;
3938
}
4039

41-
export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomniaSyncEnabled }) => {
40+
export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnabled }) => {
4241
const { organizationId, projectId, workspaceId } = useParams() as {
4342
organizationId: string;
4443
projectId: string;
@@ -246,10 +245,9 @@ export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomni
246245

247246
if (isSynced) {
248247
dropdown = (
249-
<div className={className}>
250248
<Dropdown
251249
dataTestId='git-dropdown'
252-
className="wide tall"
250+
className="w-full h-[--line-height-sm]"
253251
ref={dropdownRef}
254252
triggerButton={
255253
<DropdownButton
@@ -263,6 +261,7 @@ export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomni
263261
borderRadius: '0',
264262
justifyContent: 'flex-start !important',
265263
height: 'var(--line-height-sm)',
264+
boxSizing: 'border-box',
266265
}}
267266
disabled={isLoading}
268267
>
@@ -419,15 +418,13 @@ export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomni
419418
</DropdownItem>
420419
)}
421420
</DropdownSection>
422-
</Dropdown>
423-
</div>
421+
</Dropdown>
424422
);
425423
} else {
426424
dropdown = (
427-
<div className={className}>
428425
<Dropdown
429426
dataTestId='git-dropdown'
430-
className="wide tall"
427+
className="w-full h-[--line-height-sm]"
431428
ref={dropdownRef}
432429
triggerButton={
433430
<DropdownButton
@@ -441,6 +438,7 @@ export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomni
441438
borderRadius: '0',
442439
justifyContent: 'flex-start !important',
443440
height: 'var(--line-height-sm)',
441+
border: 'none',
444442
}}
445443
disabled={isLoading}
446444
>
@@ -522,8 +520,7 @@ export const GitSyncDropdown: FC<Props> = ({ className, gitRepository, isInsomni
522520
/>
523521
</DropdownItem>
524522
</DropdownSection>
525-
</Dropdown>
526-
</div>
523+
</Dropdown>
527524
);
528525
}
529526

‎packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ export const SyncDropdown: FC<Props> = ({ gitSyncEnabled }) => {
257257
return (
258258
<Fragment>
259259
<MenuTrigger>
260-
<div className="flex items-center h-9 gap-4 px-[--padding-md] w-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
260+
<div className="flex items-center h-[--line-height-sm] gap-4 px-[--padding-md] w-full aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
261261
<Button
262262
aria-label="Insomnia Sync"
263263
className="flex-1 flex items-center gap-2 truncate"

‎packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { DefinitionNode, DocumentNode, GraphQLNonNull, GraphQLSchema, Kind, NonN
88
import { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
99
import { Maybe } from 'graphql-language-service';
1010
import React, { FC, useEffect, useRef, useState } from 'react';
11+
import { Button } from 'react-aria-components';
1112
import ReactDOM from 'react-dom';
1213
import { useLocalStorage } from 'react-use';
1314

@@ -648,10 +649,10 @@ export const GraphQLEditor: FC<Props> = ({
648649
placeholder=""
649650
/>
650651
</div>
651-
<div className="pane__footer">
652-
<button className="pull-right btn btn--compact" onClick={beautifyRequestBody}>
652+
<div className="flex flex-row items-center border-solid border-t border-[--hl-md] h-[--line-height-sm] text-[--font-size-sm]">
653+
<Button className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all" onPress={beautifyRequestBody}>
653654
Prettify GraphQL
654-
</button>
655+
</Button>
655656
</div>
656657

657658
{graphQLExplorerPortal}

‎packages/insomnia/src/ui/components/editors/pre-request-script-editor.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Snippet } from 'codemirror';
22
import { CookieObject, Environment, InsomniaObject, Request as ScriptRequest, RequestInfo, Url, Variables } from 'insomnia-sdk';
3-
import React, { FC, Fragment, useRef } from 'react';
3+
import React, { FC, useRef } from 'react';
44

55
import { translateHandlersInScript } from '../../../../src/utils/importers/importers/postman';
66
import { Settings } from '../../../models/settings';
@@ -196,8 +196,8 @@ export const PreRequestScriptEditor: FC<Props> = ({
196196
);
197197

198198
return (
199-
<Fragment>
200-
<div className="h-[calc(100%-var(--line-height-xs))]">
199+
<div className='h-full flex flex-col'>
200+
<div className="flex-1">
201201
<CodeEditor
202202
key={uniquenessKey}
203203
id="pre-request-script-editor"
@@ -215,7 +215,7 @@ export const PreRequestScriptEditor: FC<Props> = ({
215215
onPaste={translateHandlersInScript}
216216
/>
217217
</div>
218-
<div className="h-[calc(var(--line-height-xs))] border-solid border-t border-[var(--hl-md)] text-[var(--font-size-sm)] p-[var(--padding-xs)]">
218+
<div className="flex flex-row border-solid border-t border-[var(--hl-md)] h-[var(--line-height-sm)] text-[var(--font-size-sm)] box-border overflow-x-auto">
219219
<Dropdown
220220
aria-label='Variable Snippets'
221221
placement='top left'
@@ -415,6 +415,6 @@ export const PreRequestScriptEditor: FC<Props> = ({
415415
</DropdownItem>
416416
</Dropdown>
417417
</div>
418-
</Fragment>
418+
</div>
419419
);
420420
};

‎packages/insomnia/src/ui/components/panes/request-pane.tsx‎

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { FC, Fragment, useState } from 'react';
22
import { Button, Heading, ToggleButton } from 'react-aria-components';
33
import { useParams, useRouteLoaderData } from 'react-router-dom';
44
import { useLocalStorage } from 'react-use';
5-
import styled from 'styled-components';
65

76
import { getContentTypeFromHeaders } from '../../../common/constants';
87
import * as models from '../../../models';
@@ -31,32 +30,6 @@ import { RenderedQueryString } from '../rendered-query-string';
3130
import { RequestUrlBar } from '../request-url-bar';
3231
import { Pane, PaneHeader } from './pane';
3332
import { PlaceholderRequestPane } from './placeholder-request-pane';
34-
const HeaderContainer = styled.div({
35-
display: 'flex',
36-
flexDirection: 'column',
37-
position: 'relative',
38-
height: '100%',
39-
overflowY: 'auto',
40-
});
41-
42-
export const TabPanelFooter = styled.div({
43-
boxSizing: 'content-box',
44-
display: 'flex',
45-
flexDirection: 'row',
46-
borderTop: '1px solid var(--hl-md)',
47-
height: 'var(--line-height-sm)',
48-
fontSize: 'var(--font-size-sm)',
49-
'& > button': {
50-
color: 'var(--hl)',
51-
padding: 'var(--padding-xs) var(--padding-xs)',
52-
height: '100%',
53-
},
54-
});
55-
56-
const TabPanelBody = styled.div({
57-
overflowY: 'auto',
58-
flex: '1 0',
59-
});
6033

6134
interface Props {
6235
environmentId: string;
@@ -275,29 +248,29 @@ export const RequestPane: FC<Props> = ({
275248
</div>
276249
}
277250
>
278-
<HeaderContainer>
251+
<div className="flex flex-col relative h-full overflow-hidden">
279252
<ErrorBoundary
280253
key={uniqueKey}
281254
errorClassName="font-error pad text-center"
282255
>
283-
<TabPanelBody>
256+
<div className='overflow-y-auto flex-1 flex-shrink-0'>
284257
<RequestHeadersEditor bulk={settings.useBulkHeaderEditor} />
285-
</TabPanelBody>
258+
</div>
286259
</ErrorBoundary>
287260

288-
<TabPanelFooter>
289-
<button
290-
className="btn btn--compact"
291-
onClick={() =>
261+
<div className="flex flex-row border-solid border-t border-[var(--hl-md)] h-[var(--line-height-sm)] text-[var(--font-size-sm)] box-border">
262+
<Button
263+
className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
264+
onPress={() =>
292265
patchSettings({
293266
useBulkHeaderEditor: !settings.useBulkHeaderEditor,
294267
})
295268
}
296269
>
297270
{settings.useBulkHeaderEditor ? 'Regular Edit' : 'Bulk Edit'}
298-
</button>
299-
</TabPanelFooter>
300-
</HeaderContainer>
271+
</Button>
272+
</div>
273+
</div>
301274
</TabItem>
302275
<TabItem
303276
key="pre-request-script"

‎packages/insomnia/src/ui/css/main.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1279,7 +1279,6 @@ html {
12791279
--modal-width-skinny: calc(var(--font-size) * 30);
12801280
/* Other */
12811281
--drag-width: calc(var(--font-size) * 0.5);
1282-
--height-nav: var(--line-height-sm);
12831282
}
12841283
.txt-xxs {
12851284
font-size: var(--font-size-xxs) !important;
@@ -2031,7 +2030,7 @@ html {
20312030
overflow: hidden;
20322031
border-bottom: 1px solid var(--hl-md);
20332032
box-sizing: border-box;
2034-
height: var(--height-nav);
2033+
height: var(--line-height-sm);
20352034
line-height: var(--line-height-md);
20362035
color: var(--color-font);
20372036
display: flex;
@@ -2594,7 +2593,7 @@ input.editable {
25942593
}
25952594
.pane {
25962595
display: grid;
2597-
grid-template-rows: var(--height-nav) minmax(0, 1fr);
2596+
grid-template-rows: var(--line-height-sm) minmax(0, 1fr);
25982597
grid-template-columns: 100%;
25992598
}
26002599
.pane .pane__header {
@@ -3007,7 +3006,7 @@ input.editable {
30073006
color: var(--hl);
30083007
padding-left: var(--padding-xs);
30093008
padding-right: var(--padding-xs);
3010-
height: var(--height-nav);
3009+
height: var(--line-height-sm);
30113010
overflow: auto;
30123011
}
30133012
.sidebar .sidebar__menu--insomnia-HACK {
@@ -3389,7 +3388,7 @@ input.editable {
33893388
}
33903389
.urlbar > .dropdown > button,
33913390
.urlbar > .dropdown > button > i.fa {
3392-
line-height: var(--height-nav);
3391+
line-height: var(--line-height-sm);
33933392
}
33943393
.urlbar .urlbar__send-btn {
33953394
padding-right: var(--padding-md);

0 commit comments

Comments
 (0)