Upgrade Antd to version 5 #7522

hotzenklotz · 2024-01-04T13:29:46Z

This PR updates antd from version 4.24.15 to version 5.13.2. The majority of components and JS just worked out of the box. The CSS however requires more attention.

Changes

Added <App> & <ConfigProvider> components around the whole app to configure a default theme and enable CSS variables
Converted all the LESS variables into (antd) CSS variables
Fixed several small deprecation warnings
Use dynamic dark/light theming switch without having to (re)-load 2 different CSS style files.
Upgraded JSDOM to latest version for ShadowDOM support used by antd. This requires node v18+, so we have to drop support for node v16.

Notes

Migration Guide
Changelogs
Antd v4 LESS variables to v5 names can be found in:
- this list
- this lib
List of Antd v5 "variables" / design tokens
Interactive Theme Editor
The use of CSS-in-JS will create inline CSS-styles with a very high CSS precedence. In order to make antd compatible with regular stylesheets/Less all styles are prefixes with a :where() clause to decrease the precedence again. See https://ant.design/docs/react/compatible-style

Follow Ups

Fix deprecation warnings for <Collapse>. (API changed to items props instead of React children) Fix deprecation warnings for antd <Collapse> components #7610
Replace all static modal calls with useApp to properly style those modals. Using hooks requires to re-write 24 components as functional components
Fix wrong placement of dropdown menus. Blocked by Controlled Dropdown component rendered at wrong position ant-design/ant-design#47152

URL of deployed dev instance (used for testing):

https://antdx.webknossos.xyz/

Steps to test:

Check light + dark mode
Test theme switching
Monkey test other views
Look out for possible styling errors

TODOs:

Restyle status bar with dark colors in light mode
Dark/light theme switch
Restore CSS layouting
Double-check/remove outdated antd overwrites

Issues:

fixes Upgrade antd to v5 #6861

(Please delete unneeded items, merge only when none are left open)

Updated changelog
Updated migration guide if applicable
Updated documentation if applicable
Adapted wk-libs python client if relevant API parts change
Removed dev-only changes like prints and application.conf edits
Considered common edge cases
Needs datastore update after deployment

…d-4.24.15

hotzenklotz · 2024-01-04T13:33:27Z

Reference of all antd CSS variables (scraped from the DOM with default light theme)

