Show pixel perfekt icon preview

PKief · Mar 20, 2024 · 81ebc42 · 81ebc42
1 parent 41801f8
commit 81ebc42
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/core/styles.ts b/src/core/styles.ts
@@ -1,13 +1,14 @@
 export const previewStyles = `
     :root { --main-bg-color: #1e1e1e; --dark-theme-bg-color: #1e1e1e; --dark-theme-font-color: #fafafa; --light-theme-bg-color: #f3f3f3; --light-theme-font-color: #424242; }
     body { margin: 0; padding: 0; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background: var(--main-bg-color); font-size: 1rem; }
-    .theme-review { display: grid; grid-template-columns: 200px 200px; grid-template-rows: 1fr; width: 400px; }
+    .theme-review { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; width: 600px; }
     .theme-review ul { list-style: none; padding: 0; margin: 0; }
+    .theme-review ul > li { line-height: 1.5;}
     .theme-container { padding: 1rem; }
     .theme-container > h2 { font-size: 1rem; margin-top: 0; }
     .theme-container.dark { color: var(--dark-theme-font-color); background: var(--dark-theme-bg-color); }
     .theme-container.light { color: var(--light-theme-font-color); background: var(--light-theme-bg-color); }
-    .icon { display: grid; align-items: center; grid-template-columns: 20px auto; }
-    .icon-preview { content: " "; background-size: 16px; background-position: 0; background-repeat: no-repeat; padding-right: 6px; width: 16px; height: 22px; }
-    .icon > span { font-size: 13px; text-overflow: ellipsis; overflow: hidden; }
+    .icon { display: grid; align-items: center; grid-template-columns: 32px auto; gap: 16px; }
+    .icon-preview { content: " "; background-size: 32px; background-position: 0; background-repeat: no-repeat; width: 32px; height: 32px; }
+    .icon > span { font-size: 32px; text-overflow: ellipsis; overflow: hidden; }
 `;
diff --git a/src/core/utils/screenshot.ts b/src/core/utils/screenshot.ts
@@ -13,7 +13,7 @@ export const createScreenshot = async (filePath: string, fileName: string) => {
       headless: 'new',
     });
     const page = await browser.newPage();
-    await page.setViewport({ width: 800, height: 800, deviceScaleFactor: 1.5 });
+    await page.setViewport({ width: 800, height: 800, deviceScaleFactor: 1 });
 
     await page.goto(htmlFilePath);