Skip to content

Commit 4a33b39

Browse files
nick-skriabinnick-skriabin
committed
UI polishing
1 parent 902e0a7 commit 4a33b39

File tree

10 files changed

+101
-89
lines changed

10 files changed

+101
-89
lines changed

‎web/libs/editor/src/components/BottomBar/Actions.jsx

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IconInfoOutline, IconSettings } from "@humansignal/icons";
2-
import { Button, Tooltip } from "@humansignal/ui";
2+
import { Button, Space } from "@humansignal/ui";
33
import { Elem } from "../../utils/bem";
44
import { isSelfServe } from "../../utils/billing";
55
import { FF_BULK_ANNOTATION } from "../../utils/feature-flags";
@@ -16,27 +16,32 @@ export const Actions = ({ store }) => {
1616
const isBulkMode = isFF(FF_BULK_ANNOTATION) && !isSelfServe() && store.hasInterface("annotation:bulk");
1717

1818
return (
19-
<Elem name="section">
19+
<Space size="small">
2020
{!isPrediction && !isViewAll && store.hasInterface("edit-history") && <EditingHistory entity={entity} />}
2121

2222
{store.description && store.hasInterface("instruction") && (
23-
<Tooltip alignment="top-left" title="Show instructions">
24-
<Button
25-
type="text"
26-
aria-label="Instructions"
27-
size="small"
28-
variant="neutral"
29-
onClick={() => store.toggleDescription()}
30-
>
31-
<IconInfoOutline />
32-
</Button>
33-
</Tooltip>
34-
)}
35-
<Tooltip alignment="top-left" title="Settings">
36-
<Button type="text" aria-label="Settings" size="small" variant="neutral" onClick={() => store.toggleSettings()}>
37-
<IconSettings />
23+
<Button
24+
type="text"
25+
aria-label="Instructions"
26+
size="small"
27+
variant="neutral"
28+
tooltip="Show instructions"
29+
onClick={() => store.toggleDescription()}
30+
>
31+
<IconInfoOutline />
3832
</Button>
39-
</Tooltip>
33+
)}
34+
<Button
35+
type="text"
36+
aria-label="Settings"
37+
size="small"
38+
look="string"
39+
variant="neutral"
40+
onClick={() => store.toggleSettings()}
41+
tooltip="Settings"
42+
>
43+
<IconSettings />
44+
</Button>
4045

4146
{store.hasInterface("ground-truth") && !isBulkMode && <GroundTruth entity={entity} />}
4247

@@ -46,6 +51,6 @@ export const Actions = ({ store }) => {
4651
<AutoAcceptToggle />
4752
</Elem>
4853
)}
49-
</Elem>
54+
</Space>
5055
);
5156
};

‎web/libs/editor/src/components/BottomBar/Controls.tsx

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type React from "react";
99
import { useCallback, useState } from "react";
1010

1111
import { Button, ButtonGroup, type ButtonProps } from "@humansignal/ui";
12-
import { IconBan, IconChevron } from "@humansignal/icons";
12+
import { IconBan, IconChevronDown } from "@humansignal/icons";
1313
import { Dropdown } from "../../common/Dropdown/Dropdown";
1414
import type { CustomButtonType } from "../../stores/CustomButton";
1515
import { Block, cn, Elem } from "../../utils/bem";
@@ -202,31 +202,35 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
202202

203203
const SubmitOption = ({ isUpdate, onClickMethod }: { isUpdate: boolean; onClickMethod: () => any }) => {
204204
return (
205-
<Button
206-
name="submit-option"
207-
className="w-[150px]"
208-
onClick={async (event) => {
209-
event.preventDefault();
205+
<div className="p-tighter rounded">
206+
<Button
207+
name="submit-option"
208+
look="string"
209+
size="small"
210+
className="w-[150px]"
211+
onClick={async (event) => {
212+
event.preventDefault();
210213

211-
const selected = store.annotationStore?.selected;
214+
const selected = store.annotationStore?.selected;
212215

213-
selected?.submissionInProgress();
216+
selected?.submissionInProgress();
214217

215-
if ("URLSearchParams" in window) {
216-
const searchParams = new URLSearchParams(window.location.search);
218+
if ("URLSearchParams" in window) {
219+
const searchParams = new URLSearchParams(window.location.search);
217220

218-
searchParams.set("exitStream", "true");
219-
const newRelativePathQuery = `${window.location.pathname}?${searchParams.toString()}`;
221+
searchParams.set("exitStream", "true");
222+
const newRelativePathQuery = `${window.location.pathname}?${searchParams.toString()}`;
220223

221-
window.history.pushState(null, "", newRelativePathQuery);
222-
}
224+
window.history.pushState(null, "", newRelativePathQuery);
225+
}
223226

224-
await store.commentStore.commentFormSubmit();
225-
onClickMethod();
226-
}}
227-
>
228-
{`${isUpdate ? "Update" : "Submit"} and exit`}
229-
</Button>
227+
await store.commentStore.commentFormSubmit();
228+
onClickMethod();
229+
}}
230+
>
231+
{`${isUpdate ? "Update" : "Submit"} and exit`}
232+
</Button>
233+
</div>
230234
);
231235
};
232236