:root {
  --ant-blue: #1677ff;
--ant-purple: #722ED1;
--ant-cyan: #13C2C2;
--ant-green: #52C41A;
--ant-magenta: #EB2F96;
--ant-pink: #eb2f96;
--ant-red: #F5222D;
--ant-orange: #FA8C16;
--ant-yellow: #FADB14;
--ant-volcano: #FA541C;
--ant-geekblue: #2F54EB;
--ant-gold: #FAAD14;
--ant-lime: #A0D911;
--ant-color-primary: #1677ff;
--ant-color-success: #52c41a;
--ant-color-warning: #faad14;
--ant-color-error: #ff4d4f;
--ant-color-info: #1677ff;
--ant-color-link: #1677ff;
--ant-color-text-base: #000;
--ant-color-bg-base: #fff;
--ant-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--ant-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--ant-font-size: 14px;
--ant-line-width: 1px;
--ant-line-type: solid;
--ant-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
--ant-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
--ant-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ant-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--ant-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
--ant-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
--ant-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ant-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ant-border-radius: 6px;
--ant-size-popup-arrow: 16px;
--ant-control-height: 32px;
--ant-z-index-base: 0;
--ant-z-index-popup-base: 1000;
--ant-opacity-image: 1px;
--ant-blue-1: #e6f4ff;
--ant-blue-2: #bae0ff;
--ant-blue-3: #91caff;
--ant-blue-4: #69b1ff;
--ant-blue-5: #4096ff;
--ant-blue-6: #1677ff;
--ant-blue-7: #0958d9;
--ant-blue-8: #003eb3;
--ant-blue-9: #002c8c;
--ant-blue-10: #001d66;
--ant-purple-1: #f9f0ff;
--ant-purple-2: #efdbff;
--ant-purple-3: #d3adf7;
--ant-purple-4: #b37feb;
--ant-purple-5: #9254de;
--ant-purple-6: #722ed1;
--ant-purple-7: #531dab;
--ant-purple-8: #391085;
--ant-purple-9: #22075e;
--ant-purple-10: #120338;
--ant-cyan-1: #e6fffb;
--ant-cyan-2: #b5f5ec;
--ant-cyan-3: #87e8de;
--ant-cyan-4: #5cdbd3;
--ant-cyan-5: #36cfc9;
--ant-cyan-6: #13c2c2;
--ant-cyan-7: #08979c;
--ant-cyan-8: #006d75;
--ant-cyan-9: #00474f;
--ant-cyan-10: #002329;
--ant-green-1: #f6ffed;
--ant-green-2: #d9f7be;
--ant-green-3: #b7eb8f;
--ant-green-4: #95de64;
--ant-green-5: #73d13d;
--ant-green-6: #52c41a;
--ant-green-7: #389e0d;
--ant-green-8: #237804;
--ant-green-9: #135200;
--ant-green-10: #092b00;
--ant-magenta-1: #fff0f6;
--ant-magenta-2: #ffd6e7;
--ant-magenta-3: #ffadd2;
--ant-magenta-4: #ff85c0;
--ant-magenta-5: #f759ab;
--ant-magenta-6: #eb2f96;
--ant-magenta-7: #c41d7f;
--ant-magenta-8: #9e1068;
--ant-magenta-9: #780650;
--ant-magenta-10: #520339;
--ant-pink-1: #fff0f6;
--ant-pink-2: #ffd6e7;
--ant-pink-3: #ffadd2;
--ant-pink-4: #ff85c0;
--ant-pink-5: #f759ab;
--ant-pink-6: #eb2f96;
--ant-pink-7: #c41d7f;
--ant-pink-8: #9e1068;
--ant-pink-9: #780650;
--ant-pink-10: #520339;
--ant-red-1: #fff1f0;
--ant-red-2: #ffccc7;
--ant-red-3: #ffa39e;
--ant-red-4: #ff7875;
--ant-red-5: #ff4d4f;
--ant-red-6: #f5222d;
--ant-red-7: #cf1322;
--ant-red-8: #a8071a;
--ant-red-9: #820014;
--ant-red-10: #5c0011;
--ant-orange-1: #fff7e6;
--ant-orange-2: #ffe7ba;
--ant-orange-3: #ffd591;
--ant-orange-4: #ffc069;
--ant-orange-5: #ffa940;
--ant-orange-6: #fa8c16;
--ant-orange-7: #d46b08;
--ant-orange-8: #ad4e00;
--ant-orange-9: #873800;
--ant-orange-10: #612500;
--ant-yellow-1: #feffe6;
--ant-yellow-2: #ffffb8;
--ant-yellow-3: #fffb8f;
--ant-yellow-4: #fff566;
--ant-yellow-5: #ffec3d;
--ant-yellow-6: #fadb14;
--ant-yellow-7: #d4b106;
--ant-yellow-8: #ad8b00;
--ant-yellow-9: #876800;
--ant-yellow-10: #614700;
--ant-volcano-1: #fff2e8;
--ant-volcano-2: #ffd8bf;
--ant-volcano-3: #ffbb96;
--ant-volcano-4: #ff9c6e;
--ant-volcano-5: #ff7a45;
--ant-volcano-6: #fa541c;
--ant-volcano-7: #d4380d;
--ant-volcano-8: #ad2102;
--ant-volcano-9: #871400;
--ant-volcano-10: #610b00;
--ant-geekblue-1: #f0f5ff;
--ant-geekblue-2: #d6e4ff;
--ant-geekblue-3: #adc6ff;
--ant-geekblue-4: #85a5ff;
--ant-geekblue-5: #597ef7;
--ant-geekblue-6: #2f54eb;
--ant-geekblue-7: #1d39c4;
--ant-geekblue-8: #10239e;
--ant-geekblue-9: #061178;
--ant-geekblue-10: #030852;
--ant-gold-1: #fffbe6;
--ant-gold-2: #fff1b8;
--ant-gold-3: #ffe58f;
--ant-gold-4: #ffd666;
--ant-gold-5: #ffc53d;
--ant-gold-6: #faad14;
--ant-gold-7: #d48806;
--ant-gold-8: #ad6800;
--ant-gold-9: #874d00;
--ant-gold-10: #613400;
--ant-lime-1: #fcffe6;
--ant-lime-2: #f4ffb8;
--ant-lime-3: #eaff8f;
--ant-lime-4: #d3f261;
--ant-lime-5: #bae637;
--ant-lime-6: #a0d911;
--ant-lime-7: #7cb305;
--ant-lime-8: #5b8c00;
--ant-lime-9: #3f6600;
--ant-lime-10: #254000;
--ant-color-text: rgba(0, 0, 0, 0.88);
--ant-color-text-secondary: rgba(0, 0, 0, 0.65);
--ant-color-text-tertiary: rgba(0, 0, 0, 0.45);
--ant-color-text-quaternary: rgba(0, 0, 0, 0.25);
--ant-color-fill: rgba(0, 0, 0, 0.15);
--ant-color-fill-secondary: rgba(0, 0, 0, 0.06);
--ant-color-fill-tertiary: rgba(0, 0, 0, 0.04);
--ant-color-fill-quaternary: rgba(0, 0, 0, 0.02);
--ant-color-bg-layout: #f5f5f5;
--ant-color-bg-container: #ffffff;
--ant-color-bg-elevated: #ffffff;
--ant-color-bg-spotlight: rgba(0, 0, 0, 0.85);
--ant-color-bg-blur: transparent;
--ant-color-border: #d9d9d9;
--ant-color-border-secondary: #f0f0f0;
--ant-color-primary-bg: #e6f4ff;
--ant-color-primary-bg-hover: #bae0ff;
--ant-color-primary-border: #91caff;
--ant-color-primary-border-hover: #69b1ff;
--ant-color-primary-hover: #4096ff;
--ant-color-primary-active: #0958d9;
--ant-color-primary-text-hover: #4096ff;
--ant-color-primary-text: #1677ff;
--ant-color-primary-text-active: #0958d9;
--ant-color-success-bg: #f6ffed;
--ant-color-success-bg-hover: #d9f7be;
--ant-color-success-border: #b7eb8f;
--ant-color-success-border-hover: #95de64;
--ant-color-success-hover: #95de64;
--ant-color-success-active: #389e0d;
--ant-color-success-text-hover: #73d13d;
--ant-color-success-text: #52c41a;
--ant-color-success-text-active: #389e0d;
--ant-color-error-bg: #fff2f0;
--ant-color-error-bg-hover: #fff1f0;
--ant-color-error-border: #ffccc7;
--ant-color-error-border-hover: #ffa39e;
--ant-color-error-hover: #ff7875;
--ant-color-error-active: #d9363e;
--ant-color-error-text-hover: #ff7875;
--ant-color-error-text: #ff4d4f;
--ant-color-error-text-active: #d9363e;
--ant-color-warning-bg: #fffbe6;
--ant-color-warning-bg-hover: #fff1b8;
--ant-color-warning-border: #ffe58f;
--ant-color-warning-border-hover: #ffd666;
--ant-color-warning-hover: #ffd666;
--ant-color-warning-active: #d48806;
--ant-color-warning-text-hover: #ffc53d;
--ant-color-warning-text: #faad14;
--ant-color-warning-text-active: #d48806;
--ant-color-info-bg: #e6f4ff;
--ant-color-info-bg-hover: #bae0ff;
--ant-color-info-border: #91caff;
--ant-color-info-border-hover: #69b1ff;
--ant-color-info-hover: #69b1ff;
--ant-color-info-active: #0958d9;
--ant-color-info-text-hover: #4096ff;
--ant-color-info-text: #1677ff;
--ant-color-info-text-active: #0958d9;
--ant-color-link-hover: #69b1ff;
--ant-color-link-active: #0958d9;
--ant-color-bg-mask: rgba(0, 0, 0, 0.45);
--ant-color-white: #fff;
--ant-font-size-sm: 12px;
--ant-font-size-lg: 16px;
--ant-font-size-xl: 20px;
--ant-font-size-heading-1: 38px;
--ant-font-size-heading-2: 30px;
--ant-font-size-heading-3: 24px;
--ant-font-size-heading-4: 20px;
--ant-font-size-heading-5: 16px;
--ant-line-height: 1.5714285714285714;
--ant-line-height-lg: 1.5;
--ant-line-height-sm: 1.6666666666666667;
--ant-font-height: 22px;
--ant-font-height-lg: 24px;
--ant-font-height-sm: 20px;
--ant-line-height-heading-1: 1.2105263157894737;
--ant-line-height-heading-2: 1.2666666666666666;
--ant-line-height-heading-3: 1.3333333333333333;
--ant-line-height-heading-4: 1.4;
--ant-line-height-heading-5: 1.5;
--ant-control-height-sm: 24px;
--ant-control-height-xs: 16px;
--ant-control-height-lg: 40px;
--ant-motion-duration-fast: 0.1s;
--ant-motion-duration-mid: 0.2s;
--ant-motion-duration-slow: 0.3s;
--ant-line-width-bold: 2px;
--ant-border-radius-xs: 2px;
--ant-border-radius-sm: 4px;
--ant-border-radius-lg: 8px;
--ant-border-radius-outer: 4px;
--ant-color-fill-content: rgba(0, 0, 0, 0.06);
--ant-color-fill-content-hover: rgba(0, 0, 0, 0.15);
--ant-color-fill-alter: rgba(0, 0, 0, 0.02);
--ant-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
--ant-color-border-bg: #ffffff;
--ant-color-split: rgba(5, 5, 5, 0.06);
--ant-color-text-placeholder: rgba(0, 0, 0, 0.25);
--ant-color-text-disabled: rgba(0, 0, 0, 0.25);
--ant-color-text-heading: rgba(0, 0, 0, 0.88);
--ant-color-text-label: rgba(0, 0, 0, 0.65);
--ant-color-text-description: rgba(0, 0, 0, 0.45);
--ant-color-text-light-solid: #fff;
--ant-color-highlight: #ff4d4f;
--ant-color-bg-text-hover: rgba(0, 0, 0, 0.06);
--ant-color-bg-text-active: rgba(0, 0, 0, 0.15);
--ant-color-icon: rgba(0, 0, 0, 0.45);
--ant-color-icon-hover: rgba(0, 0, 0, 0.88);
--ant-color-error-outline: rgba(255, 38, 5, 0.06);
--ant-color-warning-outline: rgba(255, 215, 5, 0.1);
--ant-font-size-icon: 12px;
--ant-line-width-focus: 4px;
--ant-control-outline-width: 2px;
--ant-control-interactive-size: 16px;
--ant-control-item-bg-hover: rgba(0, 0, 0, 0.04);
--ant-control-item-bg-active: #e6f4ff;
--ant-control-item-bg-active-hover: #bae0ff;
--ant-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
--ant-control-tmp-outline: rgba(0, 0, 0, 0.02);
--ant-control-outline: rgba(5, 145, 255, 0.1);
--ant-font-weight-strong: 600;
--ant-opacity-loading: 0.65;
--ant-link-decoration: none;
--ant-link-hover-decoration: none;
--ant-link-focus-decoration: none;
--ant-control-padding-horizontal: 12px;
--ant-control-padding-horizontal-sm: 8px;
--ant-padding-xxs: 4px;
--ant-padding-xs: 8px;
--ant-padding-sm: 12px;
--ant-padding: 16px;
--ant-padding-md: 20px;
--ant-padding-lg: 24px;
--ant-padding-xl: 32px;
--ant-padding-content-horizontal-lg: 24px;
--ant-padding-content-vertical-lg: 16px;
--ant-padding-content-horizontal: 16px;
--ant-padding-content-vertical: 12px;
--ant-padding-content-horizontal-sm: 16px;
--ant-padding-content-vertical-sm: 8px;
--ant-margin-xxs: 4px;
--ant-margin-xs: 8px;
--ant-margin-sm: 12px;
--ant-margin: 16px;
--ant-margin-md: 20px;
--ant-margin-lg: 24px;
--ant-margin-xl: 32px;
--ant-margin-xxl: 48px;
--ant-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  0 1px 6px -1px rgba(0, 0, 0, 0.02),
  0 2px 4px 0 rgba(0, 0, 0, 0.02);
--ant-box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
--ant-box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
  0 3px 6px 0 rgba(0, 0, 0, 0.12),
  0 5px 12px 4px rgba(0, 0, 0, 0.09);
--ant-box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08),
  -3px 0 6px -4px rgba(0, 0, 0, 0.12),
  -9px 0 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08),
  3px 0 6px -4px rgba(0, 0, 0, 0.12),
  9px 0 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08),
  0 -3px 6px -4px rgba(0, 0, 0, 0.12),
  0 -9px 28px 8px rgba(0, 0, 0, 0.05);
