Skip to content

Commit 42a8011

Browse files
Update WelcomeToast styling (#8688)
This PR slightly adapts the styling of the Welcome toast to make the primary action more clear. It should also provide better contrast on Dark-Mode systems. Packagage updates: - Updated `antd` to version `5.22 - `5.21` is the first version to support the `color` & `variant` button props. [Changelog](https://ant.design/changelog#5210) but has some styling bugs related to the navbar - `5.22` fixes the navbar icon styling issues [Changelog](https://ant.design/changelog#5220) - Updated `@ant-design/colors` from `6.0.0` to `7.0.0` since `antd` bumped it anyway - Updated `@ant-design/icons` from `5.4.0` to `5.5.0` since `antd` bumped it anyway <img width="507" alt="Screenshot 2025-06-13 at 13 36 08" src="https://github.com/user-attachments/assets/daeb4fec-7599-42cd-8120-5343c8458ad3" /> ### URL of deployed dev instance (used for testing): - https://fixwelcometoastcolor.webknossos.xyz/ ### Steps to test: - Open any dataset. Click on Share/Copy button to copy URl with token - Open incognito browser window and open copied URI - Feast your eyes on the colors ------ (Please delete unneeded items, merge only when none are left open) - [x] Updated [changelog](../blob/master/CHANGELOG.unreleased.md#unreleased) - [ ] Updated [migration guide](../blob/master/MIGRATIONS.unreleased.md#unreleased) if applicable - [ ] Updated [documentation](../blob/master/docs) if applicable - [ ] Adapted [wk-libs python client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client) if relevant API parts change - [ ] Removed dev-only changes like prints and application.conf edits - [x] Considered [common edge cases](../blob/master/.github/common_edge_cases.md) - [ ] Needs datastore update after deployment --------- Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>
1 parent deaaa2c commit 42a8011

File tree

9 files changed

+359
-255
lines changed

9 files changed

+359
-255
lines changed

CHANGELOG.unreleased.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
1919
### Fixed
2020
- Improved efficiency of saving bounding box related changes. [#8492](https://github.com/scalableminds/webknossos/pull/8492)
2121
- When deleting a dataset, its caches are cleared, so that if a new dataset by the same name is uploaded afterwards, only new data is loaded. [#8638](https://github.com/scalableminds/webknossos/pull/8638)
22+
- Fixed the contrast of the WelcomeToast buttons. Updated `antd` to version `5.22`.[#8688](https://github.com/scalableminds/webknossos/pull/8688)
2223
- Fixed a race condition when starting proofreading with a split action. [#8676](https://github.com/scalableminds/webknossos/pull/8676)
2324
- Fixed that activating a mapping got stuck when a dataset was opened in "view" mode. [#8687](https://github.com/scalableminds/webknossos/pull/8687)
2425

frontend/javascripts/admin/task/task_list_view.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import { downloadTasksAsCSV } from "admin/task/task_create_form_view";
2222
import type { QueryObject, TaskFormFieldValues } from "admin/task/task_search_form";
2323
import TaskSearchForm from "admin/task/task_search_form";
2424
import UserSelectionComponent from "admin/user/user_selection_component";
25-
import { Alert, App, Button, Card, Input, Modal, Spin, type TableProps, Tag } from "antd";
25+
import { Alert, App, Button, Card, Input, Modal, Spin, Tag } from "antd";
26+
import type { ColumnType } from "antd/lib/table/interface";
2627
import { AsyncLink } from "components/async_clickables";
2728
import FixedExpandableTable from "components/fixed_expandable_table";
2829
import FormattedDate from "components/formatted_date";
@@ -238,7 +239,7 @@ function TaskListView({ initialFieldValues }: Props) {
238239
marginRight: 20,
239240
};
240241

241-
const columns: TableProps["columns"] = [
242+
const columns: ColumnType<APITask>[] = [
242243
{
243244
title: "ID",
244245
dataIndex: "id",

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { FileOutlined, FolderOpenOutlined, PlusOutlined, WarningOutlined } from "@ant-design/icons";
22
import type { DatasetUpdater } from "admin/rest_api";
3-
import { Dropdown, type MenuProps, type TableProps, Tag, Tooltip } from "antd";
4-
import type { FilterValue, SorterResult, TablePaginationConfig } from "antd/lib/table/interface";
3+
import { Dropdown, type MenuProps, Tag, Tooltip } from "antd";
4+
import type {
5+
ColumnType,
6+
FilterValue,
7+
SorterResult,
8+
TablePaginationConfig,
9+
} from "antd/lib/table/interface";
510
import classNames from "classnames";
611
import FixedExpandableTable from "components/fixed_expandable_table";
712
import FormattedDate from "components/formatted_date";
@@ -282,16 +287,17 @@ class DatasetRenderer {
282287
return DatasetRenderer.getRowKey(this.data);
283288
}
284289

285-
renderTypeColumn() {
290+
renderTypeColumn(): React.ReactNode {
286291
return <FileOutlined style={{ fontSize: "18px" }} />;
287292
}
288-
renderNameColumn() {
293+
renderNameColumn(): React.ReactNode {
289294
const selectedLayerName: string | null =
290295
this.data.colorLayerNames[0] || this.data.segmentationLayerNames[0];
291296
const imgSrc = selectedLayerName
292297
? `/api/datasets/${this.data.id}/layers/${selectedLayerName}/thumbnail?w=${2 * THUMBNAIL_SIZE}&h=${2 * THUMBNAIL_SIZE}`
293298
: "/assets/images/inactive-dataset-thumbnail.svg";
294299
const iconClassName = selectedLayerName ? "" : " icon-thumbnail";
300+
295301
return (
296302
<>
297303
<Link to={`/datasets/${getReadableURLPart(this.data)}/view`} title="View Dataset">
@@ -322,7 +328,7 @@ class DatasetRenderer {
322328
</>
323329
);
324330
}
325-
renderTags() {
331+
renderTags(): React.ReactNode {
326332
return this.data.isActive ? (
327333
<DatasetTags
328334
dataset={this.data}
@@ -339,10 +345,10 @@ class DatasetRenderer {
339345
</Tooltip>
340346
);
341347
}
342-
renderCreationDateColumn() {
348+
renderCreationDateColumn(): React.ReactNode {
343349
return <FormattedDate timestamp={this.data.created} />;
344350
}
345-
renderActionsColumn() {
351+
renderActionsColumn(): React.ReactNode {
346352
return (
347353
<DatasetActionView
348354
dataset={this.data}
@@ -366,7 +372,7 @@ class FolderRenderer {
366372
getRowKey() {
367373
return FolderRenderer.getRowKey(this.data);
368374
}
369-
renderNameColumn() {
375+
renderNameColumn(): React.ReactNode {
370376
return (
371377
<>
372378
<img
@@ -381,10 +387,10 @@ class FolderRenderer {
381387
</>
382388
);
383389
}
384-
renderCreationDateColumn() {
390+
renderCreationDateColumn(): React.ReactNode {
385391
return null;
386392
}
387-
renderActionsColumn() {
393+
renderActionsColumn(): React.ReactNode {
388394
return this.datasetTable.getFolderSettingsActions(this.data);
389395
}
390396
}
@@ -463,7 +469,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
463469
return filteredByTags(filterByMode(filterByHasLayers(this.props.datasets)));
464470
}
465471

466-
renderEmptyText() {
472+
renderEmptyText(): React.ReactNode {
467473
const maybeWarning =
468474
this.props.datasetFilteringMode !== "showAllDatasets" ? (
469475
<p>
@@ -501,7 +507,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
501507
setFolderIdForEditModal(folder.key);
502508
}
503509

504-
getFolderSettingsActions(folder: FolderItemWithName) {
510+
getFolderSettingsActions(folder: FolderItemWithName): React.ReactNode {
505511
const { context } = this.props;
506512
const folderTreeContextMenuItems = generateSettingsForFolder(
507513
folder,
@@ -577,14 +583,14 @@ class DatasetTable extends React.PureComponent<Props, State> {
577583
selectedRowKeys = [FolderRenderer.getRowKey(context.selectedFolder as FolderItemWithName)];
578584
}
579585

580-
const columns: TableProps["columns"] = [
586+
const columns: ColumnType<RowRenderer>[] = [
581587
{
582588
title: "Name",
583589
dataIndex: "name",
584590
key: "name",
585591
sorter: Utils.localeCompareBy<RowRenderer>((rowRenderer) => rowRenderer.data.name),
586592
sortOrder: sortedInfo.columnKey === "name" ? sortedInfo.order : undefined,
587-
render: (_name: string, rowRenderer: RowRenderer) => rowRenderer.renderNameColumn(),
593+
render: (_name: string, rowRenderer: RowRenderer, _index) => rowRenderer.renderNameColumn(),
588594
},
589595
{
590596
width: 180,

frontend/javascripts/dashboard/explorative_annotations_view.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,9 @@ import {
2222
getReadableAnnotations,
2323
reOpenAnnotation,
2424
} from "admin/rest_api";
25-
import {
26-
Button,
27-
Card,
28-
Col,
29-
Input,
30-
Modal,
31-
Row,
32-
Spin,
33-
Table,
34-
type TableProps,
35-
Tag,
36-
Tooltip,
37-
} from "antd";
25+
import { Button, Card, Col, Input, Modal, Row, Spin, Table, Tag, Tooltip } from "antd";
3826
import type { SearchProps } from "antd/lib/input";
27+
import type { ColumnType } from "antd/lib/table/interface";
3928
import { AsyncLink } from "components/async_clickables";
4029
import FormattedDate from "components/formatted_date";
4130
import TextWithDescription from "components/text_with_description";
@@ -653,7 +642,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
653642
}
654643

655644
const disabledColor = { color: "var(--ant-color-text-disabled)" };
656-
const columns: TableProps["columns"] = [
645+
const columns: ColumnType<APIAnnotationInfo>[] = [
657646
{
658647
title: "ID",
659648
dataIndex: "id",

frontend/javascripts/theme.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import { useEffect } from "react";
99
import type { APIUser } from "types/api_types";
1010
import type { Theme } from "viewer/store";
1111

12-
const ColorWKBlue = "#5660ff"; // WK ~blue/purple
12+
export const ColorWKBlue = "#5660ff"; // WK ~blue/purple
1313
const ColorWKLinkHover = "#a8b4ff"; // slightly brighter WK Blue
1414
const ColorWKDarkGrey = "#1f1f1f";
15+
export const ColorWKBlueZircon = "#59f8e8"; // WK Cyan
1516
const ColorWhite = "white";
1617
const ColorBlack = "black";
1718
const ColorDarkBg = "#383d48";

frontend/javascripts/viewer/view/left-border-tabs/layer_settings_tab.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
updateDatasetDefaultConfiguration,
2424
} from "admin/rest_api";
2525
import { Button, Col, Divider, Dropdown, type MenuProps, Modal, Row, Switch } from "antd";
26+
import type { SwitchChangeEventHandler } from "antd/es/switch";
2627
import classnames from "classnames";
2728
import FastTooltip from "components/fast_tooltip";
2829
import { HoverIconButton } from "components/hover_icon_button";
@@ -564,10 +565,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
564565
return isOnlyGivenLayerVisible;
565566
};
566567

567-
getEnableDisableLayerSwitch = (
568-
isDisabled: boolean,
569-
onChange: (arg0: boolean, arg1: React.MouseEvent<HTMLButtonElement>) => void,
570-
) => (
568+
getEnableDisableLayerSwitch = (isDisabled: boolean, onChange: SwitchChangeEventHandler) => (
571569
<FastTooltip title={isDisabled ? "Show" : "Hide"} placement="top">
572570
{/* This div is necessary for the tooltip to be displayed */}
573571
<div
@@ -637,7 +635,10 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
637635
this.props.onChangeLayer(layerName, "isDisabled", !isVisible);
638636
};
639637

640-
const onChange = (value: boolean, event: React.MouseEvent<HTMLButtonElement>) => {
638+
const onChange = (
639+
value: boolean,
640+
event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
641+
) => {
641642
if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
642643
setSingleLayerVisibility(value);
643644
return;

frontend/javascripts/viewer/view/novel_user_experiences/welcome_toast.tsx

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
import { App, Button } from "antd";
1+
import { App, Button, ConfigProvider } from "antd";
22
import type { NotificationInstance } from "antd/es/notification/interface";
33
import features from "features";
44
import { useEffectOnlyOnce } from "libs/react_hooks";
55
import { useWkSelector } from "libs/react_hooks";
66
import UserLocalStorage from "libs/user_local_storage";
7+
import { ColorWKBlue, ColorWKBlueZircon, getAntdTheme } from "theme";
8+
9+
const lightThemaWithCyanButton = {
10+
...getAntdTheme("light"),
11+
token: { colorPrimary: ColorWKBlueZircon },
12+
components: { Button: { primaryColor: ColorWKBlue } },
13+
};
714

815
function showWelcomeToast(notification: NotificationInstance) {
916
notification.open({
@@ -20,23 +27,25 @@ function showWelcomeToast(notification: NotificationInstance) {
2027
</p>
2128
<p>Try out the annotation features and upload your own data with a free account.</p>
2229
<div>
23-
<Button type="default" href="/auth/signup" target="_blank" rel="noopener noreferrer">
24-
Create a free account
25-
</Button>
26-
<span className="drawing-welcome-guy">
27-
<Button
28-
ghost
29-
type="default"
30-
href="https://webknossos.org/features"
31-
target="_blank"
32-
rel="noopener noreferrer"
33-
style={{
34-
marginLeft: 12,
35-
}}
36-
>
37-
Learn More
30+
<ConfigProvider theme={lightThemaWithCyanButton}>
31+
<Button type="primary" href="/auth/signup" target="_blank" rel="noopener noreferrer">
32+
Create a free account
3833
</Button>
39-
</span>
34+
<span className="drawing-welcome-guy">
35+
<Button
36+
href="https://webknossos.org/features"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
type="primary"
40+
ghost
41+
style={{
42+
marginLeft: 12,
43+
}}
44+
>
45+
Learn More
46+
</Button>
47+
</span>
48+
</ConfigProvider>
4049
</div>
4150
</div>
4251
),

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@
121121
},
122122
"dependencies": {
123123
"@airbrake/browser": "^2.1.7",
124-
"@ant-design/colors": "^6.0.0",
125-
"@ant-design/icons": "^5.4.0",
124+
"@ant-design/colors": "^7.0.0",
125+
"@ant-design/icons": "^5.5.0",
126126
"@dnd-kit/core": "^6.1.0",
127127
"@dnd-kit/sortable": "^8.0.0",
128128
"@fortawesome/fontawesome-free": "^5.15.4",
@@ -133,7 +133,7 @@
133133
"@tanstack/react-query-persist-client": "4.36.1",
134134
"@zip.js/zip.js": "^2.7.32",
135135
"ansi-to-react": "^6.1.6",
136-
"antd": "5.18",
136+
"antd": "5.22",
137137
"ball-morphology": "^0.1.0",
138138
"base64-js": "^1.2.1",
139139
"beautiful-react-hooks": "^3.11.1",

0 commit comments

Comments
 (0)