feat(ui): redesign migration selection screen (#6795)
Some checks are pending
/ release (push) Waiting to run
testing / backend-checks (push) Has been skipped
testing / frontend-checks (push) Has been skipped
testing / test-unit (push) Has been skipped
testing / test-e2e (push) Has been skipped
testing / test-mysql (push) Has been skipped
testing / test-pgsql (push) Has been skipped
testing / test-sqlite (push) Has been skipped
testing / test-remote-cacher (redis) (push) Has been skipped
testing / test-remote-cacher (valkey) (push) Has been skipped
testing / test-remote-cacher (garnet) (push) Has been skipped
testing / test-remote-cacher (redict) (push) Has been skipped
testing / security-check (push) Has been skipped

Ref https://codeberg.org/forgejo/design/issues/9.

Changes:
* Updated SVGs which had inconsistent paddings making them look off
* Better usability on mobile
* Better space efficiency on desktop, up to 4 columns
* Nice responsive design
* Less bland look on desktop. The borders were already here but invisible in Forgejo dark theme

Preview:
* https://codeberg.org/attachments/3c9e10ae-3315-46e5-b8bb-8021f6fd8936
* https://codeberg.org/attachments/8196ad89-5ab6-443a-98ce-a70dcc75bca9
* https://codeberg.org/attachments/24f52a14-2ac4-4949-8108-55c34bd3c650

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6795
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
0ko 2025-04-19 13:51:35 +00:00
parent 78e56ee2f7
commit a0c9e81611
17 changed files with 149 additions and 94 deletions

View file

@ -196,7 +196,6 @@
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: #3fb950;
--color-icon-red: #f85149;
@ -228,6 +227,8 @@
--color-active: var(--steel-650);
--color-menu: var(--steel-700);
--color-card: var(--steel-700);
--fancy-card-bg: var(--steel-650);
--fancy-card-border: var(--steel-600);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--steel-800);
--color-markup-code-inline: var(--steel-850);

View file

@ -212,7 +212,6 @@
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green-light);
--color-icon-red: var(--color-red-light);
@ -244,6 +243,8 @@
--color-active: #d4d4d8aa;
--color-menu: var(--zinc-100);
--color-card: var(--zinc-50);
--fancy-card-bg: var(--zinc-100);
--fancy-card-border: var(--zinc-200);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--zinc-150);
--color-markup-code-inline: var(--zinc-200);

View file

@ -179,7 +179,6 @@
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
@ -209,6 +208,8 @@
--color-active: #e8e8ff24;
--color-menu: #151a1e;
--color-card: #151a1e;
--fancy-card-bg: #14171a;
--fancy-card-border: #3b444a;
--color-markup-table-row: #e8e8ff0f;
--color-markup-code-block: #e8e8ff12;
--color-markup-code-inline: #e8e8ff28;

View file

@ -179,7 +179,6 @@
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
@ -209,6 +208,8 @@
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
--fancy-card-bg: #ffffff;
--fancy-card-border: #d0d7de;
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;