--ant-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
--ant-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
--ant-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
--ant-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);
-ant-modal-footer-bg: transparent;
--ant-modal-header-bg: #ffffff;
--ant-modal-title-line-height: 1.5;
--ant-modal-title-font-size: 16px;
--ant-modal-content-bg: #ffffff;
--ant-modal-title-color: rgba(0, 0, 0, 0.88);
--ant-modal-close-btn-hover-bg: rgba(0, 0, 0, 0.06);
--ant-modal-close-btn-active-bg: rgba(0, 0, 0, 0.15);
--ant-modal-content-padding: 20px 24px;
--ant-modal-header-padding: 0px;
--ant-modal-header-border-bottom: none;
--ant-modal-header-margin-bottom: 8px;
--ant-modal-body-padding: 0px;
--ant-modal-footer-padding: 0px;
--ant-modal-footer-border-top: none;
--ant-modal-footer-border-radius: 0px;
--ant-modal-footer-margin-top: 12px;
--ant-modal-confirm-body-padding: 0px;
--ant-modal-confirm-icon-margin-inline-end: 12px;
--ant-modal-confirm-btns-margin-top: 12px;
--ant-table-header-bg: #fafafa;
--ant-table-header-color: rgba(0, 0, 0, 0.88);
--ant-table-header-sort-active-bg: #f0f0f0;
--ant-table-header-sort-hover-bg: #f0f0f0;
--ant-table-body-sort-bg: #fafafa;
--ant-table-row-hover-bg: #fafafa;
--ant-table-row-selected-bg: #e6f4ff;
--ant-table-row-selected-hover-bg: #bae0ff;
--ant-table-row-expanded-bg: rgba(0, 0, 0, 0.02);
--ant-table-cell-padding-block: 16px;
--ant-table-cell-padding-inline: 16px;
--ant-table-cell-padding-block-md: 12px;
--ant-table-cell-padding-inline-md: 8px;
--ant-table-cell-padding-block-sm: 8px;
--ant-table-cell-padding-inline-sm: 8px;
--ant-table-border-color: #f0f0f0;
--ant-table-header-border-radius: 8px;
--ant-table-footer-bg: #fafafa;
--ant-table-footer-color: rgba(0, 0, 0, 0.88);
--ant-table-cell-font-size: 14px;
--ant-table-cell-font-size-md: 14px;
--ant-table-cell-font-size-sm: 14px;
--ant-table-header-split-color: #f0f0f0;
--ant-table-fixed-header-sort-active-bg: #f0f0f0;
--ant-table-header-filter-hover-bg: rgba(0, 0, 0, 0.06);
--ant-table-filter-dropdown-menu-bg: #ffffff;
--ant-table-filter-dropdown-bg: #ffffff;
--ant-table-expand-icon-bg: #ffffff;
--ant-table-selection-column-width: 32px;
--ant-table-sticky-scroll-bar-bg: rgba(0, 0, 0, 0.25);
--ant-table-sticky-scroll-bar-border-radius: 100px;
--ant-table-expand-icon-margin-top: 2.5px;
--ant-table-header-icon-color: rgba(0, 0, 0, 0.29);
--ant-table-header-icon-hover-color: rgba(0, 0, 0, 0.57);
--ant-table-expand-icon-half-inner: 7px;
--ant-table-expand-icon-size: 17px;
--ant-table-expand-icon-scale: 0.9411764705882353;
}

