Improve migrate page and add card CSS (#13751)

- Use original gitea logo on migrate page
- Add card styles and map colors to css vars
- Tweak migrate page, adding hover effect to cards

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

build/generate-svg.js

@@ -14,10 +14,16 @@ function exit(err) {
   process.exit(err ? 1 : 0);
 }
 
-async function processFile(file, {prefix = ''} = {}) {
-  let name = parse(file).name;
-  if (prefix) name = `${prefix}-${name}`;
-  if (prefix === 'octicon') name = name.replace(/-[0-9]+$/, ''); // chop of '-16' on octicons
+async function processFile(file, {prefix, fullName} = {}) {
+  let name;
+
+  if (fullName) {
+    name = fullName;
+  } else {
+    name = parse(file).name;
+    if (prefix) name = `${prefix}-${name}`;
+    if (prefix === 'octicon') name = name.replace(/-[0-9]+$/, ''); // chop of '-16' on octicons
+  }
 
   const svgo = new Svgo({
     plugins: [
@@ -47,18 +53,20 @@ async function processFile(file, {prefix = ''} = {}) {
   await writeFile(resolve(outputDir, `${name}.svg`), data);
 }
 
+function processFiles(pattern, opts) {
+  return glob(pattern).map((file) => processFile(file, opts));
+}
+
 async function main() {
   try {
     await mkdir(outputDir);
   } catch {}
 
-  for (const file of glob('../node_modules/@primer/octicons/build/svg/*-16.svg')) {
-    await processFile(file, {prefix: 'octicon'});
-  }
-
-  for (const file of glob('../web_src/svg/*.svg')) {
-    await processFile(file);
-  }
+  await Promise.all([
+    ...processFiles('../node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
+    ...processFiles('../web_src/svg/*.svg'),
+    ...processFiles('../assets/logo.svg', {fullName: 'gitea-gitea'}),
+  ]);
 }
 
 main().then(exit).catch(exit);