@@ -263,7 +267,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
263267
}
264268
>
265269
<Button type="button">
266-
<IconChevron />
270+
<IconChevronDown />
267271
</Button>
268272
</Dropdown.Trigger>
269273
) : null}
@@ -280,34 +284,34 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
280284
const isUpdateDisabled = isDisabled || noChanges;
281285
const button = (
282286
<ButtonTooltip key="update" title={noChanges ? "No changes were made" : "Update this task: [ Ctrl+Enter ]"}>
283-
<Button
284-
aria-label="submit"
285-
name="submit"
286-
className="w-[150px]"
287-
disabled={isUpdateDisabled}
288-
onClick={async (event) => {
289-
if ((event.target as HTMLButtonElement).classList.contains(dropdownTrigger)) return;
290-
const selected = store.annotationStore?.selected;
291-
292-
selected?.submissionInProgress();
293-
await store.commentStore.commentFormSubmit();
294-
store.updateAnnotation();
295-
}}
296-
leading={
297-
useExitOption ? (
298-
<Dropdown.Trigger
299-
alignment="top-right"
300-
content={<SubmitOption onClickMethod={store.updateAnnotation} isUpdate={isUpdate} />}
301-
>
302-
<div>
303-
<IconChevron />
304-
</div>
305-
</Dropdown.Trigger>
306-
) : null
307-
}
308-
>
309-
{isUpdate ? "Update" : "Submit"}
310-
</Button>
287+
<ButtonGroup>
288+
<Button
289+
aria-label="submit"
290+
name="submit"
291+
className="w-[150px]"
292+
disabled={isUpdateDisabled}
293+
onClick={async (event) => {
294+
if ((event.target as HTMLButtonElement).classList.contains(dropdownTrigger)) return;
295+
const selected = store.annotationStore?.selected;
296+
297+
selected?.submissionInProgress();
298+
await store.commentStore.commentFormSubmit();
299+
store.updateAnnotation();
300+
}}
301+
>
302+
{isUpdate ? "Update" : "Submit"}
303+
</Button>
304+
{useExitOption ? (
305+
<Dropdown.Trigger
306+
alignment="top-right"
307+
content={<SubmitOption onClickMethod={store.updateAnnotation} isUpdate={isUpdate} />}
308+
>
309+
<Button>
310+
<IconChevronDown />
311+
</Button>
312+
</Dropdown.Trigger>
313+
) : null}
314+
</ButtonGroup>
311315
</ButtonTooltip>
312316
);
313317

‎web/libs/editor/src/components/BottomBar/HistoryActions.jsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { observer } from "mobx-react";
22
import { IconRedo, IconRemove, IconUndo } from "@humansignal/icons";
3-
import { Tooltip, Button } from "@humansignal/ui";
4-
import { Block } from "../../utils/bem";
3+
import { Tooltip, Button, Space } from "@humansignal/ui";
54
import "./HistoryActions.scss";
65