frontend/javascripts/admin/auth/finish_reset_password_view.tsx

frontend/javascripts/admin/auth/login_view.tsx

frontend/javascripts/admin/auth/start_reset_password_view.tsx

…ntd-5.x

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

philippotto · 2024-02-01T08:46:40Z

Great stuff! Now, I only found two small issues 🙈

when hovering links in dark mode they become very hard to read. on master, they become brighter instead of darker.
the image in the empty task tab is not centered and looks weird at different window widths
Color pickers disappear.

…d-5.x

philippotto

🎉

hotzenklotz added 11 commits December 15, 2023 15:07

bump antd to version 4.24.15

96be333

Merge branch 'master' into antd-4.24.15

e5a7ed4

add version resolution for lib rc-tree for antd 4.24.15 update

4c5960c

prevent React event handler error

8f34fb3

updated changelog

d6ebf56

Merge branch 'master' of github.com:scalableminds/webknossos into ant…

07ae009

…d-4.24.15

Merge branch 'master' of github.com:scalableminds/webknossos into ant…

a7af32d

…d-4.24.15

codemod autoconvert

9d68487

fix deprecation warnings

e29c7da

add theme provider and enable css variables

2f1a49e

convert less variables to CSS variables

a7651ad

hotzenklotz changed the title ~~Antd 5.x~~ Upgrade Antd to version 5 Jan 4, 2024

