feat: Update menu items & improve whitespace (#2084)

maxmilton · Dec 4, 2023 · acc5a7a · acc5a7a
1 parent 845f1d6
commit acc5a7a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/src/components/Menu.ts b/src/components/Menu.ts
@@ -15,11 +15,11 @@ const meta = compile(`
     </svg>
 
     <div id=d>
-      <a href=chrome://new-tab-page>Open Default Tab</a>
-      <a href=chrome://bookmarks>Bookmarks Manager</a>
+      <a href=chrome://bookmarks>Bookmarks</a>
+      <a href=chrome://password-manager>Passwords</a>
       <a href=chrome://downloads>Downloads</a>
       <a href=chrome://history>History</a>
-      <a href=chrome://password-manager>Passwords</a>
+      <a href=chrome://extensions>Extensions</a>
 
       <hr>
 

diff --git a/src/css/newtab.xcss b/src/css/newtab.xcss
@@ -192,7 +192,7 @@ hr {
 #d {
   position: absolute;
   top: 10px;
-  padding: 18px;
+  padding: 9px 23px; // 9px = half of font-size
   background: var(--c2);
   box-shadow: var(--s);
   opacity: 0;

diff --git a/src/css/themes/neon-dreams.xcss b/src/css/themes/neon-dreams.xcss
@@ -58,8 +58,7 @@ button {
 }
 
 hr {
-  margin-right: -18px;
-  margin-left: -18px;
+  margin: 9px -23px; // 9px = half of font-size
 }
 
 h2,

diff --git a/test/unit/Menu.test.ts b/test/unit/Menu.test.ts
@@ -7,17 +7,17 @@ afterEach(cleanup);
 
 test('rendered DOM contains expected elements', () => {
   const rendered = render(Menu());
-  expect(rendered.container.querySelector('#m')).toBeTruthy();
-  expect(rendered.container.querySelector('svg#im')).toBeTruthy();
-  expect(rendered.container.querySelector('#d')).toBeTruthy();
-  expect(rendered.container.querySelector('a[href="chrome://new-tab-page"]')).toBeTruthy();
-  expect(rendered.container.querySelector('a[href="chrome://bookmarks"]')).toBeTruthy();
-  expect(rendered.container.querySelector('a[href="chrome://downloads"]')).toBeTruthy();
-  expect(rendered.container.querySelector('a[href="chrome://history"]')).toBeTruthy();
-  expect(rendered.container.querySelector('a[href="chrome://password-manager"]')).toBeTruthy();
-  expect(
-    rendered.container.querySelector('a[href="https://github.com/maxmilton/new-tab/issues"]'),
-  ).toBeTruthy();
+  const root = rendered.container.firstChild as HTMLElement;
+  expect(root).toBeInstanceOf(window.HTMLDivElement);
+  expect(root.id).toBe('m');
+  expect(root.querySelector('svg#im')).toBeTruthy();
+  expect(root.querySelector('div#d')).toBeTruthy();
+  expect(root.querySelector('a[href="chrome://bookmarks"]')).toBeTruthy();
+  expect(root.querySelector('a[href="chrome://password-manager"]')).toBeTruthy();
+  expect(root.querySelector('a[href="chrome://downloads"]')).toBeTruthy();
+  expect(root.querySelector('a[href="chrome://history"]')).toBeTruthy();
+  expect(root.querySelector('a[href="chrome://extensions"]')).toBeTruthy();
+  expect(root.querySelector('a[href="https://github.com/maxmilton/new-tab/issues"]')).toBeTruthy();
 });
 
 test('rendered DOM matches snapshot', () => {

diff --git a/test/unit/__snapshots__/Menu.test.ts.snap b/test/unit/__snapshots__/Menu.test.ts.snap
@@ -1,3 +1,3 @@
 // Bun Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rendered DOM matches snapshot 1`] = `"<div id="m"><svg id="im"><path d="M4 6h16M4 12h16M4 18h16"></path></svg><div id="d"><a href="chrome://new-tab-page">Open Default Tab</a><a href="chrome://bookmarks">Bookmarks Manager</a><a href="chrome://downloads">Downloads</a><a href="chrome://history">History</a><a href="chrome://password-manager">Passwords</a><hr><a>New Tab Settings</a><a href="https://github.com/maxmilton/new-tab/issues">Report Bug</a></div></div>"`;
+exports[`rendered DOM matches snapshot 1`] = `"<div id="m"><svg id="im"><path d="M4 6h16M4 12h16M4 18h16"></path></svg><div id="d"><a href="chrome://bookmarks">Bookmarks</a><a href="chrome://password-manager">Passwords</a><a href="chrome://downloads">Downloads</a><a href="chrome://history">History</a><a href="chrome://extensions">Extensions</a><hr><a>New Tab Settings</a><a href="https://github.com/maxmilton/new-tab/issues">Report Bug</a></div></div>"`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,8 +58,7 @@ button { @@
     }
     hr {
-      margin-right: -18px;
-      margin-left: -18px;
+      margin: 9px -23px; // 9px = half of font-size
     }
     h2,
@@ Expand Down @@