76
export const EditingHistory = observer(({ entity }) => {
87
const { history } = entity;
98

109
return (
11-
<Block name="history-buttons">
10+
<Space size="small">
1211
<Tooltip title="Undo">
1312
<Button
1413
variant="neutral"
1514
size="small"
1615
aria-label="Undo"
16+
look="string"
1717
disabled={!history?.canUndo}
1818
onClick={() => entity.undo()}
1919
>
@@ -24,6 +24,7 @@ export const EditingHistory = observer(({ entity }) => {
2424
<Button
2525
variant="neutral"
2626
size="small"
27+
look="string"
2728
aria-label="Redo"
2829
disabled={!history?.canRedo}
2930
onClick={() => entity.redo()}
@@ -33,7 +34,8 @@ export const EditingHistory = observer(({ entity }) => {
3334
</Tooltip>
3435
<Tooltip title="Reset">
3536
<Button
36-
variant="neutral"
37+
variant="negative"
38+
look="string"
3739
size="small"
3840
aria-label="Reset"
3941
disabled={!history?.canUndo}
@@ -42,6 +44,6 @@ export const EditingHistory = observer(({ entity }) => {
4244
<IconRemove />
4345
</Button>
4446
</Tooltip>
45-
</Block>
47+
</Space>
4648
);
4749
});

‎web/libs/editor/src/components/CurrentEntity/HistoryActions.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export const HistoryActions = observer(({ annotation }) => {
1414
<Elem
1515
tag={Button}
1616
name="action"
17-
type="text"
17+
look="string"
18+
size="small"
1819
aria-label="Undo"
1920
disabled={!history?.canUndo}
2021
onClick={() => annotation.undo()}
@@ -25,7 +26,8 @@ export const HistoryActions = observer(({ annotation }) => {
2526
<Elem
2627
tag={Button}
2728
name="action"
28-
type="text"
29+
look="string"
30+
size="small"
2931
aria-label="Redo"
3032
disabled={!history?.canRedo}
3133
onClick={() => annotation.redo()}
@@ -37,7 +39,8 @@ export const HistoryActions = observer(({ annotation }) => {
3739
tag={Button}
3840
name="action"
3941
look="danger"
40-
type="text"
42+
look="string"
43+
size="small"
4144
aria-label="Reset"
4245
disabled={!history?.canUndo}
4346
onClick={() => history?.reset()}

‎web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ const Grouping = <T extends string>({
202202
variant="neutral"
203203
size="smaller"
204204
data-testid={`grouping-${value}`}
205+
look="string"
205206
trailing={
206207
<>
207208
{readableValue.icon}{" "}
@@ -275,11 +276,11 @@ const ToggleRegionsVisibilityButton = observer<FC<ToggleRegionsVisibilityButton>
275276
<Button
276277
variant="neutral"
277278
size="smaller"
279+
look="string"
278280
disabled={isDisabled}
279281
onClick={toggleRegionsVisibility}
280282
aria-label={isAllHidden ? "Show all regions" : "Hide all regions"}
281283
tooltip={isAllHidden ? "Show all regions" : "Hide all regions"}
282-
tooltipTheme="dark"
283284
>
284285
{isAllHidden ? (
285286
<IconOutlinerEyeClosed width={16} height={16} />

‎web/libs/editor/src/components/TopBar/Actions.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const Actions = ({ store }) => {
2727
<Tooltip title="Compare all annotations">
2828
<Button
2929
icon={<IconViewAll />}
30-
type="text"
30+
look="string"
3131
aria-label="Compare all annotations"
3232
onClick={() => onToggleVisibility()}
3333
primary={isViewAll}

‎web/libs/editor/src/components/TopBar/HistoryActions.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const EditingHistory = observer(({ entity }) => {
1313
<Button
1414
variant="neutral"
1515
size="small"
16+
look="string"
1617
aria-label="Undo"
1718
disabled={!history?.canUndo}
1819
onClick={() => entity.undo()}
@@ -25,6 +26,7 @@ export const EditingHistory = observer(({ entity }) => {
2526
name="action"
2627
variant="neutral"
2728
size="small"
29+
look="string"
2830
aria-label="Redo"
2931
disabled={!history?.canRedo}
3032
onClick={() => entity.redo()}
@@ -36,8 +38,8 @@ export const EditingHistory = observer(({ entity }) => {
3638
<Elem
3739
tag={Button}
3840
name="action"
39-
look="danger"
40-
type="text"
41+
look="string"
42+
variant="negative"
4143
aria-label="Reset"
4244
disabled={!history?.canUndo}
4345
onClick={() => history?.reset()}

‎web/libs/editor/src/components/TopBar/TopBar.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const TopBar = observer(({ store }) => {
3636
aria-label="Compare all annotations"
3737
onClick={annotationStore.toggleViewingAllAnnotations}
3838
variant={isViewAll ? "primary" : "neutral"}
39+
look={isViewAll ? "filled" : "string"}
3940
tooltip="Compare all annotations"
4041
size="small"
4142
>
@@ -50,6 +51,7 @@ export const TopBar = observer(({ store }) => {
5051
aria-label="Create an annotation"
5152
variant="neutral"
5253
size="small"
54+
look="string"
5355
onClick={(event) => {
5456
event.preventDefault();
5557
const created = store.annotationStore.createAnnotation();

‎web/libs/ui/src/lib/button/button.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
.look-outlined {
154154
&:not(:disabled),
155155
&.waiting {
156-
--background-color: transparent;
156+
--background-color: var(--color-neutral-background);
157157
--border-color: var(--border-outline);
158158
--text-color: var(--text-outline);
159159
--background-color-hover: var(--background-color-hover-outline);

‎web/libs/ui/src/tailwind.config.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import tokens from "./tokens/tokens";
22

33
/** @type {import('tailwindcss').Config} */
44
module.exports = {
5-
content: [
6-
"./apps/**/*.{js,jsx,ts,tsx}",
7-
"./libs/ui/src/**/*.{js,jsx,ts,tsx}",
8-
"./libs/libs/editor/src/**/*.{js,jsx,ts,tsx}",
9-
"./libs/libs/datamanager/src/**/*.{js,jsx,ts,tsx}",
10-
"./libs/core/src/**/*.{js,jsx,ts,tsx}",
11-
"./libs/storybook/**/*.{js,jsx,ts,tsx}",
12-
],
5+
content: ["./apps/**/*.{js,jsx,ts,tsx}", "./libs/**/*.{js,jsx,ts,tsx}"],
136
theme: {
147
extend: {
158
colors: {

0 commit comments

Comments
 (0)