Skip to content

Commit 790c964

Browse files
committed
feat: update layout spacing
1 parent 9b9fd10 commit 790c964

File tree

5 files changed

+40
-41
lines changed

5 files changed

+40
-41
lines changed

src/components/ContentWrap.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1102,7 +1102,7 @@ export default class ContentWrap extends Component {
11021102
/>
11031103
</div>
11041104
{window.zenumlDesktop ? null : (
1105-
<div className="shrink-0 relative z-10 bg-gray-200 py-3 px-6 flex justify-between">
1105+
<div className="shrink-0 relative z-10 bg-gray-200 py-2 px-6 flex justify-between">
11061106
<div className="flex gap-4 items-center">
11071107
<button
11081108
onClick={() => this.props.layoutBtnClickHandler(1)}

src/components/Footer.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { h, Component } from 'preact';
2-
import { Button } from './common';
1+
import { Component } from 'preact';
32

43
class JS13K extends Component {
54
constructor(props) {
@@ -95,8 +94,8 @@ export default class Footer extends Component {
9594
>
9695
<svg
9796
style={{
98-
width: '20px',
99-
height: '20px',
97+
width: '16px',
98+
height: '16px',
10099
verticalAlign: 'text-bottom',
101100
fill: 'currentColor',
102101
}}

src/components/MainHeader.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function MainHeader(props) {
6060
const isPro = userService.isPro();
6161

6262
return (
63-
<div className="main-header text-gray-400 py-4 px-8 flex justify-between border-b border-black-700 bg-black-500">
63+
<div className="main-header text-gray-400 py-2 px-8 flex justify-between border-b border-black-700 bg-black-500">
6464
<div className="flex items-center gap-4">
6565
<DropdownMenu.Root>
6666
<DropdownMenu.Trigger asChild>

src/components/Tabs.jsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,41 +48,41 @@ class Tabs extends Component {
4848
} = this;
4949
return (
5050
<div className="h-full flex flex-col">
51-
<ol className="h-12 flex justify-start tab-list bg-black-500">
52-
{children.map((child) => {
53-
const { label, lineOfCode } = child.props;
54-
return (
55-
<Tab
56-
activeTab={activeTab}
57-
key={label}
58-
label={label}
59-
lineOfCode={lineOfCode}
60-
onClick={onClickTabItem}
61-
/>
62-
);
63-
})}
64-
</ol>
65-
<div className="grow overflow-y-auto">
66-
{React.Children.map(children, (child) => {
67-
if (child.props.label !== activeTab) {
68-
return React.Children.map(child.props.children, (c) =>
69-
Tabs.modifyChildren(c, false),
51+
<div className="h-12 flex justify-between items-center bg-black-500">
52+
<div className="flex justify-start tab-list">
53+
{children.map((child) => {
54+
const { label, lineOfCode } = child.props;
55+
return (
56+
<Tab
57+
activeTab={activeTab}
58+
key={label}
59+
label={label}
60+
lineOfCode={lineOfCode}
61+
onClick={onClickTabItem}
62+
/>
7063
);
71-
}
72-
return child.props.children;
73-
})}
74-
</div>
75-
<div className="px-6 py-3 bg-black-800 border-t border-black-700 flex justify-end box-border">
64+
})}
65+
</div>
7666
<button
7767
onClick={this.props.keyboardShortcutsBtnClickHandler}
78-
className="text-xs h-7 px-2 text-gray-500 bg-black-600 hover:bg-black-400 rounded-lg gap-2 flex items-center duration-200"
68+
className="text-xs mr-4 h-7 px-2 text-gray-500 bg-black-600 hover:bg-black-400 rounded-lg gap-2 flex items-center duration-200"
7969
>
8070
<svg className="w-4 h-4">
8171
<use xlinkHref="#icon-keyboard" />
8272
</svg>
8373
Shortcuts
8474
</button>
8575
</div>
76+
<div className="grow overflow-y-auto">
77+
{React.Children.map(children, (child) => {
78+
if (child.props.label !== activeTab) {
79+
return React.Children.map(child.props.children, (c) =>
80+
Tabs.modifyChildren(c, false),
81+
);
82+
}
83+
return child.props.children;
84+
})}
85+
</div>
8686
</div>
8787
);
8888
}

src/components/Toolbox.jsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ class Toolbox extends Component {
77

88
render() {
99
return (
10-
<div className="flex gap-6 px-10 py-3 bg-black-400 flex-wrap">
11-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
10+
<div className="flex gap-6 px-10 py-2 bg-black-400 flex-wrap">
11+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
1212
<svg
1313
id="addNewParticipantButton"
1414
width="100%"
@@ -42,7 +42,7 @@ class Toolbox extends Component {
4242
</g>
4343
</svg>
4444
</button>
45-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
45+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
4646
<svg
4747
id="addAsyncMessageButton"
4848
width="100%"
@@ -106,7 +106,7 @@ class Toolbox extends Component {
106106
</g>
107107
</svg>
108108
</button>
109-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
109+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
110110
<svg
111111
id="addSyncMessageButton"
112112
width="100%"
@@ -159,7 +159,7 @@ class Toolbox extends Component {
159159
</g>
160160
</svg>
161161
</button>
162-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
162+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
163163
<svg
164164
id="addReturnValueButton"
165165
width="100%"
@@ -272,7 +272,7 @@ class Toolbox extends Component {
272272
</g>
273273
</svg>
274274
</button>
275-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
275+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
276276
<svg
277277
id="addSelfMessageButton"
278278
width="100%"
@@ -334,7 +334,7 @@ class Toolbox extends Component {
334334
</g>
335335
</svg>
336336
</button>
337-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
337+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
338338
<svg
339339
id="addNewInstanceButton"
340340
width="100%"
@@ -393,7 +393,7 @@ class Toolbox extends Component {
393393
</g>
394394
</svg>
395395
</button>
396-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
396+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
397397
<svg
398398
id="addConditionalButton"
399399
width="100%"
@@ -450,7 +450,7 @@ class Toolbox extends Component {
450450
</g>
451451
</svg>
452452
</button>
453-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
453+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
454454
<svg
455455
id="addLoopButton"
456456
width="100%"
@@ -507,7 +507,7 @@ class Toolbox extends Component {
507507
</g>
508508
</svg>
509509
</button>
510-
<button className="hover:bg-black-600 p-1.5 h-8 w-8 rounded-lg flex items-center justify-between">
510+
<button className="hover:bg-black-600 p-1 h-7 w-7 rounded-lg flex items-center justify-between">
511511
<svg
512512
width="100%"
513513
height="16"

0 commit comments

Comments
 (0)