hotzenklotz self-assigned this Jan 4, 2024

hotzenklotz added the frontend label Jan 4, 2024

hotzenklotz added 4 commits January 4, 2024 15:13

fix Input.Group deprecations

656f5c1

restore navbar layout

145be44

styling fixes

c51dbd5

fix type errors

a3baf7e

hotzenklotz changed the base branch from master to antd-4.24.15 January 4, 2024 15:08

hotzenklotz added 2 commits January 4, 2024 16:24

additional small fixes

36fd2b9

use antd 5 theme switching

705955b

hotzenklotz force-pushed the antd-5.x branch from df62c8d to 705955b Compare January 5, 2024 13:44

hotzenklotz added 3 commits January 5, 2024 15:51

move theme provider into separate file

6db78fb

wrap login, PW resets, sign up etc in <Card> to adapt to theming

6019837

adjust base color for dark mode

0d62008

hotzenklotz commented Jan 8, 2024

View reviewed changes

frontend/javascripts/admin/auth/finish_reset_password_view.tsx Show resolved Hide resolved

hotzenklotz commented Jan 8, 2024

View reviewed changes

frontend/javascripts/admin/auth/login_view.tsx Show resolved Hide resolved

hotzenklotz commented Jan 8, 2024

View reviewed changes

frontend/javascripts/admin/auth/start_reset_password_view.tsx Show resolved Hide resolved

