@internetarchive/ia-topnav 1.3.1-alpha3 → 1.3.1-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.1-alpha3",
+  "version": "1.3.1-alpha5",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/assets/img/icon-donate-unpadded.js

@@ -0,0 +1,16 @@
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path class="fill-color" d="m32.6,8.12c-1.57,-1.51 -3.46,-2.21 -5.65,-2.11c-1,0.03 -2.14,0.51 -3.42,1.44c-1.28,0.92 -2.28,2.09 -3.03,3.51c-0.71,-1.41 -1.72,-2.59 -3,-3.51c-1.29,-0.93 -2.43,-1.41 -3.41,-1.44c-1.46,-0.07 -2.8,0.23 -4.02,0.88c-1.23,0.65 -2.21,1.6 -2.94,2.83c-0.74,1.24 -1.11,2.63 -1.12,4.17c-0.05,2.56 0.85,5.01 2.68,7.37c1.46,1.88 3.52,4.21 6.19,7.04c2.66,2.81 4.53,4.71 5.62,5.69c1,-0.88 2.85,-2.75 5.55,-5.6s4.81,-5.23 6.31,-7.13c1.81,-2.36 2.71,-4.81 2.66,-7.37c-0.04,-2.35 -0.83,-4.28 -2.4,-5.77z"/>
+  </svg>
+`;

package/src/assets/img/icons.js

@@ -2,6 +2,7 @@ import audio from './icon-audio.js';
 import close from './icon-close.js';
 import hamburger from './icon-hamburger.js';
 import donate from './icon-donate.js';
+import donateUnpadded from './icon-donate-unpadded.js';
 import ellipses from './icon-ellipses.js';
 import iaLogo from './icon-ia-logo.js';
 import images from './icon-images.js';
@@ -19,6 +20,7 @@ export default {
   close,
   hamburger,
   donate,
+  donateUnpadded,
   ellipses,
   iaLogo,
   images,

package/src/primary-nav.js

@@ -144,7 +144,7 @@ class PrimaryNav extends TrackedElement {
   get mobileDonateHeart() {
     return html`
       <a class="mobile-donate-link" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
-        ${icons.donate}
+        ${icons.donateUnpadded}
         <span class="sr-only">"Donate to the archive"</span>
       </a>
     `;

package/src/styles/dropdown-menu.js

@@ -8,7 +8,7 @@ export default css`
   nav {
     position: absolute;
     right: 0;
-    z-index: 3;
+    z-index: 4;
     overflow: hidden;
     font-size: 1.6rem;
     background-color: var(--dropdownMenuBg);

package/src/styles/login-button.js

@@ -68,6 +68,7 @@ export default css`
     .dropdown-toggle svg {
       height: 3rem;
       width: 3rem;
+      display: block;
     }
 
     span {

package/src/styles/primary-nav.js

@@ -14,7 +14,7 @@ export default css`
     height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
-    grid-template-columns: 4rem auto 5rem 4rem 4rem;
+    grid-template-columns: 4rem auto 4rem 4rem 4rem;
     -ms-grid-rows: 100%;
     grid-template-rows: 100%;
     background: var(--primaryNavBg);
@@ -30,7 +30,6 @@ export default css`
   .right-side-section {
     display: flex;
     user-select: none;
-    align-items: center;
   }
   button {
     background: none;
@@ -88,8 +87,8 @@ export default css`
   }
 
   .mobile-donate-link svg {
-    height: 5rem;
-    width: 5rem;
+    height: 4rem;
+    width: 4rem;
   }
   .mobile-donate-link .fill-color {
     fill: rgb(255, 0, 0);
@@ -202,7 +201,7 @@ export default css`
 
     nav {
       display: block;
-      z-index: 3;
+      z-index: 4;
       height: 5rem;
       padding-right: 1.5rem;
     }

package/src/styles/search-menu.js

@@ -15,7 +15,7 @@ export default css`
     position: absolute;
     right: 0;
     left: 0;
-    z-index: 3;
+    z-index: 4;
     padding: 0 4.5rem;
     font-size: 1.6rem;
     background-color: var(--searchMenuBg);