-
- {{template "repo/migrate/helper" .}}
-
diff --git a/tests/e2e/repo-migrate.test.e2e.ts b/tests/e2e/repo-migrate.test.e2e.ts
index b6541179f0..f0be73e777 100644
--- a/tests/e2e/repo-migrate.test.e2e.ts
+++ b/tests/e2e/repo-migrate.test.e2e.ts
@@ -7,6 +7,24 @@ import {test, save_visual, test_context, dynamic_id} from './utils_e2e.ts';
test.use({user: 'user2'});
+test('Migration type seleciton screen', async ({page}) => {
+ await page.goto('/repo/migrate');
+
+ // For branding purposes, it is desired that `gitea-` prefixes in SVGs are
+ // replaced with something like `productlogo-`.
+ await expect(page.locator('svg.gitea-git')).toBeVisible();
+ await expect(page.locator('svg.octicon-mark-github')).toBeVisible();
+ await expect(page.locator('svg.gitea-gitlab')).toBeVisible();
+ await expect(page.locator('svg.gitea-forgejo')).toBeVisible();
+ await expect(page.locator('svg.gitea-gitea')).toBeVisible();
+ await expect(page.locator('svg.gitea-gogs')).toBeVisible();
+ await expect(page.locator('svg.gitea-onedev')).toBeVisible();
+ await expect(page.locator('svg.gitea-gitbucket')).toBeVisible();
+ await expect(page.locator('svg.gitea-codebase')).toBeVisible();
+
+ await save_visual(page);
+});
+
test('Migration Repo Name detection', async ({page}, workerInfo) => {
test.skip(workerInfo.project.name === 'Mobile Safari', 'Flaky actionability checks on Mobile Safari');
diff --git a/web_src/css/base.css b/web_src/css/base.css
index bfe8cd54ae..dcc33c37ff 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -18,6 +18,7 @@
/* other variables */
--border-radius: 4px;
--border-radius-medium: 6px;
+ --border-radius-large: 25px;
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
--opacity-disabled: 0.55;
--height-loading: 16rem;
@@ -1282,10 +1283,6 @@ svg.text.purple,
width: 100%;
}
-.migrate .svg.gitea-git {
- color: var(--color-git);
-}
-
.color-icon {
display: inline-block;
border-radius: var(--border-radius-full);
diff --git a/web_src/css/index.css b/web_src/css/index.css
index eec17eab13..0a5a0180aa 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -75,6 +75,7 @@
@import "./explore.css";
@import "./review.css";
@import "./actions.css";
+@import "./migrate.css";
@tailwind utilities;
@import "./helpers.css";
diff --git a/web_src/css/migrate.css b/web_src/css/migrate.css
new file mode 100644
index 0000000000..d5e909b42d
--- /dev/null
+++ b/web_src/css/migrate.css
@@ -0,0 +1,68 @@
+.migrate .svg.gitea-git {
+ --git-logo-color: #f05133;
+ color: var(--git-logo-color);
+}
+
+.migrate-entries {
+ display: grid;
+ /* Limited to 4 cols by 1280px container */
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+ gap: 1.5rem;
+}
+
+.migrate-entry svg {
+ padding: 1.5rem;
+}
+
+.migrate-entry {
+ display: flex;
+ flex-direction: column;
+ color: var(--color-text);
+ background: var(--color-card);
+ border: 1px solid var(--fancy-card-border);
+ border-radius: var(--border-radius-large);
+ transition: all 0.1s ease-in-out;
+}
+
+.migrate-entry:hover {
+ transform: scale(105%);
+ box-shadow: 0 0.5rem 1rem var(--color-shadow);
+ color: var(--color-text);
+}
+
+.migrate-entry .content {
+ width: 100%;
+ margin-top: .5rem;
+ padding: 1rem;
+ flex: 1;
+}
+
+.migrate-entry .description {
+ margin-top: .5rem;
+ text-wrap: balance;
+}
+
+/* Desktop layout features */
+@media (min-width: 599.98px) {
+ .migrate-entry .content {
+ text-align: center;
+ border-top: 1px solid var(--fancy-card-border);
+ border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
+ background: var(--fancy-card-bg);
+ }
+}
+
+/* Mobile layout features */
+@media (max-width: 600px) {
+ .migrate-entries {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .migrate-entry {
+ flex-direction: row;
+ }
+ .migrate-entry svg {
+ height: 100%;
+ width: 100%;
+ max-width: 128px;
+ }
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index f498a992ed..80fd2be00d 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2764,37 +2764,6 @@ tbody.commit-list {
border-left: 1px solid var(--color-secondary);
}
-.migrate-entries {
- display: grid !important;
- grid-template-columns: repeat(3, 1fr);
- gap: 25px;
- margin: 0 !important;
-}
-
-@media (max-width: 767.98px) {
- .migrate-entries {
- grid-template-columns: repeat(1, 1fr);
- }
-}
-
-.migrate-entry {
- transition: all 0.1s ease-in-out;
- box-shadow: none !important;
- border: 1px solid var(--color-secondary);
- color: var(--color-text) !important;
- width: auto !important;
- margin: 0 !important;
-}
-
-.migrate-entry:hover {
- transform: scale(105%);
- box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
-}
-
-.migrate-entry .description {
- text-wrap: balance;
-}
-
.commits-table .commits-table-right form {
display: flex;
align-items: center;
diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index c9c538502d..b1b80510d4 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -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);
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index a5e4ffe050..277b52165f 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -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);
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 6ad6efe748..7ba428f0b7 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -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;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 830b96febe..8ad89f44a4 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -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;
diff --git a/web_src/svg/gitea-forgejo.svg b/web_src/svg/gitea-forgejo.svg
index e00e5963cf..9daa1ff8f3 100644
--- a/web_src/svg/gitea-forgejo.svg
+++ b/web_src/svg/gitea-forgejo.svg
@@ -1,5 +1,5 @@
-