more CSS fixes

bc14a6d

hotzenklotz added 10 commits January 29, 2024 16:01

color navbar darkish gray

6f24635

fix icon spacing

54b60ce

Merge branch 'antd-5.x' of github.com:scalableminds/webknossos into a…

e35391b

…ntd-5.x

renamed several wrong CSS variables names

5fbdbe0

move color picker icons to parent menu component

9d2ce1f

fix CSS sizing issues

7ae6b69

set default antd blue color to WK blue/purple

baafa17

rephrase paid upgrades

16a9789

fix tree background color and dropdown menu icon

ec16c1a

fix status bar toogle hints

ad2e1ad

philippotto reviewed Feb 1, 2024

View reviewed changes

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx Outdated Show resolved Hide resolved

hotzenklotz added 7 commits February 2, 2024 16:42

PR feedback

acca0ee

rephrase paid upgrades

78cb951

fix save button corner radius

38b7bc5

Merge branch 'master' of github.com:scalableminds/webknossos into ant…

d8dc63d

…d-5.x

fix colorpicker hiding instantly

b37902c

Merge branch 'master' of github.com:scalableminds/webknossos into ant…

bed093c

…d-5.x

remove unused CSS styles

bf8d965

philippotto approved these changes Feb 6, 2024

View reviewed changes

Merge branch 'master' into antd-5.x

b9e9669

hotzenklotz enabled auto-merge (squash) February 7, 2024 08:50

hotzenklotz merged commit 457cbbf into master Feb 7, 2024
2 checks passed

hotzenklotz deleted the antd-5.x branch February 7, 2024 09:09

hotzenklotz mentioned this pull request Feb 7, 2024

Fix deprecation warnings for antd <Collapse> components #7610

Merged

8 tasks

philippotto mentioned this pull request Feb 8, 2024

Fix colors in folder sidebar #7614

Merged

This was referenced Feb 9, 2024

fix search input for publication gallery #7616

Merged

Fix deprecation warning for antd <Card>s #7617

Merged

philippotto mentioned this pull request Feb 13, 2024

Fix nightly screenshot tests #7625

Merged

philippotto mentioned this pull request Mar 8, 2024

Workaround for wrong menu position when clicking on ... next to a segment #7680

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Antd to version 5 #7522

Upgrade Antd to version 5 #7522

hotzenklotz commented Jan 4, 2024 •

edited

Loading

hotzenklotz commented Jan 4, 2024

philippotto commented Feb 1, 2024 •

edited by hotzenklotz

Loading

philippotto left a comment

Upgrade Antd to version 5 #7522

Upgrade Antd to version 5 #7522

Conversation

hotzenklotz commented Jan 4, 2024 • edited Loading

Changes

Notes

Follow Ups

URL of deployed dev instance (used for testing):

Steps to test:

TODOs:

Issues:

hotzenklotz commented Jan 4, 2024

philippotto commented Feb 1, 2024 • edited by hotzenklotz Loading

philippotto left a comment

Choose a reason for hiding this comment

hotzenklotz commented Jan 4, 2024 •

edited

Loading

philippotto commented Feb 1, 2024 •

edited by hotzenklotz

Loading